[fix] zoom on safari (#692)

* Fix pinch zooming on safari

* Reduce speed of zoom

packages/core/package.json

@@ -39,7 +39,7 @@
   "dependencies": {
     "@tldraw/intersect": "^1.7.1",
     "@tldraw/vec": "^1.7.0",
-    "@use-gesture/react": "^10.2.4",
+    "@use-gesture/react": "^10.2.14",
     "mobx-react-lite": "^3.2.3",
     "resize-observer-polyfill": "^1.5.1"
   },

packages/core/src/components/Canvas/Canvas.tsx

@@ -82,19 +82,23 @@ export const Canvas = observer(function _Canvas<
   onBoundsChange,
 }: CanvasProps<T, M>) {
   const rCanvas = React.useRef<HTMLDivElement>(null)
-  const rContainer = React.useRef<HTMLDivElement>(null)
-  const rLayer = React.useRef<HTMLDivElement>(null)
 
-  inputs.zoom = pageState.camera.zoom
+  const rZoomRef = React.useRef(pageState.camera.zoom)
+
+  rZoomRef.current = pageState.camera.zoom
+
+  useZoomEvents(rZoomRef, externalContainerRef || rCanvas)
 
   useResizeObserver(rCanvas, onBoundsChange)
 
-  useZoomEvents(pageState.camera.zoom, externalContainerRef || rCanvas)
-
   useSafariFocusOutFix()
 
   usePreventNavigationCss(rCanvas)
 
+  const rContainer = React.useRef<HTMLDivElement>(null)
+
+  const rLayer = React.useRef<HTMLDivElement>(null)
+
   useCameraCss(rLayer, rContainer, pageState)
 
   usePerformanceCss(performanceMode, rContainer)

packages/core/src/hooks/useZoomEvents.ts

@@ -7,7 +7,10 @@ import { Vec } from '@tldraw/vec'
 import Utils from '~utils'
 
 // Capture zoom gestures (pinches, wheels and pans)
-export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.RefObject<T>) {
+export function useZoomEvents<T extends HTMLElement>(
+  zoomRef: React.RefObject<number>,
+  ref: React.RefObject<T>
+) {
   const rOriginPoint = React.useRef<number[] | undefined>(undefined)
   const rPinchPoint = React.useRef<number[] | undefined>(undefined)
   const rDelta = React.useRef<number[]>([0, 0])
@@ -38,11 +41,13 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
       // alt+scroll or ctrl+scroll = zoom
       if ((e.altKey || e.ctrlKey || e.metaKey) && e.buttons === 0) {
         const point = inputs.pointer?.point ?? [bounds.width / 2, bounds.height / 2]
-        const delta = [...point, offset[1]]
+        const delta = [...point, offset[1] * 0.618]
         const info = inputs.pan(delta, e)
+
         callbacks.onZoom?.({ ...info, delta }, e)
         return
       }
+
       // otherwise pan
       const delta = Vec.mul(
         e.shiftKey && !Utils.isDarwin
@@ -54,7 +59,9 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
       )
 
       if (Vec.isEqual(delta, [0, 0])) return
+
       const info = inputs.pan(delta, e)
+
       callbacks.onPan?.(info, e)
     },
     [callbacks, inputs, bounds]
@@ -65,6 +72,7 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
   >(
     ({ origin, event }) => {
       if (event instanceof WheelEvent) return
+
       const elm = ref.current
       if (!elm || !(event.target === elm || elm.contains(event.target as Node))) return
       const info = inputs.pinch(origin, origin)
@@ -82,12 +90,14 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
   >(
     ({ origin, offset, event }) => {
       if (event instanceof WheelEvent) return
+
       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,
@@ -126,8 +136,10 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
       target: ref,
       eventOptions: { passive: false },
       pinch: {
-        from: [0, zoom],
-        scaleBounds: () => ({ from: inputs.zoom, max: 5, min: 0.1 }),
+        from: [zoomRef.current!, 0],
+        scaleBounds: () => {
+          return { from: zoomRef.current!, max: 5, min: 0.1 }
+        },
       },
     }
   )

packages/core/src/inputs.ts

@@ -23,8 +23,6 @@ export class Inputs {
     height: 480,
   }
 
-  zoom = 1
-
   pointerUpTime = 0
 
   activePointer?: number

yarn.lock

@@ -3259,17 +3259,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.6":
-  version "10.2.6"
-  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.6.tgz#12bdab107501798334ae28a6d193ef6ccd7a8930"
-  integrity sha512-+GpVSEoCLv1OeZ+qgAV+tLUKit1LKgKO3PgIiEVZqNr4A/YTXzbC1unlThpfzwyj5Dx22UxHDh0UfgRrQ9Lb1w==
+"@use-gesture/core@10.2.14":
+  version "10.2.14"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.14.tgz#59f40e1c3717e333cb51aafa77cbe427003b4cef"
+  integrity sha512-VNhm74/KwmXohyFc8jD1mwurgo3mwTtl80z7lpM7S45LXsZpZ8U0qzwwINqKamedx1aEc17ycwxJlfCrzfzMSQ==
 
-"@use-gesture/react@^10.2.4":
-  version "10.2.6"
-  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.6.tgz#9ff0bdc2675d8a1520189e62b232800f852150ed"
-  integrity sha512-s/QDhKvsQVaSNq1ljRBMR2PWRkOp9BmoI+kgZR1DsHUSp5XDORtU33D5TZfJoWnD5X3E9SmePikPl66dDaEeDA==
+"@use-gesture/react@^10.2.14":
+  version "10.2.14"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.14.tgz#d9e07365c426cbc7d855cb958195114966a58e5d"
+  integrity sha512-EZOHTB8hr5D6UWBr/vwOonPAeot4+OWj94C8mbYOYbIKgmCBFrGgK7j5cSnXgpmsRQBBOt77FPywW1O638vBpw==
   dependencies:
-    "@use-gesture/core" "10.2.6"
+    "@use-gesture/core" "10.2.14"
 
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"