3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-05 08:51:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improved color picker

Browse source
This commit is contained in:
alonso.torres 2022-02-07 12:35:24 +01:00
parent 1abcd5819b
commit 2b1c8cafe9
6 changed files with 39 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -206,11 +206,9 @@
stop? (rx/filter (ptk/type? ::stop-picker) stream) stop? (rx/filter (ptk/type? ::stop-picker) stream)
update-events update-events
(fn [[color shift?]] (fn [color]
(rx/of (if shift? (rx/of (change-fill ids color)))]
(change-stroke ids color)
(change-fill ids color))
(stop-picker)))]
(rx/merge (rx/merge
;; Stream that updates the stroke/width and stops if `esc` pressed ;; Stream that updates the stroke/width and stops if `esc` pressed
(->> sub (->> sub
@ -224,7 +222,7 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (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 (-> state
(assoc-in [:workspace-local :picking-color?] true) (assoc-in [:workspace-local :picking-color?] true)
(assoc ::md/modal {:id (random-uuid) (assoc ::md/modal {:id (random-uuid)

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

@ -226,9 +226,9 @@
;; Updates color when used el pixel picker ;; Updates color when used el pixel picker
(mf/use-effect (mf/use-effect
(mf/deps picking-color? picked-color-select) (mf/deps picking-color? picked-color picked-color-select)
(fn [] (fn []
(when (and picking-color? picked-color-select) (when (and picking-color? picked-color picked-color-select)
(let [[r g b alpha] picked-color (let [[r g b alpha] picked-color
hex (uc/rgb->hex [r g b]) hex (uc/rgb->hex [r g b])
[h s v] (uc/hex->hsv hex)] [h s v] (uc/hex->hsv hex)]

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -77,13 +77,11 @@
update-color update-color
(fn [index] (fn [index]
(fn [color opacity] (fn [color]
(let [color (dissoc color :id :file-id :gradient)] (let [color (dissoc color :id :file-id :gradient)]
(st/emit! (dch/update-shapes (st/emit! (dch/update-shapes
ids ids
#(-> % #(assoc-in % [:shadow index :color] color))))))
(assoc-in [:shadow index :color] color)
(assoc-in [:shadow index :opacity] opacity)))))))
detach-color detach-color
(fn [index] (fn [index]

12
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -248,12 +248,6 @@
:edition edition :edition edition
:zoom zoom}]) :zoom zoom}])
[:& scroll-bars/viewport-scrollbars
{:objects base-objects
:zoom zoom
:vbox vbox
:viewport-ref viewport-ref}]
(when show-selection-handlers? (when show-selection-handlers?
[:& selection/selection-handlers [:& selection/selection-handlers
{:selected selected {:selected selected
@ -361,6 +355,12 @@
[:& widgets/viewport-actions] [:& widgets/viewport-actions]
[:& scroll-bars/viewport-scrollbars
{:objects base-objects
:zoom zoom
:vbox vbox
:viewport-ref viewport-ref}]
(when show-rules? (when show-rules?
[:* [:*
[:& rules/rules [:& rules/rules

7
frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
View file

@ -10,6 +10,7 @@
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dwc] [app.main.data.workspace.colors :as dwc]
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.cursors :as cur] [app.main.ui.cursors :as cur]
@ -101,14 +102,16 @@
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation 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 handle-mouse-up-picker
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dwc/stop-picker)) (st/emit! (dwu/commit-undo-transaction)
(dwc/stop-picker))
(modal/disallow-click-outside!))) (modal/disallow-click-outside!)))
handle-image-load handle-image-load

36
frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs
View file

@ -157,20 +157,20 @@
(mf/use-callback (mf/use-callback
(mf/deps v-scrollbar-y scrollbar-height) (mf/deps v-scrollbar-y scrollbar-height)
(fn [event axis] (fn [event axis]
(let [viewport (mf/ref-val viewport-ref) (let [viewport (mf/ref-val viewport-ref)
start-pt (dom/get-client-position event) start-pt (dom/get-client-position event)
new-v-scrollbar-y (-> (utils/translate-point-to-viewport-raw viewport zoom start-pt) :y) 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) 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) v-scrollbar-y-padding (- v-scrollbar-y new-v-scrollbar-y)
h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x) h-scrollbar-x-padding (- h-scrollbar-x new-h-scrollbar-x)
vbox-rect {:x vbox-x vbox-rect {:x vbox-x
:y vbox-y :y vbox-y
:x1 vbox-x :x1 vbox-x
:y1 vbox-y :y1 vbox-y
:x2 (+ vbox-x (:width vbox)) :x2 (+ vbox-x (:width vbox))
:y2 (+ vbox-y (:height vbox)) :y2 (+ vbox-y (:height vbox))
:width (:width vbox) :width (:width vbox)
:height (:height vbox)} :height (:height vbox)}
containing-rect (gpr/join-selrects [base-objects-rect vbox-rect]) containing-rect (gpr/join-selrects [base-objects-rect vbox-rect])
height-factor (/ (:height containing-rect) vbox-height) height-factor (/ (:height containing-rect) vbox-height)
width-factor (/ (:width containing-rect) vbox-width)] width-factor (/ (:width containing-rect) vbox-width)]
@ -207,7 +207,9 @@
:height scrollbar-height :height scrollbar-height
:fill-opacity 0.4 :fill-opacity 0.4
:x v-scrollbar-x :x v-scrollbar-x
:y v-scrollbar-y}]]) :y v-scrollbar-y
:style {:stroke "white"
:stroke-width 0.15}}]])
(when show-h-scroll? (when show-h-scroll?
[:g.h-scroll [:g.h-scroll
[:rect {:on-mouse-move #(on-mouse-move % :x) [:rect {:on-mouse-move #(on-mouse-move % :x)
@ -219,4 +221,6 @@
:height (* inv-zoom 7) :height (* inv-zoom 7)
:fill-opacity 0.4 :fill-opacity 0.4
:x h-scrollbar-x :x h-scrollbar-x
:y h-scrollbar-y}]])])) :y h-scrollbar-y
:style {:stroke "white"
:stroke-width 0.15}}]])]))