Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

✨ Start panning with space+click instread of just space

Browse source
This commit is contained in:
Andrés Moya 2021-07-28 13:32:04 +02:00
parent db7fe023c6
commit 29e0c32679
6 changed files with 50 additions and 27 deletions

2
CHANGES.md
View file

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

13
frontend/src/app/main/streams.cljs
View file

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

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

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

48
frontend/src/app/main/ui/workspace/viewport/actions.cljs
View file

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

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

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

4
frontend/src/app/util/keyboard.cljs
View file

@ -35,3 +35,7 @@
(def altKey? (is-key? "Alt"))
(def ctrlKey? (or (is-key? "Control")
(is-key? "Meta")))
(defn editing? [e]
(.-editing ^js e))