Merge pull request #2206 from penpot/palba-fix-color-picker

🐛 Fix on color-picker, click+drag adds lots of recent colors

CHANGES.md

@@ -10,6 +10,7 @@
 - Fix mismatch between editor and displayed text in workspace [Taiga #3975](https://tree.taiga.io/project/penpot/issue/3975)
 - Fix validation error on text position [Taiga #4010](https://tree.taiga.io/project/penpot/issue/4010)
 - Fix objects jitter while scrolling [Github #2167](https://github.com/penpot/penpot/issues/2167)
+- Fix on color-picker, click+drag adds lots of recent colors [Taiga #4013](https://tree.taiga.io/project/penpot/issue/4013)
 
 ## 1.15.0-beta
 

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

@@ -13,7 +13,6 @@
    [app.main.data.modal :as md]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.layout :as layout]
-   [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
    [app.util.color :as uc]
@@ -430,8 +429,7 @@
     ptk/WatchEvent
     (watch [_ state _]
       (when-let [color (some-> state :colorpicker get-color-from-colorpicker-state)]
-        (on-change color)
-        (rx/of (dwl/add-recent-color color))))))
+        (on-change color)))))
 
 (defn initialize-colorpicker
   [on-change]

frontend/src/app/main/ui/workspace/colorpicker.cljs

@@ -94,7 +94,16 @@
         (mf/use-fn #(st/emit! (dc/activate-colorpicker-gradient :linear-gradient)))
 
         on-activate-radial-gradient
-        (mf/use-fn #(st/emit! (dc/activate-colorpicker-gradient :radial-gradient)))]
+        (mf/use-fn #(st/emit! (dc/activate-colorpicker-gradient :radial-gradient)))
+
+        on-finish-drag
+        (mf/use-fn
+         (mf/deps state)
+         (fn []
+           (let [color (dc/get-color-from-colorpicker-state state)]
+           (st/emit! 
+            (dwl/add-recent-color color)
+            (dwu/commit-undo-transaction)))))]
 
     ;; Initialize colorpicker state
     (mf/with-effect []
@@ -186,21 +195,21 @@
             :disable-opacity disable-opacity
             :on-change handle-change-color
             :on-start-drag #(st/emit! (dwu/start-undo-transaction))
-            :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
+            :on-finish-drag on-finish-drag}]
           :harmony
           [:& harmony-selector
            {:color current-color
             :disable-opacity disable-opacity
             :on-change handle-change-color
             :on-start-drag #(st/emit! (dwu/start-undo-transaction))
-            :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
+            :on-finish-drag on-finish-drag}]
           :hsva
           [:& hsva-selector
            {:color current-color
             :disable-opacity disable-opacity
             :on-change handle-change-color
             :on-start-drag #(st/emit! (dwu/start-undo-transaction))
-            :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
+            :on-finish-drag on-finish-drag}]
           nil))
 
       [:& color-inputs