Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 17:00:36 -05:00
Code Issues Activity

🎉 Add hooks and memoization to group components.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-10 17:25:23 +02:00 committed by Alonso Torres
parent 0b4365b3c3
commit 39807186df
1 changed files with 62 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
frontend/src/uxbox/main/ui/shapes/group.cljs
View file

@ -2,7 +2,10 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;; ;;
;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz> ;; This Source Code Form is "Incompatible With Secondary Licenses", as
;; defined by the Mozilla Public License, v. 2.0.
;;
;; Copyright (c) 2020 UXBOX Labs SL
(ns uxbox.main.ui.shapes.group (ns uxbox.main.ui.shapes.group
(:require (:require
@ -20,36 +23,62 @@
(defonce ^:dynamic *debug* (atom false)) (defonce ^:dynamic *debug* (atom false))
(defn- equals?
[np op]
(let [n-shape (unchecked-get np "shape")
o-shape (unchecked-get op "shape")
n-frame (unchecked-get np "frame")
o-frame (unchecked-get op "frame")]
(and (= n-frame o-frame)
(= n-shape o-shape))))
(declare translate-to-frame) (declare translate-to-frame)
(declare group-shape) (declare group-shape)
(defn group-wrapper [shape-wrapper] (defn group-wrapper
(mf/fnc group-wrapper [shape-wrapper]
{::mf/wrap-props false} (let [group-shape (group-shape shape-wrapper)]
[props] (mf/fnc group-wrapper
(let [shape (unchecked-get props "shape") {::mf/wrap [#(mf/memo' % equals?)]
frame (unchecked-get props "frame") ::mf/wrap-props false}
on-mouse-down #(common/on-mouse-down % shape) [props]
on-context-menu #(common/on-context-menu % shape) (let [shape (unchecked-get props "shape")
children (-> (refs/objects-by-id (:shapes shape)) mf/deref) frame (unchecked-get props "frame")
is-child-selected? (-> (refs/is-child-selected? (:id shape)) mf/deref) on-mouse-down (mf/use-callback (mf/deps shape)
on-double-click #(common/on-mouse-down % shape))
(fn [event] on-context-menu (mf/use-callback (mf/deps shape)
(dom/stop-propagation event) #(common/on-context-menu % shape))
(dom/prevent-default event)
(st/emit! (dw/select-inside-group
(:id shape)
@ms/mouse-position)))]
[:g.shape {:on-mouse-down on-mouse-down children-ref (mf/use-memo (mf/deps shape)
:on-context-menu on-context-menu #(refs/objects-by-id (:shapes shape)))
:on-double-click on-double-click} children (mf/deref children-ref)
[:& (group-shape shape-wrapper) {:frame frame
:shape (geom/transform-shape frame shape)
:children children
:is-child-selected? is-child-selected?}]])))
(defn group-shape [shape-wrapper]
is-child-selected-ref (mf/use-memo (mf/deps (:id shape))
#(refs/is-child-selected? (:id shape)))
is-child-selected? (mf/deref is-child-selected-ref)
on-double-click
(mf/use-callback
(mf/deps (:id shape))
(fn [event]
(dom/stop-propagation event)
(dom/prevent-default event)
(st/emit! (dw/select-inside-group (:id shape) @ms/mouse-position))))]
[:g.shape
{:on-mouse-down on-mouse-down
:on-context-menu on-context-menu
:on-double-click on-double-click}
[:& group-shape
{:frame frame
:shape (geom/transform-shape frame shape)
:children children
:is-child-selected? is-child-selected?}]]))))
(defn group-shape
[shape-wrapper]
(mf/fnc group-shape (mf/fnc group-shape
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
@ -68,12 +97,13 @@
(+ y (/ height 2))))] (+ y (/ height 2))))]
[:g {:transform transform} [:g {:transform transform}
(for [item children] (for [item children]
[:& shape-wrapper {:frame frame [:& shape-wrapper
:shape (cond-> item {:frame frame
displacement-modifier (assoc :displacement-modifier displacement-modifier) :shape (cond-> item
resize-modifier (assoc :resize-modifier resize-modifier)) displacement-modifier (assoc :displacement-modifier displacement-modifier)
:key (:id item)}]) resize-modifier (assoc :resize-modifier resize-modifier))
:key (:id item)}])
(when (not is-child-selected?) (when (not is-child-selected?)
[:rect {:x x [:rect {:x x
:y y :y y