From 5c9e148ad88a9f4d08ee616619d4668f60ebab52 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Wed, 6 Oct 2021 12:55:09 +0100
Subject: [PATCH] Rough fix for zoom events

---
 packages/core/src/hooks/useZoomEvents.ts | 10 +++++++---
 packages/tldraw/src/state/tlstate.ts     |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/hooks/useZoomEvents.ts b/packages/core/src/hooks/useZoomEvents.ts
index a8cd0e968..1d4c9f5dc 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 } from '@use-gesture/react'
+import { useGesture, usePinch, useWheel } from '@use-gesture/react'
 import { Vec } from '@tldraw/vec'
 
 // Capture zoom gestures (pinches, wheels and pans)
@@ -46,6 +46,7 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
         callbacks.onPan?.(info, e)
       },
       onPinchStart: ({ origin, event }) => {
+        console.log('hi')
         const elm = ref.current
         if (!(event.target === elm || elm?.contains(event.target as Node))) return
 
@@ -68,7 +69,7 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
         rOriginPoint.current = undefined
         rDelta.current = [0, 0]
       },
-      onPinch: ({ delta, origin, event }) => {
+      onPinch: ({ origin, offset, event }) => {
         const elm = ref.current
         if (!(event.target === elm || elm?.contains(event.target as Node))) return
         if (!rOriginPoint.current) throw Error('No origin point!')
@@ -84,7 +85,7 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
             ...info,
             point: info.point,
             origin: rOriginPoint.current,
-            delta: [...trueDelta, -delta[0]],
+            delta: [...trueDelta, offset[0]],
           },
           event
         )
@@ -95,6 +96,9 @@ export function useZoomEvents<T extends Element>(ref: React.RefObject<T>) {
     {
       target: window,
       eventOptions: { passive: false },
+      pinch: {
+        scaleBounds: { max: 5, min: 0.1 },
+      },
     }
   )
 }
diff --git a/packages/tldraw/src/state/tlstate.ts b/packages/tldraw/src/state/tlstate.ts
index 6f0c06542..074fa1ba5 100644
--- a/packages/tldraw/src/state/tlstate.ts
+++ b/packages/tldraw/src/state/tlstate.ts
@@ -1181,10 +1181,10 @@ export class TLDrawState extends StateManager<Data> {
    * @param delta The movement delta.
    * @param zoomDelta The zoom detal
    */
-  pinchZoom = (point: number[], delta: number[], zoomDelta: number): this => {
+  pinchZoom = (point: number[], delta: number[], zoom: number): this => {
     const { camera } = this.pageState
     const nextPoint = Vec.sub(camera.point, Vec.div(delta, camera.zoom))
-    const nextZoom = TLDR.getCameraZoom(camera.zoom - zoomDelta * camera.zoom)
+    const nextZoom = zoom
     const p0 = Vec.sub(Vec.div(point, camera.zoom), nextPoint)
     const p1 = Vec.sub(Vec.div(point, nextZoom), nextPoint)
     return this.setCamera(Vec.round(Vec.add(nextPoint, Vec.sub(p1, p0))), nextZoom, `pinch_zoomed`)