Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-28 15:41:25 -05:00
Code Issues Activity

🐛 Fix problem with HSV color picker

Browse source
This commit is contained in:
alonso.torres 2023-07-07 12:10:01 +02:00
parent a2fbf93ec1
commit 735170debf
7 changed files with 54 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -51,6 +51,7 @@
- Fix cut/delete text layer when while creating text [Taiga #5602](https://tree.taiga.io/project/penpot/issue/5602)
- Fix picking a gradient color in recent colors for a new color in the assets tab [Taiga #5601](https://tree.taiga.io/project/penpot/issue/5601)
- Fix problem with importation process [Taiga #5597](https://tree.taiga.io/project/penpot/issue/5597)
- Fix problem with HSV color picker [#3317](https://github.com/penpot/penpot/issues/3317)
### :arrow_up: Deps updates

2
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -199,7 +199,7 @@
}
&.value {
background: linear-gradient(var(--gradient-direction), #fff 0%, #000 100%);
background: linear-gradient(var(--gradient-direction), #000 0%, #fff 100%);
}
.handler {

46
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -515,28 +515,32 @@
(let [shape-id (-> state wsh/lookup-selected first)]
(update state :colorpicker
(fn [state]
(if (some? gradient)
(let [stop (or (:editing-stop state) 0)
stops (mapv split-color-components (:stops gradient))
type (case (:type gradient)
:linear :linear-gradient
:radial :radial-gradient
(:type state))]
(-> state
(assoc :type type)
(assoc :current-color (nth stops stop))
(assoc :stops stops)
(assoc :gradient (-> gradient
(dissoc :stops)
(assoc :shape-id shape-id)))
(assoc :editing-stop stop)))
(let [current-color (:current-color state)]
(if (some? gradient)
(let [stop (or (:editing-stop state) 0)
stops (mapv split-color-components (:stops gradient))
type (case (:type gradient)
:linear :linear-gradient
:radial :radial-gradient
(:type state))]
(-> state
(assoc :type type)
(assoc :current-color (nth stops stop))
(assoc :stops stops)
(assoc :gradient (-> gradient
(dissoc :stops)
(assoc :shape-id shape-id)))
(assoc :editing-stop stop)))
(-> state
(assoc :type :color)
(assoc :current-color (split-color-components (dissoc data :gradient)))
(dissoc :editing-stop)
(dissoc :gradient)
(dissoc :stops)))))))))
(-> state
(assoc :type :color)
(cond-> (or (nil? current-color)
(not= (:color data) (:color current-color))
(not= (:opacity data) (:opacity current-color)))
(assoc :current-color (split-color-components (dissoc data :gradient))))
(dissoc :editing-stop)
(dissoc :gradient)
(dissoc :stops))))))))))
(defn update-colorpicker-color
[changes add-recent?]

4
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -68,7 +68,9 @@
(mf/deps current-color @drag?)
(fn [color]
(when (or (not= (str/lower (:hex color)) (str/lower (:hex current-color)))
(not= (:h color) (:h current-color)))
(not= (:h color) (:h current-color))
(not= (:s color) (:s current-color))
(not= (:v color) (:v current-color)))
(let [recent-color (merge current-color color)
recent-color (dc/materialize-color-components recent-color)]
(st/emit! (dc/update-colorpicker-color recent-color (not @drag?)))))))

30
frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.colorpicker.color-inputs
(:require
[app.common.data :as d]
[app.common.math :as mth]
[app.util.color :as uc]
[app.util.dom :as dom]
@ -17,6 +18,14 @@
val
(str \# val)))
(defn value->hsv-value
[val]
(* 255 (/ val 100)))
(defn hsv-value->value
[val]
(* (/ val 255) 100))
(mf/defc color-inputs [{:keys [type color disable-opacity on-change]}]
(let [{red :r green :g blue :b
hue :h saturation :s value :v
@ -56,8 +65,11 @@
on-change-property
(fn [property max-value]
(fn [e]
(let [val (-> e dom/get-target-val (mth/clamp 0 max-value))
val (if (#{:s} property) (/ val 100) val)]
(let [val (-> e dom/get-target-val d/parse-double (mth/clamp 0 max-value))
val (case property
:s (/ val 100)
: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))
@ -89,10 +101,12 @@
property-ref (get refs ref-key)]
(when (and property-val property-ref)
(when-let [node (mf/ref-val property-ref)]
(case ref-key
(:s :alpha) (dom/set-value! node (* property-val 100))
:hex (dom/set-value! node property-val)
(dom/set-value! node property-val))))))))
(let [new-val
(case ref-key
(:s :alpha) (mth/precision (* property-val 100) 2)
:v (mth/precision (hsv-value->value property-val) 2)
property-val)]
(dom/set-value! node new-val))))))))
[:div.color-values
{:class (when disable-opacity "disable-opacity")}
@ -149,9 +163,9 @@
:ref (:v refs)
:type "number"
:min 0
:max 255
:max 100
:default-value value
:on-change (on-change-property :v 255)}]])
:on-change (on-change-property :v 100)}]])
(when (not disable-opacity)
[:input.alpha-value {:id "alpha-value"

2
frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs
View file

@ -44,7 +44,7 @@
[:span.hsva-selector-label "V"]
[:& slider-selector
{:class "value"
:reverse? true
:reverse? false
:max-value 255
:value value
:on-change (handle-change-slider :v)

2
frontend/src/app/util/color.cljs
View file

@ -193,4 +193,4 @@
(or (:color-library-name color)
(:name color)
(:color color)
(gradient-type->string (:type (:gradient color)))))
(gradient-type->string (:type (:gradient color)))))