mirror of
https://github.com/penpot/penpot.git
synced 2025-01-09 08:20:45 -05:00
✨ Improved color picker
This commit is contained in:
alonso.torres
parent
1abcd5819b
commit
2b1c8cafe9
6 changed files with 39 additions and 36 deletions
|
|
@ -206,11 +206,9 @@
|
|||
stop? (rx/filter (ptk/type? ::stop-picker) stream)
|
||||
|
||||
update-events
|
||||
(fn [[color shift?]]
|
||||
(rx/of (if shift?
|
||||
(change-stroke ids color)
|
||||
(change-fill ids color))
|
||||
(stop-picker)))]
|
||||
(fn [color]
|
||||
(rx/of (change-fill ids color)))]
|
||||
|
||||
(rx/merge
|
||||
;; Stream that updates the stroke/width and stops if `esc` pressed
|
||||
(->> sub
|
||||
|
|
@ -224,7 +222,7 @@
|
|||
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [handle-change-color (fn [color shift?] (rx/push! sub [color shift?]))]
|
||||
(let [handle-change-color (fn [color] (rx/push! sub color))]
|
||||
(-> state
|
||||
(assoc-in [:workspace-local :picking-color?] true)
|
||||
(assoc ::md/modal {:id (random-uuid)
|
||||
|
|
|
|||
|
|
@ -226,9 +226,9 @@
|
|||
|
||||
;; Updates color when used el pixel picker
|
||||
(mf/use-effect
|
||||
(mf/deps picking-color? picked-color-select)
|
||||
(mf/deps picking-color? picked-color picked-color-select)
|
||||
(fn []
|
||||
(when (and picking-color? picked-color-select)
|
||||
(when (and picking-color? picked-color picked-color-select)
|
||||
(let [[r g b alpha] picked-color
|
||||
hex (uc/rgb->hex [r g b])
|
||||
[h s v] (uc/hex->hsv hex)]
|
||||
|
|
|
|||
|
|
@ -77,13 +77,11 @@
|
|||
|
||||
update-color
|
||||
(fn [index]
|
||||
(fn [color opacity]
|
||||
(fn [color]
|
||||
(let [color (dissoc color :id :file-id :gradient)]
|
||||
(st/emit! (dch/update-shapes
|
||||
ids
|
||||
#(-> %
|
||||
(assoc-in [:shadow index :color] color)
|
||||
(assoc-in [:shadow index :opacity] opacity)))))))
|
||||
#(assoc-in % [:shadow index :color] color))))))
|
||||
|
||||
detach-color
|
||||
(fn [index]
|
||||
|
|
|
|||
|
|
@ -248,12 +248,6 @@
|
|||
:edition edition
|
||||
:zoom zoom}])
|
||||
|
||||
[:& scroll-bars/viewport-scrollbars
|
||||
{:objects base-objects
|
||||
:zoom zoom
|
||||
:vbox vbox
|
||||
:viewport-ref viewport-ref}]
|
||||
|
||||
(when show-selection-handlers?
|
||||
[:& selection/selection-handlers
|
||||
{:selected selected
|
||||
|
|
@ -361,6 +355,12 @@
|
|||
|
||||
[:& widgets/viewport-actions]
|
||||
|
||||
[:& scroll-bars/viewport-scrollbars
|
||||
{:objects base-objects
|
||||
:zoom zoom
|
||||
:vbox vbox
|
||||
:viewport-ref viewport-ref}]
|
||||
|
||||
(when show-rules?
|
||||
[:*
|
||||
[:& rules/rules
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
[app.common.uuid :as uuid]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace.colors :as dwc]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.cursors :as cur]
|
||||
|
|
@ -101,14 +102,16 @@
|
|||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dwc/pick-color-select true (kbd/shift? event)))))
|
||||
(st/emit! (dwu/start-undo-transaction)
|
||||
(dwc/pick-color-select true (kbd/shift? event)))))
|
||||
|
||||
handle-mouse-up-picker
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(st/emit! (dwc/stop-picker))
|
||||
(st/emit! (dwu/commit-undo-transaction)
|
||||
(dwc/stop-picker))
|
||||
(modal/disallow-click-outside!)))
|
||||
|
||||
handle-image-load
|
||||
|
|
|
|||
|
|
@ -157,20 +157,20 @@
|
|||
(mf/use-callback
|
||||
(mf/deps v-scrollbar-y scrollbar-height)
|
||||
(fn [event axis]
|
||||
(let [viewport (mf/ref-val viewport-ref)
|
||||
start-pt (dom/get-client-position event)
|
||||
new-v-scrollbar-y (-> (utils/translate-point-to-viewport-raw viewport zoom start-pt) :y)
|
||||
new-h-scrollbar-x (-> (utils/translate-point-to-viewport-raw viewport zoom start-pt) :x)
|
||||
v-scrollbar-y-padding (- v-scrollbar-y new-v-scrollbar-y)
|
||||
h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x)
|
||||
vbox-rect {:x vbox-x
|
||||
:y vbox-y
|
||||
:x1 vbox-x
|
||||
:y1 vbox-y
|
||||
:x2 (+ vbox-x (:width vbox))
|
||||
:y2 (+ vbox-y (:height vbox))
|
||||
:width (:width vbox)
|
||||
:height (:height vbox)}
|
||||
(let [viewport (mf/ref-val viewport-ref)
|
||||
start-pt (dom/get-client-position event)
|
||||
new-v-scrollbar-y (-> (utils/translate-point-to-viewport-raw viewport zoom start-pt) :y)
|
||||
new-h-scrollbar-x (-> (utils/translate-point-to-viewport-raw viewport zoom start-pt) :x)
|
||||
v-scrollbar-y-padding (- v-scrollbar-y new-v-scrollbar-y)
|
||||
h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x)
|
||||
vbox-rect {:x vbox-x
|
||||
:y vbox-y
|
||||
:x1 vbox-x
|
||||
:y1 vbox-y
|
||||
:x2 (+ vbox-x (:width vbox))
|
||||
:y2 (+ vbox-y (:height vbox))
|
||||
:width (:width vbox)
|
||||
:height (:height vbox)}
|
||||
containing-rect (gpr/join-selrects [base-objects-rect vbox-rect])
|
||||
height-factor (/ (:height containing-rect) vbox-height)
|
||||
width-factor (/ (:width containing-rect) vbox-width)]
|
||||
|
|
@ -207,7 +207,9 @@
|
|||
:height scrollbar-height
|
||||
:fill-opacity 0.4
|
||||
:x v-scrollbar-x
|
||||
:y v-scrollbar-y}]])
|
||||
:y v-scrollbar-y
|
||||
:style {:stroke "white"
|
||||
:stroke-width 0.15}}]])
|
||||
(when show-h-scroll?
|
||||
[:g.h-scroll
|
||||
[:rect {:on-mouse-move #(on-mouse-move % :x)
|
||||
|
|
@ -219,4 +221,6 @@
|
|||
:height (* inv-zoom 7)
|
||||
:fill-opacity 0.4
|
||||
:x h-scrollbar-x
|
||||
:y h-scrollbar-y}]])]))
|
||||
:y h-scrollbar-y
|
||||
:style {:stroke "white"
|
||||
:stroke-width 0.15}}]])]))
|
||||
|
|
|
|||
Loading…
Reference in a new issue