Browse Source

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

* Update App.tsx

* fix: prevent zooming browser over DOM

---------

Co-authored-by: dwelle <[email protected]>
zsviczian 11 months ago
parent
commit
2d1d84a47b
1 changed files with 6 additions and 8 deletions
  1. 6 8
      packages/excalidraw/components/App.tsx

+ 6 - 8
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;
       }