Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added normalization to the map mouse zoom

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-30 15:45:20 +10:00
parent 05a13acf8b
commit c0d04ea6fa
3 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -10,6 +10,7 @@
"dexie": "^2.0.4", "dexie": "^2.0.4",
"interactjs": "^1.9.7", "interactjs": "^1.9.7",
"js-binarypack": "^0.0.9", "js-binarypack": "^0.0.9",
"normalize-wheel": "^1.0.1",
"react": "^16.13.0", "react": "^16.13.0",
"react-dom": "^16.13.0", "react-dom": "^16.13.0",
"react-modal": "^3.11.2", "react-modal": "^3.11.2",

6
src/components/map/MapInteraction.js
View File

@ -1,6 +1,7 @@
import React, { useRef, useEffect } from "react"; import React, { useRef, useEffect } from "react";
import { Box } from "theme-ui"; import { Box } from "theme-ui";
import interact from "interactjs"; import interact from "interactjs";
import normalizeWheel from "normalize-wheel";
import { MapInteractionProvider } from "../../contexts/MapInteractionContext"; import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
@ -84,10 +85,13 @@ function MapInteraction({ map, aspectRatio, isEnabled, children, controls }) {
// also stop pinch to zoom on chrome // also stop pinch to zoom on chrome
event.preventDefault(); event.preventDefault();
// Try and normalize the wheel event to prevent OS differences for zoom speed
const normalized = normalizeWheel(event);
const scale = mapScaleRef.current; const scale = mapScaleRef.current;
const translate = mapTranslateRef.current; const translate = mapTranslateRef.current;
const deltaY = event.deltaY * zoomSpeed; const deltaY = normalized.pixelY * zoomSpeed;
const newScale = Math.max(Math.min(scale + deltaY, maxZoom), minZoom); const newScale = Math.max(Math.min(scale + deltaY, maxZoom), minZoom);
setTranslateAndScale(translate, newScale); setTranslateAndScale(translate, newScale);

5
yarn.lock
View File

@ -7459,6 +7459,11 @@ normalize-url@^3.0.0:
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg== 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: npm-run-path@^2.0.0:
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"