From 309b6b4d628523039f8fe5d86346d6e9bad19282 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 30 Aug 2021 19:41:31 +0200 Subject: [PATCH 1/2] Fixed an issue with horizontal scrolling on Windows not moving canvas correctly --- src/CanvasContainer.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/CanvasContainer.tsx b/src/CanvasContainer.tsx index 6b855e71..83b80b55 100644 --- a/src/CanvasContainer.tsx +++ b/src/CanvasContainer.tsx @@ -4,7 +4,7 @@ import { useCanvas } from './CanvasContext'; import { useMachine } from '@xstate/react'; import { createModel } from 'xstate/lib/model'; import { Point } from './pathUtils'; -import { isWithPlatformMetaKey, isTextInputLikeElement } from './utils'; +import { isMac, isWithPlatformMetaKey, isTextInputLikeElement } from './utils'; import { AnyState } from './types'; const dragModel = createModel( @@ -204,7 +204,11 @@ export const CanvasContainer: React.FC = ({ children }) => { ); } } else if (!e.metaKey && !e.ctrlKey) { - canvasService.send(canvasModel.events.PAN(e.deltaX, e.deltaY)); + if (isMac() || !e.shiftKey) { + canvasService.send(canvasModel.events.PAN(e.deltaX, e.deltaY)); + } else { + canvasService.send(canvasModel.events.PAN(e.deltaY, 0)); + } } }; From 2f2612fbe18c183549ec4c9f55cc98128997361c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Tue, 31 Aug 2021 13:17:37 +0200 Subject: [PATCH 2/2] Use an alternative approach - always allow shift to change the wheeling direction when trackpad is not used --- src/CanvasContainer.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/CanvasContainer.tsx b/src/CanvasContainer.tsx index 83b80b55..cf505e31 100644 --- a/src/CanvasContainer.tsx +++ b/src/CanvasContainer.tsx @@ -4,7 +4,7 @@ import { useCanvas } from './CanvasContext'; import { useMachine } from '@xstate/react'; import { createModel } from 'xstate/lib/model'; import { Point } from './pathUtils'; -import { isMac, isWithPlatformMetaKey, isTextInputLikeElement } from './utils'; +import { isWithPlatformMetaKey, isTextInputLikeElement } from './utils'; import { AnyState } from './types'; const dragModel = createModel( @@ -204,7 +204,9 @@ export const CanvasContainer: React.FC = ({ children }) => { ); } } else if (!e.metaKey && !e.ctrlKey) { - if (isMac() || !e.shiftKey) { + const isTrackPad = e.deltaMode === WheelEvent.DOM_DELTA_PIXEL; + + if (isTrackPad || !e.shiftKey) { canvasService.send(canvasModel.events.PAN(e.deltaX, e.deltaY)); } else { canvasService.send(canvasModel.events.PAN(e.deltaY, 0)); @@ -214,6 +216,7 @@ export const CanvasContainer: React.FC = ({ children }) => { const canvasEl = canvasRef.current; canvasEl.addEventListener('wheel', onCanvasWheel); + return () => { canvasEl.removeEventListener('wheel', onCanvasWheel); };