From 735170debfe90d9c113140e8b13762194b04be4c Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 7 Jul 2023 12:10:01 +0200 Subject: [PATCH] :bug: Fix problem with HSV color picker --- CHANGES.md | 1 + .../styles/main/partials/colorpicker.scss | 2 +- .../src/app/main/data/workspace/colors.cljs | 46 ++++++++++--------- .../app/main/ui/workspace/colorpicker.cljs | 4 +- .../workspace/colorpicker/color_inputs.cljs | 30 ++++++++---- .../main/ui/workspace/colorpicker/hsva.cljs | 2 +- frontend/src/app/util/color.cljs | 2 +- 7 files changed, 54 insertions(+), 33 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index a6cf80ca3..47a996b10 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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 diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index 7930beac2..c26571b9c 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -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 { diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index e96e27cb2..fbd330b2d 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -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?] diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index b99302e36..5b15d247d 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -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?))))))) 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 d9b409cf0..dad0b71e7 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs @@ -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" diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs b/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs index 0ea8b085c..6933baeb3 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.cljs @@ -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) diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs index c4e400568..428aa3fb5 100644 --- a/frontend/src/app/util/color.cljs +++ b/frontend/src/app/util/color.cljs @@ -193,4 +193,4 @@ (or (:color-library-name color) (:name color) (:color color) - (gradient-type->string (:type (:gradient color))))) \ No newline at end of file + (gradient-type->string (:type (:gradient color)))))