3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 14:56:10 +02:00
Code Issues Projects Releases Packages Wiki 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
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] (fn [e]
(= (.-keyCode e) keycode))) (= (.-keyCode e) keycode)))
(defn ^boolean alt?
[event]
(.-altKey event))
(defn ^boolean ctrl? (defn ^boolean ctrl?
[event] [event]
(.-ctrlKey event)) (.-ctrlKey event))

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

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

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

@ -49,9 +49,10 @@
(defn get-current-center-absolute (defn get-current-center-absolute
[dom] [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 (defn get-current-position
"Get the coordinates of the currently visible point at top left of viewport"
[dom] [dom]
(let [scroll-left (.-scrollLeft dom) (let [scroll-left (.-scrollLeft dom)
scroll-top (.-scrollTop dom)] scroll-top (.-scrollTop dom)]
@ -59,10 +60,14 @@
(defn get-current-position-absolute (defn get-current-position-absolute
[dom] [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 (defn scroll-to-point
[dom point position] [dom point position]
(let [viewport-offset (gpt/subtract 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))) (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/ctrl? event)
(kbd/shift? 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 on-mount
(fn [] (fn []
(let [key1 (events/listen js/document EventType.KEYDOWN on-key-down) (let [key1 (events/listen js/document EventType.KEYDOWN on-key-down)
key2 (events/listen js/document EventType.KEYUP on-key-up) key2 (events/listen js/document EventType.KEYUP on-key-up)
dnode (mf/ref-val viewport-ref) 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 [] (fn []
(events/unlistenByKey key1) (events/unlistenByKey key1)
(events/unlistenByKey key2) (events/unlistenByKey key2)
(events/unlistenByKey key3) (events/unlistenByKey key3)
(events/unlistenByKey key4)
))) )))
on-drag-over on-drag-over