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

Rough fix for zoom events

Browse source
This commit is contained in:
Steve Ruiz 2021-10-06 12:55:09 +01:00
parent 804bf5db60
commit 5c9e148ad8
2 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import * as React from 'react' import * as React from 'react'
import { useTLContext } from './useTLContext' import { useTLContext } from './useTLContext'
import { useGesture } from '@use-gesture/react' import { useGesture, usePinch, useWheel } from '@use-gesture/react'
import { Vec } from '@tldraw/vec' import { Vec } from '@tldraw/vec'
// Capture zoom gestures (pinches, wheels and pans) // Capture zoom gestures (pinches, wheels and pans)
@ -46,6 +46,7 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
callbacks.onPan?.(info, e) callbacks.onPan?.(info, e)
}, },
onPinchStart: ({ origin, event }) => { onPinchStart: ({ origin, event }) => {
console.log('hi')
const elm = ref.current const elm = ref.current
if (!(event.target === elm || elm?.contains(event.target as Node))) return if (!(event.target === elm || elm?.contains(event.target as Node))) return
@ -68,7 +69,7 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
rOriginPoint.current = undefined rOriginPoint.current = undefined
rDelta.current = [0, 0] rDelta.current = [0, 0]
}, },
onPinch: ({ delta, origin, event }) => { onPinch: ({ origin, offset, event }) => {
const elm = ref.current const elm = ref.current
if (!(event.target === elm || elm?.contains(event.target as Node))) return if (!(event.target === elm || elm?.contains(event.target as Node))) return
if (!rOriginPoint.current) throw Error('No origin point!') if (!rOriginPoint.current) throw Error('No origin point!')
@ -84,7 +85,7 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
...info, ...info,
point: info.point, point: info.point,
origin: rOriginPoint.current, origin: rOriginPoint.current,
delta: [...trueDelta, -delta[0]], delta: [...trueDelta, offset[0]],
}, },
event event
) )
@ -95,6 +96,9 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
{ {
target: window, target: window,
eventOptions: { passive: false }, eventOptions: { passive: false },
pinch: {
scaleBounds: { max: 5, min: 0.1 },
},
} }
) )
} }

4
packages/tldraw/src/state/tlstate.ts
View file

@ -1181,10 +1181,10 @@ export class TLDrawState extends StateManager<Data> {
* @param delta The movement delta. * @param delta The movement delta.
* @param zoomDelta The zoom detal * @param zoomDelta The zoom detal
*/ */
pinchZoom = (point: number[], delta: number[], zoomDelta: number): this => { pinchZoom = (point: number[], delta: number[], zoom: number): this => {
const { camera } = this.pageState const { camera } = this.pageState
const nextPoint = Vec.sub(camera.point, Vec.div(delta, camera.zoom)) const nextPoint = Vec.sub(camera.point, Vec.div(delta, camera.zoom))
const nextZoom = TLDR.getCameraZoom(camera.zoom - zoomDelta * camera.zoom) const nextZoom = zoom
const p0 = Vec.sub(Vec.div(point, camera.zoom), nextPoint) const p0 = Vec.sub(Vec.div(point, camera.zoom), nextPoint)
const p1 = Vec.sub(Vec.div(point, nextZoom), nextPoint) const p1 = Vec.sub(Vec.div(point, nextZoom), nextPoint)
return this.setCamera(Vec.round(Vec.add(nextPoint, Vec.sub(p1, p0))), nextZoom, `pinch_zoomed`) return this.setCamera(Vec.round(Vec.add(nextPoint, Vec.sub(p1, p0))), nextZoom, `pinch_zoomed`)