From e07c83f2981dcedd270269cb6fd0cc8ab474575f Mon Sep 17 00:00:00 2001 From: Nguyen Thanh Dat Date: Mon, 31 Aug 2026 11:27:02 +0700 Subject: [PATCH] fix(canvas): read deltaX so shift + wheel scrolls horizontally in Chrome MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The shift branch panned by e.deltaY, but Chrome translates shift + wheel into deltaX and reports deltaY as 0. Adding 0 to pan.x meant the diagram did not move at all. Firefox keeps the value on deltaY with shiftKey set, so both have to be read. Taking deltaX whenever it is non-zero also makes a trackpad's horizontal gesture and a tilt wheel pan the canvas, which send deltaX with no modifier and previously fell through to the vertical branch, where deltaY is 0 — so those did nothing either. Refs #1108. --- src/components/EditorCanvas/Canvas.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx index 8a6a9ad4f..1b6bf34e8 100644 --- a/src/components/EditorCanvas/Canvas.jsx +++ b/src/components/EditorCanvas/Canvas.jsx @@ -699,12 +699,18 @@ export default function Canvas() { }, zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05, })); - } else if (e.shiftKey) { + } else if (e.shiftKey || e.deltaX !== 0) { + // Browsers disagree about where a horizontal scroll arrives. Chrome + // translates shift + wheel into deltaX and leaves deltaY at 0, so + // reading deltaY alone added nothing and the diagram did not move. + // Firefox keeps it on deltaY with shiftKey set. A trackpad or a tilt + // wheel sends deltaX with no modifier at all. + const horizontal = e.deltaX !== 0 ? e.deltaX : e.deltaY; setTransform((prev) => ({ ...prev, pan: { ...prev.pan, - x: prev.pan.x + e.deltaY / prev.zoom, + x: prev.pan.x + horizontal / prev.zoom, }, })); } else {