From f8516a2c4a7a31980f4f8235744904897bc5ecc3 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 14 Oct 2021 17:25:10 +0100
Subject: [PATCH] Fix pinching on tools other than select

---
 packages/core/src/hooks/useZoomEvents.ts      |  3 +--
 packages/tldraw/src/state/tlstate.ts          |  2 +-
 .../src/state/tool/BaseTool/BaseTool.ts       | 24 ++++++++++++++++---
 .../src/state/tool/SelectTool/SelectTool.ts   | 21 ----------------
 4 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/packages/core/src/hooks/useZoomEvents.ts b/packages/core/src/hooks/useZoomEvents.ts
index b60257db6..40fc9d7e6 100644
--- a/packages/core/src/hooks/useZoomEvents.ts
+++ b/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)
diff --git a/packages/tldraw/src/state/tlstate.ts b/packages/tldraw/src/state/tlstate.ts
index b958cd8a9..13110a07c 100644
--- a/packages/tldraw/src/state/tlstate.ts
+++ b/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
diff --git a/packages/tldraw/src/state/tool/BaseTool/BaseTool.ts b/packages/tldraw/src/state/tool/BaseTool/BaseTool.ts
index a885a4fcb..9fa104f41 100644
--- a/packages/tldraw/src/state/tool/BaseTool/BaseTool.ts
+++ b/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)
+  }
 }
diff --git a/packages/tldraw/src/state/tool/SelectTool/SelectTool.ts b/packages/tldraw/src/state/tool/SelectTool/SelectTool.ts
index 0ef64a3ce..f6f1e8aac 100644
--- a/packages/tldraw/src/state/tool/SelectTool/SelectTool.ts
+++ b/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) => {