github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-05 20:38:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Convert colorpicker and its sub-components to modern rumext * format

Browse Source 
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 [:> ...]
This commit is contained in:
Andrey Antukh 2026-04-02 16:26:32 +00:00 committed by Belén Albeza
parent 90d052464f
commit 628ce604c5
7 changed files with 61 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/main/ui/workspace/colorpicker.cljs
View File

@ -33,12 +33,12 @@
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.icons :as deprecated-icon] [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.color-tokens :refer [token-section*]]
[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.harmony :refer [harmony-selector*]]
[app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]] [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector*]]
[app.main.ui.workspace.colorpicker.libraries :refer [libraries]] [app.main.ui.workspace.colorpicker.libraries :refer [libraries*]]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
[app.main.ui.workspace.colorpicker.shortcuts :as sc] [app.main.ui.workspace.colorpicker.shortcuts :as sc]
[app.util.dom :as dom] [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-from" (format-hsl hsl-from))
(dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))) (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]}] [{: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) (let [state (mf/deref refs/colorpicker)
node-ref (mf/use-ref) node-ref (mf/use-ref)
@ -511,27 +511,27 @@
:on-finish-drag on-finish-drag}] :on-finish-drag on-finish-drag}]
"harmony" "harmony"
[:& harmony-selector [:> harmony-selector*
{:color current-color {:color current-color
:disable-opacity disable-opacity :disable-opacity disable-opacity
:on-change handle-change-color :on-change handle-change-color
:on-start-drag on-start-drag}] :on-start-drag on-start-drag}]
"hsva" "hsva"
[:& hsva-selector [:> hsva-selector*
{:color current-color {:color current-color
:disable-opacity disable-opacity :disable-opacity disable-opacity
:on-change handle-change-color :on-change handle-change-color
:on-start-drag on-start-drag :on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]))]] :on-finish-drag on-finish-drag}]))]]
[:& color-inputs [:> color-inputs*
{:type type {:type type
:disable-opacity disable-opacity :disable-opacity disable-opacity
:color current-color :color current-color
:on-change handle-change-color}] :on-change handle-change-color}]
[:& libraries [:> libraries*
{:state state {:state state
:current-color current-color :current-color current-color
:disable-gradient disable-gradient :disable-gradient disable-gradient
@ -786,15 +786,15 @@
:data-testid "colorpicker" :data-testid "colorpicker"
:style style} :style style}
[:& colorpicker {:data data [:> colorpicker* {:data data
:combined-tokens grouped-tokens-by-set :combined-tokens grouped-tokens-by-set
:disable-gradient disable-gradient :disable-gradient disable-gradient
:disable-opacity disable-opacity :disable-opacity disable-opacity
:disable-image disable-image :disable-image disable-image
:on-token-change on-token-change :on-token-change on-token-change
:applied-token applied-token :applied-token applied-token
:on-change on-change' :on-change on-change'
:origin origin :origin origin
:tab tab :tab tab
:color-origin color-origin :color-origin color-origin
:on-accept on-accept}]])) :on-accept on-accept}]]))

2
frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
View File

@ -28,7 +28,7 @@
[val] [val]
(* (/ val 255) 100)) (* (/ 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 (let [{red :r green :g blue :b
hue :h saturation :s value :v hue :h saturation :s value :v
hex :hex alpha :alpha} color hex :hex alpha :alpha} color

27
frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
View File

@ -11,7 +11,7 @@
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.math :as mth] [app.common.math :as mth]
[app.common.types.color :as cc] [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.dom :as dom]
[app.util.object :as obj] [app.util.object :as obj]
[cuerdas.core :as str] [cuerdas.core :as str]
@ -58,7 +58,7 @@
y (+ (/ canvas-side 2) (* comp-y (/ canvas-side 2)))] y (+ (/ canvas-side 2) (* comp-y (/ canvas-side 2)))]
(gpt/point x y))) (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) (let [canvas-ref (mf/use-ref nil)
canvas-side 192 canvas-side 192
{hue :h saturation :s value :v alpha :alpha} color {hue :h saturation :s value :v alpha :alpha} color
@ -134,24 +134,21 @@
:style {"--hue-from" (dm/str "hsl(" h1 ", " (* s1 100) "%, " (* l1 100) "%)") :style {"--hue-from" (dm/str "hsl(" h1 ", " (* s1 100) "%, " (* l1 100) "%)")
"--hue-to" (dm/str "hsl(" h2 ", " (* s2 100) "%, " (* l2 100) "%)")}} "--hue-to" (dm/str "hsl(" h2 ", " (* s2 100) "%, " (* l2 100) "%)")}}
[:div {:class (stl/css :handlers-wrapper)} [:div {:class (stl/css :handlers-wrapper)}
[:& slider-selector {:type :value [:> slider-selector* {:type :value
:vertical? true :is-vertical true
:reverse? false :value value
:value value :max-value 255
:max-value 255 :on-change on-change-value
:vertical true :on-start-drag on-start-drag
:on-change on-change-value :on-finish-drag on-finish-drag}]
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}]
(when (not disable-opacity) (when (not disable-opacity)
[[:& slider-selector {:type :opacity [:> slider-selector* {:type :opacity
:vertical? true :is-vertical true
:value alpha :value alpha
:max-value 1 :max-value 1
:vertical true
:on-change on-change-opacity :on-change on-change-opacity
:on-start-drag on-start-drag :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)} [:div {:class (stl/css :hue-wheel-wrapper)}
[:canvas {:class (stl/css :hue-wheel) [:canvas {:class (stl/css :hue-wheel)

13
frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs
View File

@ -8,10 +8,10 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.types.color :as cc] [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])) [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 (let [{hue :h saturation :s value :v alpha :alpha} color
handle-change-slider (fn [key] handle-change-slider (fn [key]
(fn [new-value] (fn [new-value]
@ -26,7 +26,7 @@
[:div {:class (stl/css :hsva-selector)} [:div {:class (stl/css :hsva-selector)}
[:div {:class (stl/css :hsva-row)} [:div {:class (stl/css :hsva-row)}
[:span {:class (stl/css :hsva-selector-label)} "H"] [:span {:class (stl/css :hsva-selector-label)} "H"]
[:& slider-selector [:> slider-selector*
{:class (stl/css :hsva-bar) {:class (stl/css :hsva-bar)
:type :hue :type :hue
:max-value 360 :max-value 360
@ -36,7 +36,7 @@
:on-finish-drag on-finish-drag}]] :on-finish-drag on-finish-drag}]]
[:div {:class (stl/css :hsva-row)} [:div {:class (stl/css :hsva-row)}
[:span {:class (stl/css :hsva-selector-label)} "S"] [:span {:class (stl/css :hsva-selector-label)} "S"]
[:& slider-selector [:> slider-selector*
{:class (stl/css :hsva-bar) {:class (stl/css :hsva-bar)
:type :saturation :type :saturation
:max-value 1 :max-value 1
@ -46,10 +46,9 @@
:on-finish-drag on-finish-drag}]] :on-finish-drag on-finish-drag}]]
[:div {:class (stl/css :hsva-row)} [:div {:class (stl/css :hsva-row)}
[:span {:class (stl/css :hsva-selector-label)} "V"] [:span {:class (stl/css :hsva-selector-label)} "V"]
[:& slider-selector [:> slider-selector*
{:class (stl/css :hsva-bar) {:class (stl/css :hsva-bar)
:type :value :type :value
:reverse? false
:max-value 255 :max-value 255
:value value :value value
:on-change (handle-change-slider :v) :on-change (handle-change-slider :v)
@ -58,7 +57,7 @@
(when (not disable-opacity) (when (not disable-opacity)
[:div {:class (stl/css :hsva-row)} [:div {:class (stl/css :hsva-row)}
[:span {:class (stl/css :hsva-selector-label)} "A"] [:span {:class (stl/css :hsva-selector-label)} "A"]
[:& slider-selector [:> slider-selector*
{:class (stl/css :hsva-bar) {:class (stl/css :hsva-bar)
:type :opacity :type :opacity
:max-value 1 :max-value 1

2
frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
View File

@ -27,7 +27,7 @@
[potok.v2.core :as ptk] [potok.v2.core :as ptk]
[rumext.v2 :as mf])) [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]}] [{: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) (let [selected* (h/use-shared-state mdc/colorpicker-selected-broadcast-key :recent)
selected (deref selected*) selected (deref selected*)

30
frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
View File

@ -11,11 +11,11 @@
[app.common.math :as mth] [app.common.math :as mth]
[app.common.types.color :as cc] [app.common.types.color :as cc]
[app.main.ui.components.color-bullet :as cb] [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] [app.util.dom :as dom]
[rumext.v2 :as mf])) [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) (let [dragging?* (mf/use-state false)
dragging? (deref dragging?*) dragging? (deref dragging?*)
calculate-pos calculate-pos
@ -127,7 +127,7 @@
(reset! internal-color* (enrich-color-map color)))) (reset! internal-color* (enrich-color-map color))))
[:* [:*
[:& value-saturation-selector [:> value-saturation-selector*
{:hue h {:hue h
:saturation s :saturation s
:value v :value v
@ -140,17 +140,17 @@
[:& cb/color-bullet {:color bullet-color [:& cb/color-bullet {:color bullet-color
:area true}] :area true}]
[:div {:class (stl/css :sliders-wrapper)} [:div {:class (stl/css :sliders-wrapper)}
[:& slider-selector {:type :hue [:> slider-selector* {:type :hue
:max-value 360 :max-value 360
:value h :value h
:on-change on-change-hue :on-change on-change-hue
:on-start-drag on-start-drag :on-start-drag on-start-drag
:on-finish-drag on-finish-drag}] :on-finish-drag on-finish-drag}]
(when (not disable-opacity) (when (not disable-opacity)
[:& slider-selector {:type :opacity [:> slider-selector* {:type :opacity
:max-value 1 :max-value 1
:value alpha :value alpha
:on-change on-change-opacity :on-change on-change-opacity
:on-start-drag on-start-drag :on-start-drag on-start-drag
:on-finish-drag on-finish-drag}])]]])) :on-finish-drag on-finish-drag}])]]]))

17
frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
View File

@ -13,8 +13,8 @@
[app.util.object :as obj] [app.util.object :as obj]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc slider-selector (mf/defc slider-selector*
[{:keys [value class min-value max-value vertical? reverse? on-change on-start-drag on-finish-drag type]}] [{: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) (let [min-value (or min-value 0)
max-value (or max-value 1) max-value (or max-value 1)
dragging? (mf/use-state false) dragging? (mf/use-state false)
@ -42,17 +42,14 @@
(when on-change (when on-change
(let [{:keys [left right top bottom]} (-> ev dom/get-target dom/get-bounding-rect) (let [{:keys [left right top bottom]} (-> ev dom/get-target dom/get-bounding-rect)
{:keys [x y]} (-> ev dom/get-client-position) {: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 (/ (- bottom y) (- bottom top)) 0 1)
(mth/clamp (/ (- x left) (- right left)) 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)))] value (+ min-value (* unit-value (- max-value min-value)))]
(on-change 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 :slider-selector true
:hue (= type :hue) :hue (= type :hue)
:opacity (= type :opacity) :opacity (= type :opacity)
@ -65,14 +62,10 @@
:on-pointer-move #(when @dragging? (calculate-pos %))} :on-pointer-move #(when @dragging? (calculate-pos %))}
(let [value-percent (* (/ (- value min-value) (let [value-percent (* (/ (- value min-value)
(- max-value min-value)) 100) (- max-value min-value)) 100)
value-percent (if reverse?
(mth/abs (- value-percent 100))
value-percent)
value-percent-str (str value-percent "%") value-percent-str (str value-percent "%")
style-common #js {:pointerEvents "none"} style-common #js {:pointerEvents "none"}
style-horizontal (obj/merge! #js {:left value-percent-str} style-common) style-horizontal (obj/merge! #js {:left value-percent-str} style-common)
style-vertical (obj/merge! #js {:bottom value-percent-str} style-common)] style-vertical (obj/merge! #js {:bottom value-percent-str} style-common)]
[:div {:class (stl/css :handler) [:div {:class (stl/css :handler)
:style (if vertical? style-vertical style-horizontal)}])])) :style (if is-vertical style-vertical style-horizontal)}])]))