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

bump use-gesture, memoize gesture callbacks

Browse source
This commit is contained in:
Steve Ruiz 2021-12-27 12:50:18 +00:00
parent 297486bb34
commit d5cd7ed480
5 changed files with 87 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/core/CHANGELOG.md
View file

@ -2,7 +2,7 @@
## 1.4.0
- Adds performance modes.
- Adds support for performance modes.
- Makes assets an optional prop for the Renderer.
## 1.3.0

2
packages/core/package.json
View file

@ -39,7 +39,7 @@
"dependencies": {
"@tldraw/intersect": "^1.2.9",
"@tldraw/vec": "^1.2.9",
"@use-gesture/react": "^10.1.3",
"@use-gesture/react": "^10.2.4",
"mobx-react-lite": "^3.2.2"
},
"peerDependencies": {

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

@ -2,7 +2,7 @@
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import * as React from 'react'
import { useTLContext } from './useTLContext'
import { useGesture } from '@use-gesture/react'
import { Handler, useGesture, WebKitGestureEvent } from '@use-gesture/react'
import { Vec } from '@tldraw/vec'
// Capture zoom gestures (pinches, wheels and pans)
@ -31,74 +31,82 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
}
}, [])
const handleWheel = React.useCallback<Handler<'wheel', WheelEvent>>(
({ delta, event: e }) => {
e.preventDefault()
if (e.altKey && e.buttons === 0) {
const point = inputs.pointer?.point ?? [bounds.width / 2, bounds.height / 2]
const info = inputs.pinch(point, point)
callbacks.onZoom?.({ ...info, delta: [...point, -e.deltaY] }, e)
return
}
if (inputs.isPinching) return
if (Vec.isEqual(delta, [0, 0])) return
const info = inputs.pan(delta, e as WheelEvent)
callbacks.onPan?.(info, e)
},
[callbacks, inputs, bounds]
)
const handlePinchStart = React.useCallback<
Handler<'pinch', WheelEvent | PointerEvent | TouchEvent | WebKitGestureEvent>
>(
({ origin, event }) => {
const elm = ref.current
if (!elm || !(event.target === elm || elm.contains(event.target as Node))) return
const info = inputs.pinch(origin, origin)
inputs.isPinching = true
callbacks.onPinchStart?.(info, event)
rPinchPoint.current = info.point
rOriginPoint.current = info.origin
rDelta.current = [0, 0]
},
[callbacks, inputs, bounds]
)
const handlePinch = React.useCallback<
Handler<'pinch', WheelEvent | PointerEvent | TouchEvent | WebKitGestureEvent>
>(
({ origin, event, offset }) => {
const elm = ref.current
if (!(event.target === elm || elm?.contains(event.target as Node))) return
if (!rOriginPoint.current) return
const info = inputs.pinch(origin, rOriginPoint.current)
const trueDelta = Vec.sub(info.delta, rDelta.current)
rDelta.current = info.delta
callbacks.onPinch?.(
{
...info,
point: info.point,
origin: rOriginPoint.current,
delta: [...trueDelta, offset[0]],
},
event
)
rPinchPoint.current = origin
},
[callbacks, inputs, bounds]
)
const handlePinchEnd = React.useCallback<
Handler<'pinch', WheelEvent | PointerEvent | TouchEvent | WebKitGestureEvent>
>(({ origin, event }) => {
const elm = ref.current
if (!(event.target === elm || elm?.contains(event.target as Node))) return
const info = inputs.pinch(origin, origin)
inputs.isPinching = false
callbacks.onPinchEnd?.(info, event)
rPinchPoint.current = undefined
rOriginPoint.current = undefined
rDelta.current = [0, 0]
}, [])
useGesture(
{
onWheel: ({ delta, event: e }) => {
e.preventDefault()
if (e.altKey && e.buttons === 0) {
const point = inputs.pointer?.point ?? [bounds.width / 2, bounds.height / 2]
const info = inputs.pinch(point, point)
callbacks.onZoom?.({ ...info, delta: [...point, -e.deltaY] }, e)
return
}
if (inputs.isPinching) return
if (Vec.isEqual(delta, [0, 0])) return
const info = inputs.pan(delta, e as WheelEvent)
callbacks.onPan?.(info, e)
},
onPinchStart: ({ origin, event }) => {
const elm = ref.current
if (!elm || !(event.target === elm || elm.contains(event.target as Node))) return
const info = inputs.pinch(origin, origin)
inputs.isPinching = true
callbacks.onPinchStart?.(info, event)
rPinchPoint.current = info.point
rOriginPoint.current = info.origin
rDelta.current = [0, 0]
},
onPinchEnd: ({ origin, event }) => {
const elm = ref.current
if (!(event.target === elm || elm?.contains(event.target as Node))) return
const info = inputs.pinch(origin, origin)
inputs.isPinching = false
callbacks.onPinchEnd?.(info, event)
rPinchPoint.current = undefined
rOriginPoint.current = undefined
rDelta.current = [0, 0]
},
onPinch: ({ origin, offset, event }) => {
const elm = ref.current
if (!(event.target === elm || elm?.contains(event.target as Node))) return
if (!rOriginPoint.current) return
const info = inputs.pinch(origin, rOriginPoint.current)
const trueDelta = Vec.sub(info.delta, rDelta.current)
rDelta.current = info.delta
callbacks.onPinch?.(
{
...info,
point: info.point,
origin: rOriginPoint.current,
delta: [...trueDelta, offset[0]],
},
event
)
rPinchPoint.current = origin
},
onWheel: handleWheel,
onPinchStart: handlePinchStart,
onPinch: handlePinch,
onPinchEnd: handlePinchEnd,
},
{
target: ref,

2
packages/tldraw/CHANGELOG.md
View file

@ -1,6 +1,6 @@
## 1.4.0
- Adds performance modes to sessions.
- Adds support for performance modes to sessions.
## 1.3.0

18
yarn.lock
View file

@ -3944,17 +3944,17 @@
resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
"@use-gesture/core@10.2.0":
version "10.2.0"
resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.0.tgz#d8c79919e9a801f0a17708dd21898a85d953c521"
integrity sha512-mgEcB6T+0sCI+7ZuDV5acvm6P6sO/hz4XXupPIvW3/yPChrIXppIMCDo+PSPCyLqUTu+H8URc8M6zAJoPwUxdQ==
"@use-gesture/core@10.2.4":
version "10.2.4"
resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.4.tgz#139370223174b0589bd4b4f8ac7c0beb6ba64ba2"
integrity sha512-fk1LjCBj43BKb8NE05qkdtPOR0ngA7PwgvEqfFap/h+s7QHi+JTv4/mtDQ4wI9zzem+Ry5EKrHS/cVdBehI4wA==
"@use-gesture/react@^10.1.3":
version "10.2.0"
resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.0.tgz#1be45ec5697f6daeacdb25d04977c20b3d52713f"
integrity sha512-QrtXOCScE0WrA/9+Xi6YWtUudEhUIlqQ/+dBgt/bYwviSYuajEis69LhuxeLPEcjhVaPTpOWp+3M8YMWbf+2Iw==
"@use-gesture/react@^10.2.4":
version "10.2.4"
resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.4.tgz#b333e91b00670785ee32e8f4f1530ac6b8894bbc"
integrity sha512-CbqyRj+qNbRBOGmS8OWtaOa29fxEr7bKTYHvPuMQ1wsgQDh2/DqQxbp7cFxAg6WZ8oZjppDj/EkWnw22WpIIWQ==
dependencies:
"@use-gesture/core" "10.2.0"
"@use-gesture/core" "10.2.4"
"@vscode/test-web@^0.0.12":
version "0.0.12"