Fix pinching on tools other than select

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, usePinch, useWheel } from '@use-gesture/react'
+import { useGesture } from '@use-gesture/react'
 import { Vec } from '@tldraw/vec'
 
 // Capture zoom gestures (pinches, wheels and pans)
@@ -55,7 +55,6 @@ export function useZoomEvents<T extends HTMLElement>(zoom: number, ref: React.Re
       },
       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)

packages/tldraw/src/state/tlstate.ts

@@ -165,7 +165,7 @@ export class TLDrawState extends StateManager<Data> {
   ) {
     super(defaultState, id, 10, (next, prev) => ({
       ...next,
-      document: prev.document,
+      document: { ...next.document, ...prev.document },
     }))
 
     this._onChange = onChange

packages/tldraw/src/state/tool/BaseTool/BaseTool.ts

@@ -9,6 +9,7 @@ import type {
   TLShapeCloneHandler,
   TLWheelEventHandler,
 } from '~../../core/src/types'
+import Utils from '~../../core/src/utils'
 import type { TLDrawState } from '~state'
 import type { TLDrawShapeType } from '~types'
 
@@ -52,9 +53,6 @@ export abstract class BaseTool {
   onKeyUp?: TLKeyboardEventHandler
 
   // Camera Events
-  onPinchStart?: TLPinchEventHandler
-  onPinchEnd?: TLPinchEventHandler
-  onPinch?: TLPinchEventHandler
   onPan?: TLWheelEventHandler
   onZoom?: TLWheelEventHandler
 
@@ -109,4 +107,24 @@ export abstract class BaseTool {
   // Misc
   onShapeBlur?: TLShapeBlurHandler
   onShapeClone?: TLShapeCloneHandler
+
+  /* --------------------- Camera --------------------- */
+
+  onPinchStart: TLPinchEventHandler = () => {
+    this.state.cancelSession()
+    this.setStatus('pinching')
+  }
+
+  onPinchEnd: TLPinchEventHandler = () => {
+    if (Utils.isMobileSafari()) {
+      this.state.undoSelect()
+    }
+    this.setStatus('idle')
+  }
+
+  onPinch: TLPinchEventHandler = (info, e) => {
+    if (this.status !== 'pinching') return
+    this.state.pinchZoom(info.point, info.delta, info.delta[2])
+    this.onPointerMove?.(info, e as unknown as React.PointerEvent)
+  }
 }

packages/tldraw/src/state/tool/SelectTool/SelectTool.ts

@@ -5,7 +5,6 @@ import {
   TLBoundsHandleEventHandler,
   TLCanvasEventHandler,
   TLPointerEventHandler,
-  TLPinchEventHandler,
   TLKeyboardEventHandler,
   TLShapeCloneHandler,
   Utils,
@@ -532,26 +531,6 @@ export class SelectTool extends BaseTool {
     this.setStatus(Status.Idle)
   }
 
-  /* --------------------- Camera --------------------- */
-
-  onPinchStart: TLPinchEventHandler = () => {
-    this.state.cancelSession()
-    this.setStatus(Status.Pinching)
-  }
-
-  onPinchEnd: TLPinchEventHandler = () => {
-    if (Utils.isMobileSafari()) {
-      this.state.undoSelect()
-    }
-    this.setStatus(Status.Idle)
-  }
-
-  onPinch: TLPinchEventHandler = (info, e) => {
-    if (this.status !== Status.Pinching) return
-    this.state.pinchZoom(info.point, info.delta, info.delta[2])
-    this.onPointerMove(info, e as unknown as React.PointerEvent)
-  }
-
   /* ---------------------- Misc ---------------------- */
 
   onShapeClone: TLShapeCloneHandler = (info) => {