Properly memoize higher order components.

This commit is contained in:
Andrey Antukh 2020-04-10 15:15:54 +02:00 committed by Alonso Torres
parent d007bdf813
commit 51e4bf82f2

View file

@ -41,51 +41,62 @@
(declare shape-wrapper) (declare shape-wrapper)
(defn frame-wrapper [objects] (defn frame-wrapper
[objects]
(mf/fnc frame-wrapper (mf/fnc frame-wrapper
[{:keys [shape] :as props}] [{:keys [shape] :as props}]
(let [childs (mapv #(get objects %) (:shapes shape)) (let [childs (mapv #(get objects %)
shape-wrapper (shape-wrapper objects) (:shapes shape))
frame-shape (frame/frame-shape shape-wrapper) shape-wrapper (mf/use-memo (mf/deps objects)
#(shape-wrapper objects))
frame-shape (mf/use-memo (mf/deps objects)
#(frame/frame-shape shape-wrapper))
shape (geom/transform-shape shape)] shape (geom/transform-shape shape)]
[:& frame-shape {:shape shape :childs childs}]))) [:& frame-shape {:shape shape :childs childs}])))
(defn group-wrapper [objects] (defn group-wrapper
[objects]
(mf/fnc group-wrapper (mf/fnc group-wrapper
[{:keys [shape frame] :as props}] [{:keys [shape frame] :as props}]
(let [children (mapv #(get objects %) (:shapes shape)) (let [children (mapv #(get objects %)
shape-wrapper (shape-wrapper objects) (:shapes shape))
group-shape (group/group-shape shape-wrapper)] shape-wrapper (mf/use-memo (mf/deps objects)
#(shape-wrapper objects))
group-shape (mf/use-memo (mf/deps objects)
#(group/group-shape shape-wrapper))]
[:& group-shape {:frame frame [:& group-shape {:frame frame
:shape shape :shape shape
:children children}]))) :children children}])))
(defn shape-wrapper [objects] (defn shape-wrapper
[objects]
(mf/fnc shape-wrapper (mf/fnc shape-wrapper
[{:keys [frame shape] :as props}] [{:keys [frame shape] :as props}]
(when (and shape (not (:hidden shape))) (let [group-wrapper (mf/use-memo (mf/deps objects) #(group-wrapper objects))]
(let [shape (geom/transform-shape frame shape) (when (and shape (not (:hidden shape)))
opts #js {:shape shape :frame frame}] (let [shape (geom/transform-shape frame shape)
(case (:type shape) opts #js {:shape shape :frame frame}]
:curve [:> path/path-shape opts] (case (:type shape)
:text [:> text/text-shape opts] :curve [:> path/path-shape opts]
:icon [:> icon/icon-shape opts] :text [:> text/text-shape opts]
:rect [:> rect/rect-shape opts] :icon [:> icon/icon-shape opts]
:path [:> path/path-shape opts] :rect [:> rect/rect-shape opts]
:image [:> image/image-shape opts] :path [:> path/path-shape opts]
:circle [:> circle/circle-shape opts] :image [:> image/image-shape opts]
:group [:> (group-wrapper objects) opts] :circle [:> circle/circle-shape opts]
nil))))) :group [:> group-wrapper opts]
nil))))))
(mf/defc page-svg (mf/defc page-svg
{::mf/wrap [mf/memo]}
[{:keys [data] :as props}] [{:keys [data] :as props}]
(let [objects (:objects data) (let [objects (:objects data)
root (get objects uuid/zero) root (get objects uuid/zero)
shapes (->> (:shapes root) shapes (->> (:shapes root)
(map #(get objects %))) (map #(get objects %)))
dim (calculate-dimensions data) dim (calculate-dimensions data)
frame-wrapper (frame-wrapper objects) frame-wrapper (mf/use-memo (mf/deps objects) #(frame-wrapper objects))
shape-wrapper (shape-wrapper objects)] shape-wrapper (mf/use-memo (mf/deps objects) #(shape-wrapper objects))]
[:svg {:view-box (str "0 0 " (:width dim 0) " " (:height dim 0)) [:svg {:view-box (str "0 0 " (:width dim 0) " " (:height dim 0))
:version "1.1" :version "1.1"
:xmlnsXlink "http://www.w3.org/1999/xlink" :xmlnsXlink "http://www.w3.org/1999/xlink"