johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Merge pull request #7205 from penpot/niwinz-measures-tokens-backup

Browse Source 
♻️ Replace numeric inputs on measure options
This commit is contained in:
Andrey Antukh
2025-09-19 11:44:17 +02:00
committed by GitHub
parent 20dfc2a216 d7d2d36e0a
commit fb7a7d02da
21 changed files with 303 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
common/src/app/common/features.cljc
View File

@@ -51,6 +51,7 @@
"styles/v2"
"layout/grid"
"plugins/runtime"
"tokens/numeric-input"
"design-tokens/v1"
"text-editor/v2"
"render-wasm/v1"
@@ -80,6 +81,7 @@
#{"styles/v2"
"plugins/runtime"
"text-editor/v2"
"tokens/numeric-input"
"render-wasm/v1"})
;; Features that are mainly backend only or there are a proper
@@ -97,6 +99,7 @@
"design-tokens/v1"
"fdata/shape-data-type"
"fdata/path-data"
"tokens/numeric-input"
"variants/v1"}
(into frontend-only-features)
(into backend-only-features)))
@@ -121,6 +124,7 @@
:feature-text-editor-v2 "text-editor/v2"
:feature-render-wasm "render-wasm/v1"
:feature-variants "variants/v1"
:feature-token-input "tokens/numeric-input"
nil))
(defn migrate-legacy-features

22
common/src/app/common/types/token.cljc
View File

@@ -468,3 +468,25 @@
"Predicate if a typography composite token is a reference value - a string pointing to another reference token."
[token-value]
(string? token-value))
(def tokens-by-input
"A map from input name to applicable token for that input."
{:width #{:sizing :dimensions}
:height #{:sizing :dimensions}
:max-width #{:sizing :dimensions}
:max-height #{:sizing :dimensions}
:x #{:spacing :dimensions}
:y #{:spacing :dimensions}
:rotation #{:number :rotation}
:border-radius #{:border-radius :dimensions}
:row-gap #{:spacing :dimensions}
:column-gap #{:spacing :dimensions}
:horizontal-padding #{:spacing :dimensions}
:vertical-padding #{:spacing :dimensions}
:sided-paddings #{:spacing :dimensions}
:horizontal-margin #{:spacing :dimensions}
:vertical-margin #{:spacing :dimensions}
:sided-margins #{:spacing :dimensions}
:line-height #{:line-height :number}
:font-size #{:font-size}
:letter-spacing #{:letter-spacing}})

1
frontend/src/app/main/data/style_dictionary.cljs
View File

@@ -417,7 +417,6 @@
;; FIXME: this with effect with trigger all the time because
;; `config` will be always a different instance
(mf/with-effect [tokens config]
(let [cached (get @cache-atom tokens)]
(cond

11
frontend/src/app/main/data/workspace/tokens/application.cljs
View File

@@ -38,6 +38,7 @@
[potok.v2.core :as ptk]))
(declare token-properties)
(declare update-layout-item-margin)
;; Events to update the value of attributes with applied tokens ---------------------------------------------------------
@@ -520,7 +521,7 @@
Splits out `shape-ids` into seperate default actions:
- Layouts take the `default` update function
- Shapes inside layout will only take margin"
[{:keys [token shapes]}]
[{:keys [token shapes attr]}]
(ptk/reify ::apply-spacing-token
ptk/WatchEvent
(watch [_ state _]
@@ -533,7 +534,7 @@
(group-by #(if (ctsl/any-layout-immediate-child? objects %) :frame-children :other) shapes)]
(rx/of
(apply-token {:attributes attributes
(apply-token {:attributes (or attr attributes)
:token token
:shape-ids (map :id other)
:on-update-shape on-update-shape})
@@ -558,13 +559,12 @@
(update shape :applied-tokens remove-token))))))))
(defn toggle-token
[{:keys [token shapes]}]
[{:keys [token shapes attrs]}]
(ptk/reify ::on-toggle-token
ptk/WatchEvent
(watch [_ _ _]
(let [{:keys [attributes all-attributes on-update-shape]}
(get token-properties (:type token))
unapply-tokens?
(cft/shapes-token-applied? token shapes (or all-attributes attributes))
@@ -578,8 +578,9 @@
(case (:type token)
:spacing
(apply-spacing-token {:token token
:attr attrs
:shapes shapes})
(apply-token {:attributes attributes
(apply-token {:attributes (or attrs attributes)
:token token
:shape-ids shape-ids
:on-update-shape on-update-shape}))))))))

1
frontend/src/app/main/ui/context.cljs
View File

@@ -24,6 +24,7 @@
(def libraries (mf/create-context nil))
(def design-tokens (mf/create-context nil))
(def token-inputs (mf/create-context nil))
(def current-scroll (mf/create-context nil))
(def current-zoom (mf/create-context nil))

10
frontend/src/app/main/ui/ds/controls/numeric_input.cljs
View File

@@ -158,16 +158,17 @@
[:class {:optional true} :string]
[:value {:optional true} [:maybe [:or
:int
:float
:string
[:= :multiple]]]]
[:default {:optional true} [:maybe :string]]
[:placeholder {:optional true} :string]
[:icon {:optional true} [:maybe schema:icon]]
[:disabled {:optional true} [:maybe :boolean]]
[:min {:optional true} [:maybe :int]]
[:max {:optional true} [:maybe :int]]
[:min {:optional true} [:maybe [:or :int :float]]]
[:max {:optional true} [:maybe [:or :int :float]]]
[:max-length {:optional true} :int]
[:step {:optional true} [:maybe :int]]
[:step {:optional true} [:maybe [:or :int :float]]]
[:is-selected-on-focus {:optional true} :boolean]
[:nillable {:optional true} :boolean]
[:applied-token {:optional true} [:maybe [:or :string [:= :multiple]]]]
@@ -177,7 +178,7 @@
[:on-focus {:optional true} fn?]
[:on-detach {:optional true} fn?]
[:property {:optional true} :string]
[:align {:optional true} [:enum :left :right]]])
[:align {:optional true} [:maybe [:enum :left :right]]]])
(mf/defc numeric-input*
{::mf/schema schema:numeric-input}
@@ -195,7 +196,6 @@
tokens (if (object? tokens)
(mfu/bean tokens)
tokens)
value (if (= :multiple applied-token)
:multiple
value)

1
frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss
View File

@@ -17,6 +17,7 @@
position: absolute;
top: $sz-36;
width: var(--dropdown-width, 100%);
transform: translateX(var(--dropdown-translate-distance, 0));
background-color: var(--options-dropdown-bg-color);
border-radius: $br-8;
border: $b-1 solid var(--options-dropdown-border-color);

2
frontend/src/app/main/ui/ds/controls/utilities/token_field.scss
View File

@@ -25,7 +25,7 @@
inline-size: 100%;
background: var(--token-field-bg-color);
border-radius: $br-8;
padding: var(--sp-s);
padding: var(--sp-xs) var(--sp-s);
outline: $b-1 solid var(--token-field-outline-color);
&:hover {

1
frontend/src/app/main/ui/workspace/sidebar.cljs
View File

@@ -303,7 +303,6 @@
[:> (mf/provider muc/sidebar) {:value :right}
[:> (mf/provider muc/active-tokens-by-type) {:value active-tokens-by-type}
[:aside
{:class (stl/css-case :right-settings-bar true
:not-expand (not can-be-expanded?)

13
frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
View File

@@ -5,7 +5,7 @@
[app.common.types.shape.radius :as ctsr]
[app.main.data.workspace.shapes :as dwsh]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.numeric-input :as deprecated-input]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.hooks :as hooks]
@@ -68,6 +68,7 @@
(change-radius (fn [shape]
(ctsr/set-radius-to-all-corners shape value))))))
on-radius-4-change
(mf/use-fn
(mf/deps ids change-radius)
@@ -98,7 +99,7 @@
[:> icon* {:icon-id i/corner-radius
:size "s"
:class (stl/css :icon)}]
[:> numeric-input*
[:> deprecated-input/numeric-input*
{:placeholder (cond
(not all-equal?)
"Mixed"
@@ -113,7 +114,7 @@
[:div {:class (stl/css :radius-4)}
[:div {:class (stl/css :small-input)}
[:> numeric-input*
[:> deprecated-input/numeric-input*
{:placeholder "--"
:title (tr "workspace.options.radius-top-left")
:min 0
@@ -121,7 +122,7 @@
:value (:r1 values)}]]
[:div {:class (stl/css :small-input)}
[:> numeric-input*
[:> deprecated-input/numeric-input*
{:placeholder "--"
:title (tr "workspace.options.radius-top-right")
:min 0
@@ -129,7 +130,7 @@
:value (:r2 values)}]]
[:div {:class (stl/css :small-input)}
[:> numeric-input*
[:> deprecated-input/numeric-input*
{:placeholder "--"
:title (tr "workspace.options.radius-bottom-left")
:min 0
@@ -137,7 +138,7 @@
:value (:r4 values)}]]
[:div {:class (stl/css :small-input)}
[:> numeric-input*
[:> deprecated-input/numeric-input*
{:placeholder "--"
:title (tr "workspace.options.radius-bottom-right")
:min 0

286
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View File

@@ -14,18 +14,23 @@
[app.common.logic.shapes :as cls]
[app.common.types.shape :as cts]
[app.common.types.shape.layout :as ctl]
[app.common.types.token :as tk]
[app.main.constants :refer [size-presets]]
[app.main.data.workspace :as udw]
[app.main.data.workspace.interactions :as dwi]
[app.main.data.workspace.shapes :as dwsh]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.transforms :as dwt]
[app.main.data.workspace.undo :as dwu]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.numeric-input :as deprecated-input]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.context :as muc]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.sidebar.options.menus.border-radius :refer [border-radius-menu*]]
@@ -87,13 +92,41 @@
shape)]
(select-keys shape measure-attrs)))
(mf/defc numeric-input-wrapper*
{::mf/private true}
[{:keys [values name applied-tokens align on-detach] :rest props}]
(let [tokens (mf/use-ctx muc/active-tokens-by-type)
tokens (mf/with-memo [tokens name]
(delay
(-> (deref tokens)
(select-keys (get tk/tokens-by-input name))
(not-empty))))
on-detach-attr
(mf/use-fn
(mf/deps on-detach name)
#(on-detach % name))
props (mf/spread-props props
{:placeholder (if (or (= :multiple (:applied-tokens values))
(= :multiple (get values name)))
(tr "settings.multiple") "--")
:class (stl/css :numeric-input-measures)
:applied-token (get applied-tokens name)
:tokens tokens
:align align
:on-detach on-detach-attr
:value (get values name)})]
[:> numeric-input* props]))
(def ^:private xf:map-type (map :type))
(def ^:private xf:mapcat-type-to-options (mapcat type->options))
(mf/defc measures-menu*
{::mf/memo true}
[{:keys [ids values type shapes]}]
(let [all-types
[{:keys [ids values applied-tokens type shapes]}]
(let [token-numeric-inputs
(features/use-feature "tokens/numeric-input")
all-types
(mf/with-memo [type shapes]
;; We only need this when multiple type is used
(when (= type :multiple)
@@ -258,8 +291,7 @@
(st/emit! (udw/change-orientation ids (keyword orientation)))))
;; SIZE AND PROPORTION LOCK
on-size-change
do-size-change
(mf/use-fn
(mf/deps ids)
(fn [value attr]
@@ -267,6 +299,24 @@
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(udw/update-dimensions ids attr value)))))
on-size-change
(mf/use-fn
(mf/deps ids)
(fn [value attr]
(if (or (string? value) (int? value))
(do
(st/emit! (udw/trigger-bounding-box-cloaking ids))
(binding [cts/*wasm-sync* true]
(run! #(do-size-change value attr) shapes)))
(do
(let [resolved-value (:resolved-value (first value))]
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(dwta/toggle-token {:token (first value)
:attrs #{attr}
:shapes shapes}))
(binding [cts/*wasm-sync* true]
(run! #(do-size-change resolved-value attr) shapes)))))))
on-proportion-lock-change
(mf/use-fn
(mf/deps ids proportion-lock)
@@ -284,19 +334,44 @@
(mf/use-fn
(mf/deps ids)
(fn [value attr]
(st/emit! (udw/trigger-bounding-box-cloaking ids))
(binding [cts/*wasm-sync* true]
(run! #(do-position-change %1 value attr) shapes))))
(if (or (string? value) (int? value))
(do
(st/emit! (udw/trigger-bounding-box-cloaking ids))
(binding [cts/*wasm-sync* true]
(run! #(do-position-change %1 value attr) shapes)))
(do
(let [resolved-value (:resolved-value (first value))]
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(dwta/toggle-token {:token (first value)
:attrs #{attr}
:shapes shapes}))
(binding [cts/*wasm-sync* true]
(run! #(do-position-change %1 resolved-value attr) shapes)))))))
;; ROTATION
do-rotation-change
(mf/use-fn
(mf/deps ids)
(fn [value]
(st/emit! (udw/increase-rotation ids value))))
on-rotation-change
(mf/use-fn
(mf/deps ids)
(fn [value]
(binding [cts/*wasm-sync* true]
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(udw/increase-rotation ids value)))))
(if (or (string? value) (int? value))
(do
(st/emit! (udw/trigger-bounding-box-cloaking ids))
(binding [cts/*wasm-sync* true]
(run! #(do-rotation-change value) shapes)))
(do
(let [resolved-value (:resolved-value (first value))]
(st/emit! (udw/trigger-bounding-box-cloaking ids)
(dwta/toggle-token {:token (first value)
:attrs #{:rotation}
:shapes shapes}))
(binding [cts/*wasm-sync* true]
(run! #(do-rotation-change resolved-value) shapes)))))))
on-width-change
(mf/use-fn (mf/deps on-size-change) #(on-size-change % :width))
@@ -310,6 +385,16 @@
on-pos-y-change
(mf/use-fn (mf/deps on-position-change) #(on-position-change % :y))
;; DETACH
on-detach-token
(mf/use-fn
(mf/deps ids)
(fn [token attr]
(st/emit! (dwta/unapply-token {:token (first token)
:attributes #{attr}
:shape-ids ids}))))
;; CLIP CONTENT AND SHOW IN VIEWER
on-change-clip-content
(mf/use-fn
@@ -392,28 +477,55 @@
(when (options :size)
[:div {:class (stl/css :size)}
[:div {:class (stl/css-case :width true
:disabled disabled-width-sizing?)
:title (tr "workspace.options.width")}
[:span {:class (stl/css :icon-text)} "W"]
[:> 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"]
[:> 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)}]]
(if token-numeric-inputs
[:*
[:> numeric-input-wrapper*
{:disabled disabled-width-sizing?
:on-change on-width-change
:on-detach on-detach-token
:icon i/character-w
:min 0.01
:name :width
:property (tr "workspace.options.width")
:applied-tokens applied-tokens
:values values}]
[:> numeric-input-wrapper*
{:disabled disabled-height-sizing?
:on-change on-height-change
:on-detach on-detach-token
:min 0.01
:icon i/character-h
:name :height
:align :right
:property (tr "workspace.options.height")
:applied-tokens applied-tokens
:values values}]]
[:*
[:div {:class (stl/css-case :width true
:disabled disabled-width-sizing?)
:title (tr "workspace.options.width")}
[:span {:class (stl/css :icon-text)} "W"]
[:> deprecated-input/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"]
[:> deprecated-input/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)}]]])
[:> icon-button* {:variant "ghost"
:icon (if proportion-lock "lock" "unlock")
@@ -421,49 +533,87 @@
:disabled (= proportion-lock :multiple)
:aria-label (if proportion-lock (tr "workspace.options.size.unlock") (tr "workspace.options.size.lock"))
:on-click on-proportion-lock-change}]])
(when (options :position)
[:div {:class (stl/css :position)}
[:div {:class (stl/css-case :x-position true
:disabled disabled-position?)
:title (tr "workspace.options.x")}
[:span {:class (stl/css :icon-text)} "X"]
[:> numeric-input* {:no-validate true
:placeholder (if (= :multiple (:x values)) (tr "settings.multiple") "--")
:on-change on-pos-x-change
:disabled disabled-position?
:class (stl/css :numeric-input)
:value (:x values)}]]
(if token-numeric-inputs
[:*
[:> numeric-input-wrapper*
{:disabled disabled-position?
:on-change on-pos-x-change
:on-detach on-detach-token
:icon i/character-x
:name :x
:property (tr "workspace.options.x")
:applied-tokens applied-tokens
:values values}]
[:> numeric-input-wrapper*
{:disabled disabled-position?
:on-change on-pos-y-change
:on-detach on-detach-token
:icon i/character-y
:name :y
:align :right
:property (tr "workspace.options.y")
:applied-tokens applied-tokens
:values values}]]
[:div {:class (stl/css-case :y-position true
:disabled disabled-position?)
:title (tr "workspace.options.y")}
[:span {:class (stl/css :icon-text)} "Y"]
[:> numeric-input* {:no-validate true
:placeholder (if (= :multiple (:y values)) (tr "settings.multiple") "--")
:disabled disabled-position?
:on-change on-pos-y-change
:class (stl/css :numeric-input)
:value (:y values)}]]])
(when (or (options :rotation)
(options :radius))
[:*
[:div {:class (stl/css-case :x-position true
:disabled disabled-position?)
:title (tr "workspace.options.x")}
[:span {:class (stl/css :icon-text)} "X"]
[:> deprecated-input/numeric-input* {:no-validate true
:placeholder (if (= :multiple (:x values)) (tr "settings.multiple") "--")
:on-change on-pos-x-change
:disabled disabled-position?
:class (stl/css :numeric-input)
:value (:x values)}]]
[:div {:class (stl/css-case :y-position true
:disabled disabled-position?)
:title (tr "workspace.options.y")}
[:span {:class (stl/css :icon-text)} "Y"]
[:> deprecated-input/numeric-input* {:no-validate true
:placeholder (if (= :multiple (:y values)) (tr "settings.multiple") "--")
:disabled disabled-position?
:on-change on-pos-y-change
:class (stl/css :numeric-input)
:value (:y values)}]]])])
(when (or (options :rotation) (options :radius))
[:div {:class (stl/css :rotation-radius)}
(when (options :rotation)
[:div {:class (stl/css :rotation)
:title (tr "workspace.options.rotation")}
[:span {:class (stl/css :icon)} deprecated-icon/rotation]
[:> numeric-input*
{:no-validate true
:min -359
:max 359
:data-wrap true
:placeholder (if (= :multiple (:rotation values)) (tr "settings.multiple") "--")
:on-change on-rotation-change
:class (stl/css :numeric-input)
:value (:rotation values)}]])
(if token-numeric-inputs
[:> numeric-input-wrapper*
{:on-change on-rotation-change
:on-detach on-detach-token
:icon i/rotation
:min -359
:max 359
:name :rotation
:property (tr "workspace.options.rotation")
:applied-tokens applied-tokens
:values values}]
[:div {:class (stl/css :rotation)
:title (tr "workspace.options.rotation")}
[:span {:class (stl/css :icon)} deprecated-icon/rotation]
[:> deprecated-input/numeric-input*
{:no-validate true
:min -359
:max 359
:data-wrap true
:placeholder (if (= :multiple (:rotation values)) (tr "settings.multiple") "--")
:on-change on-rotation-change
:class (stl/css :numeric-input)
:value (:rotation values)}]]))
(when (options :radius)
[:> border-radius-menu* {:class (stl/css :border-radius)
:ids ids
:values values
:applied-tokens applied-tokens
:shapes shapes
:shape shape}])])
(when (or (options :clip-content) (options :show-in-viewer))
[:div {:class (stl/css :clip-show)}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View File

@@ -187,3 +187,7 @@
.checkbox-button {
@extend .button-icon;
}
.numeric-input-measures {
--dropdown-width: 247px;
}

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
View File

@@ -29,6 +29,9 @@
ids (mf/with-memo [id] [id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
measure-values
(select-keys shape measure-attrs)
@@ -84,6 +87,7 @@
:values layer-values}]
[:> measures-menu* {:ids ids
:applied-tokens applied-tokens
:type type
:values measure-values
:shapes shapes}]

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
View File

@@ -30,6 +30,9 @@
ids (mf/with-memo [id] [id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
measure-values
(select-keys shape measure-attrs)
@@ -84,6 +87,7 @@
:values layer-values}]
[:> measures-menu* {:ids ids
:applied-tokens applied-tokens
:type type
:values measure-values
:shapes shapes}]

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View File

@@ -33,6 +33,9 @@
ids (mf/with-memo [shape-id] [shape-id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
stroke-values
(select-keys shape stroke-attrs)
@@ -99,6 +102,7 @@
:type shape-type
:values layer-values}]
[:> measures-menu* {:ids ids
:applied-tokens applied-tokens
:values measure-values
:type shape-type
:shapes shapes}]

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View File

@@ -37,6 +37,9 @@
ids (mf/with-memo [id] [id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
objects
(mf/with-memo [shapes-with-children]
(d/index-by :id shapes-with-children))
@@ -111,6 +114,7 @@
:values layer-values}]
[:> measures-menu* {:type type
:ids measure-ids
:applied-tokens applied-tokens
:values measure-values
:shapes shapes}]

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View File

@@ -420,7 +420,7 @@
;; also don't use the memoized version of get-attrs because it
;; makes no sense because the shapes object are changed on
;; each rerender.
[measure-ids measure-values]
[measure-ids measure-values measure-tokens]
(get-attrs* shapes objects :measure)]
[:div {:class (stl/css :options)}
@@ -434,6 +434,7 @@
{:type type
:ids measure-ids
:values measure-values
:applied-tokens measure-tokens
:shapes shapes}])
(when (some? components)

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
View File

@@ -30,6 +30,9 @@
ids (mf/with-memo [id] [id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
measure-values
(select-keys shape measure-attrs)
@@ -85,6 +88,7 @@
:values layer-values}]
[:> measures-menu* {:ids ids
:type type
:applied-tokens applied-tokens
:values measure-values
:shapes shapes}]

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
View File

@@ -30,6 +30,9 @@
ids (mf/with-memo [id] [id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
measure-values
(select-keys shape measure-attrs)
@@ -86,6 +89,7 @@
[:> measures-menu* {:ids ids
:type type
:values measure-values
:applied-tokens applied-tokens
:shapes shapes}]
[:& layout-container-menu

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View File

@@ -95,6 +95,9 @@
ids (mf/with-memo [id] [id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
{:keys [tag] :as content}
(get shape :content)
@@ -153,6 +156,7 @@
[:*
[:> measures-menu* {:ids ids
:type type
:applied-tokens applied-tokens
:values measure-values
:shapes shapes}]

4
frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
View File

@@ -35,6 +35,9 @@
ids (mf/with-memo [id] [id])
shapes (mf/with-memo [shape] [shape])
applied-tokens
(get shape :applied-tokens)
measure-values
(select-keys shape measure-attrs)
@@ -132,6 +135,7 @@
[:> measures-menu*
{:ids ids
:type type
:applied-tokens applied-tokens
:values measure-values
:shapes shapes}]