PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Scroll wheel fixes & enhancements (#501)

Browse source 
* scroll wheel fixes & enhancements

1. correct zoom direction (was reversed)
2. support ctrl+scroll for zoom (in addition to alt+scroll)
3. support shift+scroll for horizontal pan

* Allow two-axis panning

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Herb Caudill 2022-01-12 15:33:55 +01:00 committed by GitHub
parent 36a6026cb3
commit 372cc690c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/core/src/hooks/useZoomEvents.ts
View file

@ -28,17 +28,25 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
}, []) }, [])
const handleWheel = React.useCallback<Handler<'wheel', WheelEvent>>( const handleWheel = React.useCallback<Handler<'wheel', WheelEvent>>(
({ delta, event: e }) => { ({ delta: wheelDelta, event: e }) => {
e.preventDefault() e.preventDefault()
if (e.altKey && e.buttons === 0) { // alt+scroll or ctrl+scroll = zoom
if ((e.altKey || e.ctrlKey) && e.buttons === 0) {
const point = inputs.pointer?.point ?? [bounds.width / 2, bounds.height / 2] const point = inputs.pointer?.point ?? [bounds.width / 2, bounds.height / 2]
const info = inputs.pinch(point, point) const info = inputs.pinch(point, point)
callbacks.onZoom?.({ ...info, delta: [...point, -e.deltaY] }, e) const delta = [...point, wheelDelta[1]]
callbacks.onZoom?.({ ...info, delta }, e)
return return
} }
// otherwise pan
const delta = e.shiftKey
? // shift+scroll = pan horizontally
[wheelDelta[1], 0]
: // scroll = pan vertically (or in any direction on a trackpad)
[...wheelDelta]
if (inputs.isPinching) return if (inputs.isPinching) return
if (Vec.isEqual(delta, [0, 0])) return if (Vec.isEqual(delta, [0, 0])) return
const info = inputs.pan(delta, e as WheelEvent) const info = inputs.pan(delta, e)
callbacks.onPan?.(info, e) callbacks.onPan?.(info, e)
}, },
[callbacks, inputs, bounds] [callbacks, inputs, bounds]