github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-01 19:06:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

⚡ Reduce watchers for layer-item rename mechanism

Browse Source
This commit is contained in:
Andrey Antukh 2026-02-05 14:47:10 +01:00
parent a080a9e646
commit 8a1fdd9dd1
3 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View File

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

75
frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
View File

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

11
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View File

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