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

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"