3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add performance improvements to layer-name component

Browse source
This commit is contained in:
Andrey Antukh 2023-05-30 11:58:28 +02:00
parent 6a1c32bb71
commit 0102ca1bcf
2 changed files with 74 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View file

@ -245,8 +245,10 @@
[:& sic/element-icon-refactor {:shape item [:& sic/element-icon-refactor {:shape item
:main-instance? main-instance?}]]]) :main-instance? main-instance?}]]])
[:& layer-name {:shape item [:& layer-name {:ref ref
:name-ref ref :shape-id (:id item)
:shape-name (:name item)
:shape-touched? (boolean (seq (:touched item)))
:disabled-double-click workspace-read-only? :disabled-double-click workspace-read-only?
:on-start-edit #(reset! disable-drag true) :on-start-edit #(reset! disable-drag true)
:on-stop-edit #(reset! disable-drag false) :on-stop-edit #(reset! disable-drag false)
@ -255,7 +257,7 @@
:selected? selected? :selected? selected?
:type-comp component-tree? :type-comp component-tree?
:type-frame (= :frame (:type item)) :type-frame (= :frame (:type item))
:hidden (:hidden item)}] :hidden? (:hidden item)}]
[:div {:class (dom/classnames (css :element-actions) true [:div {:class (dom/classnames (css :element-actions) true
(css :is-parent) (:shapes item) (css :is-parent) (:shapes item)
(css :selected) (:hidden item) (css :selected) (:hidden item)
@ -310,15 +312,17 @@
[:div.absolute i/position-absolute]) [:div.absolute i/position-absolute])
[:& si/element-icon {:shape item [:& si/element-icon {:shape item
:main-instance? main-instance?}]] :main-instance? main-instance?}]]
[:& layer-name {:shape item [:& layer-name {:ref ref
:name-ref ref :shape-id (:id item)
:disabled-double-click workspace-read-only? :shape-name (:name item)
:shape-touched? (boolean (seq (:touched item)))
:on-start-edit #(reset! disable-drag true) :on-start-edit #(reset! disable-drag true)
:on-stop-edit #(reset! disable-drag false) :on-stop-edit #(reset! disable-drag false)
:disabled-double-click workspace-read-only?
:selected? selected? :selected? selected?
:type-comp component-tree? :type-comp component-tree?
:type-frame (= :frame (:type item)) :type-frame (= :frame (:type item))
:hidden (:hidden item)}] :hidden? (:hidden item)}]
[:div.element-actions {:class (when (:shapes item) "is-parent")} [:div.element-actions {:class (when (:shapes item) "is-parent")}
[:div.toggle-element {:class (when (:hidden item) "selected") [:div.toggle-element {:class (when (:hidden item) "selected")

103
frontend/src/app/main/ui/workspace/sidebar/layer_name.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.layer-name (ns app.main.ui.workspace.sidebar.layer-name
(:require-macros [app.main.style :refer [css]]) (:require-macros [app.main.style :refer [css]])
(:require (:require
[app.common.data.macros :as dm]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
@ -16,73 +17,95 @@
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def shape-for-rename-ref (def ^:private space-for-icons 110)
(l/derived (l/in [:workspace-local :shape-for-rename]) st/state))
(def lens:shape-for-rename
(-> (l/in [:workspace-local :shape-for-rename])
(l/derived st/state)))
(mf/defc layer-name (mf/defc layer-name
[{:keys [shape on-start-edit disabled-double-click on-stop-edit name-ref depth parent-size selected? type-comp type-frame hidden] :as props}] {::mf/wrap-props false
(let [local (mf/use-state {}) ::mf/forward-ref true}
shape-for-rename (mf/deref shape-for-rename-ref) [{:keys [shape-id shape-name shape-touched? disabled-double-click
on-start-edit on-stop-edit depth parent-size selected?
type-comp type-frame hidden?]} external-ref]
(let [edition* (mf/use-state false)
edition? (deref edition*)
local-ref (mf/use-ref)
ref (or external-ref local-ref)
shape-for-rename (mf/deref lens:shape-for-rename)
new-css-system (mf/use-ctx ctx/new-css-system) new-css-system (mf/use-ctx ctx/new-css-system)
start-edit (fn [] start-edit
(when (not disabled-double-click) (mf/use-fn
(on-start-edit) (mf/deps disabled-double-click on-start-edit shape-id)
(swap! local assoc :edition true) (fn []
(st/emit! (dw/start-rename-shape (:id shape))))) (when (not disabled-double-click)
(on-start-edit)
(reset! edition* true)
(st/emit! (dw/start-rename-shape shape-id)))))
accept-edit (fn [] accept-edit
(let [name-input (mf/ref-val name-ref) (mf/use-fn
name (str/trim (dom/get-value name-input))] (mf/deps on-stop-edit)
(on-stop-edit) (fn []
(swap! local assoc :edition false) (let [name-input (mf/ref-val ref)
(st/emit! (dw/end-rename-shape name)))) name (str/trim (dom/get-value name-input))]
(on-stop-edit)
(reset! edition* false)
(st/emit! (dw/end-rename-shape name)))))
cancel-edit (fn [] cancel-edit
(on-stop-edit) (mf/use-fn
(swap! local assoc :edition false) (mf/deps on-stop-edit)
(st/emit! (dw/end-rename-shape nil))) (fn []
(on-stop-edit)
(reset! edition* false)
(st/emit! (dw/end-rename-shape nil))))
on-key-down (fn [event] on-key-down
(when (kbd/enter? event) (accept-edit)) (mf/use-fn
(when (kbd/esc? event) (cancel-edit))) (mf/deps accept-edit cancel-edit)
(fn [event]
(when (kbd/enter? event) (accept-edit))
(when (kbd/esc? event) (cancel-edit))))
space-for-icons 110 parent-size (dm/str (- parent-size space-for-icons) "px")]
parent-size (str (- parent-size space-for-icons) "px")]
(mf/with-effect [shape-for-rename] (mf/with-effect [shape-for-rename edition? start-edit shape-id]
(when (and (= shape-for-rename (:id shape)) (when (and (= shape-for-rename shape-id)
(not (:edition @local))) (not ^boolean edition?))
(start-edit))) (start-edit)))
(mf/with-effect [(:edition @local)] (mf/with-effect [edition?]
(when (:edition @local) (when edition?
(let [name-input (mf/ref-val name-ref)] (some-> (mf/ref-val ref) dom/select-text!)
(dom/select-text! name-input) nil))
nil)))
(if (:edition @local) (if ^boolean edition?
[:input [:input
{:class (if new-css-system {:class (if new-css-system
(dom/classnames (css :element-name-input) true) (dom/classnames (css :element-name-input) true)
(dom/classnames :element-name true)) (dom/classnames :element-name true))
:style #js {"--depth" depth "--parent-size" parent-size} :style #js {"--depth" depth "--parent-size" parent-size}
:type "text" :type "text"
:ref name-ref :ref ref
:on-blur accept-edit :on-blur accept-edit
:on-key-down on-key-down :on-key-down on-key-down
:auto-focus true :auto-focus true
:default-value (:name shape "")}] :default-value (or shape-name "")}]
[:span [:span
{:class (if new-css-system {:class (if new-css-system
(dom/classnames (css :element-name) true (dom/classnames (css :element-name) true
(css :selected) selected? (css :selected) selected?
(css :hidden) hidden (css :hidden) hidden?
(css :type-comp) type-comp (css :type-comp) type-comp
(css :type-frame) type-frame) (css :type-frame) type-frame)
(dom/classnames :element-name true)) (dom/classnames :element-name true))
:style #js {"--depth" depth "--parent-size" parent-size} :style #js {"--depth" depth "--parent-size" parent-size}
:ref name-ref :ref ref
:on-double-click start-edit} :on-double-click start-edit}
(:name shape "") (or shape-name "")
(when (seq (:touched shape)) " *")]))) (when ^boolean shape-touched? " *")])))