From 7809f2c7e431b9e581136908cefff27620c4caca Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 18:27:04 +0100 Subject: [PATCH 1/9] :lipstick: Convert color-selected-menu component to new style --- .../sidebar/options/menus/color_selection.cljs | 17 ++++++++--------- .../workspace/sidebar/options/shapes/frame.cljs | 10 +++++----- .../workspace/sidebar/options/shapes/group.cljs | 11 ++++++----- .../sidebar/options/shapes/multiple.cljs | 8 ++++++-- .../workspace/sidebar/options/shapes/text.cljs | 8 ++++++-- 5 files changed, 31 insertions(+), 23 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 43a023e3a7..4161b60c85 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -37,20 +37,19 @@ (def xf:map-shape-id (map :shape-id)) -(mf/defc color-selection-menu - {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))] - ::mf/wrap-props false} - [{:keys [shapes file-id shared-libs]}] +(mf/defc color-selection-menu* + {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]} + [{:keys [shapes file-id libraries]}] (let [{:keys [groups library-colors colors]} - (mf/with-memo [shapes file-id shared-libs] - (prepare-colors shapes file-id shared-libs)) + (mf/with-memo [file-id shapes libraries] + (prepare-colors shapes file-id libraries)) - state* (mf/use-state true) - open? (deref state*) + open* (mf/use-state true) + open? (deref open*) has-colors? (or (some? (seq colors)) (some? (seq library-colors))) - toggle-content (mf/use-fn #(swap! state* not)) + toggle-content (mf/use-fn #(swap! open* not)) expand-lib-color (mf/use-state false) expand-color (mf/use-state false) 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 a675d1ec9d..3576fa5090 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 @@ -10,7 +10,7 @@ [app.common.types.shape.layout :as ctl] [app.main.refs :as refs] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] - [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] + [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]] [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]] @@ -113,10 +113,10 @@ [:& stroke-menu {:ids ids :type shape-type :values stroke-values}] - [:& color-selection-menu {:type shape-type - :shapes shapes-with-children - :file-id file-id - :shared-libs shared-libs}] + [:> color-selection-menu* {:type shape-type + :shapes shapes-with-children + :file-id file-id + :libraries shared-libs}] [:& shadow-menu {:ids ids :values (select-keys shape [:shadow])}] [:& blur-menu {:ids ids 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 b954082707..501714b13a 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 @@ -12,7 +12,7 @@ [app.main.refs :as refs] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] - [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] + [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]] [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]] @@ -102,10 +102,11 @@ (when-not (empty? stroke-ids) [:& stroke-menu {:type type :ids stroke-ids :values stroke-values}]) - [:& color-selection-menu {:type type - :shapes (vals objects) - :file-id file-id - :shared-libs shared-libs}] + [:> color-selection-menu* + {:type type + :shapes (vals objects) + :file-id file-id + :libraries shared-libs}] (when-not (empty? shadow-ids) [:& shadow-menu {:type type :ids ids :values (select-keys shape [:shadow])}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index c57025a713..27ddd54612 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -17,7 +17,7 @@ [app.main.refs :as refs] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]] - [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] + [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]] [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-attrs exports-menu]] @@ -394,7 +394,11 @@ :disable-stroke-style has-text?}]) (when-not (empty? shapes) - [:& color-selection-menu {:file-id file-id :type type :shapes (vals objects-no-measures) :shared-libs shared-libs}]) + [:> color-selection-menu* + {:file-id file-id + :type type + :shapes (vals objects-no-measures) + :libraries shared-libs}]) (when-not (empty? shadow-ids) [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}]) 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 ba0f150693..d26648aac3 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 @@ -15,7 +15,7 @@ [app.main.store :as st] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] - [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] + [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu fill-attrs]] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] @@ -146,7 +146,11 @@ :disable-stroke-style true}] (when (= :multiple (:fills fill-values)) - [:& color-selection-menu {:type type :shapes [shape] :file-id file-id :shared-libs shared-libs}]) + [:> color-selection-menu* + {:type type + :shapes [shape] + :file-id file-id + :libraries shared-libs}]) [:& shadow-menu {:ids ids From 930ad359ddddbc6f7a24ccc876edb15d17a1d354 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 18:38:31 +0100 Subject: [PATCH 2/9] :recycle: Refactor color-row component to new style --- .../ui/workspace/colorpicker/gradients.cljs | 5 ++-- .../options/menus/color_selection.cljs | 17 ++++++------ .../workspace/sidebar/options/menus/fill.cljs | 26 +++++++++---------- .../sidebar/options/menus/frame_grid.cljs | 26 +++++++++---------- .../sidebar/options/menus/shadow.cljs | 26 ++++++++++--------- .../ui/workspace/sidebar/options/page.cljs | 6 +++-- .../sidebar/options/rows/color_row.cljs | 2 +- .../sidebar/options/rows/stroke_row.cljs | 23 ++++++++-------- 8 files changed, 68 insertions(+), 63 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs index e45325cc4b..9aabb4fbcf 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs @@ -17,7 +17,7 @@ [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.dom :as dom] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -153,7 +153,8 @@ :on-focus handle-focus-stop-offset :on-blur handle-blur-stop-offset}]] - [:& color-row + ;; FIXME: memoize color + [:> color-row* {:disable-gradient true :disable-picker true :color {:color color diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 4161b60c85..1e6973f109 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -16,7 +16,7 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.hooks :as h] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -58,12 +58,11 @@ prev-colors-ref (mf/use-ref nil) initial-color-keys - (mf/use-memo - #(->> (concat colors library-colors) - (reduce - (fn [result color] - (assoc result color (dm/str (uuid/next)))) - {}))) + (mf/with-memo [] + (->> (concat colors library-colors) + (reduce (fn [result color] + (assoc result color (dm/str (uuid/next)))) + {}))) color-keys* (mf/use-var initial-color-keys) @@ -138,7 +137,7 @@ (let [lib-colors (cond->> library-colors (not @expand-lib-color) (take 3)) lib-colors (concat lib-colors colors)] (for [[index color] (d/enumerate lib-colors)] - [:& color-row + [:> color-row* {:key (get @color-keys* color) :color color :index index @@ -155,7 +154,7 @@ [:div {:class (stl/css :selected-color-group)} (for [[index color] (d/enumerate (cond->> colors (not @expand-color) (take 3)))] - [:& color-row + [:> color-row* {:key (get @color-keys* color) :color color :index index diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 047d263460..25fe82178f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -17,7 +17,7 @@ [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -168,18 +168,18 @@ (seq fills) [:& h/sortable-container {} (for [[index value] (d/enumerate (:fills values []))] - [:& color-row {:color (ctc/fill->shape-color value) - :key index - :index index - :title (tr "workspace.options.fill") - :on-change (on-change index) - :on-reorder (on-reorder index) - :on-detach (on-detach index) - :on-remove (on-remove index) - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus (not @disable-drag) - :on-blur on-blur}])]) + [:> color-row* {:color (ctc/fill->shape-color value) + :key index + :index index + :title (tr "workspace.options.fill") + :on-change (on-change index) + :on-reorder (on-reorder index) + :on-detach (on-detach index) + :on-remove (on-remove index) + :disable-drag disable-drag + :on-focus on-focus + :select-on-focus (not @disable-drag) + :on-blur on-blur}])]) (when (or (= type :frame) (and (= type :multiple) (some? (:hide-fill-on-export values)))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index a0d63505cf..d593687e5f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -19,7 +19,7 @@ [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] [okulary.core :as l] [rumext.v2 :as mf])) @@ -196,12 +196,12 @@ (when (= :square type) [:div {:class (stl/css :square-row)} [:div {:class (stl/css :advanced-row)} - [:& color-row {:color (:color params) - :title (tr "workspace.options.grid.params.color") - :disable-gradient true - :disable-image true - :on-change handle-change-color - :on-detach handle-detach-color}] + [:> color-row* {:color (:color params) + :title (tr "workspace.options.grid.params.color") + :disable-gradient true + :disable-image true + :on-change handle-change-color + :on-detach handle-detach-color}] [:button {:class (stl/css-case :show-more-options true :selected show-more-options?) :on-click toggle-more-options} @@ -237,12 +237,12 @@ :on-change (handle-change :params :type)}]] [:div {:class (stl/css :color-wrapper)} - [:& color-row {:color (:color params) - :title (tr "workspace.options.grid.params.color") - :disable-gradient true - :disable-image true - :on-change handle-change-color - :on-detach handle-detach-color}]]] + [:> color-row* {:color (:color params) + :title (tr "workspace.options.grid.params.color") + :disable-gradient true + :disable-image true + :on-change handle-change-color + :on-detach handle-detach-color}]]] [:div {:class (stl/css :advanced-row)} [:div {:class (stl/css :height) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 45b73c1824..4ada5d6430 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -24,7 +24,7 @@ [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [okulary.core :as l] @@ -235,17 +235,19 @@ :on-change (update-attr index :offset-y basic-offset-y-ref) :on-blur on-blur :value (:offset-y value)}]] - [:& color-row {:color (if (string? (:color value)) - ;; Support for old format colors - {:color (:color value) :opacity (:opacity value)} - (:color value)) - :title (tr "workspace.options.shadow-options.color") - :disable-gradient true - :disable-image true - :on-change update-color - :on-detach detach-color - :on-open manage-on-open - :on-close manage-on-close}]]])]])) + + ;; FIXME: memoize color + [:> color-row* {:color (if (string? (:color value)) + ;; Support for old format colors + {:color (:color value) :opacity (:opacity value)} + (:color value)) + :title (tr "workspace.options.shadow-options.color") + :disable-gradient true + :disable-image true + :on-change update-color + :on-detach detach-color + :on-open manage-on-open + :on-close manage-on-close}]]])]])) (mf/defc shadow-menu {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs index c1ba935ed0..2b6ed69d8a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs @@ -15,7 +15,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] [okulary.core :as l] [rumext.v2 :as mf])) @@ -38,7 +38,9 @@ :title (tr "workspace.options.canvas-background") :class (stl/css :title-spacing-page)}]] [:div {:class (stl/css :element-content)} - [:& color-row + + ;; FIXME: memoize color + [:> color-row* {:disable-gradient true :disable-opacity true :disable-image true diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index e0e98aca3b..7e7cdb17ec 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -44,7 +44,7 @@ [v] (if (= v :multiple) nil v)) -(mf/defc color-row +(mf/defc color-row* [{:keys [index color disable-gradient disable-opacity disable-image disable-picker hidden on-change on-reorder on-detach on-open on-close on-remove disable-drag on-focus on-blur select-only select-on-focus]}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index 22cf9d567e..f61de27609 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -14,7 +14,7 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -148,16 +148,17 @@ [:& reorder-handler {:ref dref}]) ;; Stroke Color - [:& color-row {:color (ctc/stroke->shape-color stroke) - :index index - :title title - :on-change on-color-change-refactor - :on-detach on-color-detach - :on-remove on-remove - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus select-on-focus - :on-blur on-blur}] + ;; FIXME: memorize stroke color + [:> color-row* {:color (ctc/stroke->shape-color stroke) + :index index + :title title + :on-change on-color-change-refactor + :on-detach on-color-detach + :on-remove on-remove + :disable-drag disable-drag + :on-focus on-focus + :select-on-focus select-on-focus + :on-blur on-blur}] ;; Stroke Width, Alignment & Style [:div {:class (stl/css :stroke-options)} From 889902080bb3c4bd84e4829e9d8796d14557a3ef Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 18:48:18 +0100 Subject: [PATCH 3/9] :paperclip: Fix linter issues Related to the upcoming update of clj-kondo --- .clj-kondo/config.edn | 6 ++++++ common/src/app/common/data/macros.cljc | 1 - common/src/app/common/files/repair.cljc | 2 +- common/src/app/common/geom/shapes/bounds.cljc | 6 ++++-- frontend/src/app/worker/import.cljs | 2 +- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/.clj-kondo/config.edn b/.clj-kondo/config.edn index 5675b9d5d3..08c3cd7e8f 100644 --- a/.clj-kondo/config.edn +++ b/.clj-kondo/config.edn @@ -58,6 +58,12 @@ :redundant-do {:level :off} + :redundant-ignore + {:level :off} + + :redundant-nested-call + {:level :off} + :earmuffed-var-not-dynamic {:level :off} diff --git a/common/src/app/common/data/macros.cljc b/common/src/app/common/data/macros.cljc index 31a89e61c0..f339a73444 100644 --- a/common/src/app/common/data/macros.cljc +++ b/common/src/app/common/data/macros.cljc @@ -4,7 +4,6 @@ ;; ;; Copyright (c) KALEIDOS INC -#_:clj-kondo/ignore (ns app.common.data.macros "Data retrieval & manipulation specific macros." (:refer-clojure :exclude [get-in select-keys str with-open min max]) diff --git a/common/src/app/common/files/repair.cljc b/common/src/app/common/files/repair.cljc index c5ed30e7bd..66fd58c713 100644 --- a/common/src/app/common/files/repair.cljc +++ b/common/src/app/common/files/repair.cljc @@ -496,7 +496,7 @@ (let [repair-shape (fn [shape] ;; Remove the swap slot - (log/debug :hint (str " -> remove swap-slot")) + (log/debug :hint " -> remove swap-slot") (ctk/remove-swap-slot shape))] (log/dbg :hint "repairing shape :misplaced-slot" :id (:id shape) :name (:name shape) :page-id page-id) diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc index 8754c6f123..91a2053adc 100644 --- a/common/src/app/common/geom/shapes/bounds.cljc +++ b/common/src/app/common/geom/shapes/bounds.cljc @@ -174,8 +174,10 @@ bounds (cond (or (empty? (:shapes shape)) - (or (:masked-group shape) (= :bool (:type shape))) - (and (cfh/frame-shape? shape) (not (:show-content shape)))) + (:masked-group shape) + (cfh/bool-shape? shape) + (and (cfh/frame-shape? shape) + (not (:show-content shape)))) [base-bounds] :else diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs index ebeb67daa8..950c98ffba 100644 --- a/frontend/src/app/worker/import.cljs +++ b/frontend/src/app/worker/import.cljs @@ -72,7 +72,7 @@ ([context type id media] (let [file-id (:file-id context) path (case type - :manifest (str "manifest.json") + :manifest "manifest.json" :page (str file-id "/" id ".svg") :colors-list (str file-id "/colors.json") :colors (let [ext (cm/mtype->extension (:mtype media))] From c504e38f6d329d84d897dbcd7b92d8ca25fc8993 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 18:55:08 +0100 Subject: [PATCH 4/9] :bug: Fix incorrect key setup on color selection menu --- .../sidebar/options/menus/color_selection.cljs | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 1e6973f109..f6b753ba1b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -8,9 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] - [app.common.data.macros :as dm] [app.common.types.color :as ctc] - [app.common.uuid :as uuid] [app.main.data.workspace.colors :as dc] [app.main.data.workspace.selection :as dws] [app.main.store :as st] @@ -57,15 +55,6 @@ groups-ref (h/use-ref-value groups) prev-colors-ref (mf/use-ref nil) - initial-color-keys - (mf/with-memo [] - (->> (concat colors library-colors) - (reduce (fn [result color] - (assoc result color (dm/str (uuid/next)))) - {}))) - - color-keys* (mf/use-var initial-color-keys) - on-change (mf/use-fn (fn [new-color old-color from-picker?] @@ -93,7 +82,6 @@ (mf/set-ref-val! prev-colors-ref (conj prev-colors color)))) - (swap! color-keys* assoc new-color (get @color-keys* old-color)) (st/emit! (dc/change-color-in-selected cops new-color old-color))))) on-open @@ -138,7 +126,7 @@ lib-colors (concat lib-colors colors)] (for [[index color] (d/enumerate lib-colors)] [:> color-row* - {:key (get @color-keys* color) + {:key index :color color :index index :hidden (not (:id color)) @@ -155,7 +143,7 @@ [:div {:class (stl/css :selected-color-group)} (for [[index color] (d/enumerate (cond->> colors (not @expand-color) (take 3)))] [:> color-row* - {:key (get @color-keys* color) + {:key index :color color :index index :select-only select-only From e0efa63fa1b09275b2374ba4ceb1cb0739dc5860 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 18:55:46 +0100 Subject: [PATCH 5/9] :fire: Remove commented code on colorpicker/gradients ns --- frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs index 9aabb4fbcf..b55ed47fab 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs @@ -34,10 +34,6 @@ (/ (.. event -nativeEvent -offsetX) (-> event dom/get-current-target dom/get-bounding-rect :width))) -;; (defn- format-rgba -;; [{:keys [r g b alpha offset]}] -;; (str/ffmt "rgba(%1, %2, %3, %4) %5%%" r g b alpha (* offset 100))) - (defn- format-rgb [{:keys [r g b offset]}] (str/ffmt "rgb(%1, %2, %3) %4%%" r g b (* offset 100))) From c2fae0fef2f59905541efab1691325ad0cab576b Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 19:13:01 +0100 Subject: [PATCH 6/9] :zap: Add performance enhancements to colorpicker gradients component --- .../src/app/main/ui/workspace/colorpicker.cljs | 6 +++--- .../main/ui/workspace/colorpicker/gradients.cljs | 16 +++++++--------- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 31eddc274d..56731732d4 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -29,7 +29,7 @@ [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.icons :as i] [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]] - [app.main.ui.workspace.colorpicker.gradients :refer [gradients]] + [app.main.ui.workspace.colorpicker.gradients :refer [gradients*]] [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]] [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]] [app.main.ui.workspace.colorpicker.libraries :refer [libraries]] @@ -110,7 +110,7 @@ :linear :linear-gradient :radial :radial-gradient) :color)) - active-color-tab (mf/use-state (dc/get-active-color-tab)) + active-color-tab (mf/use-state #(dc/get-active-color-tab)) drag? (mf/use-state false) type (if (= @active-color-tab "hsva") :hsv :rgb) @@ -436,7 +436,7 @@ i/picker])] (when (= selected-mode :gradient) - [:& gradients + [:> gradients* {:type (:type state) :stops (:stops state) :editing-stop (:editing-stop state) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs index b55ed47fab..e3721e4a1c 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs @@ -48,11 +48,11 @@ (str/join ", ") (str/ffmt "linear-gradient(90deg, %1)"))) -(mf/defc stop-input-row +(mf/defc stop-input-row* + {::mf/private true} [{:keys [stop index is-selected - on-select-stop on-change-stop on-remove-stop @@ -61,7 +61,7 @@ on-blur-stop-offset on-focus-stop-color on-blur-stop-color]}] - (let [{:keys [color opacity offset]} stop + (let [offset (get stop :offset) handle-change-stop-color (mf/use-callback @@ -149,19 +149,17 @@ :on-focus handle-focus-stop-offset :on-blur handle-blur-stop-offset}]] - ;; FIXME: memoize color [:> color-row* {:disable-gradient true :disable-picker true - :color {:color color - :opacity opacity} + :color stop :index index :on-change handle-change-stop-color :on-remove handle-remove-stop :on-focus handle-focus-stop-color :on-blur handle-blur-stop-color}]])) -(mf/defc gradients +(mf/defc gradients* [{:keys [type stops editing-stop @@ -177,7 +175,7 @@ on-rotate-stops on-reorder-stops]}] - (let [preview-state (mf/use-state {:hover? false :offset 0.5}) + (let [preview-state (mf/use-state #(do {:hover? false :offset 0.5})) dragging-ref (mf/use-ref false) start-ref (mf/use-ref nil) start-offset (mf/use-ref nil) @@ -347,7 +345,7 @@ [:div {:class (stl/css :gradient-stops-list)} [:& h/sortable-container {} (for [[index stop] (d/enumerate stops)] - [:& stop-input-row + [:> stop-input-row* {:key index :stop stop :index index From b449074425130ed4b1a37ee7535933d96215731c Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 20:26:27 +0100 Subject: [PATCH 7/9] :recycle: Refactor state management of shadow menu --- .../sidebar/options/menus/shadow.cljs | 128 +++++++++--------- 1 file changed, 62 insertions(+), 66 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 4ada5d6430..f7fd4f7168 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -27,7 +27,6 @@ [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] - [okulary.core :as l] [rumext.v2 :as mf])) (def shadow-attrs [:shadow]) @@ -50,8 +49,8 @@ (filterv (fn [[idx _]] (not= idx index))) (mapv second))) -(mf/defc shadow-entry - [{:keys [ids index value on-reorder disable-drag? on-blur open-state-ref]}] +(mf/defc shadow-entry* + [{:keys [ids index shadow on-reorder is-open on-toggle-open]}] (let [basic-offset-x-ref (mf/use-ref nil) basic-offset-y-ref (mf/use-ref nil) basic-blur-ref (mf/use-ref nil) @@ -61,16 +60,12 @@ adv-blur-ref (mf/use-ref nil) adv-spread-ref (mf/use-ref nil) - shadow-style (:style value) + shadow-style (:style shadow) + shadow-id (:id shadow) - shadow-id (:id value) - - open-status-ref (mf/with-memo [open-state-ref shadow-id] - (-> (l/key shadow-id) - (l/derived open-state-ref))) - open-shadow (mf/deref open-status-ref) - hidden? (:hidden value) + hidden? (:hidden shadow) + ;; FIXME: move to parent on-remove-shadow (mf/use-fn (mf/deps ids index) @@ -87,7 +82,6 @@ (h/use-sortable :data-type "penpot/shadow-entry" :on-drop on-drop - :disabled disable-drag? :detect-center? false :data {:id (dm/str "shadow-" index) :index index @@ -118,13 +112,13 @@ detach-color (mf/use-fn - (mf/deps ids index value) + (mf/deps ids index shadow) (fn [_color _opacity] - (when-not (string? (:color value)) + (when-not (string? (:color shadow)) (st/emit! (dwsh/update-shapes ids #(assoc-in % [:shadow index :color] - (dissoc (:color value) :id :file-id))))))) + (dissoc (:color shadow) :id :file-id))))))) toggle-visibility (mf/use-fn @@ -132,9 +126,10 @@ (fn [] (st/emit! (dwsh/update-shapes ids #(update-in % [:shadow index :hidden] not))))) - on-toggle-open-shadow - (fn [] - (swap! open-state-ref update shadow-id not)) + on-toggle-open + (mf/use-fn + (mf/deps shadow-id on-toggle-open) + #(on-toggle-open shadow-id)) on-type-change (mf/use-fn @@ -143,12 +138,16 @@ (let [value (keyword event)] (st/emit! (dwsh/update-shapes ids #(assoc-in % [:shadow index :style] value)))))) - type-options [{:value "drop-shadow" :label (tr "workspace.options.shadow-options.drop-shadow")} - {:value "inner-shadow" :label (tr "workspace.options.shadow-options.inner-shadow")}] + type-options + (mf/with-memo [] + [{:value "drop-shadow" :label (tr "workspace.options.shadow-options.drop-shadow")} + {:value "inner-shadow" :label (tr "workspace.options.shadow-options.inner-shadow")}]) - manage-on-open #(st/emit! (dwu/start-undo-transaction :color-row)) - manage-on-close #(st/emit! (dwu/commit-undo-transaction :color-row))] + manage-on-open + (mf/use-fn #(st/emit! (dwu/start-undo-transaction :color-row))) + manage-on-close + (mf/use-fn #(st/emit! (dwu/commit-undo-transaction :color-row)))] [:div {:class (stl/css-case :global/shadow-option true :shadow-element true @@ -162,8 +161,8 @@ [:div {:class (stl/css-case :shadow-info true :hidden hidden?)} [:button {:class (stl/css-case :more-options true - :selected open-shadow) - :on-click on-toggle-open-shadow} + :selected is-open) + :on-click on-toggle-open} i/menu] [:div {:class (stl/css :type-select)} [:& select @@ -180,10 +179,10 @@ :aria-label (tr "workspace.options.shadow-options.remove-shadow") :on-click on-remove-shadow :icon "remove"}]]] - (when open-shadow + (when is-open [:& advanced-options {:class (stl/css :shadow-advanced-options) - :visible? open-shadow - :on-close on-toggle-open-shadow} + :visible? is-open + :on-close on-toggle-open} [:div {:class (stl/css :first-row)} [:div {:class (stl/css :offset-x-input) @@ -195,8 +194,7 @@ :no-validate true :placeholder "--" :on-change (update-attr index :offset-x basic-offset-x-ref) - :on-blur on-blur - :value (:offset-x value)}]] + :value (:offset-x shadow)}]] [:div {:class (stl/css :blur-input) :title (tr "workspace.options.shadow-options.blur")} @@ -207,9 +205,8 @@ :no-validate true :placeholder "--" :on-change (update-attr index :blur basic-blur-ref) - :on-blur on-blur :min 0 - :value (:blur value)}]] + :value (:blur shadow)}]] [:div {:class (stl/css :spread-input) :title (tr "workspace.options.shadow-options.spread")} @@ -220,8 +217,7 @@ :no-validate true :placeholder "--" :on-change (update-attr index :spread) - :on-blur on-blur - :value (:spread value)}]]] + :value (:spread shadow)}]]] [:div {:class (stl/css :second-row)} [:div {:class (stl/css :offset-y-input) @@ -233,14 +229,9 @@ :no-validate true :placeholder "--" :on-change (update-attr index :offset-y basic-offset-y-ref) - :on-blur on-blur - :value (:offset-y value)}]] + :value (:offset-y shadow)}]] - ;; FIXME: memoize color - [:> color-row* {:color (if (string? (:color value)) - ;; Support for old format colors - {:color (:color value) :opacity (:opacity value)} - (:color value)) + [:> color-row* {:color (:color shadow) :title (tr "workspace.options.shadow-options.color") :disable-gradient true :disable-image true @@ -249,26 +240,36 @@ :on-open manage-on-open :on-close manage-on-close}]]])]])) +(def ^:private xf:add-index + (map-indexed (fn [index shadow] + (assoc shadow ::index index)))) + + (mf/defc shadow-menu {::mf/wrap-props false} - [props] - (let [ids (unchecked-get props "ids") - type (unchecked-get props "type") - values (unchecked-get props "values") + [{:keys [ids type values]}] - shadows (:shadow values []) - open-state-ref (mf/with-memo [] (l/atom {})) - has-shadows? (or (= :multiple shadows) (some? (seq shadows))) + (let [shadows (get values :shadow []) + shadows (mf/with-memo [shadows] + (if (= :multiple shadows) + shadows + (into [] xf:add-index shadows))) - state* (mf/use-state {:show-content true - :disable-drag false}) + open-state* (mf/use-state {}) + open-state (deref open-state*) - state (deref state*) - open? (:show-content state) - disable-drag? (:disable-drag state) + has-shadows? (or (= :multiple shadows) + (some? (seq shadows))) + + show-content* (mf/use-state true) + show-content? (deref show-content*) toggle-content - (mf/use-fn #(swap! state* update :show-content not)) + (mf/use-fn #(swap! show-content* not)) + + on-toggle-open + (mf/use-fn + (fn [shadow-id] (swap! open-state* update shadow-id not))) on-remove-all (mf/use-fn @@ -282,10 +283,6 @@ (fn [new-index index] (st/emit! (dc/reorder-shadows ids index new-index)))) - on-blur - (mf/use-fn - #(swap! state* assoc :disable-drag false)) - on-add-shadow (mf/use-fn (mf/deps ids) @@ -294,7 +291,7 @@ [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} [:& title-bar {:collapsable has-shadows? - :collapsed (not open?) + :collapsed (not show-content?) :on-collapsed toggle-content :title (case type :multiple (tr "workspace.options.shadow-options.title.multiple") @@ -309,7 +306,7 @@ :icon "add" :data-testid "add-shadow"}])]] - (when open? + (when show-content? (cond (= :multiple shadows) [:div {:class (stl/css :element-set-content)} @@ -324,13 +321,12 @@ (seq shadows) [:& h/sortable-container {} [:div {:class (stl/css :element-set-content)} - (for [[index value] (d/enumerate shadows)] - [:& shadow-entry + (for [{:keys [::index id] :as shadow} shadows] + [:> shadow-entry* {:key (dm/str "shadow-" index) :ids ids - :value value + :shadow shadow + :is-open (get open-state id) :on-reorder handle-reorder - :disable-drag? disable-drag? - :on-blur on-blur - :index index - :open-state-ref open-state-ref}])]]))])) + :on-toggle-open on-toggle-open + :index index}])]]))])) From 01268ea14ea263a6a9d8b460c6475e1f7fa796e1 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 21:06:48 +0100 Subject: [PATCH 8/9] :zap: Add major performance enhacements to shadow menu --- .../sidebar/options/menus/shadow.cljs | 201 +++++++++--------- .../sidebar/options/shapes/bool.cljs | 6 +- .../sidebar/options/shapes/circle.cljs | 5 +- .../sidebar/options/shapes/frame.cljs | 5 +- .../sidebar/options/shapes/group.cljs | 4 +- .../sidebar/options/shapes/image.cljs | 5 +- .../sidebar/options/shapes/multiple.cljs | 6 +- .../sidebar/options/shapes/path.cljs | 5 +- .../sidebar/options/shapes/rect.cljs | 5 +- .../sidebar/options/shapes/svg_raw.cljs | 5 +- .../sidebar/options/shapes/text.cljs | 6 +- 11 files changed, 119 insertions(+), 134 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index f7fd4f7168..4554248b1a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -10,7 +10,6 @@ [app.common.colors :as clr] [app.common.data :as d] [app.common.data.macros :as dm] - [app.common.math :as mth] [app.common.uuid :as uuid] [app.main.data.workspace.colors :as dc] [app.main.data.workspace.shapes :as dwsh] @@ -25,7 +24,6 @@ [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -50,28 +48,18 @@ (mapv second))) (mf/defc shadow-entry* - [{:keys [ids index shadow on-reorder is-open on-toggle-open]}] - (let [basic-offset-x-ref (mf/use-ref nil) - basic-offset-y-ref (mf/use-ref nil) - basic-blur-ref (mf/use-ref nil) - - adv-offset-x-ref (mf/use-ref nil) - adv-offset-y-ref (mf/use-ref nil) - adv-blur-ref (mf/use-ref nil) - adv-spread-ref (mf/use-ref nil) - - shadow-style (:style shadow) + [{:keys [index shadow is-open + on-reorder + on-toggle-open + on-detach-color + on-update + on-remove + on-toggle-visibility]}] + (let [shadow-style (:style shadow) shadow-id (:id shadow) hidden? (:hidden shadow) - ;; FIXME: move to parent - on-remove-shadow - (mf/use-fn - (mf/deps ids index) - (fn [] - (st/emit! (dwsh/update-shapes ids #(update % :shadow remove-shadow-by-index index))))) - on-drop (mf/use-fn (mf/deps on-reorder index) @@ -87,66 +75,47 @@ :index index :name (dm/str "Border row" index)}) - ;; FIXME: this function causes the numeric-input rerender - ;; ALWAYS, this is causes because numeric-input design makes - ;; imposible implement efficiently any component that uses it; - ;; it should be refactored - update-attr - (fn update-attr - ([index attr] - (update-attr index attr nil)) - ([index attr update-ref] - (fn [value] - (when (mth/finite? value) - (st/emit! (dwsh/update-shapes ids #(assoc-in % [:shadow index attr] value))) - (when-let [update-node (and update-ref (mf/ref-val update-ref))] - (dom/set-value! update-node value)))))) + on-remove + (mf/use-fn (mf/deps index) #(on-remove index)) - update-color - (mf/use-fn - (mf/deps ids index) - (fn [color] - (st/emit! (dwsh/update-shapes - ids - #(assoc-in % [:shadow index :color] (d/without-nils color)))))) + on-update-offset-x + (mf/use-fn (mf/deps index) #(on-update index :offset-x %)) - detach-color - (mf/use-fn - (mf/deps ids index shadow) - (fn [_color _opacity] - (when-not (string? (:color shadow)) - (st/emit! (dwsh/update-shapes - ids - #(assoc-in % [:shadow index :color] - (dissoc (:color shadow) :id :file-id))))))) + on-update-offset-y + (mf/use-fn (mf/deps index) #(on-update index :offset-y %)) - toggle-visibility - (mf/use-fn - (mf/deps ids index) - (fn [] - (st/emit! (dwsh/update-shapes ids #(update-in % [:shadow index :hidden] not))))) + on-update-spread + (mf/use-fn (mf/deps index) #(on-update index :spread %)) + + on-update-blur + (mf/use-fn (mf/deps index) #(on-update index :blur %)) + + on-update-color + (mf/use-fn (mf/deps index) #(on-update index :color (d/without-nils %))) + + on-detach-color + (mf/use-fn (mf/deps index) #(on-detach-color index)) + + on-style-change + (mf/use-fn (mf/deps index) #(on-update index :style (keyword %))) + + on-toggle-visibility + (mf/use-fn (mf/deps index) #(on-toggle-visibility index)) on-toggle-open (mf/use-fn (mf/deps shadow-id on-toggle-open) #(on-toggle-open shadow-id)) - on-type-change - (mf/use-fn - (mf/deps ids index) - (fn [event] - (let [value (keyword event)] - (st/emit! (dwsh/update-shapes ids #(assoc-in % [:shadow index :style] value)))))) - type-options (mf/with-memo [] [{:value "drop-shadow" :label (tr "workspace.options.shadow-options.drop-shadow")} {:value "inner-shadow" :label (tr "workspace.options.shadow-options.inner-shadow")}]) - manage-on-open + on-open-row (mf/use-fn #(st/emit! (dwu/start-undo-transaction :color-row))) - manage-on-close + on-close-row (mf/use-fn #(st/emit! (dwu/commit-undo-transaction :color-row)))] [:div {:class (stl/css-case :global/shadow-option true @@ -169,15 +138,15 @@ {:class (stl/css :shadow-type-select) :default-value (d/name shadow-style) :options type-options - :on-change on-type-change}]]] + :on-change on-style-change}]]] [:div {:class (stl/css :actions)} [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.toggle-shadow") - :on-click toggle-visibility + :on-click on-toggle-visibility :icon (if hidden? "hide" "shown")}] [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.remove-shadow") - :on-click on-remove-shadow + :on-click on-remove :icon "remove"}]]] (when is-open [:& advanced-options {:class (stl/css :shadow-advanced-options) @@ -189,22 +158,20 @@ :title (tr "workspace.options.shadow-options.offsetx")} [:span {:class (stl/css :input-label)} "X"] - [:> numeric-input* {:className (stl/css :numeric-input) - :ref adv-offset-x-ref + [:> numeric-input* {:class (stl/css :numeric-input) :no-validate true :placeholder "--" - :on-change (update-attr index :offset-x basic-offset-x-ref) + :on-change on-update-offset-x :value (:offset-x shadow)}]] [:div {:class (stl/css :blur-input) :title (tr "workspace.options.shadow-options.blur")} [:span {:class (stl/css :input-label)} (tr "workspace.options.shadow-options.blur")] - [:> numeric-input* {:ref adv-blur-ref - :className (stl/css :numeric-input) + [:> numeric-input* {:class (stl/css :numeric-input) :no-validate true :placeholder "--" - :on-change (update-attr index :blur basic-blur-ref) + :on-change on-update-blur :min 0 :value (:blur shadow)}]] @@ -212,11 +179,10 @@ :title (tr "workspace.options.shadow-options.spread")} [:span {:class (stl/css :input-label)} (tr "workspace.options.shadow-options.spread")] - [:> numeric-input* {:ref adv-spread-ref - :className (stl/css :numeric-input) + [:> numeric-input* {:class (stl/css :numeric-input) :no-validate true :placeholder "--" - :on-change (update-attr index :spread) + :on-change on-update-spread :value (:spread shadow)}]]] [:div {:class (stl/css :second-row)} @@ -224,36 +190,33 @@ :title (tr "workspace.options.shadow-options.offsety")} [:span {:class (stl/css :input-label)} "Y"] - [:> numeric-input* {:ref adv-offset-y-ref - :className (stl/css :numeric-input) + [:> numeric-input* {:class (stl/css :numeric-input) :no-validate true :placeholder "--" - :on-change (update-attr index :offset-y basic-offset-y-ref) + :on-change on-update-offset-y :value (:offset-y shadow)}]] [:> color-row* {:color (:color shadow) :title (tr "workspace.options.shadow-options.color") :disable-gradient true :disable-image true - :on-change update-color - :on-detach detach-color - :on-open manage-on-open - :on-close manage-on-close}]]])]])) + :on-change on-update-color + :on-detach on-detach-color + :on-open on-open-row + :on-close on-close-row}]]])]])) (def ^:private xf:add-index (map-indexed (fn [index shadow] (assoc shadow ::index index)))) +(mf/defc shadow-menu* + [{:keys [ids type values] :as props}] + (let [shadows (mf/with-memo [values] + (if (= :multiple values) + values + (not-empty (into [] xf:add-index values)))) -(mf/defc shadow-menu - {::mf/wrap-props false} - [{:keys [ids type values]}] - - (let [shadows (get values :shadow []) - shadows (mf/with-memo [shadows] - (if (= :multiple shadows) - shadows - (into [] xf:add-index shadows))) + ids-ref (h/use-update-ref ids) open-state* (mf/use-state {}) open-state (deref open-state*) @@ -268,25 +231,50 @@ (mf/use-fn #(swap! show-content* not)) on-toggle-open - (mf/use-fn - (fn [shadow-id] (swap! open-state* update shadow-id not))) + (mf/use-fn #(swap! open-state* update % not)) on-remove-all (mf/use-fn - (mf/deps ids) (fn [] - (st/emit! (dwsh/update-shapes ids #(dissoc % :shadow))))) + (let [ids (mf/ref-val ids-ref)] + (st/emit! (dwsh/update-shapes ids #(dissoc % :shadow)))))) handle-reorder (mf/use-fn - (mf/deps ids) (fn [new-index index] - (st/emit! (dc/reorder-shadows ids index new-index)))) + (let [ids (mf/ref-val ids-ref)] + (st/emit! (dc/reorder-shadows ids index new-index))))) on-add-shadow (mf/use-fn - (mf/deps ids) - #(st/emit! (dc/add-shadow ids (create-shadow))))] + (fn [] + (let [ids (mf/ref-val ids-ref)] + (st/emit! (dc/add-shadow ids (create-shadow)))))) + + on-detach-color + (mf/use-fn + (fn [index] + (let [ids (mf/ref-val ids-ref) + f #(update-in % [:shadow index :color] dissoc :id :file-id :ref-id :ref-file)] + (st/emit! (dwsh/update-shapes ids f))))) + + on-toggle-visibility + (mf/use-fn + (fn [index] + (let [ids (mf/ref-val ids-ref)] + (st/emit! (dwsh/update-shapes ids #(update-in % [:shadow index :hidden] not)))))) + + on-remove + (mf/use-fn + (fn [index] + (let [ids (mf/ref-val ids-ref)] + (st/emit! (dwsh/update-shapes ids #(update % :shadow remove-shadow-by-index index)))))) + + on-update + (mf/use-fn + (fn [index attr value] + (let [ids (mf/ref-val ids-ref)] + (st/emit! (dwsh/update-shapes ids #(assoc-in % [:shadow index attr] value))))))] [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} @@ -318,15 +306,18 @@ :on-click on-remove-all :icon "remove"}]]]] - (seq shadows) + (some? shadows) [:& h/sortable-container {} [:div {:class (stl/css :element-set-content)} (for [{:keys [::index id] :as shadow} shadows] [:> shadow-entry* - {:key (dm/str "shadow-" index) - :ids ids + {:key (dm/str index) + :index index :shadow shadow + :on-update on-update + :on-remove on-remove + :on-toggle-visibility on-toggle-visibility + :on-detach-color on-detach-color :is-open (get open-state id) :on-reorder handle-reorder - :on-toggle-open on-toggle-open - :index index}])]]))])) + :on-toggle-open on-toggle-open}])]]))])) 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 dba8089ca5..f789050820 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 @@ -17,7 +17,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [rumext.v2 :as mf])) @@ -88,7 +88,7 @@ :type type :show-caps true :values stroke-values}] - [:& shadow-menu {:ids ids - :values (select-keys shape [:shadow])}] + + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids :values (select-keys shape [:blur])}]])) 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 450cc5dae1..7c3530a0c3 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 @@ -17,7 +17,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [rumext.v2 :as mf])) @@ -89,8 +89,7 @@ [:& stroke-menu {:ids ids :type type :values stroke-values}] - [:& shadow-menu {:ids ids - :values (select-keys shape [:shadow])}] + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids :values (select-keys shape [:blur])}] [:& svg-attrs-menu {:ids ids 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 3576fa5090..6d7a0b433c 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 @@ -20,7 +20,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [rumext.v2 :as mf])) @@ -117,8 +117,7 @@ :shapes shapes-with-children :file-id file-id :libraries shared-libs}] - [:& shadow-menu {:ids ids - :values (select-keys shape [:shadow])}] + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids :values (select-keys shape [:blur])}] [:& frame-grid {:shape shape}]])) 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 501714b13a..e39a3aff60 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 @@ -21,7 +21,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [app.main.ui.workspace.sidebar.options.menus.text :as ot] @@ -109,7 +109,7 @@ :libraries shared-libs}] (when-not (empty? shadow-ids) - [:& shadow-menu {:type type :ids ids :values (select-keys shape [:shadow])}]) + [:> shadow-menu* {:ids ids :values (get shape :shadow) :type type}]) (when-not (empty? blur-ids) [:& blur-menu {:type type :ids blur-ids :values blur-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index 8f506ab217..84f7fe72c9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs @@ -17,7 +17,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [rumext.v2 :as mf])) @@ -91,8 +91,7 @@ :type type :values stroke-values}] - [:& shadow-menu {:ids ids - :values (select-keys shape [:shadow])}] + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids :values (select-keys shape [:blur])}]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 27ddd54612..25232adc8b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -26,7 +26,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measure-attrs measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.text :as ot] [rumext.v2 :as mf])) @@ -401,7 +401,9 @@ :libraries shared-libs}]) (when-not (empty? shadow-ids) - [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}]) + [:> shadow-menu* {:type type + :ids shadow-ids + :values (get shadow-values :shadow)}]) (when-not (empty? blur-ids) [:& blur-menu {:type type :ids blur-ids :values blur-values}]) 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 78c7082778..6ce3b4c2be 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 @@ -17,7 +17,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [rumext.v2 :as mf])) @@ -89,8 +89,7 @@ :type type :show-caps true :values stroke-values}] - [:& shadow-menu {:ids ids - :values (select-keys shape [:shadow])}] + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids :values (select-keys shape [:blur])}] [:& svg-attrs-menu {:ids ids 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 d543291db5..2cdf6f211f 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 @@ -17,7 +17,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [rumext.v2 :as mf])) @@ -93,8 +93,7 @@ :type type :values stroke-values}] - [:& shadow-menu {:ids ids - :values (select-keys shape [:shadow])}] + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids :values (select-keys shape [:blur])}] 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 d540cb2d5c..ffa0d9c053 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 @@ -18,7 +18,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.svg-attrs :refer [svg-attrs-menu]] [cuerdas.core :as str] @@ -162,8 +162,7 @@ :type type :values stroke-values}] - [:& shadow-menu {:ids ids - :values (select-keys shape [:shadow])}] + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids :values (select-keys shape [:blur])}] 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 d26648aac3..61d06a07d3 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 @@ -23,7 +23,7 @@ [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu*]] - [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] + [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu*]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] [app.main.ui.workspace.sidebar.options.menus.text :refer [text-menu]] [rumext.v2 :as mf])) @@ -152,9 +152,7 @@ :file-id file-id :libraries shared-libs}]) - [:& shadow-menu - {:ids ids - :values (select-keys shape [:shadow])}] + [:> shadow-menu* {:ids ids :values (get shape :shadow)}] [:& blur-menu {:ids ids From 8f37cd2c073b5d5ad78af3a6c765ae972b0aaf81 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 21:20:44 +0100 Subject: [PATCH 9/9] :zap: Add missing use-memo on page-menu --- .../app/main/ui/workspace/sidebar/options.cljs | 2 +- .../main/ui/workspace/sidebar/options/page.cljs | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index e661fb539d..a6d4416ce4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -116,7 +116,7 @@ :shared-libs shared-libs}] (= 0 (count selected)) - [:& page/options] + [:> page/options*] (= 1 (count selected)) [:> shape-options* diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs index 2b6ed69d8a..3619913254 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs @@ -24,14 +24,18 @@ (-> (l/key :background) (l/derived refs/workspace-page))) -(mf/defc options - {::mf/wrap [mf/memo] - ::mf/wrap-props false} +(mf/defc options* + {::mf/wrap [mf/memo]} [] (let [background (mf/deref ref:background-color) on-change (mf/use-fn #(st/emit! (dw/change-canvas-color %))) on-open (mf/use-fn #(st/emit! (dwu/start-undo-transaction :options))) - on-close (mf/use-fn #(st/emit! (dwu/commit-undo-transaction :options)))] + on-close (mf/use-fn #(st/emit! (dwu/commit-undo-transaction :options))) + + color (mf/with-memo [background] + {:color (d/nilv background clr/canvas) + :opacity 1})] + [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} [:& title-bar {:collapsable false @@ -39,14 +43,12 @@ :class (stl/css :title-spacing-page)}]] [:div {:class (stl/css :element-content)} - ;; FIXME: memoize color [:> color-row* {:disable-gradient true :disable-opacity true :disable-image true :title (tr "workspace.options.canvas-background") - :color {:color (d/nilv background clr/canvas) - :opacity 1} + :color color :on-change on-change :on-open on-open :on-close on-close}]]]))