fix: View mode wheel zooming does not work (excalidraw#8452)

* Update App.tsx * fix: prevent zooming browser over DOM --------- Co-authored-by: dwelle <[email protected]>
em3ndez · Aug 31, 2024 · 2d1d84a · 2d1d84a
1 parent ee30225
commit 2d1d84a
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
@@ -2515,7 +2515,7 @@ class App extends React.Component<AppProps, AppState> {
       addEventListener(
         this.excalidrawContainerRef.current,
         EVENT.WHEEL,
-        this.onWheel,
+        this.handleWheel,
         { passive: false },
       ),
       addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false),
@@ -4323,13 +4323,6 @@ class App extends React.Component<AppProps, AppState> {
     },
   );
 
-  private onWheel = withBatchedUpdates((event: WheelEvent) => {
-    // prevent browser pinch zoom on DOM elements
-    if (!(event.target instanceof HTMLCanvasElement) && event.ctrlKey) {
-      event.preventDefault();
-    }
-  });
-
   private onKeyUp = withBatchedUpdates((event: KeyboardEvent) => {
     if (event.key === KEYS.SPACE) {
       if (this.state.viewModeEnabled) {
@@ -10089,6 +10082,11 @@ class App extends React.Component<AppProps, AppState> {
           event.target instanceof HTMLIFrameElement
         )
       ) {
+        // prevent zooming the browser (but allow scrolling DOM)
+        if (event[KEYS.CTRL_OR_CMD]) {
+          event.preventDefault();
+        }
+
         return;
       }