Added back map drawing

src/components/map/MapInteraction.js

@@ -18,7 +18,7 @@ const zoomSpeed = -0.001;
 const minZoom = 0.1;
 const maxZoom = 5;
 
-function MapInteraction({ map, children, controls }) {
+function MapInteraction({ map, children, controls, selectedToolId }) {
   const mapSource = useDataSource(map, defaultMapSources);
   const [mapSourceImage] = useImage(mapSource);
 
@@ -26,7 +26,10 @@ function MapInteraction({ map, children, controls }) {
   const [stageHeight, setStageHeight] = useState(1);
   const [stageScale, setStageScale] = useState(1);
   const [stageTranslate, setStageTranslate] = useState({ x: 0, y: 0 });
+  // "none" | "first" | "dragging" | "last"
+  const [stageDragState, setStageDragState] = useState("none");
   const [preventMapInteraction, setPreventMapInteraction] = useState(false);
+  const [mapDragPosition, setMapDragPosition] = useState({ x: 0, y: 0 });
 
   const stageWidthRef = useRef(stageWidth);
   const stageHeightRef = useRef(stageHeight);
@@ -40,6 +43,25 @@ function MapInteraction({ map, children, controls }) {
     }
   }, [map]);
 
+  // Convert a client space XY to be normalized to the map image
+  function getMapDragPosition(xy) {
+    const [x, y] = xy;
+    const container = containerRef.current;
+    const mapImage = mapImageRef.current;
+    if (container && mapImage) {
+      const containerRect = container.getBoundingClientRect();
+      const mapRect = mapImage.getClientRect();
+
+      const offsetX = x - containerRect.left - mapRect.x;
+      const offsetY = y - containerRect.top - mapRect.y;
+
+      const normalizedX = offsetX / mapRect.width;
+      const normalizedY = offsetY / mapRect.height;
+
+      return { x: normalizedX, y: normalizedY };
+    }
+  }
+
   const bind = useGesture({
     onWheel: ({ delta }) => {
       const newScale = Math.min(
@@ -49,16 +71,25 @@ function MapInteraction({ map, children, controls }) {
       setStageScale(newScale);
       stageScaleRef.current = newScale;
     },
-    onDrag: ({ delta }) => {
-      if (!preventMapInteraction) {
+    onDrag: ({ delta, xy, first, last }) => {
+      if (preventMapInteraction) {
+        return;
+      }
+      setMapDragPosition(getMapDragPosition(xy));
+      setStageDragState(first ? "first" : last ? "last" : "dragging");
+      const [dx, dy] = delta;
+      if (selectedToolId === "pan") {
         const newTranslate = {
-          x: stageTranslate.x + delta[0] / stageScale,
-          y: stageTranslate.y + delta[1] / stageScale,
+          x: stageTranslate.x + dx / stageScale,
+          y: stageTranslate.y + dy / stageScale,
         };
         setStageTranslate(newTranslate);
         stageTranslateRef.current = newTranslate;
       }
     },
+    onDragEnd: () => {
+      setStageDragState("none");
+    },
   });
 
   function handleResize(width, height) {
@@ -75,6 +106,7 @@ function MapInteraction({ map, children, controls }) {
   const mapHeight = map ? stageWidth * (map.height / map.width) : stageHeight;
 
   const mapStageRef = useContext(MapStageContext);
+  const mapImageRef = useRef();
 
   const auth = useContext(AuthContext);
 
@@ -83,9 +115,11 @@ function MapInteraction({ map, children, controls }) {
     stageScale,
     stageWidth,
     stageHeight,
+    stageDragState,
     setPreventMapInteraction,
     mapWidth,
     mapHeight,
+    mapDragPosition,
   };
 
   return (
@@ -111,6 +145,7 @@ function MapInteraction({ map, children, controls }) {
               width={mapWidth}
               height={mapHeight}
               id="mapImage"
+              ref={mapImageRef}
             />
             {/* Forward auth context to konva elements */}
             <AuthContext.Provider value={auth}>