Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 08:20:45 -05:00
Code Issues Activity

🐛 Stop drag events when the user focus out the application

Browse source
This commit is contained in:
alonso.torres 2024-03-15 14:01:37 +01:00
parent 054ffbe396
commit 895f649ef1
11 changed files with 53 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/data/workspace/drawing/box.cljs
View file

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

19
frontend/src/app/main/data/workspace/drawing/curve.cljs
View file

@ -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,13 +99,13 @@
(ptk/reify ::handle-drawing
ptk/WatchEvent
(watch [_ _ stream]
(let [stopper (rx/filter stopper-event? stream)
mouse (rx/sample 10 ms/mouse-position)
shape (cts/setup-shape {:type :path
:initialized? true
:frame-id uuid/zero
:parent-id uuid/zero
:segments []})]
(let [stopper (mse/drag-stopper stream)
mouse (rx/sample 10 ms/mouse-position)
shape (cts/setup-shape {:type :path
:initialized? true
:frame-id uuid/zero
:parent-id uuid/zero
:segments []})]
(rx/concat
(rx/of #(update % :workspace-drawing assoc :object shape))
(->> mouse

8
frontend/src/app/main/data/workspace/interactions.cljs
View file

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

12
frontend/src/app/main/data/workspace/path/drawing.cljs
View file

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

8
frontend/src/app/main/data/workspace/path/edition.cljs
View file

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

13
frontend/src/app/main/data/workspace/path/selection.cljs
View file

@ -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]
@ -119,15 +118,9 @@
(ptk/reify ::handle-area-selection
ptk/WatchEvent
(watch [_ state stream]
(let [zoom (get-in state [:workspace-local :zoom] 1)
stopper (rx/merge
(->> stream
(rx/filter mse/mouse-event?)
(rx/filter mse/mouse-up-event?))
(->> stream
(rx/filter dwc/interrupt?)))
from-p @ms/mouse-position]
(let [zoom (get-in state [:workspace-local :zoom] 1)
stopper (mse/drag-stopper stream)
from-p @ms/mouse-position]
(rx/concat
(->> ms/mouse-position
(rx/map #(grc/points->rect [from-p %]))

4
frontend/src/app/main/data/workspace/path/streams.cljs
View file

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

13
frontend/src/app/main/data/workspace/selection.cljs
View file

@ -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]
@ -63,14 +64,8 @@
(ptk/reify ::handle-area-selection
ptk/WatchEvent
(watch [_ state stream]
(let [zoom (dm/get-in state [:workspace-local :zoom] 1)
stopper (rx/merge
(->> stream
(rx/filter mse/mouse-event?)
(rx/filter mse/mouse-up-event?))
(->> stream
(rx/filter interrupt?)))
(let [zoom (dm/get-in state [:workspace-local :zoom] 1)
stopper (mse/drag-stopper stream)
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

19
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -257,9 +257,7 @@
(watch [_ state stream]
(let [initial-position @ms/mouse-position
stopper (->> stream
(rx/filter mse/mouse-event?)
(rx/filter mse/mouse-up-event?))
stopper (mse/drag-stopper stream)
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
(rx/filter mse/mouse-event?)
(rx/filter mse/mouse-up-event?))
(let [stopper (mse/drag-stopper stream)
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
(rx/filter mse/mouse-event?)
(rx/filter mse/mouse-up-event?))
stopper (mse/drag-stopper stream)
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
(rx/filter mse/mouse-event?)
(rx/filter mse/mouse-up-event?))
stopper (mse/drag-stopper stream)
layout (get state :workspace-layout)
zoom (get-in state [:workspace-local :zoom] 1)
focus (:workspace-focus-selected state)

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

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

22
frontend/src/app/util/mouse.cljs
View file

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