From 81f8039ec70c520e9022735de7d396b6c0116d01 Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sun, 20 Dec 2020 12:07:58 -0800
Subject: [PATCH] fix: Don't break zoom when zooming in on UI (#2638)

If you start the gesture on the chrome, gesture is not defined and the zoom will be set to NaN and you will have to refresh.

Typescript was actually right and we shouldn't have overridden the bang ;)

Repro:
- On iPhone touch down on a shape, touch down on the chrome, start moving around
- See that the selection is off, but the zoom is not being modified like crazy.

https://user-images.githubusercontent.com/197597/102722206-6c182400-42b4-11eb-9865-6ae1cd0af9be.MP4
---
 src/components/App.tsx               | 35 +++++++++++++++++-----------
 src/packages/excalidraw/CHANGELOG.md |  1 +
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 229ef9bf..57bc08b0 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1426,14 +1426,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
   private onGestureChange = withBatchedUpdates((event: GestureEvent) => {
     event.preventDefault();
-    this.setState(({ zoom, offsetLeft, offsetTop }) => ({
-      zoom: getNewZoom(
-        getNormalizedZoom(gesture.initialScale! * event.scale),
-        zoom,
-        { left: offsetLeft, top: offsetTop },
-        { x: cursorX, y: cursorY },
-      ),
-    }));
+    const initialScale = gesture.initialScale;
+    if (initialScale) {
+      this.setState(({ zoom, offsetLeft, offsetTop }) => ({
+        zoom: getNewZoom(
+          getNormalizedZoom(initialScale * event.scale),
+          zoom,
+          { left: offsetLeft, top: offsetTop },
+          { x: cursorX, y: cursorY },
+        ),
+      }));
+    }
   });
 
   private onGestureEnd = withBatchedUpdates((event: GestureEvent) => {
@@ -1745,20 +1748,26 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
-    if (gesture.pointers.size === 2) {
+    const initialScale = gesture.initialScale;
+    if (
+      gesture.pointers.size === 2 &&
+      gesture.lastCenter &&
+      initialScale &&
+      gesture.initialDistance
+    ) {
       const center = getCenter(gesture.pointers);
-      const deltaX = center.x - gesture.lastCenter!.x;
-      const deltaY = center.y - gesture.lastCenter!.y;
+      const deltaX = center.x - gesture.lastCenter.x;
+      const deltaY = center.y - gesture.lastCenter.y;
       gesture.lastCenter = center;
 
       const distance = getDistance(Array.from(gesture.pointers.values()));
-      const scaleFactor = distance / gesture.initialDistance!;
+      const scaleFactor = distance / gesture.initialDistance;
 
       this.setState(({ zoom, scrollX, scrollY, offsetLeft, offsetTop }) => ({
         scrollX: normalizeScroll(scrollX + deltaX / zoom.value),
         scrollY: normalizeScroll(scrollY + deltaY / zoom.value),
         zoom: getNewZoom(
-          getNormalizedZoom(gesture.initialScale! * scaleFactor),
+          getNormalizedZoom(initialScale * scaleFactor),
           zoom,
           { left: offsetLeft, top: offsetTop },
           center,
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index e5aec1ff..62ace97f 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -35,6 +35,7 @@ Please add the latest change on the top under the correct section.
 - Fix element visibility and zoom on cursor when canvas offset isn't 0. [#2534](https://github.com/excalidraw/excalidraw/pull/2534)
 - Fix Library Menu Layout [#2502](https://github.com/excalidraw/excalidraw/pull/2502)
 - Support number with commas in charts [#2636](https://github.com/excalidraw/excalidraw/pull/2636)
+- Don't break zoom when zooming in on UI [#2638](https://github.com/excalidraw/excalidraw/pull/2638)
 
 ### Improvements