⚡ Reduce watchers for layer-item rename mechanism

frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs

@@ -53,7 +53,7 @@
            (apply st/emit! (map dw/highlight-shape enter))))))))
 
 (mf/defc layer-item-inner*
-  [{:keys [item depth parent-size name-ref children ref style
+  [{:keys [item depth parent-size name-ref children ref style rename-id
            ;; Flags
            is-read-only is-highlighted is-selected is-component-tree
            is-filtered is-expanded dnd-over dnd-over-top dnd-over-bot hide-toggle
@@ -143,6 +143,7 @@
            [:> icon* {:icon-id icon-shape :size "s" :data-testid (str "icon-" icon-shape)}]]])
 
        [:> layer-name* {:ref name-ref
+                        :rename-id rename-id
                         :shape-id id
                         :shape-name name
                         :is-shape-touched touched?
@@ -161,7 +162,7 @@
                         :variant-error variant-error
                         :component-id (:id component)
                         :is-hidden hidden?}]]
-      (when (not is-read-only)
+      (when (not ^boolean is-read-only)
         [:div {:class (stl/css-case
                        :element-actions true
                        :is-parent has-shapes?
@@ -188,7 +189,7 @@
 
 (mf/defc layer-item*
   {::mf/wrap [mf/memo]}
-  [{:keys [index item selected objects
+  [{:keys [index item selected objects rename-id
            is-sortable is-filtered depth is-component-child
            highlighted style render-children parent-size]
     :or {render-children true}}]
@@ -507,6 +508,7 @@
       :depth depth
       :parent-size parent-size
       :name-ref name-node-ref
+      :rename-id rename-id
       :is-read-only is-read-only
       :is-highlighted is-highlighted
       :is-selected is-selected
@@ -539,6 +541,7 @@
         (for [item (take children-count shapes)]
           [:> layer-item*
            {:item item
+            :rename-id rename-id
             :highlighted highlighted
             :selected selected
             :index (unchecked-get item "__$__counter")

frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs

@@ -16,38 +16,35 @@
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [cuerdas.core :as str]
-   [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def ^:private space-for-icons 110)
-
-(def lens:shape-for-rename
-  (-> #(dm/get-in % [:workspace-local :shape-for-rename])
-      (l/derived st/state)))
+(def ^:private ^:const space-for-icons 110)
 
 (mf/defc layer-name*
-  {::mf/forward-ref true}
-  [{:keys [shape-id shape-name is-shape-touched disabled-double-click
+  [{:keys [shape-id rename-id shape-name is-shape-touched disabled-double-click
            on-start-edit on-stop-edit depth parent-size is-selected
            type-comp type-frame component-id is-hidden is-blocked
-           variant-id variant-name variant-properties variant-error]} external-ref]
+           variant-id variant-name variant-properties variant-error ref]}]
+
   (let [edition*         (mf/use-state false)
         edition?         (deref edition*)
 
         local-ref        (mf/use-ref)
-        ref              (d/nilv external-ref local-ref)
+        ref              (d/nilv ref local-ref)
 
-        shape-for-rename (mf/deref lens:shape-for-rename)
+        shape-name
+        (if variant-id
+          (d/nilv variant-error variant-name)
+          shape-name)
 
-        shape-name       (if variant-id
-                           (d/nilv variant-error variant-name)
-                           shape-name)
+        default-value
+        (mf/with-memo [variant-id variant-error variant-properties]
+          (if variant-id
+            (or variant-error (ctv/properties-map->formula variant-properties))
+            shape-name))
 
-        default-value    (if variant-id
-                           (or variant-error (ctv/properties-map->formula variant-properties))
-                           shape-name)
-
-        has-path?        (str/includes? shape-name "/")
+        has-path?
+        (str/includes? shape-name "/")
 
         start-edit
         (mf/use-fn
@@ -84,10 +81,11 @@
            (when (kbd/enter? event) (accept-edit))
            (when (kbd/esc? event) (cancel-edit))))
 
-        parent-size (dm/str (- parent-size space-for-icons) "px")]
+        parent-size
+        (dm/str (- parent-size space-for-icons) "px")]
 
-    (mf/with-effect [shape-for-rename edition? start-edit shape-id]
-      (when (and (= shape-for-rename shape-id)
+    (mf/with-effect [rename-id edition? start-edit shape-id]
+      (when (and (= rename-id shape-id)
                  (not ^boolean edition?))
         (start-edit)))
 
@@ -109,21 +107,24 @@
         :auto-focus true
         :id (dm/str "layer-name-" shape-id)
         :default-value (d/nilv default-value "")}]
+
       [:*
-       [:span
-        {:class (stl/css-case
-                 :element-name true
-                 :left-ellipsis has-path?
-                 :selected is-selected
-                 :hidden is-hidden
-                 :type-comp type-comp
-                 :type-frame type-frame)
-         :id (dm/str "layer-name-" shape-id)
-         :style {"--depth" depth "--parent-size" parent-size}
-         :ref ref
-         :on-double-click start-edit}
-        (if (dbg/enabled? :show-ids)
-          (str (d/nilv shape-name "") " | " (str/slice (str shape-id) 24))
+       [:span {:class (stl/css-case
+                       :element-name true
+                       :left-ellipsis has-path?
+                       :selected is-selected
+                       :hidden is-hidden
+                       :type-comp type-comp
+                       :type-frame type-frame)
+               :id (dm/str "layer-name-" shape-id)
+               :style {"--depth" depth "--parent-size" parent-size}
+               :ref ref
+               :on-double-click start-edit}
+
+        (if ^boolean (dbg/enabled? :show-ids)
+          (dm/str (d/nilv shape-name "") " | " (str/slice (str shape-id) 24))
           (d/nilv shape-name ""))]
-       (when (and (dbg/enabled? :show-touched) ^boolean is-shape-touched)
+
+       (when (and ^boolean (dbg/enabled? :show-touched)
+                  ^boolean is-shape-touched)
          [:span {:class (stl/css :element-name-touched)} "*"])])))

frontend/src/app/main/ui/workspace/sidebar/layers.cljs

@@ -35,13 +35,16 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def ^:private highlighted-shapes-ref
+(def ^:private ref:highlighted-shapes
   (l/derived (fn [local]
                (-> local
                    (get :highlighted)
                    (not-empty)))
              refs/workspace-local))
 
+(def ^:private ref:shape-for-rename
+  (l/derived (l/key :shape-for-rename) refs/workspace-local))
+
 (defn- use-selected-shapes
   "A convencience hook wrapper for get selected shapes"
   []
@@ -80,9 +83,11 @@
   {::mf/wrap [mf/memo]}
   [{:keys [objects is-filtered parent-size] :as props}]
   (let [selected    (use-selected-shapes)
-        highlighted (mf/deref highlighted-shapes-ref)
+        highlighted (mf/deref ref:highlighted-shapes)
         root        (get objects uuid/zero)
 
+        rename-id   (mf/deref ref:shape-for-rename)
+
         shapes      (get root :shapes)
         shapes      (mf/with-memo [shapes objects]
                       (loop [counter 0
@@ -115,6 +120,7 @@
         (if (cfh/frame-shape? obj)
           [:> frame-wrapper*
            {:item obj
+            :rename-id rename-id
             :selected selected
             :highlighted highlighted
             :index (unchecked-get obj "__$__counter")
@@ -126,6 +132,7 @@
             :depth -1}]
           [:> layer-item*
            {:item obj
+            :rename-id rename-id
             :selected selected
             :highlighted highlighted
             :index (unchecked-get obj "__$__counter")