⚡ Add efficiency refactor for layer-menu*

2026-02-12 14:42:56 +00:00 · 2025-08-28 10:31:20 +02:00
parent f8bc6e12a9
commit e94abad3eb
9 changed files with 84 additions and 72 deletions
--- 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]
--- 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
--- 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
--- 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
--- 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
--- 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*
--- 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
--- 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
--- 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