Cleaned map interaction props and changed drawing interaction handle

src/components/map/Map.js

@@ -221,15 +221,13 @@ function Map({
       <MapInteraction
         map={map}
         aspectRatio={aspectRatio}
-        selectedTool={selectedToolId}
-        toolSettings={toolSettings[selectedToolId]}
+        isEnabled={selectedToolId === "pan"}
         controls={(allowMapChange || allowDrawing) && mapControls}
       >
         {map && mapImage}
         {map && mapDrawing}
         {map && mapTokens}
       </MapInteraction>
-
       {allowTokenChange && (
         <>
           <ProxyToken

src/components/map/MapDrawing.js

@@ -111,6 +111,27 @@ function MapDrawing({
     }
   }
 
+  // Add listeners for draw events on map to allow drawing past the bounds
+  // of the container
+  useEffect(() => {
+    const map = document.querySelector(".map");
+    map.addEventListener("mousedown", handleStart);
+    map.addEventListener("mousemove", handleMove);
+    map.addEventListener("mouseup", handleStop);
+    map.addEventListener("touchstart", handleStart);
+    map.addEventListener("touchmove", handleMove);
+    map.addEventListener("touchend", handleStop);
+
+    return () => {
+      map.removeEventListener("mousedown", handleStart);
+      map.removeEventListener("mousemove", handleMove);
+      map.removeEventListener("mouseup", handleStop);
+      map.removeEventListener("touchstart", handleStart);
+      map.removeEventListener("touchmove", handleMove);
+      map.removeEventListener("touchend", handleStop);
+    };
+  });
+
   const hoveredShapeRef = useRef(null);
   useEffect(() => {
     function pointsToPath(points) {
@@ -205,12 +226,6 @@ function MapDrawing({
     <div
       style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
       ref={containerRef}
-      onMouseDown={handleStart}
-      onMouseMove={handleMove}
-      onMouseUp={handleStop}
-      onTouchStart={handleStart}
-      onTouchMove={handleMove}
-      onTouchEnd={handleStop}
     >
       <canvas
         ref={canvasRef}

src/components/map/MapInteraction.js

@@ -6,14 +6,7 @@ const zoomSpeed = -0.005;
 const minZoom = 0.1;
 const maxZoom = 5;
 
-function MapInteraction({
-  map,
-  aspectRatio,
-  selectedTool,
-  selectedToolSettings,
-  children,
-  controls,
-}) {
+function MapInteraction({ map, aspectRatio, isEnabled, children, controls }) {
   const mapContainerRef = useRef();
   const mapMoveContainerRef = useRef();
   const mapTranslateRef = useRef({ x: 0, y: 0 });
@@ -37,7 +30,7 @@ function MapInteraction({
         newScale = Math.max(Math.min(scale + event.ds, maxZoom), minZoom);
       }
 
-      if (selectedTool === "pan" || isGesture) {
+      if (isEnabled || isGesture) {
         newTranslate = {
           x: translate.x + event.dx,
           y: translate.y + event.dy,
@@ -57,12 +50,12 @@ function MapInteraction({
           move: (e) => handleMove(e, false),
         },
         cursorChecker: () => {
-          return selectedTool === "pan" && map ? "move" : "default";
+          return isEnabled && map ? "move" : "default";
         },
       })
       .on("doubletap", (event) => {
         event.preventDefault();
-        if (selectedTool === "pan") {
+        if (isEnabled) {
           setTranslateAndScale({ x: 0, y: 0 }, 1);
         }
       });
@@ -70,7 +63,7 @@ function MapInteraction({
     return () => {
       mapInteract.unset();
     };
-  }, [selectedTool, map]);
+  }, [isEnabled, map]);
 
   // Reset map transform when map changes
   useEffect(() => {