From 6c9875e4f964d1c148dde2efe84244bb627c273b Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Mon, 17 Feb 2025 09:54:24 +0100
Subject: [PATCH] :bug: Fix add recent color while drag and drop

---
 .../app/main/ui/workspace/colorpicker.cljs    | 27 ++++++++-----------
 .../main/ui/workspace/colorpicker/ramp.cljs   | 24 +++++++++++------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index d6fcbc0e0..c982d8b4c 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -111,7 +111,8 @@
                                      :radial :radial-gradient)
                                    :color))
         active-color-tab       (mf/use-state #(dc/get-active-color-tab))
-        drag?                  (mf/use-state false)
+        drag?*                 (mf/use-state false)
+        drag?                  (deref drag?*)
 
         type                   (if (= @active-color-tab "hsva") :hsv :rgb)
 
@@ -134,7 +135,7 @@
            (st/emit! (dc/update-colorpicker-color
                       {:image (-> (select-keys image [:id :width :height :mtype :name])
                                   (assoc :keep-aspect-ratio true))}
-                      (not @drag?)))))
+                      (not drag?)))))
 
         on-fill-image-click
         (mf/use-fn #(dom/click (mf/ref-val fill-image-ref)))
@@ -152,7 +153,6 @@
                  image              (-> (:image current-color)
                                         (assoc :keep-aspect-ratio keep-aspect-ratio?))]
 
-
              (st/emit!
               (dc/update-colorpicker-color {:image image} true)
               (ptk/data-event ::ev/event {::ev/name "toggle-image-aspect-ratio"
@@ -176,16 +176,11 @@
 
         handle-change-color
         (mf/use-fn
-         (mf/deps current-color @drag?)
+         (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= (:s color) (:s current-color))
-                     (not= (:v color) (:v current-color))
-                     (not= (:alpha color) (:alpha 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?)))))))
+           (let [color (merge current-color color)
+                 color (dc/materialize-color-components color)]
+             (st/emit! (dc/update-colorpicker-color color (not drag?))))))
 
         handle-click-picker
         (mf/use-fn
@@ -217,18 +212,18 @@
 
         on-start-drag
         (mf/use-fn
-         (mf/deps drag? node-ref)
+         (mf/deps drag?* node-ref)
          (fn []
            (reset! should-update? false)
-           (reset! drag? true)
+           (reset! drag?* true)
            (st/emit! (dwu/start-undo-transaction (mf/ref-val node-ref)))))
 
         on-finish-drag
         (mf/use-fn
-         (mf/deps drag? node-ref)
+         (mf/deps drag?* node-ref)
          (fn []
            (reset! should-update? true)
-           (reset! drag? false)
+           (reset! drag?* false)
            (st/emit! (dwu/commit-undo-transaction (mf/ref-val node-ref)))))
 
         on-color-accept
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
index a7bfee782..f9850579d 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
@@ -16,7 +16,8 @@
    [rumext.v2 :as mf]))
 
 (mf/defc value-saturation-selector [{:keys [saturation value on-change on-start-drag on-finish-drag]}]
-  (let [dragging? (mf/use-state false)
+  (let [dragging?* (mf/use-state false)
+        dragging? (deref dragging?*)
         calculate-pos
         (fn [ev]
           (let [{:keys [left right top bottom]} (-> ev dom/get-target dom/get-bounding-rect)
@@ -26,26 +27,33 @@
             (on-change px py)))
 
         handle-start-drag
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-start-drag)
          (fn [event]
            (dom/capture-pointer event)
-           (reset! dragging? true)
+           (reset! dragging?* true)
            (on-start-drag)))
 
         handle-stop-drag
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-finish-drag)
          (fn [event]
            (dom/release-pointer event)
-           (reset! dragging? false)
-           (on-finish-drag)))]
+           (reset! dragging?* false)
+           (on-finish-drag)))
+
+        handle-change-pointer-move
+        (mf/use-fn
+         (mf/deps calculate-pos dragging?)
+         (fn [event]
+           (when dragging?
+             (calculate-pos event))))]
+
     [:div {:class (stl/css :value-saturation-selector)
            :on-pointer-down handle-start-drag
            :on-pointer-up handle-stop-drag
-           :on-lost-pointer-capture handle-stop-drag
            :on-click calculate-pos
-           :on-pointer-move #(when @dragging? (calculate-pos %))}
+           :on-pointer-move handle-change-pointer-move}
      [:div {:class (stl/css :handler)
             :style {:pointer-events "none"
                     :left (str (* 100 saturation) "%")