From bdc9b092c57ab7d20630b0740cf6b49719b6bc50 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 17 Jun 2026 14:39:03 +0200 Subject: [PATCH] :zap: Add proper props checking to several workspace sidebar components (#10159) * :zap: Add memo to sidebar components * :zap: Add memo to layout-container component * :zap: Add memo to layout-item component * :zap: Add memo to constraits component * :zap: Add memo to stroke-menu component * :zap: Add memo to shadows-menu component * :zap: Add memo to blur-menu component * :zap: Add memo to frame-grid-menu component * :zap: Add memo to grid-cell/options component * :zap: Add memo to svg-attrs component * :zap: Add check props to text-menu component * :bug: Fix CI --- .../main/ui/workspace/sidebar/options.cljs | 5 +- .../workspace/sidebar/options/menus/blur.cljs | 32 +++---- .../sidebar/options/menus/constraints.cljs | 26 ++++++ .../sidebar/options/menus/frame_grid.cljs | 26 ++++-- .../sidebar/options/menus/grid_cell.cljs | 48 ++++++---- .../options/menus/layout_container.cljs | 35 ++++++- .../sidebar/options/menus/layout_item.cljs | 93 ++++++++++++++----- .../sidebar/options/menus/measures.cljs | 40 ++++++++ .../sidebar/options/menus/shadow.cljs | 10 ++ .../sidebar/options/menus/stroke.cljs | 71 +++++++------- .../sidebar/options/menus/svg_attrs.cljs | 10 ++ .../workspace/sidebar/options/menus/text.cljs | 59 +++++++++--- .../sidebar/options/shapes/bool.cljs | 19 ++-- .../sidebar/options/shapes/circle.cljs | 29 +++--- .../sidebar/options/shapes/frame.cljs | 32 ++++--- .../sidebar/options/shapes/group.cljs | 29 +++--- .../sidebar/options/shapes/multiple.cljs | 24 +++-- .../sidebar/options/shapes/path.cljs | 29 +++--- .../sidebar/options/shapes/rect.cljs | 19 ++-- .../sidebar/options/shapes/svg_raw.cljs | 19 ++-- .../sidebar/options/shapes/text.cljs | 27 ++++-- 21 files changed, 458 insertions(+), 224 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index e2f05a8665..5b4619710e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -157,8 +157,9 @@ (cond (and edit-grid? (d/not-empty? selected-cells)) - [:& grid-cell/options - {:shape (get objects edition) + [:> grid-cell/options* + {:shape-id (-> (get objects edition) + :id) :cells selected-cells}] edit-grid? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index 334061eb2e..80ee55805a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -192,32 +192,26 @@ (conj {:key :background-blur :value (:background-blur values)}))) -(defn- check-props - "A blur-menu specific memoize check function that only checks if - specific values are changed on provided props. This allows pass the - whole shape as values without adding additional rerenders when other - shape properties changes." - [n-props o-props] - (and (identical? (unchecked-get n-props "ids") - (unchecked-get o-props "ids")) - (let [o-vals (unchecked-get o-props "values") - n-vals (unchecked-get n-props "values") - o-blur-values (get o-vals :blur) - n-blur-values (get n-vals :blur) - o-background-blur-values (get o-vals :background-blur) - n-background-blur-values (get n-vals :background-blur)] - (and (identical? o-blur-values n-blur-values) - (identical? o-background-blur-values n-background-blur-values))))) +(defn- check-blur-menu-props + [old-props new-props] + (let [old-values (unchecked-get old-props "values") + new-values (unchecked-get new-props "values")] + (and (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (unchecked-get old-props "type") + (unchecked-get new-props "type")) + (identical? (get old-values :blur) + (get new-values :blur)) + (identical? (get old-values :background-blur) + (get new-values :background-blur))))) (mf/defc blur-menu* - {::mf/wrap [#(mf/memo' % check-props)]} + {::mf/wrap [#(mf/memo' % check-blur-menu-props)]} [{:keys [ids type values]}] (let [render-wasm? (features/use-feature "render-wasm/v1") bg-blur? (and render-wasm? (contains? cf/flags :background-blur)) - - blur-values (get-blurs values) mixed-state (and (or (= :group type) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs index a2ab42aee8..0e89cb166c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs @@ -28,7 +28,33 @@ :parent-id :frame-id]) +(defn- check-constraints-menu-props + [old-props new-props] + (let [old-values (unchecked-get old-props "values") + new-values (unchecked-get new-props "values")] + (and (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (get old-values :constraints-h) + (get new-values :constraints-h)) + (identical? (get old-values :constraints-v) + (get new-values :constraints-v)) + (identical? (get old-values :fixed-scroll) + (get new-values :fixed-scroll)) + (identical? (get old-values :parent-id) + (get new-values :parent-id)) + (identical? (get old-values :frame-id) + (get new-values :frame-id)) + (identical? (get old-values :x) + (get new-values :x)) + (identical? (get old-values :y) + (get new-values :y)) + (identical? (get old-values :width) + (get new-values :width)) + (identical? (get old-values :height) + (get new-values :height))))) + (mf/defc constraints-menu* + {::mf/wrap [#(mf/memo' % check-constraints-menu-props)]} [{:keys [ids values] :as props}] (let [state* (mf/use-state true) open? (deref state*) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 410aa0ee21..a518622fb8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -296,16 +296,26 @@ [:button {:class (stl/css :option-btn) :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])])) +(defn- check-frame-grid-props + [old-props new-props] + (and (identical? (unchecked-get old-props "grids") + (unchecked-get new-props "grids")) + (identical? (unchecked-get old-props "id") + (unchecked-get new-props "id")) + (identical? (unchecked-get old-props "frameWidth") + (unchecked-get new-props "frameWidth")) + (identical? (unchecked-get old-props "frameHeight") + (unchecked-get new-props "frameHeight")))) + (mf/defc frame-grid* - [{:keys [shape]}] + {::mf/wrap [#(mf/memo' % check-frame-grid-props)]} + [{:keys [grids id frame-width frame-height]}] (let [state* (mf/use-state true) open? (deref state*) - frame-grids (:grids shape) - has-frame-grids? (or (= :multiple frame-grids) (some? (seq frame-grids))) + has-frame-grids? (or (= :multiple grids) (some? (seq grids))) toggle-content (mf/use-fn #(swap! state* not)) - id (:id shape) default-grids (mf/deref lens:default-grids) default-grid-params (mf/with-memo [default-grids] (merge ctg/default-grid-params default-grids)) @@ -328,15 +338,15 @@ :on-click handle-create-grid :icon i/add}]]] - (when (and open? (seq frame-grids)) + (when (and open? (seq grids)) [:div {:class (stl/css :element-set-content)} - (for [[index grid] (map-indexed vector frame-grids)] + (for [[index grid] (map-indexed vector grids)] [:> grid-options* {:key (str id "-" index) :shape-id id :grid grid :index index - :frame-width (:width shape) - :frame-height (:height shape) + :frame-width frame-width + :frame-height frame-height :default-grid-params default-grid-params}])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index be0900934e..2a8b2adc6a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -81,9 +81,19 @@ :id (dm/str "align-self-stretch-" type)}]]])) -(mf/defc options - {::mf/wrap [mf/memo]} - [{:keys [shape cell cells] :as props}] +(defn- check-options-props + [old-props new-props] + (and (identical? (unchecked-get old-props "shapeId") + (unchecked-get new-props "shapeId")) + (identical? (unchecked-get old-props "cell") + (unchecked-get new-props "cell")) + (identical? (unchecked-get old-props "cells") + (unchecked-get new-props "cells")))) + +;;TODO: Review this component only recieve cells prop ib this file app.main.ui.workspace.sidebar.options +(mf/defc options* + {::mf/wrap [#(mf/memo' % check-options-props)]} + [{:keys [shape-id cell cells] :as props}] (let [state* (mf/use-state {:open true}) open? (:open @state*) @@ -115,23 +125,23 @@ set-alignment (mf/use-callback - (mf/deps align-self (:id shape) cell-ids) + (mf/deps align-self shape-id cell-ids) (fn [value] (if (= align-self value) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:align-self nil})) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:align-self value}))))) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:align-self nil})) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:align-self value}))))) set-justify-self (mf/use-callback - (mf/deps justify-self (:id shape) cell-ids) + (mf/deps justify-self shape-id cell-ids) (fn [value] (if (= justify-self value) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:justify-self nil})) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:justify-self value}))))) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:justify-self nil})) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:justify-self value}))))) on-grid-coordinates (mf/use-callback - (mf/deps column row (:id shape) (:id cell)) + (mf/deps column row shape-id (:id cell)) (fn [field type value] (when-not multiple? (let [value (mth/round value) @@ -151,30 +161,30 @@ (and (= type :row) (= field :end)) [:row-span (max 1 (- value row))])] - (st/emit! (dwsl/update-grid-cell-position (:id shape) (:id cell) {property value})))))) + (st/emit! (dwsl/update-grid-cell-position shape-id (:id cell) {property value})))))) on-area-name-change (mf/use-callback - (mf/deps (:id shape) cell-ids) + (mf/deps shape-id cell-ids) (fn [event] (let [value (dom/get-value (dom/get-target event))] (if (= value "") - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:area-name nil})) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:area-name value})))))) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:area-name nil})) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:area-name value})))))) set-cell-mode (mf/use-callback - (mf/deps (:id shape) cell-ids) + (mf/deps shape-id cell-ids) (fn [mode] (let [mode (-> mode keyword)] - (st/emit! (dwsl/change-cells-mode (:id shape) cell-ids mode))))) + (st/emit! (dwsl/change-cells-mode shape-id cell-ids mode))))) toggle-edit-mode (mf/use-fn - (mf/deps (:id shape)) + (mf/deps shape-id) (fn [] - (st/emit! (dw/start-edition-mode (:id shape)) - (dwge/clear-selection (:id shape)))))] + (st/emit! (dw/start-edition-mode shape-id) + (dwge/clear-selection shape-id))))] [:div {:class (stl/css :grid-cell-menu)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 7965e42c3a..08a9753989 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -1070,8 +1070,39 @@ [_] (st/emit! (dom/open-new-window cf/grid-help-uri))) -(mf/defc layout-container-menu - {::mf/memo #{:ids :values :multiple :shapes :applied-tokens}} +(defn- check-layout-container-menu-props + [old-props new-props] + (let [o-values (unchecked-get old-props "values") + n-values (unchecked-get new-props "values")] + (and (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (unchecked-get old-props "appliedTokens") + (unchecked-get new-props "appliedTokens")) + (identical? (unchecked-get old-props "multiple") + (unchecked-get new-props "multiple")) + (identical? (get o-values :layout-gap) + (get n-values :layout-gap)) + (identical? (get o-values :layout-gap-type) + (get n-values :layout-gap-type)) + (identical? (get o-values :layout-padding) + (get n-values :layout-padding)) + (identical? (get o-values :layout-padding-type) + (get n-values :layout-padding-type)) + (identical? (get o-values :layout-wrap-type) + (get n-values :layout-wrap-type)) + (identical? (get o-values :layout-align-items) + (get n-values :layout-align-items)) + (identical? (get o-values :layout-flex-dir) + (get n-values :layout-flex-dir)) + (identical? (get o-values :layout-justify-content) + (get n-values :layout-justify-content)) + (identical? (get o-values :layout-align-content) + (get n-values :layout-align-content)) + (identical? (get o-values :layout) + (get n-values :layout))))) + +(mf/defc layout-container-menu* + {::mf/wrap [#(mf/memo' % check-layout-container-menu-props)]} [{:keys [ids values multiple applied-tokens]}] (let [;; Display layout-type (:layout values) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index d8818f153a..25ca8b04ab 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -512,7 +512,6 @@ :title "Align self end" :id "align-self-end"}]]) - (def ^:private schema:layout-item-props-schema [:map [:layout-item-margin @@ -721,16 +720,60 @@ :value (get values :layout-item-max-h) :nillable true}]])])])) -(mf/defc layout-item-menu - {::mf/memo #{:ids :values :type :is-layout-child? :is-grid-parent :is-flex-parent? :is-grid-layout? :is-flex-layout? :applied-tokens} - ::mf/props :obj} +(defn- check-layout-item-menu-props + [old-props new-props] + (let [old-values (unchecked-get old-props "values") + new-values (unchecked-get new-props "values")] + (and (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (unchecked-get old-props "type") + (unchecked-get new-props "type")) + (identical? (unchecked-get old-props "isLayoutChild") + (unchecked-get new-props "isLayoutChild")) + (identical? (unchecked-get old-props "isLayoutContainer") + (unchecked-get new-props "isLayoutContainer")) + (identical? (unchecked-get old-props "isGridParent") + (unchecked-get new-props "isGridParent")) + (identical? (unchecked-get old-props "isFlexParent") + (unchecked-get new-props "isFlexParent")) + (identical? (unchecked-get old-props "isGridLayout") + (unchecked-get new-props "isGridLayout")) + (identical? (unchecked-get old-props "isFlexLayout") + (unchecked-get new-props "isFlexLayout")) + (identical? (unchecked-get old-props "appliedTokens") + (unchecked-get new-props "appliedTokens")) + (identical? (get old-values :layout-item-margin) + (get new-values :layout-item-margin)) + (identical? (get old-values :layout-item-margin-type) + (get new-values :layout-item-margin-type)) + (identical? (get old-values :layout-item-h-sizing) + (get new-values :layout-item-h-sizing)) + (identical? (get old-values :layout-item-v-sizing) + (get new-values :layout-item-v-sizing)) + (identical? (get old-values :layout-item-max-h) + (get new-values :layout-item-max-h)) + (identical? (get old-values :layout-item-min-h) + (get new-values :layout-item-min-h)) + (identical? (get old-values :layout-item-max-w) + (get new-values :layout-item-max-w)) + (identical? (get old-values :layout-item-min-w) + (get new-values :layout-item-min-w)) + (identical? (get old-values :layout-item-align-self) + (get new-values :layout-item-align-self)) + (identical? (get old-values :layout-item-absolute) + (get new-values :layout-item-absolute)) + (identical? (get old-values :layout-item-z-index) + (get new-values :layout-item-z-index))))) + +(mf/defc layout-item-menu* + {::mf/wrap [#(mf/memo' % check-layout-item-menu-props)]} [{:keys [ids values - ^boolean is-layout-child? - ^boolean is-layout-container? - ^boolean is-grid-parent? - ^boolean is-flex-parent? - ^boolean is-flex-layout? - ^boolean is-grid-layout? + ^boolean is-layout-child + ^boolean is-layout-container + ^boolean is-grid-parent + ^boolean is-flex-parent + ^boolean is-flex-layout + ^boolean is-grid-layout applied-tokens]}] (let [selection-parents* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) @@ -743,16 +786,16 @@ is-col? (every? ctl/col? selection-parents) ^boolean - is-layout-child? (and is-layout-child? (not is-absolute?)) + is-layout-child? (and is-layout-child (not is-absolute?)) state* (mf/use-state true) open? (deref state*) toggle-content (mf/use-fn #(swap! state* not)) has-content? (or is-layout-child? - is-flex-parent? - is-grid-parent? - is-layout-container?) + is-flex-parent + is-grid-parent + is-layout-container) ;; Align self align-self (:layout-item-align-self values) @@ -761,24 +804,24 @@ title (cond - (and is-layout-container? - is-flex-layout? + (and is-layout-container + is-flex-layout (not is-layout-child?)) "Flex board" - (and is-layout-container? - is-grid-layout? + (and is-layout-container + is-grid-layout (not is-layout-child?)) "Grid board" - (and is-layout-container? + (and is-layout-container (not is-layout-child?)) "Layout board" - is-flex-parent? + is-flex-parent "Flex element" - is-grid-parent? + is-grid-parent "Grid element" :else @@ -882,19 +925,19 @@ [:div {:class (stl/css-case :behaviour-menu true :wrap (and ^boolean is-layout-child? - ^boolean is-layout-container?))} + ^boolean is-layout-container))} [:& element-behaviour-horizontal - {:is-auto is-layout-container? + {:is-auto is-layout-container :has-fill is-layout-child? :value (:layout-item-h-sizing values) :on-change on-behaviour-h-change}] [:& element-behaviour-vertical - {:is-auto is-layout-container? + {:is-auto is-layout-container :has-fill is-layout-child? :value (:layout-item-v-sizing values) :on-change on-behaviour-v-change}]]] - (when (and is-layout-child? is-flex-parent?) + (when (and is-layout-child? is-flex-parent) [:div {:class (stl/css :align-row)} [:& align-self-row {:is-col is-col? :value align-self 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 b6c62bf68c..d3c6eb1320 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 @@ -130,7 +130,47 @@ acc)))) acc))))) +(defn- check-measures-menu-props + [old-props new-props] + (let [o-values (unchecked-get old-props "values") + n-values (unchecked-get new-props "values")] + (and (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (unchecked-get old-props "type") + (unchecked-get new-props "type")) + (identical? (unchecked-get old-props "appliedTokens") + (unchecked-get new-props "appliedTokens")) + (identical? (get o-values :x) + (get n-values :x)) + (identical? (get o-values :y) + (get n-values :y)) + (identical? (get o-values :rotation) + (get n-values :rotation)) + (identical? (get o-values :hide-in-viewer) + (get n-values :hide-in-viewer)) + (identical? (get o-values :width) + (get n-values :width)) + (identical? (get o-values :width) + (get n-values :width)) + (identical? (get o-values :height) + (get n-values :height)) + (identical? (get o-values :points) + (get n-values :points)) + (identical? (get o-values :selrect) + (get n-values :selrect)) + (identical? (get o-values :r1) + (get n-values :r1)) + (identical? (get o-values :r2) + (get n-values :r2)) + (identical? (get o-values :r3) + (get n-values :r3)) + (identical? (get o-values :r4) + (get n-values :r4)) + (identical? (get o-values :proportion-lock) + (get n-values :proportion-lock))))) + (mf/defc measures-menu* + {::mf/wrap [#(mf/memo' % check-measures-menu-props)]} [{:keys [ids values applied-tokens type shapes]}] (let [token-numeric-inputs (features/use-feature "tokens/numeric-input") diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 4e52171ac9..9e5de7487e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -48,7 +48,17 @@ (map-indexed (fn [index shadow] (assoc shadow ::index index)))) +(defn- check-shadow-menu-props + [old-props new-props] + (and (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (unchecked-get old-props "type") + (unchecked-get new-props "type")) + (identical? (unchecked-get old-props "values") + (unchecked-get new-props "values")))) + (mf/defc shadow-menu* + {::mf/wrap [#(mf/memo' % check-shadow-menu-props)]} [{:keys [ids type values] :as props}] (let [shadows (mf/with-memo [values] (if (= :multiple values) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index a3786074e4..29e4151880 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -20,7 +20,6 @@ [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as h] [app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row*]] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -40,9 +39,31 @@ :stroke-cap-start :stroke-cap-end]) +(defn- stroke-menu-check-props + "A stroke-menu specific memoize check function that only checks if + specific values are changed on provided props. This allows pass the + whole shape as values without adding additional rerenders when other + shape properties changes." + [n-props o-props] + (and (identical? (unchecked-get n-props "ids") + (unchecked-get o-props "ids")) + (identical? (unchecked-get n-props "type") + (unchecked-get o-props "type")) + (identical? (unchecked-get n-props "appliedTokens") + (unchecked-get o-props "appliedTokens")) + (identical? (unchecked-get n-props "showCaps") + (unchecked-get o-props "showCaps")) + (identical? (unchecked-get n-props "disableStrokeStyle") + (unchecked-get o-props "disableStrokeStyle")) + (let [o-vals (unchecked-get o-props "values") + n-vals (unchecked-get n-props "values") + o-strokes (get o-vals :strokes) + n-strokes (get n-vals :strokes)] + (identical? o-strokes n-strokes)))) + (mf/defc stroke-menu* - {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps" "applied-tokens"]))]} - [{:keys [ids type values show-caps disable-stroke-style applied-tokens shapes objects] :as props}] + {::mf/wrap [#(mf/memo' % stroke-menu-check-props)]} + [{:keys [ids type values show-caps disable-stroke-style applied-tokens]}] (let [label (case type :multiple (tr "workspace.options.selection-stroke") :group (tr "workspace.options.group-stroke") @@ -127,30 +148,6 @@ (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-attrs ids {:stroke-gap value} index)))) - open-caps-select - (fn [caps-state] - (fn [event] - (let [window-size (dom/get-window-size) - - target (dom/get-current-target event) - rect (dom/get-bounding-rect target) - - top (if (< (+ (:bottom rect) 320) (:height window-size)) - (+ (:bottom rect) 5) - (- (:height window-size) 325)) - - left (if (< (+ (:left rect) 200) (:width window-size)) - (:left rect) - (- (:width window-size) 205))] - (swap! caps-state assoc :open? true - :left left - :top top)))) - - close-caps-select - (fn [caps-state] - (fn [_] - (swap! caps-state assoc :open? false))) - on-stroke-cap-start-change (fn [index value] (st/emit! (udw/trigger-bounding-box-cloaking ids)) @@ -231,32 +228,28 @@ [:> h/sortable-container* {} (for [[index value] (d/enumerate (:strokes values []))] [:> stroke-row* {:key (dm/str "stroke-" index "-" (hash applied-tokens)) + :index index :stroke value :title (tr "workspace.options.stroke-color") - :index index - :shapes shapes - :objects objects :show-caps show-caps :on-color-change on-color-change + :on-reorder handle-reorder :on-color-detach on-color-detach + :on-remove on-remove :on-stroke-width-change on-stroke-width-change :on-stroke-dash-change on-stroke-dash-change :on-stroke-gap-change on-stroke-gap-change :on-stroke-style-change on-stroke-style-change :on-stroke-alignment-change on-stroke-alignment-change - :open-caps-select open-caps-select - :close-caps-select close-caps-select :on-stroke-cap-start-change on-stroke-cap-start-change :on-stroke-cap-end-change on-stroke-cap-end-change :on-stroke-cap-switch on-stroke-cap-switch - :applied-tokens (when (= 0 index) applied-tokens) - :on-detach-token on-detach-token - :on-remove on-remove :on-toggle-visibility on-toggle-visibility - :on-reorder handle-reorder :disable-drag disable-drag :on-focus on-focus - :select-on-focus (not @disable-drag) :on-blur on-blur - :ids ids - :disable-stroke-style disable-stroke-style}])])])])) + :applied-tokens (when (= 0 index) applied-tokens) + :on-detach-token on-detach-token + :disable-stroke-style disable-stroke-style + :select-on-focus (not @disable-drag) + :ids ids}])])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs index fdd0dba853..17ee23f154 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs @@ -63,7 +63,17 @@ :on-change on-change :on-delete on-delete}]])])])) +(defn- check-svg-attrs-menu-props + [old-props new-props] + (let [old-values (unchecked-get old-props "values") + new-values (unchecked-get new-props "values")] + (and (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (get old-values :svg-attrs) + (get new-values :svg-attrs))))) + (mf/defc svg-attrs-menu* + {::mf/wrap [#(mf/memo' % check-svg-attrs-menu-props)]} [{:keys [ids values]}] (let [state* (mf/use-state true) open? (deref state*) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 22fab594b6..60b0c15c02 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -245,12 +245,52 @@ (d/seek #(= (:id %) (uuid/uuid id))))) (defn- check-props [n-props o-props] - (and (identical? (unchecked-get n-props "ids") - (unchecked-get o-props "ids")) - (identical? (unchecked-get n-props "appliedTokens") - (unchecked-get o-props "appliedTokens")) - (identical? (unchecked-get n-props "values") - (unchecked-get o-props "values")))) + (let [o-values (unchecked-get o-props "values") + n-values (unchecked-get n-props "values")] + (and (identical? (unchecked-get n-props "ids") + (unchecked-get o-props "ids")) + (identical? (unchecked-get n-props "type") + (unchecked-get o-props "type")) + (identical? (unchecked-get n-props "appliedTokens") + (unchecked-get o-props "appliedTokens")) + (identical? (unchecked-get n-props "fileId") + (unchecked-get o-props "fileId")) + (identical? (unchecked-get n-props "typographies") + (unchecked-get o-props "typographies")) + (identical? (get o-values :fills) + (get n-values :fills)) + (identical? (get o-values :font-family) + (get n-values :font-family)) + (identical? (get o-values :font-id) + (get n-values :font-id)) + (identical? (get o-values :font-size) + (get n-values :font-size)) + (identical? (get o-values :font-style) + (get n-values :font-style)) + (identical? (get o-values :font-variant-id) + (get n-values :font-variant-id)) + (identical? (get o-values :font-weight) + (get n-values :font-weight)) + (identical? (get o-values :grow-type) + (get n-values :grow-type)) + (identical? (get o-values :letter-spacing) + (get n-values :letter-spacing)) + (identical? (get o-values :line-height) + (get n-values :line-height)) + (identical? (get o-values :text-align) + (get n-values :text-align)) + (identical? (get o-values :text-decoration) + (get n-values :text-decoration)) + (identical? (get o-values :text-direction) + (get n-values :text-direction)) + (identical? (get o-values :text-transform) + (get n-values :text-transform)) + (identical? (get o-values :typography-ref-file) + (get n-values :typography-ref-file)) + (identical? (get o-values :typography-ref-id) + (get n-values :typography-ref-id)) + (identical? (get o-values :vertical-align) + (get n-values :vertical-align))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Main component @@ -258,12 +298,9 @@ (mf/defc text-menu* {::mf/wrap [#(mf/memo' % check-props)]} - [{:keys [ids type values applied-tokens]}] + [{:keys [ids type values applied-tokens libraries file-id typographies]}] - (let [file-id (mf/use-ctx ctx/current-file-id) - typographies (mf/deref refs/workspace-file-typography) - libraries (mf/deref refs/files) - ;; --- UI state + (let [;; --- UI state menu-state* (mf/use-state {:main-menu true :more-options false}) menu-state (deref menu-state*) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index b5259e0e5d..843b8ca560 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -15,8 +15,8 @@ [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -94,7 +94,7 @@ :values measure-values :shapes shapes}] - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids [(:id shape)] :values layout-container-values @@ -102,18 +102,19 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? - [:& layout-item-menu + [:> layout-item-menu* {:ids ids :type type :values layout-item-values - :is-layout-child? true - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? + :is-layout-child true + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? :applied-tokens applied-tokens :shape shape}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index ed77629c22..eced13447a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -15,8 +15,8 @@ [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -93,7 +93,7 @@ :values measure-values :shapes shapes}] - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids [(:id shape)] :values layout-container-values @@ -101,20 +101,21 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :is-layout-child? true - :is-layout-container? false - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? - :applied-tokens applied-tokens - :shape shape}]) + [:> layout-item-menu* {:ids ids + :type type + :values layout-item-values + :is-layout-child true + :is-layout-container false + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? + :applied-tokens applied-tokens + :shape shape}]) (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) [:> constraints-menu* {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index a57cb7c853..be6725914b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -19,8 +19,8 @@ [app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid*]] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -113,7 +113,7 @@ (when is-variant? [:> component-variant-main* {:shapes shapes}]) - [:& layout-container-menu + [:> layout-container-menu* {:type shape-type :ids ids :applied-tokens applied-tokens @@ -121,22 +121,23 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when (or is-layout-child? is-layout-container?) - [:& layout-item-menu + [:> layout-item-menu* {:ids ids :type shape-type :values layout-item-values - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? - :is-flex-layout? is-flex-layout? - :is-grid-layout? is-grid-layout? - :is-layout-child? is-layout-child? + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? + :is-flex-layout is-flex-layout? + :is-grid-layout is-grid-layout? + :is-layout-child is-layout-child? :applied-tokens applied-tokens - :is-layout-container? is-layout-container? + :is-layout-container is-layout-container? :shape shape}]) (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) @@ -159,8 +160,11 @@ :libraries libraries}] [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:> blur-menu* {:ids ids - :values (select-keys shape [:blur :background-blur])}] - [:> frame-grid* {:shape shape}] + :values (select-keys shape [:blur])}] + [:> frame-grid* {:grids (:grids shape) + :id (:id shape) + :frame-width (:width shape) + :frame-height (:height shape)}] [:> exports-menu* {:type shape-type :ids ids :shapes shapes diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 1ceb6cb494..d0ae918bfe 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -18,8 +18,8 @@ [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-menu*]] @@ -37,6 +37,9 @@ ids (mf/with-memo [id] [id]) shapes (mf/with-memo [shape] [shape]) + typographies + (mf/deref refs/workspace-file-typography) + applied-tokens (get shape :applied-tokens) @@ -119,7 +122,7 @@ :values measure-values :shapes shapes}] - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids [(:id shape)] :values layout-container-values @@ -127,18 +130,19 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? - [:& layout-item-menu + [:> layout-item-menu* {:type type :ids layout-item-ids - :is-layout-child? true - :is-layout-container? false - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? + :is-layout-child true + :is-layout-container false + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? :applied-tokens applied-tokens :values layout-item-values}]) @@ -174,7 +178,10 @@ [:> ot/text-menu* {:type type :ids text-ids :values text-values - :applied-tokens text-tokens}]) + :applied-tokens text-tokens + :libraries libraries + :file-id file-id + :typographies typographies}]) (when-not (empty? svg-values) [:> svg-attrs-menu* {:ids ids :values svg-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 5e99bcb51a..565c368611 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -27,8 +27,8 @@ [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-attrs exports-menu*]] [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measure-attrs measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -339,6 +339,9 @@ (mf/with-memo [shapes] (into #{} d/xf:map-id shapes)) + typographies + (mf/deref refs/workspace-file-typography) + is-layout-child-ref (mf/with-memo [shape-ids] (refs/is-layout-child? shape-ids)) @@ -468,7 +471,7 @@ (when (some? components) [:> component-menu* {:shapes components}]) - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids layout-container-ids :values layout-container-values @@ -476,13 +479,13 @@ :multiple true}] (when (or is-layout-child? has-flex-layout-container?) - [:& layout-item-menu + [:> layout-item-menu* {:type type :ids layout-item-ids - :is-layout-child? all-layout-child? - :is-layout-container? all-flex-layout-container? - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? + :is-layout-child all-layout-child? + :is-layout-container all-flex-layout-container? + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? :applied-tokens layout-item-tokens :values layout-item-values}]) @@ -494,7 +497,10 @@ {:type type :ids text-ids :values text-values - :applied-tokens text-tokens}]) + :applied-tokens text-tokens + :libraries libraries + :file-id file-id + :typographies typographies}]) (when-not (empty? fill-ids) [:> fill/fill-menu* {:type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 0ba8e24a76..05b8158544 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -15,8 +15,8 @@ [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -93,7 +93,7 @@ :values measure-values :shapes shapes}] - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids [(:id shape)] :values layout-container-values @@ -101,20 +101,21 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :is-layout-child? true - :is-layout-container? false - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? - :applied-tokens applied-tokens - :shape shape}]) + [:> layout-item-menu* {:ids ids + :type type + :values layout-item-values + :is-layout-child true + :is-layout-container false + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? + :applied-tokens applied-tokens + :shape shape}]) (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) [:> constraints-menu* {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index fb34713817..2024ce5576 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -15,8 +15,8 @@ [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -93,7 +93,7 @@ :applied-tokens applied-tokens :shapes shapes}] - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids ids :values layout-container-values @@ -101,19 +101,20 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when ^boolean is-layout-child? - [:& layout-item-menu + [:> layout-item-menu* {:ids ids :type type :values layout-item-values - :is-layout-child? true - :is-flex-parent? is-flex-parent? + :is-layout-child true + :is-flex-parent is-flex-parent? :applied-tokens applied-tokens - :is-grid-parent? is-grid-parent? + :is-grid-parent is-grid-parent? :shape shape}]) (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index 929ddda4e4..42511bd2a7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -16,8 +16,8 @@ [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu* exports-attrs]] [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -160,7 +160,7 @@ :values measure-values :shapes shapes}] - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids [(:id shape)] :values layout-container-values @@ -168,18 +168,19 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? - [:& layout-item-menu + [:> layout-item-menu* {:ids ids :type type :values layout-item-values - :is-layout-child? true - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? + :is-layout-child true + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? :applied-tokens applied-tokens :shape shape}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 34d8614b1c..de2ddd2ed0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -21,8 +21,8 @@ [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu*]] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] - [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu*]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu*]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu*]] @@ -36,6 +36,9 @@ ids (mf/with-memo [id] [id]) shapes (mf/with-memo [shape] [shape]) + typographies + (mf/deref refs/workspace-file-typography) + applied-tokens (get shape :applied-tokens) @@ -154,7 +157,7 @@ :applied-tokens applied-tokens :shapes shapes}] - [:& layout-container-menu + [:> layout-container-menu* {:type type :ids ids :values layout-container-values @@ -162,18 +165,19 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? - [:& layout-item-menu + [:& layout-item-menu* {:ids ids :type type :values layout-item-values - :is-layout-child? true - :is-flex-parent? is-flex-parent? - :is-grid-parent? is-grid-parent? + :is-layout-child true + :is-flex-parent is-flex-parent? + :is-grid-parent is-grid-parent? :applied-tokens applied-tokens :shape shape}]) @@ -186,7 +190,10 @@ {:ids ids :type type :applied-tokens applied-tokens - :values text-values}] + :values text-values + :libraries libraries + :file-id file-id + :typographies typographies}] [:> fill/fill-menu* {:ids ids