Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-14 07:51:35 -05:00
Code Issues Activity

🎉 Zoom with mouse wheel

Browse source
This commit is contained in:
Andrés Moya 2020-04-01 16:39:20 +02:00
parent d553b0c77c
commit 3e706abc54
4 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/uxbox/main/ui/keyboard.cljs
View file

@ -5,6 +5,10 @@
(fn [e]
(= (.-keyCode e) keycode)))
(defn ^boolean alt?
[event]
(.-altKey event))
(defn ^boolean ctrl?
[event]
(.-ctrlKey event))

10
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -46,15 +46,13 @@
(defn- on-wheel
[event frame]
(when (kbd/ctrl? event)
(let [prev-zoom @refs/selected-zoom
dom (mf/ref-val frame)
;; global ctrl+wheel browser zoom must be disabled (see main/ui/workspace/wiewport.cljs)
(let [dom (mf/ref-val frame)
scroll-position (scroll/get-current-position-absolute dom)
mouse-point @ms/mouse-position]
(dom/prevent-default event)
(dom/stop-propagation event)
(if (pos? (.-deltaY event))
(st/emit! (dw/decrease-zoom))
(st/emit! (dw/increase-zoom)))
(st/emit! dw/decrease-zoom)
(st/emit! dw/increase-zoom))
(scroll/scroll-to-point dom mouse-point scroll-position))))
(mf/defc workspace-content

11
frontend/src/uxbox/main/ui/workspace/scroll.cljs
View file

@ -49,9 +49,10 @@
(defn get-current-center-absolute
[dom]
(gpt/divide (get-current-center dom) @refs/selected-zoom))
(gpt/divide (get-current-center dom) (gpt/point @refs/selected-zoom)))
(defn get-current-position
"Get the coordinates of the currently visible point at top left of viewport"
[dom]
(let [scroll-left (.-scrollLeft dom)
scroll-top (.-scrollTop dom)]
@ -59,10 +60,14 @@
(defn get-current-position-absolute
[dom]
(gpt/divide (get-current-position dom) @refs/selected-zoom))
(let [current-position (get-current-position dom)]
(gpt/divide (get-current-position dom) (gpt/point @refs/selected-zoom))))
(defn scroll-to-point
[dom point position]
(let [viewport-offset (gpt/subtract point position)
new-scroll-position (gpt/subtract (gpt/multiply point @refs/selected-zoom) (gpt/multiply viewport-offset @refs/selected-zoom))]
selected-zoom (gpt/point @refs/selected-zoom)
new-scroll-position (gpt/subtract
(gpt/multiply point selected-zoom)
(gpt/multiply viewport-offset selected-zoom))]
(set-scroll-position dom new-scroll-position)))

12
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -240,16 +240,26 @@
(kbd/ctrl? event)
(kbd/shift? event)))))
on-mouse-wheel
(fn [event]
(when (kbd/ctrl? event)
;; Disable browser zoom with ctrl+mouse wheel
(dom/prevent-default event)))
on-mount
(fn []
(let [key1 (events/listen js/document EventType.KEYDOWN on-key-down)
key2 (events/listen js/document EventType.KEYUP on-key-up)
dnode (mf/ref-val viewport-ref)
key3 (events/listen dnode EventType.MOUSEMOVE on-mouse-move)]
key3 (events/listen dnode EventType.MOUSEMOVE on-mouse-move)
;; bind with passive=false to allow the event to be cancelled
;; https://stackoverflow.com/a/57582286/3219895
key4 (events/listen js/window EventType.WHEEL on-mouse-wheel #js {"passive" false})]
(fn []
(events/unlistenByKey key1)
(events/unlistenByKey key2)
(events/unlistenByKey key3)
(events/unlistenByKey key4)
)))
on-drag-over