From 2e708af4d985953cf54ee3e4a517da11b2d4e59b Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Fri, 12 Jun 2026 11:40:20 +0200 Subject: [PATCH] :zap: Add memo to grid-cell/options component --- .../main/ui/workspace/sidebar/options.cljs | 5 +- .../sidebar/options/menus/grid_cell.cljs | 49 ++++++++++++------- .../sidebar/options/shapes/bool.cljs | 5 +- .../sidebar/options/shapes/circle.cljs | 5 +- .../sidebar/options/shapes/frame.cljs | 5 +- .../sidebar/options/shapes/group.cljs | 5 +- .../sidebar/options/shapes/path.cljs | 5 +- .../sidebar/options/shapes/rect.cljs | 5 +- .../sidebar/options/shapes/svg_raw.cljs | 5 +- .../sidebar/options/shapes/text.cljs | 5 +- 10 files changed, 57 insertions(+), 37 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index e2f05a8665..5b4619710e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -157,8 +157,9 @@ (cond (and edit-grid? (d/not-empty? selected-cells)) - [:& grid-cell/options - {:shape (get objects edition) + [:> grid-cell/options* + {:shape-id (-> (get objects edition) + :id) :cells selected-cells}] edit-grid? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index be0900934e..1e3e7402c7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -81,9 +81,20 @@ :id (dm/str "align-self-stretch-" type)}]]])) -(mf/defc options - {::mf/wrap [mf/memo]} - [{:keys [shape cell cells] :as props}] +(defn- check-options-props + [old-props new-props] + (and (identical? (unchecked-get old-props "class") + (unchecked-get new-props "class")) + (identical? (unchecked-get old-props "shape-id") + (unchecked-get new-props "shape-id")) + (identical? (unchecked-get old-props "cell") + (unchecked-get new-props "cell")) + (identical? (unchecked-get old-props "cells") + (unchecked-get new-props "cells")))) + +(mf/defc options* + {::mf/wrap [#(mf/memo' % check-options-props)]} + [{:keys [shape-id cell cells] :as props}] (let [state* (mf/use-state {:open true}) open? (:open @state*) @@ -115,23 +126,23 @@ set-alignment (mf/use-callback - (mf/deps align-self (:id shape) cell-ids) + (mf/deps align-self shape-id cell-ids) (fn [value] (if (= align-self value) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:align-self nil})) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:align-self value}))))) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:align-self nil})) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:align-self value}))))) set-justify-self (mf/use-callback - (mf/deps justify-self (:id shape) cell-ids) + (mf/deps justify-self shape-id cell-ids) (fn [value] (if (= justify-self value) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:justify-self nil})) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:justify-self value}))))) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:justify-self nil})) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:justify-self value}))))) on-grid-coordinates (mf/use-callback - (mf/deps column row (:id shape) (:id cell)) + (mf/deps column row shape-id (:id cell)) (fn [field type value] (when-not multiple? (let [value (mth/round value) @@ -151,30 +162,30 @@ (and (= type :row) (= field :end)) [:row-span (max 1 (- value row))])] - (st/emit! (dwsl/update-grid-cell-position (:id shape) (:id cell) {property value})))))) + (st/emit! (dwsl/update-grid-cell-position shape-id (:id cell) {property value})))))) on-area-name-change (mf/use-callback - (mf/deps (:id shape) cell-ids) + (mf/deps shape-id cell-ids) (fn [event] (let [value (dom/get-value (dom/get-target event))] (if (= value "") - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:area-name nil})) - (st/emit! (dwsl/update-grid-cells (:id shape) cell-ids {:area-name value})))))) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:area-name nil})) + (st/emit! (dwsl/update-grid-cells shape-id cell-ids {:area-name value})))))) set-cell-mode (mf/use-callback - (mf/deps (:id shape) cell-ids) + (mf/deps shape-id cell-ids) (fn [mode] (let [mode (-> mode keyword)] - (st/emit! (dwsl/change-cells-mode (:id shape) cell-ids mode))))) + (st/emit! (dwsl/change-cells-mode shape-id cell-ids mode))))) toggle-edit-mode (mf/use-fn - (mf/deps (:id shape)) + (mf/deps shape-id) (fn [] - (st/emit! (dw/start-edition-mode (:id shape)) - (dwge/clear-selection (:id shape)))))] + (st/emit! (dw/start-edition-mode shape-id) + (dwge/clear-selection shape-id))))] [:div {:class (stl/css :grid-cell-menu)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 5ff1e34ade..902387eead 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -102,8 +102,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index 21761f7ea6..ad5e6a1551 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -101,8 +101,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 66d4146e3b..7c7dafa8dc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -121,8 +121,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when (or is-layout-child? is-layout-container?) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 18103b32c1..cb6c8cc666 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -127,8 +127,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 5b2d23ad9c..c0ba2bcdeb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -101,8 +101,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index 7bff93de2b..172c12c027 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -101,8 +101,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when ^boolean is-layout-child? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index 222e51572c..b818734262 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -168,8 +168,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index a02fa40d67..83834f6f81 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -162,8 +162,9 @@ :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) + [:> grid-cell/options* + {:shape-id (-> (first parents) + :id) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child?