diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js index 603c8f1..9f4c562 100644 --- a/src/components/map/MapInteraction.js +++ b/src/components/map/MapInteraction.js @@ -1,4 +1,10 @@ -import React, { useRef, useEffect, useState, useContext } from "react"; +import React, { + useRef, + useEffect, + useState, + useContext, + useCallback, +} from "react"; import { Box } from "theme-ui"; import { useGesture } from "react-use-gesture"; import ReactResizeDetector from "react-resize-detector"; @@ -36,7 +42,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) { const stageTranslateRef = useRef({ x: 0, y: 0 }); const mapDragPositionRef = useRef({ x: 0, y: 0 }); - useEffect(() => { + const resetMapTransform = useCallback(() => { const layer = mapLayerRef.current; if (map && layer) { const mapHeight = stageWidthRef.current * (map.height / map.width); @@ -48,9 +54,16 @@ function MapInteraction({ map, children, controls, selectedToolId }) { layer.y(newTranslate.y); layer.draw(); stageTranslateRef.current = newTranslate; + + setStageScale(1); } }, [map]); + // Reset transform when map changes + useEffect(() => { + resetMapTransform(); + }, [map, resetMapTransform]); + // Convert a client space XY to be normalized to the map image function getMapDragPosition(xy) { const [x, y] = xy; @@ -197,6 +210,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) { ref={containerRef} {...bind()} className="map" + onDoubleClick={resetMapTransform} >