⚡ Add efficiency refactor for layer-menu*

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
+(defn- on-change
-  {::mf/wrap-props false}
+  [ids prop value]
-  [props]
+  (st/emit! (dwsh/update-shapes ids #(assoc % prop value))))
-  (let [ids                    (unchecked-get props "ids")
-        values                 (unchecked-get props "values")
 
-        hidden?                (:hidden values)
+(defn- check-layer-menu-props
-        blocked?               (:blocked values)
+  [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)
+(mf/defc layer-menu*
-        current-opacity        (opacity->string (:opacity values))
+  {::mf/wrap [#(mf/memo' % check-layer-menu-props)]}
+  [{:keys [ids values]}]
+  (let [hidden?             (get values :hidden)
+        blocked?            (get values :blocked)
 
-        state*                 (mf/use-state
+        current-blend-mode  (or (get values :blend-mode) :normal)
-                                {:selected-blend-mode current-blend-mode
+        current-opacity     (opacity->string (:opacity values))
-                                 :option-highlighted? false
-                                 :preview-complete? true})
 
-        state                  (deref state*)
+        state*              (mf/use-state
-        selected-blend-mode    (get state :selected-blend-mode)
+                             #(do {:selected-blend-mode current-blend-mode
-        option-highlighted?    (get state :option-highlighted?)
+                                   :option-highlighted? false
-        preview-complete?      (get state :preview-complete?)
+                                   :preview-complete? true}))
-        wasm-renderer-enabled? (features/use-feature "render-wasm/v1")
 
-        shapes (->
+        state               (deref state*)
-                (dsh/lookup-page-objects @st/state)
+        selected-blend-mode (get state :selected-blend-mode)
-                (select-keys ids)
+        option-highlighted? (get state :option-highlighted?)
-                vals)
+        preview-complete?   (get state :preview-complete?)
 
-        on-change
+        wasm-renderer-enabled?
-        (mf/use-fn
+        (features/use-feature "render-wasm/v1")
-         (mf/deps ids)
-         (fn [prop value]
-           (st/emit! (dwsh/update-shapes ids #(assoc % prop value)))))
 
         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]

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
+     [:> layer-menu* {:ids ids
-                     :type type
+                      :type type
-                     :values layer-values}]
+                      :values layer-values}]
 
      [:> measures-menu* {:ids ids
                          :type type

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
+     [:> layer-menu* {:ids ids
-                     :type type
+                      :type type
-                     :values layer-values}]
+                      :values layer-values}]
 
      [:> measures-menu* {:ids ids
                          :type type

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
+     [:> layer-menu* {:ids ids
-                     :type shape-type
+                      :type shape-type
-                     :values layer-values}]
+                      :values layer-values}]
      [:> measures-menu* {:ids ids
                          :values measure-values
                          :type shape-type

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

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*

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
+     [:> layer-menu* {:ids ids
-                     :type type
+                      :type type
-                     :values layer-values}]
+                      :values layer-values}]
      [:> measures-menu* {:ids ids
                          :type type
                          :values measure-values

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
+     [:> layer-menu* {:ids ids
-                     :type type
+                      :type type
-                     :values layer-values}]
+                      :values layer-values}]
      [:> measures-menu* {:ids ids
                          :type type
                          :values measure-values

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
+     [:> layer-menu* {:ids ids
-                     :type type
+                      :type type
-                     :values layer-values}]
+                      :values layer-values}]
      [:> measures-menu*
       {:ids ids
        :type type