diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index f27ca272e5..7d08054fb4 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -149,9 +149,9 @@ canvas-ref (mf/use-ref nil) - ;; VARS - disable-paste (mf/use-var false) - in-viewport? (mf/use-var false) + ;; STATE REFS + disable-paste-ref (mf/use-ref false) + in-viewport-ref (mf/use-ref false) ;; STREAMS move-stream (mf/use-memo #(rx/subject)) @@ -210,10 +210,10 @@ on-pointer-down (actions/on-pointer-down @hover selected edition drawing-tool text-editing? path-editing? grid-editing? path-drawing? create-comment? space? panning z? read-only?) - on-pointer-up (actions/on-pointer-up disable-paste) + on-pointer-up (actions/on-pointer-up disable-paste-ref) - on-pointer-enter (actions/on-pointer-enter in-viewport?) - on-pointer-leave (actions/on-pointer-leave in-viewport?) + on-pointer-enter (actions/on-pointer-enter in-viewport-ref) + on-pointer-leave (actions/on-pointer-leave in-viewport-ref) on-pointer-move (actions/on-pointer-move move-stream) on-move-selected (actions/on-move-selected hover hover-ids selected space? z? read-only?) on-menu-selected (actions/on-menu-selected hover hover-ids selected read-only?) @@ -304,7 +304,7 @@ #(st/emit! (dwv/add-new-variant (:id first-shape))))] - (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool path-drawing?) + (hooks/setup-dom-events zoom disable-paste-ref in-viewport-ref read-only? drawing-tool path-drawing?) (hooks/setup-viewport-size vport viewport-ref) (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?) (hooks/setup-keyboard alt? mod? space? z? shift?) diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 56c70d1748..4d3c6123e2 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -266,7 +266,7 @@ (st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids}))))))) (defn on-pointer-up - [disable-paste] + [disable-paste-ref] (mf/use-callback (fn [event] (dom/stop-propagation event) @@ -291,21 +291,19 @@ (dom/prevent-default event) ;; We store this so in Firefox the middle button won't do a paste of the content - (reset! disable-paste true) - (ts/schedule #(reset! disable-paste false))) + (mf/set-ref-val! disable-paste-ref true) + (ts/schedule #(mf/set-ref-val! disable-paste-ref false))) (st/emit! (dw/finish-panning) (dw/finish-zooming)))))) -(defn on-pointer-enter [in-viewport?] - (mf/use-callback - (fn [] - (reset! in-viewport? true)))) +(defn on-pointer-enter + [in-viewport-ref] + (mf/use-fn #(mf/set-ref-val! in-viewport-ref true))) -(defn on-pointer-leave [in-viewport?] - (mf/use-callback - (fn [] - (reset! in-viewport? false)))) +(defn on-pointer-leave + [in-viewport-ref] + (mf/use-fn #(mf/set-ref-val! in-viewport-ref false))) (defn on-key-down [] (mf/use-callback @@ -525,14 +523,17 @@ (st/emit! (dwm/upload-media-workspace params)))))))) (defn on-paste - [disable-paste in-viewport? read-only?] + [disable-paste-ref in-viewport-ref read-only?] (mf/use-fn (mf/deps read-only?) (fn [event] ;; We disable the paste just after mouse-up of a middle button so ;; when panning won't paste the content into the workspace - (let [tag-name (-> event dom/get-target dom/get-tag-name)] + (let [tag-name (-> event dom/get-target dom/get-tag-name) + disable-paste? (mf/ref-val disable-paste-ref) + in-viewport? (mf/ref-val in-viewport-ref)] + (when (and (not (#{"INPUT" "TEXTAREA"} tag-name)) - (not @disable-paste) + (not disable-paste?) (not read-only?)) - (st/emit! (dw/paste-from-event event @in-viewport?))))))) + (st/emit! (dw/paste-from-event event in-viewport?))))))) diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 230abf8a28..8f00ca0031 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -42,11 +42,12 @@ [rumext.v2 :as mf]) (:import goog.events.EventType)) -(defn setup-dom-events [zoom disable-paste in-viewport? workspace-read-only? drawing-tool drawing-path?] +(defn setup-dom-events + [zoom disable-paste-ref in-viewport-ref workspace-read-only? drawing-tool drawing-path?] (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-ref in-viewport-ref workspace-read-only?) on-pointer-down (mf/use-fn (mf/deps drawing-tool drawing-path?) (fn [e] @@ -56,27 +57,21 @@ (st/emit! (dwe/clear-edition-mode)))))) on-blur (mf/use-fn #(st/emit! (mse/->BlurEvent)))] - (mf/use-effect - (mf/deps drawing-tool drawing-path?) - (fn [] - (let [keys [(events/listen js/window EventType.POINTERDOWN on-pointer-down)]] - (fn [] - (doseq [key keys] - (events/unlistenByKey key)))))) + (mf/with-effect [drawing-tool drawing-path?] + (let [key (events/listen js/window EventType.POINTERDOWN on-pointer-down)] + #(events/unlistenByKey key))) - (mf/use-layout-effect - (mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?) - (fn [] - (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down) - (events/listen js/document EventType.KEYUP on-key-up) - ;; 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.BLUR on-blur)]] - (fn [] - (doseq [key keys] - (events/unlistenByKey key)))))))) + (mf/with-layout-effect [on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?] + (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down) + (events/listen js/document EventType.KEYUP on-key-up) + ;; 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.BLUR on-blur)]] + (fn [] + (doseq [key keys] + (events/unlistenByKey key))))))) (defn setup-viewport-size [vport viewport-ref] (mf/with-effect [vport] diff --git a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs index 54dde7688d..acb1f51de0 100644 --- a/frontend/src/app/main/ui/workspace/viewport_wasm.cljs +++ b/frontend/src/app/main/ui/workspace/viewport_wasm.cljs @@ -142,9 +142,9 @@ canvas-ref (mf/use-ref nil) text-editor-ref (mf/use-ref nil) - ;; VARS - disable-paste (mf/use-var false) - in-viewport? (mf/use-var false) + ;; STATE REFS + disable-paste-ref (mf/use-ref false) + in-viewport-ref (mf/use-ref false) ;; STREAMS move-stream (mf/use-memo #(rx/subject)) @@ -204,10 +204,10 @@ on-pointer-down (actions/on-pointer-down @hover selected edition drawing-tool text-editing? path-editing? grid-editing? path-drawing? create-comment? space? panning z? read-only?) - on-pointer-up (actions/on-pointer-up disable-paste) + on-pointer-up (actions/on-pointer-up disable-paste-ref) - on-pointer-enter (actions/on-pointer-enter in-viewport?) - on-pointer-leave (actions/on-pointer-leave in-viewport?) + on-pointer-enter (actions/on-pointer-enter in-viewport-ref) + on-pointer-leave (actions/on-pointer-leave in-viewport-ref) on-pointer-move (actions/on-pointer-move move-stream) on-move-selected (actions/on-move-selected hover hover-ids selected space? z? read-only?) on-menu-selected (actions/on-menu-selected hover hover-ids selected read-only?) @@ -349,7 +349,7 @@ (wasm.api/show-grid @hover-top-frame-id) (wasm.api/clear-grid)))) - (hooks/setup-dom-events zoom disable-paste in-viewport? read-only? drawing-tool path-drawing?) + (hooks/setup-dom-events zoom disable-paste-ref in-viewport-ref read-only? drawing-tool path-drawing?) (hooks/setup-viewport-size vport viewport-ref) (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool path-drawing? path-editing? z? read-only?) (hooks/setup-keyboard alt? mod? space? z? shift?)