From 2b1c8cafe981b0ec96680116842468592b083616 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 7 Feb 2022 12:35:24 +0100 Subject: [PATCH] :sparkles: Improved color picker --- .../src/app/main/data/workspace/colors.cljs | 10 +++--- .../app/main/ui/workspace/colorpicker.cljs | 4 +-- .../sidebar/options/menus/shadow.cljs | 6 ++-- .../src/app/main/ui/workspace/viewport.cljs | 12 +++---- .../ui/workspace/viewport/pixel_overlay.cljs | 7 ++-- .../ui/workspace/viewport/scroll_bars.cljs | 36 ++++++++++--------- 6 files changed, 39 insertions(+), 36 deletions(-) diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 5c9d01fab4..0cb4eca12d 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 2b34513072..1b5046eeb7 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -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)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index f7e126c705..6ad85d7fe0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -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] diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index def9a0852d..16aff53f2c 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs index fb35ba9976..9fda55c82b 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs index 70aa9746c2..61830c5665 100644 --- a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs @@ -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}}]])]))