3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-23 05:57:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Improved frame defered handling

Browse source
This commit is contained in:
alonso.torres 2021-11-24 16:00:05 +01:00
parent 2b32e864fd
commit 9024408ed2
10 changed files with 234 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -207,21 +207,26 @@
modifiers (assoc modifiers :ignore-geometry? ignore-geometry?)
set-child (fn [modif-tree child]
(let [child-modifiers (gsh/calc-child-modifiers shape
child
modifiers
ignore-constraints)]
(set-modifiers-recursive modif-tree
objects
child
child-modifiers
root
transformed-root
ignore-constraints)))]
(reduce set-child
(assoc-in modif-tree [(:id shape) :modifiers] modifiers)
children)))
transformed-rect (gsh/calc-transformed-parent-rect shape modifiers)
set-child
(fn [modif-tree child]
(let [child-modifiers
(gsh/calc-child-modifiers shape child modifiers ignore-constraints transformed-rect)]
(set-modifiers-recursive modif-tree
objects
child
child-modifiers
root
transformed-root
ignore-constraints)))
modif-tree
(-> modif-tree
(assoc-in [(:id shape) :modifiers] modifiers))]
(reduce set-child modif-tree children)))
(defn- check-delta
"If the shape is a component instance, check its relative position respect the

1
frontend/src/app/main/refs.cljs
View file

@ -241,6 +241,7 @@
(fn [state]
(let [objects (wsh/lookup-page-objects state)
modifiers (:workspace-modifiers state)
;; FIXME: Improve performance
objects (cond-> objects
with-modifiers?
(gsh/merge-modifiers modifiers))

39
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -51,32 +51,45 @@
;; DEBUG
:style {:filter (when (debug? :thumbnails) "sepia(1)")}}])))
;; This custom deferred don't defer rendering when ghost rendering is
(mf/defc frame-placeholder
{::mf/wrap-props false}
[props]
(let [{:keys [x y width height fill-color] :as shape} (obj/get props "shape")]
(if (some? (:thumbnail shape))
[:& thumbnail {:shape shape}]
[:rect {:x x :y y :width width :height height :style {:fill (or fill-color "white")}}])))
;; used.
(defn custom-deferred
[component]
(mf/fnc deferred
{::mf/wrap-props false}
[props]
(let [shape (obj/get props "shape")
shape (-> (select-keys shape [:selrect])
(let [shape (-> (obj/get props "shape")
(select-keys [:x :y :width :height])
(hooks/use-equal-memo))
tmp (mf/useState false)
^boolean render? (aget tmp 0)
^js set-render (aget tmp 1)]
^js set-render (aget tmp 1)
prev-shape-ref (mf/use-ref shape)]
(mf/use-layout-effect
(mf/use-effect
(mf/deps shape)
(fn []
(mf/set-ref-val! prev-shape-ref shape)
(set-render false)))
(mf/use-layout-effect
(mf/deps shape)
(mf/use-effect
(mf/deps render? shape)
(fn []
(let [sem (ts/schedule-on-idle #(set-render true))]
#(rx/dispose! sem))))
(when render? (mf/create-element component props)))))
(when-not render?
(let [sem (ts/schedule-on-idle #(set-render true))]
#(rx/dispose! sem)))))
(if (and render? (= shape (mf/ref-val prev-shape-ref)))
(mf/create-element component props)
(mf/create-element frame-placeholder props)))))
(defn frame-wrapper-factory
[shape-wrapper]
@ -90,9 +103,11 @@
thumbnail? (unchecked-get props "thumbnail?")
shape (gsh/transform-shape shape)
children (mapv #(get objects %) (:shapes shape))
children (-> (mapv #(get objects %) (:shapes shape))
(hooks/use-equal-memo))
all-children (cp/get-children-objects (:id shape) objects)
all-children (-> (cp/get-children-objects (:id shape) objects)
(hooks/use-equal-memo))
rendered? (mf/use-state false)

7
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -188,7 +188,7 @@
(reduce extract-attrs [[] []] shapes)))
(mf/defc options
{::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "shapes-with-children"]))]
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "shapes-with-children"]))]
::mf/wrap-props false}
[props]
(let [shapes (unchecked-get props "shapes")
@ -203,7 +203,10 @@
[shadow-ids shadow-values] (get-attrs shapes objects :shadow)
[blur-ids blur-values] (get-attrs shapes objects :blur)
[stroke-ids stroke-values] (get-attrs shapes objects :stroke)
[text-ids text-values] (get-attrs shapes objects :text)]
;; FIXME: Improve performance
[text-ids text-values] (get-attrs shapes objects :text)
]
[:div.options
(when-not (empty? measure-ids)