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

Changed map zooming to always zoom to center of screen and not map

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-05-18 21:52:46 +10:00
parent dff75614da
commit 1774b459dc
1 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,11 +21,14 @@ function MapInteraction({
}) { }) {
const mapContainerRef = useRef(); const mapContainerRef = useRef();
const mapMoveContainerRef = useRef(); const mapMoveContainerRef = useRef();
const mapScaleContainerRef = useRef();
const mapTranslateRef = useRef({ x: 0, y: 0 }); const mapTranslateRef = useRef({ x: 0, y: 0 });
const mapScaleRef = useRef(1); const mapScaleRef = useRef(1);
function setTranslateAndScale(newTranslate, newScale) { function setTranslateAndScale(newTranslate, newScale) {
const moveContainer = mapMoveContainerRef.current; const moveContainer = mapMoveContainerRef.current;
moveContainer.style.transform = `translate(${newTranslate.x}px, ${newTranslate.y}px) scale(${newScale})`; const scaleContainer = mapScaleContainerRef.current;
moveContainer.style.transform = `translate(${newTranslate.x}px, ${newTranslate.y}px)`;
scaleContainer.style.transform = ` scale(${newScale})`;
mapScaleRef.current = newScale; mapScaleRef.current = newScale;
mapTranslateRef.current = newTranslate; mapTranslateRef.current = newTranslate;
} }
@ -44,8 +47,8 @@ function MapInteraction({
if (isEnabled || isGesture) { if (isEnabled || isGesture) {
newTranslate = { newTranslate = {
x: translate.x + event.dx, x: translate.x + event.dx / newScale,
y: translate.y + event.dy, y: translate.y + event.dy / newScale,
}; };
} }
setTranslateAndScale(newTranslate, newScale); setTranslateAndScale(newTranslate, newScale);
@ -141,22 +144,24 @@ function MapInteraction({
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
}} }}
> >
<Box ref={mapMoveContainerRef}> <Box ref={mapScaleContainerRef}>
<Box <Box ref={mapMoveContainerRef}>
sx={{ <Box
width: "100%", sx={{
height: 0, width: "100%",
paddingBottom: `${(1 / aspectRatio) * 100}%`, height: 0,
}} paddingBottom: `${(1 / aspectRatio) * 100}%`,
/> }}
<MapInteractionProvider />
value={{ <MapInteractionProvider
translateRef: mapTranslateRef, value={{
scaleRef: mapScaleRef, translateRef: mapTranslateRef,
}} scaleRef: mapScaleRef,
> }}
{children} >
</MapInteractionProvider> {children}
</MapInteractionProvider>
</Box>
</Box> </Box>
</Box> </Box>
{controls} {controls}