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

Added pinch to zoom for map

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-05-22 23:43:55 +10:00
parent 312f9a8773
commit 5f2d282df8
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,8 @@ import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
import MapStageContext from "../../contexts/MapStageContext";
import AuthContext from "../../contexts/AuthContext";
const zoomSpeed = -0.001;
const wheelZoomSpeed = 0.001;
const touchZoomSpeed = 0.01;
const minZoom = 0.1;
const maxZoom = 5;
@ -65,7 +66,16 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
const bind = useGesture({
onWheel: ({ delta }) => {
const newScale = Math.min(
Math.max(stageScale - delta[1] * zoomSpeed, minZoom),
Math.max(stageScale + delta[1] * wheelZoomSpeed, minZoom),
maxZoom
);
setStageScale(newScale);
stageScaleRef.current = newScale;
},
onPinch: ({ offset }) => {
const [d] = offset;
const newScale = Math.min(
Math.max(1 + d * touchZoomSpeed, minZoom),
maxZoom
);
setStageScale(newScale);
@ -141,6 +151,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
flexGrow: 1,
position: "relative",
cursor: getCursorForTool(selectedToolId),
touchAction: "none",
}}
ref={containerRef}
{...bind()}