mirror of
https://github.com/penpot/penpot.git
synced 2025-03-09 14:21:42 -05:00
🐛 Fix problem with HSV color picker
This commit is contained in:
parent
a2fbf93ec1
commit
735170debf
7 changed files with 54 additions and 33 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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?]
|
||||
|
|
|
@ -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?)))))))
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)))))
|
||||
|
|
Loading…
Add table
Reference in a new issue