From e96149219215422ba8c0e455289b5f916ad26049 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 15 Oct 2020 11:50:45 +0200 Subject: [PATCH] :sparkles: Improved handlers behaviour --- frontend/src/app/main/data/colors.cljs | 23 ++++++++ frontend/src/app/main/data/workspace.cljs | 6 +-- .../src/app/main/data/workspace/drawing.cljs | 2 +- .../app/main/data/workspace/selection.cljs | 32 +++++++----- .../app/main/ui/workspace/colorpicker.cljs | 52 ++++++++++++++----- .../src/app/main/ui/workspace/gradients.cljs | 19 ++++--- .../app/main/ui/workspace/shapes/common.cljs | 2 +- .../app/main/ui/workspace/shapes/frame.cljs | 2 +- .../ui/workspace/shapes/interactions.cljs | 2 +- .../app/main/ui/workspace/sidebar/layers.cljs | 6 +-- 10 files changed, 99 insertions(+), 47 deletions(-) diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs index 7b7edc987..efc6716bf 100644 --- a/frontend/src/app/main/data/colors.cljs +++ b/frontend/src/app/main/data/colors.cljs @@ -191,6 +191,29 @@ :props {:on-change handle-change-color} :allow-click-outside true}))))))) +(defn start-gradient [gradient] + (ptk/reify ::start-gradient + ptk/UpdateEvent + (update [_ state] + (let [id (first (get-in state [:workspace-local :selected]))] + (-> state + (assoc-in [:workspace-local :current-gradient] gradient) + (assoc-in [:workspace-local :current-gradient :shape-id] id)))))) + +(defn stop-gradient [] + (ptk/reify ::stop-gradient + ptk/UpdateEvent + (update [_ state] + (-> state + (update :workspace-local dissoc :current-gradient))))) + +(defn update-gradient [changes] + (ptk/reify ::update-gradient + ptk/UpdateEvent + (update [_ state] + (-> state + (update-in [:workspace-local :current-gradient] merge changes))))) + (defn select-gradient-stop [spot] (ptk/reify ::select-gradient-stop ptk/UpdateEvent diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index e62276f98..959f8a059 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -741,7 +741,7 @@ (watch [_ state stream] (let [selected (get-in state [:workspace-local :selected])] (rx/of (delete-shapes selected) - dws/deselect-all))))) + (dws/deselect-all)))))) ;; --- Shape Vertical Ordering @@ -1318,7 +1318,7 @@ :grow-type (if (> (count text) 100) :auto-height :auto-width) :content (as-content text)})] (rx/of dwc/start-undo-transaction - dws/deselect-all + (dws/deselect-all) (add-shape shape) (dwc/rehash-shape-frame-relationship [id]) dwc/commit-undo-transaction))))) @@ -1531,7 +1531,7 @@ (select-for-drawing :text)) "ctrl+c" #(st/emit! copy-selected) "ctrl+v" #(st/emit! paste) - "escape" #(st/emit! :interrupt deselect-all) + "escape" #(st/emit! :interrupt (deselect-all true)) "del" #(st/emit! delete-selected) "backspace" #(st/emit! delete-selected) "ctrl+up" #(st/emit! (vertical-order-selected :up)) diff --git a/frontend/src/app/main/data/workspace/drawing.cljs b/frontend/src/app/main/data/workspace/drawing.cljs index c61420901..bfe114418 100644 --- a/frontend/src/app/main/data/workspace/drawing.cljs +++ b/frontend/src/app/main/data/workspace/drawing.cljs @@ -299,7 +299,7 @@ (rx/of dwc/start-undo-transaction) (rx/empty)) - (rx/of dw/deselect-all + (rx/of (dw/deselect-all) (dw/add-shape shape)))))))))) (def close-drawing-path diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs index d4b4ee3be..b2a91a917 100644 --- a/frontend/src/app/main/data/workspace/selection.cljs +++ b/frontend/src/app/main/data/workspace/selection.cljs @@ -67,7 +67,7 @@ (ms/mouse-up? %)) stream)] (rx/concat - (rx/of deselect-all) + (rx/of (deselect-all)) (->> ms/mouse-position (rx/scan (fn [data pos] (if data @@ -118,20 +118,26 @@ objects (dwc/lookup-page-objects state page-id)] (rx/of (dwc/expand-all-parents ids objects)))))) -(def deselect-all +(defn deselect-all "Clear all possible state of drawing, edition - or any similar action taken by the user." - (ptk/reify ::deselect-all - ptk/UpdateEvent - (update [_ state] + or any similar action taken by the user. + When `check-modal` the method will check if a modal is opened + and not deselect if it's true" + ([] (deselect-all false)) - ;; Only deselect if there is no modal openned - (cond-> state - (not (::md/modal state)) - (update :workspace-local - #(-> % - (assoc :selected (d/ordered-set)) - (dissoc :selected-frame))))))) + ([check-modal] + (ptk/reify ::deselect-all + ptk/UpdateEvent + (update [_ state] + + ;; Only deselect if there is no modal openned + (cond-> state + (or (not check-modal) + (not (::md/modal state))) + (update :workspace-local + #(-> % + (assoc :selected (d/ordered-set)) + (dissoc :selected-frame)))))))) ;; --- Select Shapes (By selrect) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index a328b2cbf..29f4a21ec 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -52,6 +52,9 @@ (def editing-spot-state-ref (l/derived (l/in [:workspace-local :editing-stop]) st/state)) +(def current-gradient-ref + (l/derived (l/in [:workspace-local :current-gradient]) st/state)) + ;; --- Color Picker Modal (defn color->components [value opacity] @@ -130,6 +133,7 @@ picked-shift? (mf/deref picked-shift?) editing-spot-state (mf/deref editing-spot-state-ref) + current-gradient (mf/deref current-gradient-ref) current-color (:current-color @state) @@ -145,6 +149,13 @@ editing-stop (update-in [:stops editing-stop] merge changes))) (reset! dirty? true))) + handle-click-picker (fn [] + (if picking-color? + (do (modal/disallow-click-outside!) + (st/emit! (dc/stop-picker))) + (do (modal/allow-click-outside!) + (st/emit! (dc/start-picker))))) + handle-change-stop (fn [offset] (when-let [offset-color (get-in @state [:stops offset])] @@ -169,10 +180,10 @@ (if (= type (:type @state)) (do (swap! state assoc :type :color) - (swap! state dissoc :editing-stop :stops :gradient-data)) - (do - (swap! state assoc :type type - :gradient-data (create-gradient-data type)) + (swap! state dissoc :editing-stop :stops :gradient-data) + (st/emit! (dc/stop-gradient))) + (let [gradient-data (create-gradient-data type)] + (swap! state assoc :type type :gradient-data gradient-data) (when (not (:stops @state)) (swap! state assoc :editing-stop 0 @@ -228,11 +239,25 @@ ;; Changes on the viewport when moving a gradient handler (mf/use-effect - (mf/deps data) - #(if-let [gradient-data (-> data data->state :gradient-data)] - (do - (reset! dirty? true) - (swap! state assoc :gradient-data gradient-data)))) + (mf/deps current-gradient) + (fn [] + (when current-gradient + (let [gradient-data (select-keys current-gradient [:start-x :start-y + :end-x :end-y + :width])] + (when (not= (:gradient-data @state) gradient-data) + (do + (reset! dirty? true) + (swap! state assoc :gradient-data gradient-data))))))) + + ;; Check if we've opened a color with gradient + (mf/use-effect + (fn [] + (when (:gradient data) + (st/emit! (dc/start-gradient (:gradient data)))) + + ;; on-unmount we stop the handlers + #(st/emit! (dc/stop-gradient)))) ;; Send the properties to the store (mf/use-effect @@ -242,6 +267,8 @@ (let [color (state->data @state)] (reset! dirty? false) (reset! last-color color) + (when (:gradient color) + (st/emit! (dc/start-gradient (:gradient color)))) (on-change color))))) [:div.colorpicker {:ref ref-picker} @@ -249,9 +276,7 @@ [:div.top-actions [:button.picker-btn {:class (when picking-color? "active") - :on-click (fn [] - (modal/allow-click-outside!) - (st/emit! (dc/start-picker)))} + :on-click handle-click-picker} i/picker] (when (not disable-gradient) @@ -310,8 +335,7 @@ {:on-click (fn [] (on-accept (state->data @state)) (modal/hide!))} - (t locale "workspace.libraries.colors.save-color")]])]]) - ) + (t locale "workspace.libraries.colors.save-color")]])]])) (defn calculate-position "Calculates the style properties for the given coordinates and position" diff --git a/frontend/src/app/main/ui/workspace/gradients.cljs b/frontend/src/app/main/ui/workspace/gradients.cljs index 38dc28471..085872e57 100644 --- a/frontend/src/app/main/ui/workspace/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/gradients.cljs @@ -38,6 +38,9 @@ (def editing-spot-ref (l/derived (l/in [:workspace-local :editing-stop]) st/state)) +(def current-gradient-ref + (l/derived (l/in [:workspace-local :current-gradient]) st/state)) + (mf/defc shadow [{:keys [id x y width height offset]}] [:filter {:id id :x x @@ -228,17 +231,15 @@ :on-mouse-down (partial on-mouse-down :to-p) :on-mouse-up (partial on-mouse-up :to-p)}]])) -(def modal-type-ref - (l/derived (comp :type ::modal/modal) st/state)) (mf/defc gradient-handlers [{:keys [id zoom]}] (let [shape (mf/deref (refs/object-by-id id)) - {:keys [x y width height] :as sr} (:selrect shape) - gradient (:fill-color-gradient shape) - modal (mf/deref modal-type-ref) + gradient (mf/deref current-gradient-ref) editing-spot (mf/deref editing-spot-ref) + {:keys [x y width height] :as sr} (:selrect shape) + [{start-color :color start-opacity :opacity} {end-color :color end-opacity :opacity}] (:stops gradient) @@ -258,10 +259,8 @@ width-p (gpt/add from-p width-v) - change! (fn [change] - (st/emit! (dwc/update-shapes - [(:id shape)] - #(update % :fill-color-gradient merge change)))) + change! (fn [changes] + (st/emit! (dc/update-gradient changes))) on-change-start (fn [point] (let [start-x (/ (- (:x point) x) width) @@ -285,7 +284,7 @@ (change! {:width norm-dist})))] - (when (and gradient (= modal :colorpicker)) + (when (and gradient (= id (:shape-id gradient))) [:& gradient-handler-transformed {:editing editing-spot :from-p from-p diff --git a/frontend/src/app/main/ui/workspace/shapes/common.cljs b/frontend/src/app/main/ui/workspace/shapes/common.cljs index 62c346619..51c183c23 100644 --- a/frontend/src/app/main/ui/workspace/shapes/common.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/common.cljs @@ -49,7 +49,7 @@ (st/emit! (dw/select-shape id true))) (do (when-not (or (empty? selected) (kbd/shift? event)) - (st/emit! dw/deselect-all)) + (st/emit! (dw/deselect-all))) (st/emit! (dw/select-shape id)))) (st/emit! (dw/start-move-selected))))))) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 0882bf649..4a27b6946 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -100,7 +100,7 @@ (mf/deps (:id shape)) (fn [event] (dom/prevent-default event) - (st/emit! dw/deselect-all + (st/emit! (dw/deselect-all) (dw/select-shape (:id shape))))) on-mouse-over diff --git a/frontend/src/app/main/ui/workspace/shapes/interactions.cljs b/frontend/src/app/main/ui/workspace/shapes/interactions.cljs index fb36edad8..d4a8684fe 100644 --- a/frontend/src/app/main/ui/workspace/shapes/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/interactions.cljs @@ -32,7 +32,7 @@ (do (dom/stop-propagation event) (when-not (empty? selected) - (st/emit! dw/deselect-all)) + (st/emit! (dw/deselect-all))) (st/emit! (dw/select-shape id)) (st/emit! (dw/start-create-interaction)))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 889d04dcd..5080656f5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -143,10 +143,10 @@ (st/emit! (dw/select-shape id true)) (> (count selected) 1) - (st/emit! dw/deselect-all + (st/emit! (dw/deselect-all) (dw/select-shape id)) :else - (st/emit! dw/deselect-all + (st/emit! (dw/deselect-all) (dw/select-shape id))))) on-context-menu @@ -160,7 +160,7 @@ on-drag (fn [{:keys [id]}] (when (not (contains? selected id)) - (st/emit! dw/deselect-all + (st/emit! (dw/deselect-all) (dw/select-shape id)))) on-drop