From 930ad359ddddbc6f7a24ccc876edb15d17a1d354 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 29 Jan 2025 18:38:31 +0100 Subject: [PATCH] :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 e45325cc4..9aabb4fbc 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 4161b60c8..1e6973f10 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 047d26346..25fe82178 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 a0d63505c..d593687e5 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 45b73c182..4ada5d643 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 c1ba935ed..2b6ed69d8 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 e0e98aca3..7e7cdb17e 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 22cf9d567..f61de2760 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)}