From f4060ecc79bd467a2a2eb2adfc469fd1c13c1285 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 18 Aug 2022 12:18:11 +0800
Subject: [PATCH] fix: pinching center offset

---
 tldraw/packages/core/src/lib/TLInputs.ts            |  2 +-
 tldraw/packages/react/src/components/App.tsx        | 12 +++---------
 tldraw/packages/react/src/hooks/useGestureEvents.ts |  6 +++---
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/tldraw/packages/core/src/lib/TLInputs.ts b/tldraw/packages/core/src/lib/TLInputs.ts
index ea772d5283..80df48c474 100644
--- a/tldraw/packages/core/src/lib/TLInputs.ts
+++ b/tldraw/packages/core/src/lib/TLInputs.ts
@@ -38,7 +38,7 @@ export class TLInputs<K extends TLEventMap> {
   ) {
     if ('clientX' in event) {
       this.previousScreenPoint = this.currentScreenPoint
-      this.currentScreenPoint = Vec.add([event.clientX, event.clientY], this.containerOffset)
+      this.currentScreenPoint = Vec.sub([event.clientX, event.clientY], this.containerOffset)
     }
     if ('shiftKey' in event) {
       this.shiftKey = event.shiftKey
diff --git a/tldraw/packages/react/src/components/App.tsx b/tldraw/packages/react/src/components/App.tsx
index 833f95a064..5e0c7eba9e 100644
--- a/tldraw/packages/react/src/components/App.tsx
+++ b/tldraw/packages/react/src/components/App.tsx
@@ -1,16 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import type { AnyObject, TLDocumentModel, TLTheme, TLToolConstructor } from '@tldraw/core'
 import type * as React from 'react'
-import type { TLReactApp, TLReactShape, TLReactShapeConstructor } from '~lib'
 import { AppProvider } from '~components'
-import type {
-  AnyObject,
-  TLDocumentModel,
-  TLCallback,
-  TLTheme,
-  TLToolConstructor,
-} from '@tldraw/core'
-import type { TLReactComponents } from '~types/component-props'
+import type { TLReactApp, TLReactShape, TLReactShapeConstructor } from '~lib'
 import type { TLReactCallbacks, TLReactEventMap } from '~types'
+import type { TLReactComponents } from '~types/component-props'
 import { AppCanvas } from './AppCanvas'
 
 export interface TLCommonAppProps<
diff --git a/tldraw/packages/react/src/hooks/useGestureEvents.ts b/tldraw/packages/react/src/hooks/useGestureEvents.ts
index 15ac2a43b7..3b61494b16 100644
--- a/tldraw/packages/react/src/hooks/useGestureEvents.ts
+++ b/tldraw/packages/react/src/hooks/useGestureEvents.ts
@@ -41,7 +41,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
           order: 0,
           delta: gesture.delta,
           offset: gesture.offset,
-          point: gesture.origin,
+          point: Vec.sub(gesture.origin, inputs.containerOffset),
         },
         event
       )
@@ -58,7 +58,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
           order: 0,
           delta: gesture.delta,
           offset: gesture.offset,
-          point: gesture.origin,
+          point: Vec.sub(gesture.origin, inputs.containerOffset),
         },
         event
       )
@@ -75,7 +75,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
           order: 0,
           delta: gesture.delta,
           offset: gesture.offset,
-          point: gesture.origin,
+          point: Vec.sub(gesture.origin, inputs.containerOffset),
         },
         event
       )