From 628ce604c5fbdb34cee19002b0511982751cd724 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 2 Apr 2026 16:26:32 +0000 Subject: [PATCH] :recycle: Convert colorpicker and its sub-components to modern rumext * format slider-selector (slider_selector.cljs): - Rename to slider-selector* - Rename prop vertical? to is-vertical - Remove prop reverse? entirely: it was never passed by any callsite, so the related reversal logic in calculate-pos and handler positioning is also removed as dead code value-saturation-selector (ramp.cljs): - Rename to value-saturation-selector* - Update internal call site to [:> value-saturation-selector* ...] - Update slider-selector call sites to [:> slider-selector* ...] harmony-selector (harmony.cljs): - Rename to harmony-selector* - Update slider-selector call sites to [:> slider-selector* ...] with renamed is-vertical prop - Remove stale duplicate :vertical true prop - Fix spurious extra wrapping vector around the opacity slider in the when branch hsva-selector (hsva.cljs): - Rename to hsva-selector* - Update all four slider-selector call sites to [:> slider-selector* ...] - Remove no-op :reverse? false prop from the value slider color-inputs (color_inputs.cljs): - Rename to color-inputs* colorpicker.cljs: - Update :refer imports for color-inputs*, harmony-selector*, hsva-selector* and libraries* - Update all corresponding call sites from [:& ...] to [:> ...] --- .../app/main/ui/workspace/colorpicker.cljs | 42 +++++++++---------- .../workspace/colorpicker/color_inputs.cljs | 2 +- .../ui/workspace/colorpicker/harmony.cljs | 27 ++++++------ .../main/ui/workspace/colorpicker/hsva.cljs | 13 +++--- .../ui/workspace/colorpicker/libraries.cljs | 2 +- .../main/ui/workspace/colorpicker/ramp.cljs | 30 ++++++------- .../colorpicker/slider_selector.cljs | 17 +++----- 7 files changed, 61 insertions(+), 72 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 3e930e9f81..c15f5d57ea 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -33,12 +33,12 @@ [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as deprecated-icon] - [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]] + [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs*]] [app.main.ui.workspace.colorpicker.color-tokens :refer [token-section*]] [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]] + [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*]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]] [app.main.ui.workspace.colorpicker.shortcuts :as sc] [app.util.dom :as dom] @@ -93,7 +93,7 @@ (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from)) (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))) -(mf/defc colorpicker +(mf/defc colorpicker* [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept origin combined-tokens color-origin on-token-change tab applied-token]}] (let [state (mf/deref refs/colorpicker) node-ref (mf/use-ref) @@ -511,27 +511,27 @@ :on-finish-drag on-finish-drag}] "harmony" - [:& harmony-selector + [:> harmony-selector* {:color current-color :disable-opacity disable-opacity :on-change handle-change-color :on-start-drag on-start-drag}] "hsva" - [:& hsva-selector + [:> hsva-selector* {:color current-color :disable-opacity disable-opacity :on-change handle-change-color :on-start-drag on-start-drag :on-finish-drag on-finish-drag}]))]] - [:& color-inputs + [:> color-inputs* {:type type :disable-opacity disable-opacity :color current-color :on-change handle-change-color}] - [:& libraries + [:> libraries* {:state state :current-color current-color :disable-gradient disable-gradient @@ -786,15 +786,15 @@ :data-testid "colorpicker" :style style} - [:& colorpicker {:data data - :combined-tokens grouped-tokens-by-set - :disable-gradient disable-gradient - :disable-opacity disable-opacity - :disable-image disable-image - :on-token-change on-token-change - :applied-token applied-token - :on-change on-change' - :origin origin - :tab tab - :color-origin color-origin - :on-accept on-accept}]])) + [:> colorpicker* {:data data + :combined-tokens grouped-tokens-by-set + :disable-gradient disable-gradient + :disable-opacity disable-opacity + :disable-image disable-image + :on-token-change on-token-change + :applied-token applied-token + :on-change on-change' + :origin origin + :tab tab + :color-origin color-origin + :on-accept on-accept}]])) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs index fc384cdfdd..09ad2d0e8c 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs @@ -28,7 +28,7 @@ [val] (* (/ val 255) 100)) -(mf/defc color-inputs [{:keys [type color disable-opacity on-change]}] +(mf/defc color-inputs* [{:keys [type color disable-opacity on-change]}] (let [{red :r green :g blue :b hue :h saturation :s value :v hex :hex alpha :alpha} color diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs index c043899551..393e89df69 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs @@ -11,7 +11,7 @@ [app.common.geom.point :as gpt] [app.common.math :as mth] [app.common.types.color :as cc] - [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]] + [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector*]] [app.util.dom :as dom] [app.util.object :as obj] [cuerdas.core :as str] @@ -58,7 +58,7 @@ y (+ (/ canvas-side 2) (* comp-y (/ canvas-side 2)))] (gpt/point x y))) -(mf/defc harmony-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}] +(mf/defc harmony-selector* [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}] (let [canvas-ref (mf/use-ref nil) canvas-side 192 {hue :h saturation :s value :v alpha :alpha} color @@ -134,24 +134,21 @@ :style {"--hue-from" (dm/str "hsl(" h1 ", " (* s1 100) "%, " (* l1 100) "%)") "--hue-to" (dm/str "hsl(" h2 ", " (* s2 100) "%, " (* l2 100) "%)")}} [:div {:class (stl/css :handlers-wrapper)} - [:& slider-selector {:type :value - :vertical? true - :reverse? false - :value value - :max-value 255 - :vertical true - :on-change on-change-value - :on-start-drag on-start-drag - :on-finish-drag on-finish-drag}] + [:> slider-selector* {:type :value + :is-vertical true + :value value + :max-value 255 + :on-change on-change-value + :on-start-drag on-start-drag + :on-finish-drag on-finish-drag}] (when (not disable-opacity) - [[:& slider-selector {:type :opacity - :vertical? true + [:> slider-selector* {:type :opacity + :is-vertical true :value alpha :max-value 1 - :vertical true :on-change on-change-opacity :on-start-drag on-start-drag - :on-finish-drag on-finish-drag}]])] + :on-finish-drag on-finish-drag}])] [:div {:class (stl/css :hue-wheel-wrapper)} [:canvas {:class (stl/css :hue-wheel) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs b/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs index 9a7d240f55..807d976314 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs @@ -8,10 +8,10 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.types.color :as cc] - [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]] + [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector*]] [rumext.v2 :as mf])) -(mf/defc hsva-selector [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}] +(mf/defc hsva-selector* [{:keys [color disable-opacity on-change on-start-drag on-finish-drag]}] (let [{hue :h saturation :s value :v alpha :alpha} color handle-change-slider (fn [key] (fn [new-value] @@ -26,7 +26,7 @@ [:div {:class (stl/css :hsva-selector)} [:div {:class (stl/css :hsva-row)} [:span {:class (stl/css :hsva-selector-label)} "H"] - [:& slider-selector + [:> slider-selector* {:class (stl/css :hsva-bar) :type :hue :max-value 360 @@ -36,7 +36,7 @@ :on-finish-drag on-finish-drag}]] [:div {:class (stl/css :hsva-row)} [:span {:class (stl/css :hsva-selector-label)} "S"] - [:& slider-selector + [:> slider-selector* {:class (stl/css :hsva-bar) :type :saturation :max-value 1 @@ -46,10 +46,9 @@ :on-finish-drag on-finish-drag}]] [:div {:class (stl/css :hsva-row)} [:span {:class (stl/css :hsva-selector-label)} "V"] - [:& slider-selector + [:> slider-selector* {:class (stl/css :hsva-bar) :type :value - :reverse? false :max-value 255 :value value :on-change (handle-change-slider :v) @@ -58,7 +57,7 @@ (when (not disable-opacity) [:div {:class (stl/css :hsva-row)} [:span {:class (stl/css :hsva-selector-label)} "A"] - [:& slider-selector + [:> slider-selector* {:class (stl/css :hsva-bar) :type :opacity :max-value 1 diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index e565a05754..baf82c0f79 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -27,7 +27,7 @@ [potok.v2.core :as ptk] [rumext.v2 :as mf])) -(mf/defc libraries +(mf/defc libraries* [{:keys [state on-select-color on-add-library-color disable-gradient disable-opacity disable-image]}] (let [selected* (h/use-shared-state mdc/colorpicker-selected-broadcast-key :recent) selected (deref selected*) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs index 154587fc7b..68eab222cd 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs @@ -11,11 +11,11 @@ [app.common.math :as mth] [app.common.types.color :as cc] [app.main.ui.components.color-bullet :as cb] - [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]] + [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector*]] [app.util.dom :as dom] [rumext.v2 :as mf])) -(mf/defc value-saturation-selector [{:keys [saturation value on-change on-start-drag on-finish-drag]}] +(mf/defc value-saturation-selector* [{:keys [saturation value on-change on-start-drag on-finish-drag]}] (let [dragging?* (mf/use-state false) dragging? (deref dragging?*) calculate-pos @@ -127,7 +127,7 @@ (reset! internal-color* (enrich-color-map color)))) [:* - [:& value-saturation-selector + [:> value-saturation-selector* {:hue h :saturation s :value v @@ -140,17 +140,17 @@ [:& cb/color-bullet {:color bullet-color :area true}] [:div {:class (stl/css :sliders-wrapper)} - [:& slider-selector {:type :hue - :max-value 360 - :value h - :on-change on-change-hue - :on-start-drag on-start-drag - :on-finish-drag on-finish-drag}] + [:> slider-selector* {:type :hue + :max-value 360 + :value h + :on-change on-change-hue + :on-start-drag on-start-drag + :on-finish-drag on-finish-drag}] (when (not disable-opacity) - [:& slider-selector {:type :opacity - :max-value 1 - :value alpha - :on-change on-change-opacity - :on-start-drag on-start-drag - :on-finish-drag on-finish-drag}])]]])) + [:> slider-selector* {:type :opacity + :max-value 1 + :value alpha + :on-change on-change-opacity + :on-start-drag on-start-drag + :on-finish-drag on-finish-drag}])]]])) diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs index c69acfd703..f125b6368b 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs @@ -13,8 +13,8 @@ [app.util.object :as obj] [rumext.v2 :as mf])) -(mf/defc slider-selector - [{:keys [value class min-value max-value vertical? reverse? on-change on-start-drag on-finish-drag type]}] +(mf/defc slider-selector* + [{:keys [value class min-value max-value is-vertical on-change on-start-drag on-finish-drag type]}] (let [min-value (or min-value 0) max-value (or max-value 1) dragging? (mf/use-state false) @@ -42,17 +42,14 @@ (when on-change (let [{:keys [left right top bottom]} (-> ev dom/get-target dom/get-bounding-rect) {:keys [x y]} (-> ev dom/get-client-position) - unit-value (if vertical? + unit-value (if is-vertical (mth/clamp (/ (- bottom y) (- bottom top)) 0 1) (mth/clamp (/ (- x left) (- right left)) 0 1)) - unit-value (if reverse? - (mth/abs (- unit-value 1.0)) - unit-value) value (+ min-value (* unit-value (- max-value min-value)))] (on-change value))))] - [:div {:class (dm/str class (stl/css-case :vertical vertical? + [:div {:class (dm/str class (stl/css-case :vertical is-vertical :slider-selector true :hue (= type :hue) :opacity (= type :opacity) @@ -65,14 +62,10 @@ :on-pointer-move #(when @dragging? (calculate-pos %))} (let [value-percent (* (/ (- value min-value) (- max-value min-value)) 100) - - value-percent (if reverse? - (mth/abs (- value-percent 100)) - value-percent) value-percent-str (str value-percent "%") style-common #js {:pointerEvents "none"} style-horizontal (obj/merge! #js {:left value-percent-str} style-common) style-vertical (obj/merge! #js {:bottom value-percent-str} style-common)] [:div {:class (stl/css :handler) - :style (if vertical? style-vertical style-horizontal)}])])) + :style (if is-vertical style-vertical style-horizontal)}])]))