From fb05999e9e325bdd29eb7946e0cd836f76d3abf0 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 26 Jan 2021 17:32:39 +0100 Subject: [PATCH] :sparkles: Changes memoization policies --- frontend/deps.edn | 2 +- .../src/app/main/ui/workspace/shapes.cljs | 13 +-------- .../app/main/ui/workspace/shapes/frame.cljs | 20 +------------ .../app/main/ui/workspace/shapes/group.cljs | 11 +------ .../app/main/ui/workspace/shapes/svg_raw.cljs | 11 +------ .../app/main/ui/workspace/sidebar/layers.cljs | 29 +------------------ .../ui/workspace/sidebar/options/fill.cljs | 14 +-------- .../ui/workspace/sidebar/options/stroke.cljs | 11 +------ 8 files changed, 8 insertions(+), 103 deletions(-) diff --git a/frontend/deps.edn b/frontend/deps.edn index c7d7ca5e2..961c7459b 100644 --- a/frontend/deps.edn +++ b/frontend/deps.edn @@ -16,7 +16,7 @@ funcool/okulary {:mvn/version "2020.04.14-0"} funcool/potok {:mvn/version "3.2.0"} funcool/promesa {:mvn/version "6.0.0"} - funcool/rumext {:mvn/version "2020.11.27-0"} + funcool/rumext {:mvn/version "2021.01.26-0"} lambdaisland/uri {:mvn/version "1.4.54" :exclusions [org.clojure/data.json]} diff --git a/frontend/src/app/main/ui/workspace/shapes.cljs b/frontend/src/app/main/ui/workspace/shapes.cljs index ef7094bf2..15556ba6a 100644 --- a/frontend/src/app/main/ui/workspace/shapes.cljs +++ b/frontend/src/app/main/ui/workspace/shapes.cljs @@ -46,17 +46,6 @@ (def image-wrapper (common/generic-wrapper-factory image/image-shape)) (def rect-wrapper (common/generic-wrapper-factory rect/rect-shape)) -(defn- shape-wrapper-memo-equals? - [np op] - (let [n-shape (obj/get np "shape")] - (if (= (:type n-shape) :group) - false - (let [o-shape (obj/get op "shape") - n-frame (obj/get np "frame") - o-frame (obj/get op "frame")] - (and (identical? n-shape o-shape) - (identical? n-frame o-frame)))))) - (defn make-is-moving-ref [id] (fn [] @@ -66,7 +55,7 @@ (l/derived check-moving refs/workspace-local)))) (mf/defc shape-wrapper - {::mf/wrap [#(mf/memo' % shape-wrapper-memo-equals?)] + {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))] ::mf/wrap-props false} [props] (let [shape (obj/get props "shape") diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 0afcd9c19..bec720cb5 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -25,24 +25,6 @@ [rumext.alpha :as mf] [app.main.ui.context :as muc])) -(defn- frame-wrapper-factory-equals? - [np op] - (let [n-shape (aget np "shape") - o-shape (aget op "shape") - n-objs (aget np "objects") - o-objs (aget op "objects") - - ids (:shapes n-shape)] - (and (identical? n-shape o-shape) - (loop [id (first ids) - ids (rest ids)] - (if (nil? id) - true - (if (identical? (get n-objs id) - (get o-objs id)) - (recur (first ids) (rest ids)) - false)))))) - (defn use-select-shape [{:keys [id]} edition] (mf/use-callback (mf/deps id edition) @@ -121,7 +103,7 @@ [shape-wrapper] (let [frame-shape (frame/frame-shape shape-wrapper)] (mf/fnc frame-wrapper - {::mf/wrap [#(mf/memo' % frame-wrapper-factory-equals?) custom-deferred] + {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "objects"])) custom-deferred] ::mf/wrap-props false} [props] (let [shape (unchecked-get props "shape") diff --git a/frontend/src/app/main/ui/workspace/shapes/group.cljs b/frontend/src/app/main/ui/workspace/shapes/group.cljs index 7c6f464cd..f3f4cc3c5 100644 --- a/frontend/src/app/main/ui/workspace/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/group.cljs @@ -21,15 +21,6 @@ [app.common.geom.shapes :as gsh] [app.util.debug :refer [debug?]])) -(defn- group-wrapper-factory-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)))) - (defn use-double-click [{:keys [id]}] (mf/use-callback (mf/deps id) @@ -42,7 +33,7 @@ [shape-wrapper] (let [group-shape (group/group-shape shape-wrapper)] (mf/fnc group-wrapper - {::mf/wrap [#(mf/memo' % group-wrapper-factory-equals?)] + {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))] ::mf/wrap-props false} [props] (let [shape (unchecked-get props "shape") diff --git a/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs index 4a92c4b0c..3e26cca55 100644 --- a/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs @@ -21,20 +21,11 @@ ;; this allows them to have gradients, shadows and masks (def svg-elements #{:svg :circle :ellipse :image :line :path :polygon :polyline :rect :symbol :text :textPath}) -(defn- svg-raw-wrapper-factory-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)))) - (defn svg-raw-wrapper-factory [shape-wrapper] (let [svg-raw-shape (svg-raw/svg-raw-shape shape-wrapper)] (mf/fnc svg-raw-wrapper - {::mf/wrap [#(mf/memo' % svg-raw-wrapper-factory-equals?)] + {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))] ::mf/wrap-props false} [props] (let [shape (unchecked-get props "shape") diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 82c8fdb3d..b152fb9ae 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -237,40 +237,13 @@ :objects objects :key (:id item)}]))])])) -(defn frame-wrapper-memo-equals? - [oprops nprops] - (let [new-sel (unchecked-get nprops "selected") - old-sel (unchecked-get oprops "selected") - new-itm (unchecked-get nprops "item") - old-itm (unchecked-get oprops "item") - new-idx (unchecked-get nprops "index") - old-idx (unchecked-get oprops "index") - new-obs (unchecked-get nprops "objects") - old-obs (unchecked-get oprops "objects")] - (and (= new-itm old-itm) - (identical? new-idx old-idx) - (let [childs (cp/get-children (:id new-itm) new-obs) - childs' (conj childs (:id new-itm))] - (and (or (= new-sel old-sel) - (not (or (boolean (some new-sel childs')) - (boolean (some old-sel childs'))))) - (loop [ids (rest childs) - id (first childs)] - (if (nil? id) - true - (if (= (get new-obs id) - (get old-obs id)) - (recur (rest ids) - (first ids)) - false)))))))) - ;; This components is a piece for sharding equality check between top ;; level frames and try to avoid rerender frames that are does not ;; affected by the selected set. (mf/defc frame-wrapper {::mf/wrap-props false - ::mf/wrap [#(mf/memo' % frame-wrapper-memo-equals?) + ::mf/wrap [#(mf/memo' % (mf/check-props ["selected" "item" "index" "objects"])) #(mf/deferred % ts/idle-then-raf)]} [props] [:> layer-item props]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs index 7ced7afb9..4c07e1cc2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs @@ -28,20 +28,8 @@ :fill-color-ref-file :fill-color-gradient]) -(defn- fill-menu-props-equals? - [np op] - (let [new-ids (obj/get np "ids") - old-ids (obj/get op "ids") - new-editor (obj/get np "editor") - old-editor (obj/get op "editor") - new-values (obj/get np "values") - old-values (obj/get op "values")] - (and (= new-ids old-ids) - (= new-editor old-editor) - (every? #(identical? (% new-values) (% old-values)) fill-attrs)))) - (mf/defc fill-menu - {::mf/wrap [#(mf/memo' % fill-menu-props-equals?)]} + {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "editor" "values"]))]} [{:keys [ids type values editor] :as props}] (let [locale (mf/deref i18n/locale) show? (or (not (nil? (:fill-color values))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs index 740e491da..eb5441a8e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs @@ -33,15 +33,6 @@ :stroke-opacity :stroke-color-gradient]) -(defn- stroke-menu-props-equals? - [np op] - (let [new-ids (obj/get np "ids") - old-ids (obj/get op "ids") - new-values (obj/get np "values") - old-values (obj/get op "values")] - (and (= new-ids old-ids) - (every? #(identical? (% new-values) (% old-values)) stroke-attrs)))) - (defn- width->string [width] (if (= width :multiple) "" @@ -55,7 +46,7 @@ (pr-str value))) (mf/defc stroke-menu - {::mf/wrap [#(mf/memo' % stroke-menu-props-equals?)]} + {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} [{:keys [ids type values] :as props}] (let [locale (i18n/use-locale) label (case type