✨ Start panning with space+click instread of just space

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

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

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

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)
+    (let [bevent   (.getBrowserEvent ^js event)
-          key     (.-key ^js event)
+          key      (.-key ^js event)
-          ctrl?   (kbd/ctrl? event)
+          ctrl?    (kbd/ctrl? event)
-          shift?  (kbd/shift? event)
+          shift?   (kbd/shift? event)
-          alt?    (kbd/alt? event)
+          alt?     (kbd/alt? event)
-          meta?   (kbd/meta? event)
+          meta?    (kbd/meta? event)
-          target  (dom/get-target event)
+          target   (dom/get-target event)
-          editor? (some? (.closest ^js target ".public-DraftEditor-content"))]
+          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?))
+        (st/emit! (ms/->KeyboardEvent :down key shift? ctrl? alt? meta? editing?)))))))
-        (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))))))))
 
 (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)]
+          meta?  (kbd/meta? event)
-      (when (kbd/space? event)
+          target   (dom/get-target event)
-        (st/emit! (dw/finish-panning)))
+          editing? (or (some? (.closest ^js target ".public-DraftEditor-content"))
-      (st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta?))))))
+                       (= "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)]

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]

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