✨ Start panning with space+click instread of just space

2025-03-18 18:51:29 -05:00 · 2021-07-28 13:32:04 +02:00 · 2021-07-28 13:32:04 +02:00 · 29e0c32679
commit 29e0c32679
parent db7fe023c6
6 changed files with 50 additions and 27 deletions
--- 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
--- 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))
--- 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?)
--- 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)]
--- 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]
--- 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))
+