mirror of
https://github.com/penpot/penpot.git
synced 2025-06-03 17:11:39 +02:00
🚧 Experimenting with some performance improvements.
This commit is contained in:
Andrey Antukh
parent
31ffa73bda
commit
4cf7a48567
16 changed files with 299 additions and 267 deletions
|
|
@ -30,12 +30,39 @@
|
|||
:image [:& image/image-component {:shape shape}]
|
||||
:circle [:& circle/circle-component {:shape shape}])))
|
||||
|
||||
(mf/defc render-shape'
|
||||
{:wrap [mf/wrap-memo]}
|
||||
[{:keys [shape] :as props}]
|
||||
(render-shape shape))
|
||||
|
||||
(mf/defc shape-component
|
||||
{:wrap [mf/wrap-memo]}
|
||||
[{:keys [id] :as props}]
|
||||
(let [shape-iref (mf/use-memo {:deps #js [id]
|
||||
:fn #(-> (l/in [:shapes id])
|
||||
(l/derive st/state))})]
|
||||
(when-let [shape (mf/deref shape-iref)]
|
||||
(when-not (:hidden shape)
|
||||
(render-shape shape)))))
|
||||
(uxbox.util.perf/with-measure ::foobar
|
||||
(let [shape-iref (mf/use-memo {:deps #js [id]
|
||||
:fn #(-> (l/in [:shapes id])
|
||||
(l/derive st/state))})]
|
||||
(when-let [shape (mf/deref shape-iref)]
|
||||
(when-not (:hidden shape)
|
||||
(mf/html
|
||||
[:& render-shape' {:shape shape}]))))))
|
||||
|
||||
(mf/defc shape-component'
|
||||
{:wrap [mf/wrap-memo]}
|
||||
[{:keys [shape] :as props}]
|
||||
(when (and shape (not (:hidden shape)))
|
||||
[:& render-shape' {:shape shape}]))
|
||||
|
||||
(def ^:private shapes-iref
|
||||
(-> (l/key :shapes)
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc all-shapes
|
||||
{:wrap [mf/wrap-memo]}
|
||||
[{:keys [page] :as props}]
|
||||
(let [shapes-by-id (mf/deref shapes-iref)
|
||||
shapes (map #(get shapes-by-id %) (:shapes page))]
|
||||
[:*
|
||||
(for [item shapes]
|
||||
[:& shape-component' {:shape item :key (:id item)}])]))
|
||||
|
||||
|
|
|
|||
|
|
@ -18,31 +18,21 @@
|
|||
|
||||
;; --- Shape Movement (by mouse)
|
||||
|
||||
(defn start-move
|
||||
[id]
|
||||
{:pre [(uuid? id)]}
|
||||
(reify
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
flags (get-in state [:workspace pid :flags])
|
||||
stoper (rx/filter uws/mouse-up? stream)]
|
||||
(rx/concat
|
||||
(when (refs/alignment-activated? flags)
|
||||
(rx/of (dw/initial-shape-align id)))
|
||||
(->> uws/mouse-position-deltas
|
||||
(rx/map #(dw/apply-temporal-displacement id %))
|
||||
(rx/take-until stoper))
|
||||
(rx/of (dw/materialize-current-modifier id)
|
||||
(dw/rehash-shape-relationship id)))))))
|
||||
|
||||
(def start-move-selected
|
||||
(reify
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
selected (get-in state [:workspace pid :selected])]
|
||||
(rx/from-coll (map start-move selected))))))
|
||||
flags (get-in state [:workspace pid :flags])
|
||||
selected (get-in state [:workspace pid :selected])
|
||||
stoper (rx/filter uws/mouse-up? stream)]
|
||||
(rx/concat
|
||||
(when (refs/alignment-activated? flags)
|
||||
(rx/of (dw/initial-selection-align selected)))
|
||||
(->> uws/mouse-position-deltas
|
||||
(rx/map #(dw/apply-temporal-displacement-in-bulk selected %))
|
||||
(rx/take-until stoper))
|
||||
(rx/of (dw/materialize-current-modifier-in-bulk selected)))))))
|
||||
|
||||
(defn on-mouse-down
|
||||
[event {:keys [id type] :as shape} selected]
|
||||
|
|
|
|||
|
|
@ -55,9 +55,9 @@
|
|||
|
||||
props {:x x1 :y y1
|
||||
:id (str "shape-" id)
|
||||
:class-name (classnames :move-cursor moving?)
|
||||
:className (classnames :move-cursor moving?)
|
||||
:width width
|
||||
:height height
|
||||
:transform transform}
|
||||
attrs (merge (attrs/extract-style-attrs shape) props)]
|
||||
[:> :rect (normalize-props attrs)]))
|
||||
[:& "rect" attrs]))
|
||||
|
|
|
|||
|
|
@ -36,27 +36,6 @@
|
|||
(declare handle-finish-drawing)
|
||||
(declare conditional-align)
|
||||
|
||||
(defn start-drawing
|
||||
[type]
|
||||
{:pre [(keyword? type)]}
|
||||
(let [id (gensym "drawing")]
|
||||
(reify
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update-in state [:workspace :drawing-lock] #(if (nil? %) id %)))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
lock (get-in state [:workspace :drawing-lock])]
|
||||
(if (= lock id)
|
||||
(rx/merge
|
||||
(->> (rx/filter #(= % handle-finish-drawing) stream)
|
||||
(rx/take 1)
|
||||
(rx/map (fn [_] #(update % :workspace dissoc :drawing-lock))))
|
||||
(rx/of (handle-drawing type)))
|
||||
(rx/empty)))))))
|
||||
|
||||
(def ^:private minimal-shapes
|
||||
[{:type :rect
|
||||
:name "Rect"
|
||||
|
|
@ -87,6 +66,27 @@
|
|||
:name "Text"
|
||||
:content "Type your text here"}])
|
||||
|
||||
(defn start-drawing
|
||||
[type]
|
||||
{:pre [(keyword? type)]}
|
||||
(let [id (gensym "drawing")]
|
||||
(ptk/reify ::start-drawing
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update-in state [:workspace :drawing-lock] #(if (nil? %) id %)))
|
||||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
lock (get-in state [:workspace :drawing-lock])]
|
||||
(if (= lock id)
|
||||
(rx/merge
|
||||
(->> (rx/filter #(= % handle-finish-drawing) stream)
|
||||
(rx/take 1)
|
||||
(rx/map (fn [_] #(update % :workspace dissoc :drawing-lock))))
|
||||
(rx/of (handle-drawing type)))
|
||||
(rx/empty)))))))
|
||||
|
||||
(defn- make-minimal-shape
|
||||
[type]
|
||||
(let [tool (seek #(= type (:type %)) minimal-shapes)]
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
|
||||
(defn handle-drawing
|
||||
[type]
|
||||
(reify
|
||||
(ptk/reify ::handle-drawing
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
(let [pid (get-in state [:workspace :current])]
|
||||
(update-in state [:workspace pid :drawing] resize-shape point lock?)))]
|
||||
|
||||
(reify
|
||||
(ptk/reify ::handle-drawing-generic
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
(remove-dangling-segmnet [state]
|
||||
(let [pid (get-in state [:workspace :current])]
|
||||
(update-in state [:workspace pid :drawing :segments] #(vec (butlast %)))))]
|
||||
(reify
|
||||
(ptk/reify ::handle-drawing-path
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
|
|
@ -262,7 +262,8 @@
|
|||
(simplify-drawing-path [state tolerance]
|
||||
(let [pid (get-in state [:workspace :current])]
|
||||
(update-in state [:workspace pid :drawing :segments] path/simplify tolerance)))]
|
||||
(reify
|
||||
|
||||
(ptk/reify ::handle-drawing-curve
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
|
|
@ -283,7 +284,7 @@
|
|||
handle-finish-drawing)))))))
|
||||
|
||||
(def handle-finish-drawing
|
||||
(reify
|
||||
(ptk/reify ::handle-finish-drawing
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [pid (get-in state [:workspace :current])
|
||||
|
|
@ -298,10 +299,10 @@
|
|||
shape (dissoc shape ::initialized? :modifier-mtx)]
|
||||
;; Add & select the cred shape to the workspace
|
||||
(rx/of (dw/add-shape shape)
|
||||
(dw/select-first-shape)))))))))
|
||||
dw/select-first-shape))))))))
|
||||
|
||||
(def close-drawing-path
|
||||
(reify
|
||||
(ptk/reify ::close-drawing-path
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [pid (get-in state [:workspace :current])]
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
(let [result (geom/resize-shape vid shape point lock?)
|
||||
scale (geom/calculate-scale-ratio shape result)
|
||||
mtx (geom/generate-resize-matrix vid shape scale)]
|
||||
(apply rx/of (map #(dw/assoc-temporal-modifier % mtx) ids))))
|
||||
(rx/of (dw/assoc-temporal-modifier-in-bulk ids mtx))))
|
||||
|
||||
;; Unifies the instantaneous proportion lock modifier
|
||||
;; activated by Ctrl key and the shapes own proportion
|
||||
|
|
@ -72,9 +72,7 @@
|
|||
(rx/map normalize-proportion-lock)
|
||||
(rx/mapcat (partial resize shape))
|
||||
(rx/take-until stoper))
|
||||
(rx/from-coll (map dw/materialize-current-modifier ids))))))))
|
||||
|
||||
;; (rx/subscribe stream (partial on-resize shape) nil on-end))))
|
||||
(rx/of (dw/materialize-current-modifier-in-bulk ids))))))))
|
||||
|
||||
;; --- Controls (Component)
|
||||
|
||||
|
|
@ -188,14 +186,16 @@
|
|||
:stroke "#28c4d4"
|
||||
:style {:cursor "pointer"}}])])))
|
||||
|
||||
;; TODO: add specs for clarity
|
||||
|
||||
(mf/defc multiple-selection-handlers
|
||||
[{:keys [shapes zoom] :as props}]
|
||||
[{:keys [shapes selected zoom] :as props}]
|
||||
(let [shape (->> shapes
|
||||
(map #(geom/selection-rect %))
|
||||
(geom/shapes->rect-shape)
|
||||
(geom/selection-rect))
|
||||
on-click #(do (dom/stop-propagation %2)
|
||||
(st/emit! (start-resize %1 (mapv :id shapes) shape)))]
|
||||
(st/emit! (start-resize %1 selected shape)))]
|
||||
[:& controls {:shape shape
|
||||
:zoom zoom
|
||||
:on-click on-click}]))
|
||||
|
|
@ -239,6 +239,7 @@
|
|||
|
||||
(> num 1)
|
||||
[:& multiple-selection-handlers {:shapes shapes
|
||||
:selected (:selected wst)
|
||||
:zoom zoom}]
|
||||
|
||||
(and (= type :text)
|
||||
|
|
|
|||
|
|
@ -85,10 +85,11 @@
|
|||
(clear-state [state]
|
||||
(let [id (get-in state [:workspace :current])]
|
||||
(update-in state [:workspace id] dissoc :selrect)))]
|
||||
(reify
|
||||
(ptk/reify ::handle-selrect
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [stoper (rx/filter #(or (dw/interrupt? %) (uws/mouse-up? %)) stream)]
|
||||
(let [stoper (->> (rx/filter #(or (dw/interrupt? %) (uws/mouse-up? %)) stream)
|
||||
(rx/pr-log "handle-selrect|stoper:"))]
|
||||
(rx/concat
|
||||
(rx/of (dw/deselect-all))
|
||||
(->> uws/mouse-position
|
||||
|
|
@ -118,7 +119,7 @@
|
|||
cy (.-scrollTop dom)]
|
||||
(set! (.-scrollLeft dom) (- cx x))
|
||||
(set! (.-scrollTop dom) (- cy y))))]
|
||||
(reify
|
||||
(ptk/reify ::handle-viewport-positioning
|
||||
ptk/EffectEvent
|
||||
(effect [_ state stream]
|
||||
(let [stoper (rx/filter #(= ::finish-positioning %) stream)
|
||||
|
|
@ -145,7 +146,7 @@
|
|||
(when (not edition)
|
||||
(if drawing-tool
|
||||
(st/emit! (start-drawing drawing-tool))
|
||||
(st/emit! :interrupt handle-selrect))))
|
||||
(st/emit! handle-selrect))))
|
||||
|
||||
(on-context-menu [event]
|
||||
(dom/prevent-default event)
|
||||
|
|
@ -249,8 +250,9 @@
|
|||
(for [id (reverse (:canvas page))]
|
||||
[:& uus/shape-component {:id id :key id}])
|
||||
|
||||
(for [id (reverse (:shapes page))]
|
||||
[:& uus/shape-component {:id id :key id}])
|
||||
#_(for [id (reverse (:shapes page))]
|
||||
[:& uus/shape-component {:id id :key id}])
|
||||
[:& uus/all-shapes {:page page}]
|
||||
|
||||
(when (seq (:selected wst))
|
||||
[:& selection-handlers {:wst wst}])
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue