CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-12 14:42:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8301 from eureka928/fix/4513-shift-arrow-color-inputs

Browse Source 
🐛 Add Shift/Alt arrow key stepping to color picker inputs
This commit is contained in:
Andrey Antukh
2026-02-12 08:26:05 +01:00
committed by GitHub
parent 394d597736 307ae374fe
commit 12822833f6
1 changed files with 64 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,7 @@
[app.common.math :as mth] [app.common.math :as mth]
[app.common.types.color :as cc] [app.common.types.color :as cc]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.keyboard :as kbd]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn parse-hex (defn parse-hex
@@ -67,34 +68,60 @@
(when (some? val) (when (some? val)
(setup-hex-color val)))) (setup-hex-color val))))
apply-property-change
(fn [property val]
(let [val (case property
:s (/ val 100)
:v (value->hsv-value val)
:alpha (/ val 100)
val)]
(cond
(= property :alpha)
(on-change {:alpha val})
(#{:r :g :b} property)
(let [{:keys [r g b]} (merge color (hash-map property val))
hex (cc/rgb->hex [r g b])
[h s v] (cc/hex->hsv hex)]
(on-change {:hex hex
:h h :s s :v v
:r r :g g :b b}))
:else
(let [{:keys [h s v]} (merge color (hash-map property val))
hex (cc/hsv->hex [h s v])
[r g b] (cc/hex->rgb hex)]
(on-change {:hex hex
:h h :s s :v v
:r r :g g :b b})))))
on-change-property on-change-property
(fn [property max-value] (fn [property max-value]
(fn [e] (fn [e]
(let [val (-> e dom/get-target-val d/parse-double (mth/clamp 0 max-value)) (let [val (-> e dom/get-target-val d/parse-double (mth/clamp 0 max-value))]
val (case property (when (some? val)
:s (/ val 100) (apply-property-change property val)))))
:v (value->hsv-value val)
val)]
(when (not (nil? val))
(if (#{:r :g :b} property)
(let [{:keys [r g b]} (merge color (hash-map property val))
hex (cc/rgb->hex [r g b])
[h s v] (cc/hex->hsv hex)]
(on-change {:hex hex
:h h :s s :v v
:r r :g g :b b}))
(let [{:keys [h s v]} (merge color (hash-map property val)) on-key-down-step
hex (cc/hsv->hex [h s v]) (fn [max-value on-step]
[r g b] (cc/hex->rgb hex)] (fn [e]
(on-change {:hex hex (let [up? (kbd/up-arrow? e)
:h h :s s :v v down? (kbd/down-arrow? e)]
:r r :g g :b b}))))))) (when (and (or up? down?)
(or (kbd/shift? e) (kbd/alt? e)))
(dom/prevent-default e)
(when-let [current-value (-> e dom/get-target-val d/parse-double)]
(let [step (cond
(kbd/shift? e) (if up? 10 -10)
(kbd/alt? e) (if up? 0.1 -0.1))
new-value (mth/clamp (+ current-value step) 0 max-value)
node (dom/get-target e)]
(dom/set-value! node new-value)
(on-step new-value)))))))
on-change-opacity on-key-down-property
(fn [e] (fn [property max-value]
(when-let [new-alpha (-> e dom/get-target-val (mth/clamp 0 100) (/ 100))] (on-key-down-step max-value #(apply-property-change property %)))]
(on-change {:alpha new-alpha})))]
;; Updates the inputs values when a property is changed in the parent ;; Updates the inputs values when a property is changed in the parent
@@ -127,7 +154,8 @@
:min 0 :min 0
:max 255 :max 255
:default-value red :default-value red
:on-change (on-change-property :r 255)}]] :on-change (on-change-property :r 255)
:on-key-down (on-key-down-property :r 255)}]]
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:label {:for "green-value" :class (stl/css :input-label)} "G"] [:label {:for "green-value" :class (stl/css :input-label)} "G"]
[:input {:id "green-value" [:input {:id "green-value"
@@ -136,7 +164,8 @@
:min 0 :min 0
:max 255 :max 255
:default-value green :default-value green
:on-change (on-change-property :g 255)}]] :on-change (on-change-property :g 255)
:on-key-down (on-key-down-property :g 255)}]]
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:label {:for "blue-value" :class (stl/css :input-label)} "B"] [:label {:for "blue-value" :class (stl/css :input-label)} "B"]
[:input {:id "blue-value" [:input {:id "blue-value"
@@ -145,7 +174,8 @@
:min 0 :min 0
:max 255 :max 255
:default-value blue :default-value blue
:on-change (on-change-property :b 255)}]]] :on-change (on-change-property :b 255)
:on-key-down (on-key-down-property :b 255)}]]]
[:* [:*
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
@@ -156,7 +186,8 @@
:min 0 :min 0
:max 360 :max 360
:default-value hue :default-value hue
:on-change (on-change-property :h 360)}]] :on-change (on-change-property :h 360)
:on-key-down (on-key-down-property :h 360)}]]
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:label {:for "saturation-value" :class (stl/css :input-label)} "S"] [:label {:for "saturation-value" :class (stl/css :input-label)} "S"]
[:input {:id "saturation-value" [:input {:id "saturation-value"
@@ -166,7 +197,8 @@
:max 100 :max 100
:step 1 :step 1
:default-value saturation :default-value saturation
:on-change (on-change-property :s 100)}]] :on-change (on-change-property :s 100)
:on-key-down (on-key-down-property :s 100)}]]
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:label {:for "value-value" :class (stl/css :input-label)} "V"] [:label {:for "value-value" :class (stl/css :input-label)} "V"]
[:input {:id "value-value" [:input {:id "value-value"
@@ -175,7 +207,8 @@
:min 0 :min 0
:max 100 :max 100
:default-value value :default-value value
:on-change (on-change-property :v 100)}]]])] :on-change (on-change-property :v 100)
:on-key-down (on-key-down-property :v 100)}]]])]
[:div {:class (stl/css :hex-alpha-wrapper)} [:div {:class (stl/css :hex-alpha-wrapper)}
[:div {:class (stl/css-case :input-wrapper true [:div {:class (stl/css-case :input-wrapper true
:hex true)} :hex true)}
@@ -195,4 +228,5 @@
:step 1 :step 1
:max 100 :max 100
:default-value (if (= alpha :multiple) "" alpha) :default-value (if (= alpha :multiple) "" alpha)
:on-change on-change-opacity}]])]])) :on-change (on-change-property :alpha 100)
:on-key-down (on-key-down-property :alpha 100)}]])]]))