bump use-gesture, memoize gesture callbacks

packages/core/CHANGELOG.md

@@ -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

packages/core/package.json

@@ -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": {

packages/core/src/hooks/useZoomEvents.ts

@@ -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,32 +31,29 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
     }
   }, [])
 
-  useGesture(
-    {
-      onWheel: ({ delta, event: e }) => {
+  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)
     },
-      onPinchStart: ({ origin, event }) => {
+    [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)
@@ -64,29 +61,19 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
       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
+    [callbacks, inputs, bounds]
+  )
 
-        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 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,
@@ -96,9 +83,30 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
         },
         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: handleWheel,
+      onPinchStart: handlePinchStart,
+      onPinch: handlePinch,
+      onPinchEnd: handlePinchEnd,
     },
     {
       target: ref,

packages/tldraw/CHANGELOG.md

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

yarn.lock

@@ -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"