From 2d1d84a47b35f9e54d43ea172e02edb55dda8c41 Mon Sep 17 00:00:00 2001 From: zsviczian Date: Sat, 31 Aug 2024 12:06:38 +0200 Subject: [PATCH] fix: View mode wheel zooming does not work (#8452) * Update App.tsx * fix: prevent zooming browser over DOM --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com> --- packages/excalidraw/components/App.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index ef5d7bc22..6357336c1 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -2515,7 +2515,7 @@ class App extends React.Component { 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 { }, ); - 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 { event.target instanceof HTMLIFrameElement ) ) { + // prevent zooming the browser (but allow scrolling DOM) + if (event[KEYS.CTRL_OR_CMD]) { + event.preventDefault(); + } + return; }