diff --git a/package.json b/package.json index cb7bd1c..4b48a96 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "konva": "^6.0.0", "lodash.get": "^4.4.2", "lodash.set": "^4.3.2", + "normalize-wheel": "^1.0.1", "polygon-clipping": "^0.14.3", "raw.macro": "^0.3.0", "react": "^16.13.0", diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js index 79e9447..cc0d749 100644 --- a/src/components/map/MapInteraction.js +++ b/src/components/map/MapInteraction.js @@ -5,6 +5,7 @@ import ReactResizeDetector from "react-resize-detector"; import useImage from "use-image"; import { Stage, Layer, Image } from "react-konva"; import { EventEmitter } from "events"; +import normalizeWheel from "normalize-wheel"; import usePreventOverscroll from "../../helpers/usePreventOverscroll"; import useDataSource from "../../helpers/useDataSource"; @@ -108,12 +109,14 @@ function MapInteraction({ isInteractingWithCanvas.current = event.target === mapLayerRef.current.getCanvas()._canvas; }, - onWheel: ({ delta }) => { + onWheel: ({ event }) => { + event.persist(); + const { pixelY } = normalizeWheel(event); if (preventMapInteraction || !isInteractingWithCanvas.current) { return; } const newScale = Math.min( - Math.max(stageScale + delta[1] * wheelZoomSpeed, minZoom), + Math.max(stageScale + pixelY * wheelZoomSpeed, minZoom), maxZoom ); setStageScale(newScale); diff --git a/yarn.lock b/yarn.lock index 36ac54b..fd54212 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7896,6 +7896,11 @@ normalize-url@^3.0.0: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg== +normalize-wheel@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45" + integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU= + npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" @@ -10466,7 +10471,6 @@ simple-peer@feross/simple-peer#694/head: resolved "https://codeload.github.com/feross/simple-peer/tar.gz/0d08d07b83ff3b8c60401688d80642d24dfeffe2" dependencies: debug "^4.0.1" - err-code "^2.0.3" get-browser-rtc "^1.0.0" queue-microtask "^1.1.0" randombytes "^2.0.3"