diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 4af557679b..f5c7eaf14f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -9,7 +9,6 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] - [app.main.data.helpers :as dsh] [app.main.data.workspace :as dw] [app.main.data.workspace.shapes :as dwsh] [app.main.features :as features] @@ -24,7 +23,7 @@ (def layer-attrs [:opacity :blend-mode :blocked :hidden]) -(defn opacity->string +(defn- opacity->string [opacity] (if (not= opacity :multiple) (dm/str (-> opacity @@ -32,61 +31,70 @@ (* 100))) :multiple)) -(mf/defc layer-menu - {::mf/wrap-props false} - [props] - (let [ids (unchecked-get props "ids") - values (unchecked-get props "values") +(defn- on-change + [ids prop value] + (st/emit! (dwsh/update-shapes ids #(assoc % prop value)))) - hidden? (:hidden values) - blocked? (:blocked values) +(defn- check-layer-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 "class") + (unchecked-get new-props "class")) + (identical? (unchecked-get old-props "ids") + (unchecked-get new-props "ids")) + (identical? (get old-values :opacity) + (get new-values :opacity)) + (identical? (get old-values :blend-mode) + (get new-values :blend-mode)) + (identical? (get old-values :blocked) + (get new-values :blocked)) + (identical? (get old-values :hidden) + (get new-values :hidden))))) - current-blend-mode (or (:blend-mode values) :normal) - current-opacity (opacity->string (:opacity values)) +(mf/defc layer-menu* + {::mf/wrap [#(mf/memo' % check-layer-menu-props)]} + [{:keys [ids values]}] + (let [hidden? (get values :hidden) + blocked? (get values :blocked) - state* (mf/use-state - {:selected-blend-mode current-blend-mode - :option-highlighted? false - :preview-complete? true}) + current-blend-mode (or (get values :blend-mode) :normal) + current-opacity (opacity->string (:opacity values)) - state (deref state*) - selected-blend-mode (get state :selected-blend-mode) - option-highlighted? (get state :option-highlighted?) - preview-complete? (get state :preview-complete?) - wasm-renderer-enabled? (features/use-feature "render-wasm/v1") + state* (mf/use-state + #(do {:selected-blend-mode current-blend-mode + :option-highlighted? false + :preview-complete? true})) - shapes (-> - (dsh/lookup-page-objects @st/state) - (select-keys ids) - vals) + state (deref state*) + selected-blend-mode (get state :selected-blend-mode) + option-highlighted? (get state :option-highlighted?) + preview-complete? (get state :preview-complete?) - on-change - (mf/use-fn - (mf/deps ids) - (fn [prop value] - (st/emit! (dwsh/update-shapes ids #(assoc % prop value))))) + wasm-renderer-enabled? + (features/use-feature "render-wasm/v1") handle-change-blend-mode (mf/use-fn - (mf/deps on-change) + (mf/deps ids) (fn [value] (swap! state* assoc :selected-blend-mode value :option-highlighted? false :preview-complete? true) (st/emit! (dw/unset-preview-blend-mode ids)) - (on-change :blend-mode value))) + (on-change ids :blend-mode value))) handle-blend-mode-enter (mf/use-fn - (mf/deps on-change current-blend-mode) + (mf/deps ids current-blend-mode) (fn [value] (swap! state* assoc :preview-complete? false :option-highlighted? true) (when wasm-renderer-enabled? - (doseq [shape shapes] + (doseq [shape ids] (wasm.api/use-shape (:id shape)) (wasm.api/set-shape-blend-mode value))) @@ -95,46 +103,46 @@ handle-blend-mode-leave (mf/use-fn - (mf/deps on-change selected-blend-mode) + (mf/deps ids) (fn [_value] (swap! state* assoc :preview-complete? true) (st/emit! (dw/unset-preview-blend-mode ids)))) handle-opacity-change (mf/use-fn - (mf/deps on-change ids) + (mf/deps ids) (fn [value] (st/emit! (dw/trigger-bounding-box-cloaking ids)) (let [value (/ value 100)] - (on-change :opacity value)))) + (on-change ids :opacity value)))) handle-set-hidden (mf/use-fn - (mf/deps on-change ids) + (mf/deps ids) (fn [_] (st/emit! (dw/trigger-bounding-box-cloaking ids)) - (on-change :hidden true))) + (on-change ids :hidden true))) handle-set-visible (mf/use-fn - (mf/deps on-change ids) + (mf/deps ids) (fn [_] (st/emit! (dw/trigger-bounding-box-cloaking ids)) - (on-change :hidden false))) + (on-change ids :hidden false))) handle-set-blocked (mf/use-fn - (mf/deps on-change ids) + (mf/deps ids) (fn [_] (st/emit! (dw/trigger-bounding-box-cloaking ids)) - (on-change :blocked true))) + (on-change ids :blocked true))) handle-set-unblocked (mf/use-fn - (mf/deps on-change ids) + (mf/deps ids) (fn [_] (st/emit! (dw/trigger-bounding-box-cloaking ids)) - (on-change :blocked false))) + (on-change ids :blocked false))) options (mf/with-memo [current-blend-mode] 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 bddea47dcb..56fb1dbdb2 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 @@ -14,7 +14,7 @@ [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.layer :refer [layer-attrs layer-menu]] + [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.measures :refer [measure-attrs measures-menu*]] @@ -79,9 +79,9 @@ (mf/deref parents-by-ids-ref)] [:* - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:> layer-menu* {:ids ids + :type type + :values layer-values}] [:> measures-menu* {:ids ids :type type 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 4ef21adcdd..89e9ad4f8c 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 @@ -14,7 +14,7 @@ [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.layer :refer [layer-attrs layer-menu]] + [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.measures :refer [measure-attrs measures-menu*]] @@ -79,9 +79,9 @@ parents (mf/deref parents-by-ids-ref)] [:* - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:> layer-menu* {:ids ids + :type type + :values layer-values}] [:> measures-menu* {:ids ids :type type 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 b676ef0b52..b1bca96a00 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,7 +19,7 @@ [app.main.ui.workspace.sidebar.options.menus.fill :as fill] [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.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.measures :refer [select-measure-keys measures-menu*]] @@ -99,9 +99,9 @@ (when variants? (ctk/is-variant-container? shape))] [:* - [:& layer-menu {:ids ids - :type shape-type - :values layer-values}] + [:> layer-menu* {:ids ids + :type shape-type + :values layer-values}] [:> measures-menu* {:ids ids :values measure-values :type shape-type 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 13289a0bb3..4ef159d6d5 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 @@ -17,7 +17,7 @@ [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.layer :refer [layer-menu]] + [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.measures :refer [measures-menu*]] @@ -106,7 +106,9 @@ (get-attrs shapes objects :layout-item)] [:div {:class (stl/css :options)} - [:& layer-menu {:type type :ids layer-ids :values layer-values}] + [:> layer-menu* {:type type + :ids layer-ids + :values layer-values}] [:> measures-menu* {:type type :ids measure-ids :values measure-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 6d5e5cd0cf..b19523e0f7 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 @@ -25,7 +25,7 @@ [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [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.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.measures :refer [select-measure-keys measure-attrs measures-menu*]] @@ -425,7 +425,9 @@ [:div {:class (stl/css :options)} (when-not (empty? layer-ids) - [:& layer-menu {:type type :ids layer-ids :values layer-values}]) + [:> layer-menu* {:type type + :ids layer-ids + :values layer-values}]) (when-not (empty? measure-ids) [:> measures-menu* 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 bade487724..bba37db31a 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 @@ -14,7 +14,7 @@ [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.layer :refer [layer-attrs layer-menu]] + [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.measures :refer [measure-attrs measures-menu*]] @@ -80,9 +80,9 @@ (mf/deref parents-by-ids-ref)] [:* - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:> layer-menu* {:ids ids + :type type + :values layer-values}] [:> measures-menu* {:ids ids :type type :values measure-values 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 9b5e62fd31..da138d37a5 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 @@ -14,7 +14,7 @@ [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.layer :refer [layer-attrs layer-menu]] + [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.measures :refer [measure-attrs measures-menu*]] @@ -80,9 +80,9 @@ (mf/deref parents-by-ids-ref)] [:* - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:> layer-menu* {:ids ids + :type type + :values layer-values}] [:> measures-menu* {:ids ids :type type :values measure-values 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 0641652975..26b1c88e4e 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 @@ -19,7 +19,7 @@ [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.layer :refer [layer-attrs layer-menu]] + [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.measures :refer [measure-attrs measures-menu*]] @@ -126,9 +126,9 @@ :attrs txt/text-node-attrs}))] [:* - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:> layer-menu* {:ids ids + :type type + :values layer-values}] [:> measures-menu* {:ids ids :type type