🐛 Fix problem with HSV color picker

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
 

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 {

frontend/src/app/main/data/workspace/colors.cljs

@@ -515,6 +515,7 @@
       (let [shape-id (-> state wsh/lookup-selected first)]
         (update state :colorpicker
                 (fn [state]
+                  (let [current-color (:current-color state)]
                     (if (some? gradient)
                       (let [stop  (or (:editing-stop state) 0)
                             stops (mapv split-color-components (:stops gradient))
@@ -533,10 +534,13 @@
 
                       (-> state
                           (assoc :type :color)
-                        (assoc :current-color (split-color-components (dissoc data :gradient)))
+                          (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)))))))))
+                          (dissoc :stops))))))))))
 
 (defn update-colorpicker-color
   [changes add-recent?]

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?)))))))

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))
+            (let [val (-> e dom/get-target-val d/parse-double (mth/clamp 0 max-value))
-                  val (if (#{:s} property) (/ val 100) val)]
+                  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)]
+               (let [new-val
                      (case ref-key
-                 (:s :alpha) (dom/set-value! node (* property-val 100))
+                       (:s :alpha) (mth/precision (* property-val 100) 2)
-                 :hex (dom/set-value! node property-val)
+                       :v   (mth/precision (hsv-value->value property-val) 2)
-                 (dom/set-value! node property-val))))))))
+                       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"

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)