diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index 34ea8c9d74..3062381f69 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/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") diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs index 49f23f6ebc..2c8e78fc57 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs +++ b/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)} "*"])]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index df3f173b6c..35db501e4a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/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")