Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

⚡ Throttle layers rendering.

Browse source
This commit is contained in:
Andrey Antukh 2020-05-01 18:57:09 +02:00
parent 2ac8d68e01
commit df8451c4e3
1 changed files with 24 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

@ -19,10 +19,11 @@
[uxbox.main.data.workspace :as dw]
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.ui.components.defer :refer [deferred]]
[uxbox.main.ui.components.defer :refer [throttle deferred]]
[uxbox.main.ui.hooks :as hooks]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.shapes.icon :as icon]
[uxbox.util.object :as obj]
[uxbox.util.dom :as dom]
[uxbox.util.timers :as ts]
[uxbox.util.i18n :as i18n :refer [t]]
@ -237,24 +238,11 @@
[props]
[:> layer-item props])
(def ^:private layers-objects
(letfn [(strip-data [obj]
(select-keys obj [:id :name :blocked :hidden :shapes :type]))
(selector [{:keys [objects] :as data}]
(persistent!
(reduce-kv (fn [res id obj]
(assoc! res id (strip-data obj)))
(transient {})
objects)))]
(l/derived selector refs/workspace-data =)))
(mf/defc layers-tree
{::mf/wrap [mf/memo]}
[]
{::mf/wrap [#(mf/memo % =)]}
[{:keys [objects] :as props}]
(let [selected (mf/deref refs/selected-shapes)
objects (mf/deref layers-objects)
root (get objects uuid/zero)]
;; [:& perf/profiler {:label "layers-tree" :enabled false}
[:ul.element-list
(for [[index id] (reverse (d/enumerate (:shapes root)))]
(let [obj (get objects id)]
@ -272,16 +260,30 @@
:objects objects
:key id}])))]))
(defn- strip-objects
[objects]
(let [strip-data #(select-keys % [:id :name :blocked :hidden :shapes :type])]
(persistent!
(reduce-kv (fn [res id obj]
(assoc! res id (strip-data obj)))
(transient {})
objects))))
(mf/defc layers-tree-wrapper
{::mf/wrap-props false
::mf/wrap [#(throttle % 200) mf/memo]}
[props]
(let [objects (obj/get props "objects")
objects (strip-objects objects)]
[:& layers-tree {:objects objects}]))
;; --- Layers Toolbox
;; NOTE: we need to consider using something like react window for
;; only render visible items instead of all.
(mf/defc layers-toolbox
{:wrap [mf/memo]}
[{:keys [page] :as props}]
(let [locale (i18n/use-locale)
(let [locale (mf/deref i18n/locale)
data (mf/deref refs/workspace-data)
on-click #(st/emit! (dw/toggle-layout-flag :layers))]
[:div#layers.tool-window
[:div.tool-window-bar
@ -289,4 +291,5 @@
[:span (:name page)]
#_[:div.tool-window-close {:on-click on-click} i/close]]
[:div.tool-window-content
[:& layers-tree {:key (:id page)}]]]))
[:& layers-tree-wrapper {:key (:id page)
:objects (:objects data)}]]]))