From 29e0c32679d61f7a23764c885737687305c4b643 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Wed, 28 Jul 2021 13:32:04 +0200 Subject: [PATCH] :sparkles: Start panning with space+click instread of just space --- CHANGES.md | 2 + frontend/src/app/main/streams.cljs | 13 ++++- .../src/app/main/ui/workspace/viewport.cljs | 5 +- .../main/ui/workspace/viewport/actions.cljs | 48 ++++++++++--------- .../app/main/ui/workspace/viewport/hooks.cljs | 5 +- frontend/src/app/util/keyboard.cljs | 4 ++ 6 files changed, 50 insertions(+), 27 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 247d75693..094bf1512 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -7,6 +7,8 @@ ### :sparkles: New features +- Use space + mouse drag to pan, instead of only space [Taiga #1800](https://tree.taiga.io/project/penpot/us/1800). + ### :bug: Bugs fixed ### :arrow_up: Deps updates ### :boom: Breaking changes diff --git a/frontend/src/app/main/streams.cljs b/frontend/src/app/main/streams.cljs index 15a05e01a..d12b62acc 100644 --- a/frontend/src/app/main/streams.cljs +++ b/frontend/src/app/main/streams.cljs @@ -14,7 +14,7 @@ ;; --- User Events -(defrecord KeyboardEvent [type key shift ctrl alt meta]) +(defrecord KeyboardEvent [type key shift ctrl alt meta editing]) (defn keyboard-event? [v] @@ -137,3 +137,14 @@ (rx/dedupe))] (rx/subscribe-with ob sub) sub)) + +(defonce keyboard-space + (let [sub (rx/behavior-subject nil) + ob (->> st/stream + (rx/filter keyboard-event?) + (rx/filter kbd/space?) + (rx/filter (comp not kbd/editing?)) + (rx/map #(= :down (:type %))) + (rx/dedupe))] + (rx/subscribe-with ob sub) + sub)) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index a0fa7552c..e530a3d24 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -70,6 +70,7 @@ ;; STATE alt? (mf/use-state false) ctrl? (mf/use-state false) + space? (mf/use-state false) cursor (mf/use-state (utils/get-cursor :pointer-inner)) hover-ids (mf/use-state nil) hover (mf/use-state nil) @@ -113,7 +114,7 @@ on-drag-enter (actions/on-drag-enter) on-drag-over (actions/on-drag-over) on-drop (actions/on-drop file viewport-ref zoom) - on-mouse-down (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment?) + on-mouse-down (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment? space?) on-mouse-up (actions/on-mouse-up disable-paste) on-pointer-down (actions/on-pointer-down) on-pointer-enter (actions/on-pointer-enter in-viewport?) @@ -150,7 +151,7 @@ (hooks/setup-viewport-size viewport-ref) (hooks/setup-cursor cursor alt? panning drawing-tool drawing-path? node-editing?) (hooks/setup-resize layout viewport-ref) - (hooks/setup-keyboard alt? ctrl?) + (hooks/setup-keyboard alt? ctrl? space?) (hooks/setup-hover-shapes page-id move-stream selected objects transform selected ctrl? hover hover-ids zoom) (hooks/setup-viewport-modifiers modifiers selected objects render-ref) (hooks/setup-shortcuts node-editing? drawing-path?) diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 2fbfbac08..337b09b6f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/actions.cljs @@ -27,9 +27,9 @@ (:import goog.events.WheelEvent)) (defn on-mouse-down - [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment?] + [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment? space?] (mf/use-callback - (mf/deps id blocked hidden type selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment?) + (mf/deps id blocked hidden type selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment? space?) (fn [bevent] (when (or (dom/class? (dom/get-target bevent) "viewport-controls") (dom/class? (dom/get-target bevent) "viewport-selrect")) @@ -69,6 +69,9 @@ ;; Handle path node area selection (st/emit! (dwdp/handle-area-selection shift?)) + @space? + (st/emit! (dw/start-panning)) + (or (not id) (and frame? (not selected?))) (st/emit! (dw/handle-area-selection shift?)) @@ -209,7 +212,8 @@ middle-click? (= 2 (.-which event))] (when left-click? - (st/emit! (ms/->MouseEvent :up ctrl? shift? alt?))) + (st/emit! (dw/finish-panning) + (ms/->MouseEvent :up ctrl? shift? alt?))) (when middle-click? (dom/prevent-default event) @@ -253,23 +257,20 @@ (defn on-key-down [] (mf/use-callback (fn [event] - (let [bevent (.getBrowserEvent ^js event) - key (.-key ^js event) - ctrl? (kbd/ctrl? event) - shift? (kbd/shift? event) - alt? (kbd/alt? event) - meta? (kbd/meta? event) - target (dom/get-target event) - editor? (some? (.closest ^js target ".public-DraftEditor-content"))] + (let [bevent (.getBrowserEvent ^js event) + key (.-key ^js event) + ctrl? (kbd/ctrl? event) + shift? (kbd/shift? event) + alt? (kbd/alt? event) + meta? (kbd/meta? event) + target (dom/get-target event) + editing? (or (some? (.closest ^js target ".public-DraftEditor-content")) + (= "rich-text" (obj/get target "className")) + (= "INPUT" (obj/get target "tagName")) + (= "TEXTAREA" (obj/get target "tagName")))] (when-not (.-repeat bevent) - (st/emit! (ms/->KeyboardEvent :down key shift? ctrl? alt? meta?)) - (when (and (kbd/space? event) - (not editor?) - (not= "rich-text" (obj/get target "className")) - (not= "INPUT" (obj/get target "tagName")) - (not= "TEXTAREA" (obj/get target "tagName"))) - (st/emit! (dw/start-panning)))))))) + (st/emit! (ms/->KeyboardEvent :down key shift? ctrl? alt? meta? editing?))))))) (defn on-key-up [] (mf/use-callback @@ -278,10 +279,13 @@ ctrl? (kbd/ctrl? event) shift? (kbd/shift? event) alt? (kbd/alt? event) - meta? (kbd/meta? event)] - (when (kbd/space? event) - (st/emit! (dw/finish-panning))) - (st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta?)))))) + meta? (kbd/meta? event) + target (dom/get-target event) + editing? (or (some? (.closest ^js target ".public-DraftEditor-content")) + (= "rich-text" (obj/get target "className")) + (= "INPUT" (obj/get target "tagName")) + (= "TEXTAREA" (obj/get target "tagName")))] + (st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta? editing?)))))) (defn on-mouse-move [viewport-ref zoom] (let [last-position (mf/use-var nil)] diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 1d9c98b1a..61c2d8a0e 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -84,9 +84,10 @@ (let [on-resize (actions/on-resize viewport-ref)] (mf/use-layout-effect (mf/deps layout) on-resize))) -(defn setup-keyboard [alt? ctrl?] +(defn setup-keyboard [alt? ctrl? space?] (hooks/use-stream ms/keyboard-alt #(reset! alt? %)) - (hooks/use-stream ms/keyboard-ctrl #(reset! ctrl? %))) + (hooks/use-stream ms/keyboard-ctrl #(reset! ctrl? %)) + (hooks/use-stream ms/keyboard-space #(reset! space? %))) ;; TODO: revisit the arguments, looks like `selected` is not necessary here (defn setup-hover-shapes [page-id move-stream _selected objects transform selected ctrl? hover hover-ids zoom] diff --git a/frontend/src/app/util/keyboard.cljs b/frontend/src/app/util/keyboard.cljs index 2ab1e286f..0fb84f09d 100644 --- a/frontend/src/app/util/keyboard.cljs +++ b/frontend/src/app/util/keyboard.cljs @@ -35,3 +35,7 @@ (def altKey? (is-key? "Alt")) (def ctrlKey? (or (is-key? "Control") (is-key? "Meta"))) + +(defn editing? [e] + (.-editing ^js e)) +