From 9a3a3ecb444e820a2125d9a6176496539aabd351 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sun, 20 Dec 2020 12:13:15 -0800
Subject: [PATCH] fix: Center zoom on iPhone and iPad (#2642)

My last attempt removed the gesture handler altogether but broke macbooks. This one keeps it working on macbook but makes sure it zooms properly on iPhone and iPad.
---
 src/components/App.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 57bc08b0..f6309f60 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1426,6 +1426,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
   private onGestureChange = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
+
+    // onGestureChange only has zoom factor but not the center.
+    // If we're on iPad or iPhone, then we recognize multi-touch and will
+    // zoom in at the right location on the touchMove handler already.
+    // On Macbook, we don't have those events so will zoom in at the
+    // current location instead.
+    if (gesture.pointers.size === 2) {
+      return;
+    }
+
     const initialScale = gesture.initialScale;
     if (initialScale) {
       this.setState(({ zoom, offsetLeft, offsetTop }) => ({