Moved zoom bindings for the map to stop double zoom on trackpads

Also added toggle for overscroll behaviour when not in map
This commit is contained in:
Mitchell McCaffrey 2020-04-09 18:20:10 +10:00
parent 9b4aa07a79
commit 85f4a9b41b
2 changed files with 45 additions and 12 deletions

View File

@ -65,20 +65,57 @@ function Map({
});
}, []);
function handleZoom(event) {
const deltaY = event.deltaY * zoomSpeed;
setMapScale((previousMapScale) =>
Math.max(Math.min(previousMapScale + deltaY, maxZoom), minZoom)
);
}
// Reset map transform when map changes
useEffect(() => {
setMapTranslate({ x: 0, y: 0 });
setMapScale(1);
}, [mapSource]);
// Bind the wheel event of the map via a ref
// in order to support non-passive event listening
// to allow the track pad zoom to be interrupted
// see https://github.com/facebook/react/issues/14856
useEffect(() => {
const mapContainer = mapContainerRef.current;
function handleZoom(event) {
// Stop the trackpad zoom event from zooming the
// webpage when in the map
if (event.ctrlKey) {
event.preventDefault();
}
const deltaY = event.deltaY * zoomSpeed;
setMapScale((previousMapScale) =>
Math.max(Math.min(previousMapScale + deltaY, maxZoom), minZoom)
);
}
if (mapContainer) {
mapContainer.addEventListener("wheel", handleZoom, {
passive: false,
});
}
return () => {
if (mapContainer) {
mapContainer.removeEventListener("wheel", handleZoom);
}
};
}, []);
// Stop the overscroll when the map is loaded and restore it when
// unmounted
useEffect(() => {
document.body.style.overscrollBehavior = "none";
return () => {
document.body.style.overscrollBehavior = "initial";
};
}, []);
const mapRef = useRef(null);
const mapContainerRef = useRef();
const rows = mapData && mapData.rows;
const tokenSizePercent = (1 / rows) * 100;
const aspectRatio = (mapData && mapData.width / mapData.height) || 1;
@ -96,7 +133,7 @@ function Map({
touchAction: "none",
}}
bg="background"
onWheel={handleZoom}
ref={mapContainerRef}
>
<Box
sx={{

View File

@ -6,10 +6,6 @@ html {
height: 100%;
}
body {
overscroll-behavior: none;
}
.simplebar-scrollbar:before {
background: #fff;
}