✨ Improved handlers behaviour

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

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

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

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."
+  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))
+
+  ([check-modal]
    (ptk/reify ::deselect-all
      ptk/UpdateEvent
      (update [_ state]
 
        ;; Only deselect if there is no modal openned
        (cond-> state
-        (not (::md/modal state))
+         (or (not check-modal)
+             (not (::md/modal state)))
          (update :workspace-local
                  #(-> %
                       (assoc :selected (d/ordered-set))
-                     (dissoc :selected-frame)))))))
+                      (dissoc :selected-frame))))))))
 
 ;; --- Select Shapes (By selrect)
 

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))
+                (swap! state dissoc :editing-stop :stops :gradient-data)
-              (do
+                (st/emit! (dc/stop-gradient)))
-                (swap! state assoc :type type
+              (let [gradient-data (create-gradient-data type)]
-                       :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)
+     (mf/deps current-gradient)
-     #(if-let [gradient-data (-> data data->state :gradient-data)]
+     (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))))
+               (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 []
+         :on-click handle-click-picker}
-                     (modal/allow-click-outside!)
-                     (st/emit! (dc/start-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"

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 (mf/deref current-gradient-ref)
-        gradient (:fill-color-gradient shape)
-        modal (mf/deref modal-type-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]
+        change! (fn [changes]
-                  (st/emit! (dwc/update-shapes
+                  (st/emit! (dc/update-gradient changes)))
-                             [(:id shape)]
-                             #(update % :fill-color-gradient merge change))))
 
         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

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

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

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

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