Added pinch to zoom for map
This commit is contained in:
parent
312f9a8773
commit
5f2d282df8
@ -14,7 +14,8 @@ import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
|
|||||||
import MapStageContext from "../../contexts/MapStageContext";
|
import MapStageContext from "../../contexts/MapStageContext";
|
||||||
import AuthContext from "../../contexts/AuthContext";
|
import AuthContext from "../../contexts/AuthContext";
|
||||||
|
|
||||||
const zoomSpeed = -0.001;
|
const wheelZoomSpeed = 0.001;
|
||||||
|
const touchZoomSpeed = 0.01;
|
||||||
const minZoom = 0.1;
|
const minZoom = 0.1;
|
||||||
const maxZoom = 5;
|
const maxZoom = 5;
|
||||||
|
|
||||||
@ -65,7 +66,16 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
|
|||||||
const bind = useGesture({
|
const bind = useGesture({
|
||||||
onWheel: ({ delta }) => {
|
onWheel: ({ delta }) => {
|
||||||
const newScale = Math.min(
|
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
|
maxZoom
|
||||||
);
|
);
|
||||||
setStageScale(newScale);
|
setStageScale(newScale);
|
||||||
@ -141,6 +151,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
|
|||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
cursor: getCursorForTool(selectedToolId),
|
cursor: getCursorForTool(selectedToolId),
|
||||||
|
touchAction: "none",
|
||||||
}}
|
}}
|
||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
{...bind()}
|
{...bind()}
|
||||||
|
Loading…
Reference in New Issue
Block a user