Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 07:16:07 -05:00
Code Issues Activity

Merge pull request #5864 from penpot/eva-fix-colorpicker-dnd

Browse source 
🐛 Fix add recent color while drag and drop
This commit is contained in:
Andrey Antukh 2025-02-17 15:22:49 +01:00 • committed by GitHub
commit 83423a9509
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -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

24
frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
View file

@ -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) "%")