mirror of
https://github.com/penpot/penpot.git
synced 2025-07-10 13:07:33 +02:00
🐛 Fix errors from editable select on measures menu
This commit is contained in:
parent
fae73a198c
commit
9e47a70adf
2 changed files with 33 additions and 128 deletions
|
@ -1,5 +1,11 @@
|
||||||
# CHANGELOG
|
# 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
|
## 2.4.2
|
||||||
|
|
||||||
### :bug: Bugs fixed
|
### :bug: Bugs fixed
|
||||||
|
|
|
@ -13,9 +13,7 @@
|
||||||
[app.common.types.shape.impl :as shape.impl]
|
[app.common.types.shape.impl :as shape.impl]
|
||||||
[app.common.types.shape.layout :as ctl]
|
[app.common.types.shape.layout :as ctl]
|
||||||
[app.common.types.shape.radius :as ctsr]
|
[app.common.types.shape.radius :as ctsr]
|
||||||
[app.common.types.tokens-lib :as ctob]
|
|
||||||
[app.main.constants :refer [size-presets]]
|
[app.main.constants :refer [size-presets]]
|
||||||
[app.main.data.tokens :as dt]
|
|
||||||
[app.main.data.workspace :as udw]
|
[app.main.data.workspace :as udw]
|
||||||
[app.main.data.workspace.interactions :as dwi]
|
[app.main.data.workspace.interactions :as dwi]
|
||||||
[app.main.data.workspace.shapes :as dwsh]
|
[app.main.data.workspace.shapes :as dwsh]
|
||||||
|
@ -25,13 +23,8 @@
|
||||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
|
[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.hooks :as hooks]
|
||||||
[app.main.ui.icons :as i]
|
[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.dom :as dom]
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[clojure.set :refer [rename-keys union]]
|
[clojure.set :refer [rename-keys union]]
|
||||||
|
@ -92,8 +85,6 @@
|
||||||
(reduce #(union %1 %2) (map #(get type->options %) all-types))
|
(reduce #(union %1 %2) (map #(get type->options %) all-types))
|
||||||
(get type->options type))
|
(get type->options type))
|
||||||
|
|
||||||
design-tokens? (mf/use-ctx muc/design-tokens)
|
|
||||||
|
|
||||||
ids-with-children (or ids-with-children ids)
|
ids-with-children (or ids-with-children ids)
|
||||||
|
|
||||||
old-shapes (if (= type :multiple)
|
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-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
|
||||||
selection-parents (mf/deref selection-parents-ref)
|
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?))
|
flex-child? (->> selection-parents (some ctl/flex-layout?))
|
||||||
absolute? (ctl/item-absolute? shape)
|
absolute? (ctl/item-absolute? shape)
|
||||||
flex-container? (ctl/flex-layout? shape)
|
flex-container? (ctl/flex-layout? shape)
|
||||||
|
@ -247,22 +210,9 @@
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps ids)
|
(mf/deps ids)
|
||||||
(fn [value attr]
|
(fn [value attr]
|
||||||
(let [token-value (wtc/maybe-resolve-token-value value)
|
(binding [shape.impl/*wasm-sync* true]
|
||||||
undo-id (js/Symbol)]
|
(st/emit! (udw/trigger-bounding-box-cloaking ids)
|
||||||
(binding [shape.impl/*wasm-sync* true]
|
(udw/update-dimensions ids attr value)))))
|
||||||
(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)))))))
|
|
||||||
|
|
||||||
on-proportion-lock-change
|
on-proportion-lock-change
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
|
@ -335,27 +285,13 @@
|
||||||
(on-switch-to-radius-4)
|
(on-switch-to-radius-4)
|
||||||
(on-switch-to-radius-1))))
|
(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
|
on-radius-1-change
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps ids change-radius)
|
(mf/deps ids change-radius)
|
||||||
(fn [value]
|
(fn [value]
|
||||||
(let [token-value (wtc/maybe-resolve-token-value value)]
|
(st/emit!
|
||||||
(st/emit!
|
(change-radius (fn [shape]
|
||||||
(change-radius (fn [shape]
|
(ctsr/set-radius-1 shape value))))))
|
||||||
(-> (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)))))))))
|
|
||||||
|
|
||||||
on-radius-multi-change
|
on-radius-multi-change
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
|
@ -464,50 +400,24 @@
|
||||||
:disabled disabled-width-sizing?)
|
:disabled disabled-width-sizing?)
|
||||||
:title (tr "workspace.options.width")}
|
:title (tr "workspace.options.width")}
|
||||||
[:span {:class (stl/css :icon-text)} "W"]
|
[:span {:class (stl/css :icon-text)} "W"]
|
||||||
(if-not design-tokens?
|
[:> numeric-input* {:min 0.01
|
||||||
[:> numeric-input* {:min 0.01
|
:no-validate true
|
||||||
:no-validate true
|
:placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
|
||||||
:placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
|
:on-change on-width-change
|
||||||
:on-change on-width-change
|
:disabled disabled-width-sizing?
|
||||||
:disabled disabled-width-sizing?
|
:class (stl/css :numeric-input)
|
||||||
:class (stl/css :numeric-input)
|
:value (:width values)}]]
|
||||||
: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}}])]
|
|
||||||
[:div {:class (stl/css-case :height true
|
[:div {:class (stl/css-case :height true
|
||||||
:disabled disabled-height-sizing?)
|
:disabled disabled-height-sizing?)
|
||||||
:title (tr "workspace.options.height")}
|
:title (tr "workspace.options.height")}
|
||||||
[:span {:class (stl/css :icon-text)} "H"]
|
[:span {:class (stl/css :icon-text)} "H"]
|
||||||
(if-not design-tokens?
|
[:> numeric-input* {:min 0.01
|
||||||
[:> numeric-input* {:min 0.01
|
:no-validate true
|
||||||
:no-validate true
|
:placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
|
||||||
:placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
|
:on-change on-height-change
|
||||||
:on-change on-height-change
|
:disabled disabled-height-sizing?
|
||||||
:disabled disabled-height-sizing?
|
:class (stl/css :numeric-input)
|
||||||
:class (stl/css :numeric-input)
|
:value (:height values)}]]
|
||||||
: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}}])]
|
|
||||||
[:button {:class (stl/css-case
|
[:button {:class (stl/css-case
|
||||||
:lock-size-btn true
|
:lock-size-btn true
|
||||||
:selected (true? proportion-lock)
|
:selected (true? proportion-lock)
|
||||||
|
@ -564,24 +474,13 @@
|
||||||
[:div {:class (stl/css :radius-1)
|
[:div {:class (stl/css :radius-1)
|
||||||
:title (tr "workspace.options.radius")}
|
:title (tr "workspace.options.radius")}
|
||||||
[:span {:class (stl/css :icon)} i/corner-radius]
|
[:span {:class (stl/css :icon)} i/corner-radius]
|
||||||
(if-not design-tokens?
|
[:> numeric-input*
|
||||||
[:> numeric-input*
|
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
|
||||||
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
|
:ref radius-input-ref
|
||||||
:ref radius-input-ref
|
:min 0
|
||||||
:min 0
|
:on-change on-radius-1-change
|
||||||
:on-change on-radius-1-change
|
:class (stl/css :numeric-input)
|
||||||
:class (stl/css :numeric-input)
|
:value (:rx values)}]]
|
||||||
: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}}])]
|
|
||||||
|
|
||||||
@radius-multi?
|
@radius-multi?
|
||||||
[:div {:class (stl/css :radius-1)
|
[:div {:class (stl/css :radius-1)
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue