🐛 Stop drag events when the user focus out the application

frontend/src/app/main/data/workspace/drawing/box.cljs

@@ -78,13 +78,7 @@
   (ptk/reify ::handle-drawing
     ptk/WatchEvent
     (watch [_ state stream]
-      (let [stopper       (rx/merge
+      (let [stopper      (mse/drag-stopper stream)
-                           (->> stream
-                                (rx/filter mse/mouse-event?)
-                                (rx/filter mse/mouse-up-event?))
-                           (->> stream
-                                (rx/filter #(= % :interrupt))))
-
             layout       (get state :workspace-layout)
             zoom         (dm/get-in state [:workspace-local :zoom] 1)
 

frontend/src/app/main/data/workspace/drawing/curve.cljs

@@ -28,11 +28,6 @@
 
 (def simplify-tolerance 0.3)
 
-(defn stopper-event?
-  [{:keys [type] :as event}]
-  (and (mse/mouse-event? event)
-       (= type :up)))
-
 (defn- insert-point
   [point]
   (ptk/reify ::insert-point
@@ -104,7 +99,7 @@
   (ptk/reify ::handle-drawing
     ptk/WatchEvent
     (watch [_ _ stream]
-      (let [stopper (rx/filter stopper-event? stream)
+      (let [stopper (mse/drag-stopper stream)
             mouse   (rx/sample 10 ms/mouse-position)
             shape   (cts/setup-shape {:type :path
                                       :initialized? true

frontend/src/app/main/data/workspace/interactions.cljs

@@ -193,9 +193,7 @@
     (watch [_ state stream]
       (let [initial-pos @ms/mouse-position
             selected (wsh/lookup-selected state)
-            stopper  (->> stream
+            stopper  (mse/drag-stopper stream)]
-                          (rx/filter mse/mouse-event?)
-                          (rx/filter mse/mouse-up-event?))]
         (when (= 1 (count selected))
           (rx/concat
            (->> ms/mouse-position
@@ -305,9 +303,7 @@
     (watch [_ state stream]
       (let [initial-pos @ms/mouse-position
             selected (wsh/lookup-selected state)
-            stopper  (->> stream
+            stopper  (mse/drag-stopper stream)]
-                          (rx/filter mse/mouse-event?)
-                          (rx/filter mse/mouse-up-event?))]
         (when (= 1 (count selected))
           (let [page-id     (:current-page-id state)
                 objects     (wsh/lookup-page-objects state page-id)

frontend/src/app/main/data/workspace/path/drawing.cljs

@@ -139,9 +139,7 @@
                  (rx/map #(drag-handler position idx prefix %))
                  (rx/take-until
                   (rx/merge
-                   (->> stream
+                   (mse/drag-stopper stream)
-                        (rx/filter mse/mouse-event?)
-                        (rx/filter mse/mouse-up-event?))
                    (->> stream
                         (rx/filter helpers/end-path-event?)))))]
 
@@ -166,9 +164,7 @@
     ptk/WatchEvent
     (watch [_ state stream]
       (let [stopper (rx/merge
-                     (->> stream
+                     (mse/drag-stopper stream)
-                          (rx/filter mse/mouse-event?)
-                          (rx/filter mse/mouse-up-event?))
                      (->> stream
                           (rx/filter helpers/end-path-event?)))
 
@@ -197,9 +193,7 @@
    (gpt/point? down-event))
 
   (let [stopper (rx/merge
-                 (->> stream
+                 (mse/drag-stopper stream)
-                      (rx/filter mse/mouse-event?)
-                      (rx/filter mse/mouse-up-event?))
                  (->> stream
                       (rx/filter helpers/end-path-event?)))
 

frontend/src/app/main/data/workspace/path/edition.cljs

@@ -150,9 +150,7 @@
   (ptk/reify ::drag-selected-points
     ptk/WatchEvent
     (watch [_ state stream]
-      (let [stopper (->> stream
+      (let [stopper (mse/drag-stopper stream)
-                         (rx/filter mse/mouse-event?)
-                         (rx/filter mse/mouse-up-event?))
 
             id (dm/get-in state [:workspace-local :edition])
 
@@ -279,9 +277,7 @@
                      (not alt?)))))
                (rx/take-until
                 (rx/merge
-                 (->> stream
+                 (mse/drag-stopper stream)
-                      (rx/filter mse/mouse-event?)
-                      (rx/filter mse/mouse-up-event?))
                  (->> stream
                       (rx/filter streams/finish-edition?)))))
 

frontend/src/app/main/data/workspace/path/selection.cljs

@@ -10,7 +10,6 @@
    [app.common.geom.point :as gpt]
    [app.common.geom.rect :as grc]
    [app.common.geom.shapes :as gsh]
-   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.path.state :as st]
    [app.main.streams :as ms]
    [app.util.mouse :as mse]
@@ -120,13 +119,7 @@
       ptk/WatchEvent
       (watch [_ state stream]
         (let [zoom    (get-in state [:workspace-local :zoom] 1)
-              stopper (rx/merge
+              stopper (mse/drag-stopper stream)
-                       (->> stream
-                            (rx/filter mse/mouse-event?)
-                            (rx/filter mse/mouse-up-event?))
-                       (->> stream
-                            (rx/filter dwc/interrupt?)))
-
               from-p  @ms/mouse-position]
           (rx/concat
            (->> ms/mouse-position

frontend/src/app/main/data/workspace/path/streams.cljs

@@ -53,9 +53,7 @@
          start (-> @ms/mouse-position to-pixel-snap)
 
          stopper (rx/merge
-                  (->> st/stream
+                  (mse/drag-stopper st/stream)
-                       (rx/filter mse/mouse-event?)
-                       (rx/filter mse/mouse-up-event?))
                   (->> st/stream
                        (rx/filter finish-edition?)))
 

frontend/src/app/main/data/workspace/selection.cljs

@@ -27,6 +27,7 @@
    [app.main.data.modal :as md]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.collapse :as dwc]
+   [app.main.data.workspace.edition :as dwe]
    [app.main.data.workspace.libraries-helpers :as dwlh]
    [app.main.data.workspace.specialized-panel :as-alias dwsp]
    [app.main.data.workspace.state-helpers :as wsh]
@@ -64,13 +65,7 @@
     ptk/WatchEvent
     (watch [_ state stream]
       (let [zoom          (dm/get-in state [:workspace-local :zoom] 1)
-            stopper (rx/merge
+            stopper       (mse/drag-stopper stream)
-                     (->> stream
-                          (rx/filter mse/mouse-event?)
-                          (rx/filter mse/mouse-up-event?))
-                     (->> stream
-                          (rx/filter interrupt?)))
-
             init-position @ms/mouse-position
 
             init-selrect  (grc/make-rect
@@ -155,7 +150,7 @@
              objects (wsh/lookup-page-objects state page-id)]
          (rx/of
           (dwc/expand-all-parents [id] objects)
-          :interrupt
+          (dwe/clear-edition-mode)
           ::dwsp/interrupt))))))
 
 (defn select-prev-shape

frontend/src/app/main/data/workspace/transforms.cljs

@@ -257,9 +257,7 @@
       (watch [_ state stream]
         (let [initial-position @ms/mouse-position
 
-              stopper (->> stream
+              stopper (mse/drag-stopper stream)
-                           (rx/filter mse/mouse-event?)
-                           (rx/filter mse/mouse-up-event?))
               layout  (:workspace-layout state)
               page-id (:current-page-id state)
               focus   (:workspace-focus-selected state)
@@ -370,10 +368,7 @@
 
     ptk/WatchEvent
     (watch [_ _ stream]
-      (let [stopper          (->> stream
+      (let [stopper         (mse/drag-stopper stream)
-                                  (rx/filter mse/mouse-event?)
-                                  (rx/filter mse/mouse-up-event?))
-
             group           (gsh/shapes->rect shapes)
             group-center    (grc/rect->center group)
             initial-angle   (gpt/angle @ms/mouse-position group-center)
@@ -436,10 +431,7 @@
      (watch [_ state stream]
        (let [initial  (deref ms/mouse-position)
 
-             stopper  (->> stream
+             stopper (mse/drag-stopper stream)
-                           (rx/filter mse/mouse-event?)
-                           (rx/filter mse/mouse-up-event?))
-
              zoom    (get-in state [:workspace-local :zoom] 1)
 
              ;; We toggle the selection so we don't have to wait for the event
@@ -518,10 +510,7 @@
 
              duplicate-move-started? (get-in state [:workspace-local :duplicate-move-started?] false)
 
-             stopper (->> stream
+             stopper (mse/drag-stopper stream)
-                          (rx/filter mse/mouse-event?)
-                          (rx/filter mse/mouse-up-event?))
-
              layout  (get state :workspace-layout)
              zoom    (get-in state [:workspace-local :zoom] 1)
              focus   (:workspace-focus-selected state)

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -32,6 +32,7 @@
    [app.util.dom :as dom]
    [app.util.globals :as globals]
    [app.util.keyboard :as kbd]
+   [app.util.mouse :as mse]
    [beicon.v2.core :as rx]
    [beicon.v2.operators :as rxo]
    [goog.events :as events]
@@ -42,7 +43,8 @@
   (let [on-key-down       (actions/on-key-down)
         on-key-up         (actions/on-key-up)
         on-mouse-wheel    (actions/on-mouse-wheel zoom)
-        on-paste          (actions/on-paste disable-paste in-viewport? workspace-read-only?)]
+        on-paste          (actions/on-paste disable-paste in-viewport? workspace-read-only?)
+        on-blur           (mf/use-fn #(st/emit! (mse/->BlurEvent)))]
 
     (mf/use-layout-effect
      (mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
@@ -52,7 +54,8 @@
                    ;; bind with passive=false to allow the event to be cancelled
                    ;; https://stackoverflow.com/a/57582286/3219895
                    (events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
-                   (events/listen js/window EventType.PASTE on-paste)]]
+                   (events/listen js/window EventType.PASTE on-paste)
+                   (events/listen js/window EventType.BLUR on-blur)]]
          (fn []
            (doseq [key keys]
              (events/unlistenByKey key))))))))

frontend/src/app/util/mouse.cljs

@@ -4,11 +4,14 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.util.mouse)
+(ns app.util.mouse
+  (:require
+   [beicon.v2.core :as rx]))
 
 (defrecord MouseEvent [type ctrl shift alt meta])
 (defrecord PointerEvent [source pt ctrl shift alt meta])
 (defrecord ScrollEvent [point])
+(defrecord BlurEvent [])
 
 (defn mouse-event?
   [v]
@@ -22,6 +25,10 @@
   [v]
   (instance? ScrollEvent v))
 
+(defn blur-event?
+  [v]
+  (instance? BlurEvent v))
+
 (defn mouse-down-event?
   [^MouseEvent v]
   (= :down (.-type v)))
@@ -61,3 +68,16 @@
 (defn get-pointer-shift-mod
   [^PointerEvent ev]
   (.-shift ev))
+
+(defn drag-stopper
+  "Creates a stream to stop drag events. Takes into account the mouse and also
+  if the window loses focus or the esc key is pressed."
+  [stream]
+  (rx/merge
+   (->> stream
+        (rx/filter blur-event?))
+   (->> stream
+        (rx/filter mouse-event?)
+        (rx/filter mouse-up-event?))
+   (->> stream
+        (rx/filter #(= % :interrupt)))))