From 9e47a70adfb80ddcb015c23588f6f4e88341443d Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 22 Jan 2025 18:20:49 +0100
Subject: [PATCH] :bug: Fix errors from editable select on measures menu
---
CHANGES.md | 6 +
.../sidebar/options/menus/measures.cljs | 155 +++---------------
2 files changed, 33 insertions(+), 128 deletions(-)
diff --git a/CHANGES.md b/CHANGES.md
index ef56d959d..aa5abc73f 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,11 @@
# CHANGELOG
+## 2.4.3 (Unreleased)
+
+### :bug: Bugs fixed
+
+- Fix errors from editable select on measures menu [Taiga #9888](https://tree.taiga.io/project/penpot/issue/9888)
+
## 2.4.2
### :bug: Bugs fixed
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index fb9dc299b..ea15bc8c8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -13,9 +13,7 @@
[app.common.types.shape.impl :as shape.impl]
[app.common.types.shape.layout :as ctl]
[app.common.types.shape.radius :as ctsr]
- [app.common.types.tokens-lib :as ctob]
[app.main.constants :refer [size-presets]]
- [app.main.data.tokens :as dt]
[app.main.data.workspace :as udw]
[app.main.data.workspace.interactions :as dwi]
[app.main.data.workspace.shapes :as dwsh]
@@ -25,13 +23,8 @@
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
- [app.main.ui.context :as muc]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
- [app.main.ui.workspace.tokens.core :as wtc]
- [app.main.ui.workspace.tokens.editable-select :refer [editable-select]]
- [app.main.ui.workspace.tokens.style-dictionary :as sd]
- [app.main.ui.workspace.tokens.token-types :as wtty]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[clojure.set :refer [rename-keys union]]
@@ -92,8 +85,6 @@
(reduce #(union %1 %2) (map #(get type->options %) all-types))
(get type->options type))
- design-tokens? (mf/use-ctx muc/design-tokens)
-
ids-with-children (or ids-with-children ids)
old-shapes (if (= type :multiple)
@@ -106,34 +97,6 @@
selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref)
- tokens (sd/use-active-theme-sets-tokens)
- tokens-by-type (mf/use-memo
- (mf/deps tokens)
- #(ctob/group-by-type tokens))
-
- border-radius-tokens (:border-radius tokens-by-type)
- border-radius-options (mf/use-memo
- (mf/deps shape border-radius-tokens)
- #(wtc/tokens->select-options
- {:shape shape
- :tokens border-radius-tokens
- :attributes (wtty/token-attributes :border-radius)}))
- sizing-tokens (:sizing tokens-by-type)
- width-options (mf/use-memo
- (mf/deps shape sizing-tokens)
- #(wtc/tokens->select-options
- {:shape shape
- :tokens sizing-tokens
- :attributes (wtty/token-attributes :sizing)
- :selected-attributes #{:width}}))
- height-options (mf/use-memo
- (mf/deps shape sizing-tokens)
- #(wtc/tokens->select-options
- {:shape shape
- :tokens sizing-tokens
- :attributes (wtty/token-attributes :sizing)
- :selected-attributes #{:height}}))
-
flex-child? (->> selection-parents (some ctl/flex-layout?))
absolute? (ctl/item-absolute? shape)
flex-container? (ctl/flex-layout? shape)
@@ -247,22 +210,9 @@
(mf/use-fn
(mf/deps ids)
(fn [value attr]
- (let [token-value (wtc/maybe-resolve-token-value value)
- undo-id (js/Symbol)]
- (binding [shape.impl/*wasm-sync* true]
- (if-not design-tokens?
- (st/emit! (udw/trigger-bounding-box-cloaking ids)
- (udw/update-dimensions ids attr (or token-value value)))
- (st/emit! (udw/trigger-bounding-box-cloaking ids)
- (dwu/start-undo-transaction undo-id)
- (dwsh/update-shapes ids
- (if token-value
- #(assoc-in % [:applied-tokens attr] (:id value))
- #(d/dissoc-in % [:applied-tokens attr]))
- {:reg-objects? true
- :attrs [:applied-tokens]})
- (udw/update-dimensions ids attr (or token-value value))
- (dwu/commit-undo-transaction undo-id)))))))
+ (binding [shape.impl/*wasm-sync* true]
+ (st/emit! (udw/trigger-bounding-box-cloaking ids)
+ (udw/update-dimensions ids attr value)))))
on-proportion-lock-change
(mf/use-fn
@@ -335,27 +285,13 @@
(on-switch-to-radius-4)
(on-switch-to-radius-1))))
- on-border-radius-token-unapply
- (mf/use-fn
- (mf/deps ids change-radius)
- (fn [token]
- (let [token-value (wtc/maybe-resolve-token-value token)]
- (st/emit!
- (change-radius (fn [shape]
- (-> (dt/unapply-token-id shape (wtty/token-attributes :border-radius))
- (ctsr/set-radius-1 token-value))))))))
-
on-radius-1-change
(mf/use-fn
(mf/deps ids change-radius)
(fn [value]
- (let [token-value (wtc/maybe-resolve-token-value value)]
- (st/emit!
- (change-radius (fn [shape]
- (-> (dt/maybe-apply-token-to-shape {:token (when token-value value)
- :shape shape
- :attributes (wtty/token-attributes :border-radius)})
- (ctsr/set-radius-1 (or token-value value)))))))))
+ (st/emit!
+ (change-radius (fn [shape]
+ (ctsr/set-radius-1 shape value))))))
on-radius-multi-change
(mf/use-fn
@@ -464,50 +400,24 @@
:disabled disabled-width-sizing?)
:title (tr "workspace.options.width")}
[:span {:class (stl/css :icon-text)} "W"]
- (if-not design-tokens?
- [:> numeric-input* {:min 0.01
- :no-validate true
- :placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
- :on-change on-width-change
- :disabled disabled-width-sizing?
- :class (stl/css :numeric-input)
- :value (:width values)}]
- [:& editable-select
- {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
- :class (stl/css :token-select)
- :disabled disabled-width-sizing?
- :on-change on-width-change
- :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %))
- :options width-options
- :position :left
- :value (:width values)
- :input-props {:type "number"
- :no-validate true
- :min 0.01}}])]
+ [:> numeric-input* {:min 0.01
+ :no-validate true
+ :placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
+ :on-change on-width-change
+ :disabled disabled-width-sizing?
+ :class (stl/css :numeric-input)
+ :value (:width values)}]]
[:div {:class (stl/css-case :height true
:disabled disabled-height-sizing?)
:title (tr "workspace.options.height")}
[:span {:class (stl/css :icon-text)} "H"]
- (if-not design-tokens?
- [:> numeric-input* {:min 0.01
- :no-validate true
- :placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
- :on-change on-height-change
- :disabled disabled-height-sizing?
- :class (stl/css :numeric-input)
- :value (:height values)}]
- [:& editable-select
- {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
- :class (stl/css :token-select)
- :disabled disabled-height-sizing?
- :on-change on-height-change
- :on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %))
- :options height-options
- :position :right
- :value (:height values)
- :input-props {:type "number"
- :no-validate true
- :min 0.01}}])]
+ [:> numeric-input* {:min 0.01
+ :no-validate true
+ :placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
+ :on-change on-height-change
+ :disabled disabled-height-sizing?
+ :class (stl/css :numeric-input)
+ :value (:height values)}]]
[:button {:class (stl/css-case
:lock-size-btn true
:selected (true? proportion-lock)
@@ -564,24 +474,13 @@
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
[:span {:class (stl/css :icon)} i/corner-radius]
- (if-not design-tokens?
- [:> numeric-input*
- {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
- :ref radius-input-ref
- :min 0
- :on-change on-radius-1-change
- :class (stl/css :numeric-input)
- :value (:rx values)}]
- [:& editable-select
- {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
- :class (stl/css :token-select)
- :on-change on-radius-1-change
- :on-token-remove on-border-radius-token-unapply
- :options border-radius-options
- :position :right
- :value (:rx values)
- :input-props {:type "number"
- :min 0}}])]
+ [:> numeric-input*
+ {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
+ :ref radius-input-ref
+ :min 0
+ :on-change on-radius-1-change
+ :class (stl/css :numeric-input)
+ :value (:rx values)}]]
@radius-multi?
[:div {:class (stl/css :radius-1)