Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 11:41:47 -05:00
Code Issues Activity

✨ Improvements to performance

Browse source
This commit is contained in:
alonso.torres 2021-01-19 18:44:32 +01:00
parent 9cfefbdb86
commit 27e83342f9
9 changed files with 92 additions and 62 deletions
common/app/common
math.cljc
pages
helpers.cljc
frontend/src/app/main
data/workspace
texts.cljs
store.cljs
ui
context.cljs
workspace
shapes.cljs
shapes
frame.cljstext.cljs
viewport.cljs

4
common/app/common/math.cljc
View file

@ -26,6 +26,10 @@
#?(:cljs (and (not (nil? v)) (js/isFinite v))
:clj (and (not (nil? v)) (Double/isFinite v))))
(defn finite
[v default]
(if (finite? v) v default))
(defn abs
[v]
#?(:cljs (js/Math.abs v)

25
common/app/common/pages/helpers.cljc
View file

@ -88,14 +88,29 @@
[component]
(get-in component [:objects (:id component)]))
;; Implemented with transient for performance
(defn get-children
"Retrieve all children ids recursively for a given object"
[id objects]
;; TODO: find why does this sometimes come as a list instead of vector
(let [shapes (vec (get-in objects [id :shapes]))]
(if shapes
(d/concat shapes (mapcat #(get-children % objects) shapes))
[])))
(loop [result (transient [])
pending (transient [])
next id]
(let [children (get-in objects [next :shapes] [])
length (count children)]
(loop [i 0]
(when (< i length)
(let [child (nth children i)]
(conj! result child)
(conj! pending child)
(recur (inc i))))))
(let [length (count pending)]
(if (not= length 0)
(let [next (get pending (dec length))]
(pop! pending)
(recur result pending next))
(persistent! result)))))
(defn get-children-objects
"Retrieve all children objects recursively for a given object"

9
frontend/src/app/main/data/workspace/texts.cljs
View file

@ -11,6 +11,7 @@
(:require
["slate" :as slate :refer [Editor Node Transforms Text]]
["slate-react" :as rslate]
[app.common.math :as mth]
[app.common.attrs :as attrs]
[app.common.geom.shapes :as gsh]
[app.common.pages :as cp]
@ -217,6 +218,9 @@
(= (-> selected first :type) :text))
(assoc-in [:workspace-local :edition] (-> selected first :id)))))))
(defn not-changed? [old-dim new-dim]
(> (mth/abs (- old-dim new-dim)) 0.1))
(defn resize-text [id new-width new-height]
(ptk/reify ::resize-text
ptk/WatchEvent
@ -238,12 +242,13 @@
(and (= :fixed grow-type) overflow-text (<= new-height shape-height))
(conj (update-overflow-text id false))
(and (or (not= shape-width new-width) (not= shape-height new-height))
(and (or (not-changed? shape-width new-width) (not-changed? shape-height new-height))
(= grow-type :auto-width))
(conj (dwt/update-dimensions [id] :width new-width)
(dwt/update-dimensions [id] :height new-height))
(and (not= shape-height new-height) (= grow-type :auto-height))
(and (not-changed? shape-height new-height)
(= grow-type :auto-height))
(conj (dwt/update-dimensions [id] :height new-height)))]
(if (not (empty? events))

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

@ -13,6 +13,7 @@
[cuerdas.core :as str]
[app.common.data :as d]
[app.common.pages :as cp]
[app.common.pages.helpers :as helpers]
[app.common.uuid :as uuid]
[app.util.storage :refer [storage]]
[app.util.debug :refer [debug? debug-exclude-events logjs]]))

1
frontend/src/app/main/ui/context.cljs
View file

@ -14,6 +14,7 @@
(def embed-ctx (mf/create-context false))
(def render-ctx (mf/create-context nil))
(def def-ctx (mf/create-context false))
(def ghost-ctx (mf/create-context false))
(def current-route (mf/create-context nil))
(def current-team-id (mf/create-context nil))

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

@ -21,6 +21,7 @@
[app.main.streams :as ms]
[app.main.ui.cursors :as cur]
[app.main.ui.hooks :as hooks]
[app.main.ui.context :as muc]
[app.main.ui.shapes.circle :as circle]
[app.main.ui.shapes.image :as image]
[app.main.ui.shapes.rect :as rect]
@ -52,12 +53,9 @@
false
(let [o-shape (obj/get op "shape")
n-frame (obj/get np "frame")
o-frame (obj/get op "frame")
n-ghost (obj/get np "ghost?")
o-ghost (obj/get op "ghost?")]
o-frame (obj/get op "frame")]
(and (identical? n-shape o-shape)
(identical? n-frame o-frame)
(identical? n-ghost o-ghost))))))
(identical? n-frame o-frame))))))
(defn make-is-moving-ref
[id]
@ -73,7 +71,7 @@
[props]
(let [shape (obj/get props "shape")
frame (obj/get props "frame")
ghost? (obj/get props "ghost?")
ghost? (mf/use-ctx muc/ghost-ctx)
shape (-> (geom/transform-shape shape)
(geom/translate-to-frame frame))
opts #js {:shape shape
@ -84,14 +82,14 @@
moving-iref (mf/use-memo (mf/deps (:id shape)) (make-is-moving-ref (:id shape)))
moving? (mf/deref moving-iref)
svg-element? (and (= (:type shape) :svg-raw)
(not= :svg (get-in shape [:content :tag])))]
(not= :svg (get-in shape [:content :tag])))
hide-moving? (and (not ghost?) moving?)]
(when (and shape
(or ghost? (not moving?))
(not (:hidden shape)))
(when (and shape (not (:hidden shape)))
[:*
(if-not svg-element?
[:g.shape-wrapper {:style {:cursor (if alt? cur/duplicate nil)}}
[:g.shape-wrapper {:style {:display (when hide-moving? "none")
:cursor (if alt? cur/duplicate nil)}}
(case (:type shape)
:path [:> path/path-wrapper opts]
:text [:> text/text-wrapper opts]

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

@ -22,7 +22,8 @@
[app.util.timers :as ts]
[beicon.core :as rx]
[okulary.core :as l]
[rumext.alpha :as mf]))
[rumext.alpha :as mf]
[app.main.ui.context :as muc]))
(defn- frame-wrapper-factory-equals?
[np op]
@ -100,14 +101,15 @@
(mf/fnc deferred
{::mf/wrap-props false}
[props]
(let [tmp (mf/useState false)
(let [ghost? (mf/use-ctx muc/ghost-ctx)
tmp (mf/useState false)
^boolean render? (aget tmp 0)
^js set-render (aget tmp 1)]
(mf/use-layout-effect
(fn []
(let [sem (ts/schedule-on-idle #(set-render true))]
#(rx/dispose! sem))))
(if (unchecked-get props "ghost?")
(if ghost?
(mf/create-element component props)
(when render? (mf/create-element component props))))))
@ -120,7 +122,7 @@
[props]
(let [shape (unchecked-get props "shape")
objects (unchecked-get props "objects")
ghost? (unchecked-get props "ghost?")
ghost? (mf/use-ctx muc/ghost-ctx)
moving-iref (mf/use-memo (mf/deps (:id shape))
#(make-is-moving-ref (:id shape)))
@ -136,15 +138,16 @@
handle-context-menu (we/use-context-menu shape)
handle-double-click (use-select-shape shape)
handle-mouse-down (we/use-mouse-down shape)]
handle-mouse-down (we/use-mouse-down shape)
(when (and shape
(or ghost? (not moving?))
(not (:hidden shape)))
[:g {:class (when selected? "selected")
:on-context-menu handle-context-menu
:on-double-click handle-double-click
:on-mouse-down handle-mouse-down}
hide-moving? (and (not ghost?) moving?)]
(when (and shape (not (:hidden shape)))
[:g.frame-wrapper {:class (when selected? "selected")
:style {:display (when hide-moving? "none")}
:on-context-menu handle-context-menu
:on-double-click handle-double-click
:on-mouse-down handle-mouse-down}
[:& frame-title {:frame shape}]

19
frontend/src/app/main/ui/workspace/shapes/text.cljs
View file

@ -49,6 +49,7 @@
{::mf/wrap-props false}
[props]
(let [{:keys [id name x y width height grow-type] :as shape} (unchecked-get props "shape")
ghost? (mf/use-ctx muc/ghost-ctx)
selected-iref (mf/use-memo (mf/deps (:id shape))
#(refs/make-selected-ref (:id shape)))
selected? (mf/deref selected-iref)
@ -73,14 +74,15 @@
(mf/use-callback
(mf/deps id)
(fn [entries]
(when (seq entries)
(when (and (not ghost?) (seq entries))
;; RequestAnimationFrame so the "loop limit error" error is not thrown
;; https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded
(timers/raf
#(let [width (obj/get-in entries [0 "contentRect" "width"])
height (obj/get-in entries [0 "contentRect" "height"])]
(log/debug :msg "Resize detected" :shape-id id :width width :height height)
(st/emit! (dwt/resize-text id (mth/ceil width) (mth/ceil height))))))))
(when (and (not (mth/almost-zero? width)) (not (mth/almost-zero? height)))
(do (log/debug :msg "Resize detected" :shape-id id :width width :height height)
(st/emit! (dwt/resize-text id (mth/ceil width) (mth/ceil height))))))))))
text-ref-cb
(mf/use-callback
@ -96,11 +98,12 @@
(mf/use-effect
(mf/deps @paragraph-ref handle-resize-text grow-type)
(fn []
(when-let [paragraph-node @paragraph-ref]
(let [observer (js/ResizeObserver. handle-resize-text)]
(log/debug :msg "Attach resize observer" :shape-id id :shape-name name)
(.observe observer paragraph-node)
#(.disconnect observer)))))
(when (not ghost?)
(when-let [paragraph-node @paragraph-ref]
(let [observer (js/ResizeObserver. handle-resize-text)]
(log/debug :msg "Attach resize observer" :shape-id id :shape-name name)
(.observe observer paragraph-node)
#(.disconnect observer))))))
[:> shape-container {:shape shape}

48
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -162,7 +162,6 @@
(let [hover (unchecked-get props "hover")
selected (unchecked-get props "selected")
ids (unchecked-get props "ids")
ghost? (unchecked-get props "ghost?")
edition (unchecked-get props "edition")
data (mf/deref refs/workspace-page)
objects (:objects data)
@ -180,17 +179,14 @@
(if (= (:type item) :frame)
[:& frame-wrapper {:shape item
:key (:id item)
:objects objects
:ghost? ghost?}]
:objects objects}]
[:& shape-wrapper {:shape item
:key (:id item)
:ghost? ghost?}]))]
:key (:id item)}]))]
(when (not ghost?)
[:& shape-outlines {:objects objects
:selected selected
:hover hover
:edition edition}])]))
[:& shape-outlines {:objects objects
:selected selected
:hover hover
:edition edition}]]))
(mf/defc ghost-frames
{::mf/wrap-props false}
@ -206,18 +202,22 @@
(map gsh/transform-shape))
selrect (->> (into [] xf sobjects)
(gsh/selection-rect))]
[:svg.ghost
{:x (:x selrect)
:y (:y selrect)
:width (:width selrect)
:height (:height selrect)
:style {:pointer-events "none"}}
(gsh/selection-rect))
[:g {:transform (str/fmt "translate(%s,%s)" (- (:x selrect-orig)) (- (:y selrect-orig)))}
[:& frames
{:ids selected
:ghost? true}]]]))
transform (when (and (mth/finite? (:x selrect-orig))
(mth/finite? (:y selrect-orig)))
(str/fmt "translate(%s,%s)" (- (:x selrect-orig)) (- (:y selrect-orig))))]
[:& (mf/provider ctx/ghost-ctx) {:value true}
[:svg.ghost
{:x (mth/finite (:x selrect) 0)
:y (mth/finite (:y selrect) 0)
:width (mth/finite (:width selrect) 100)
:height (mth/finite (:height selrect) 100)
:style {:pointer-events "none"}}
[:g {:transform transform}
[:& frames
{:ids selected}]]]]))
(defn format-viewbox [vbox]
(str/join " " [(+ (:x vbox 0) (:left-offset vbox 0))
@ -655,9 +655,9 @@
:selected selected
:edition edition}]
(when (= :move (:transform local))
[:& ghost-frames {:modifiers (:modifiers local)
:selected selected}])
[:g {:style {:display (when (not= :move (:transform local)) "none")}}
[:& ghost-frames {:modifiers (:modifiers local)
:selected selected}]]
(when (seq selected)
[:& selection-handlers {:selected selected