Separated map drawing and map fog into separate action lists

src/components/map/MapDrawing.js

@@ -10,6 +10,7 @@ import {
   isShapeHovered,
   drawShape,
   simplifyPoints,
+  getRelativePointerPosition,
 } from "../../helpers/drawing";
 
 function MapDrawing({
@@ -29,34 +30,28 @@ function MapDrawing({
   const [drawingShape, setDrawingShape] = useState(null);
   const [pointerPosition, setPointerPosition] = useState({ x: -1, y: -1 });
 
-  const shouldHover =
-    selectedTool === "erase" ||
-    (selectedTool === "fog" &&
-      (toolSettings.type === "toggle" || toolSettings.type === "remove"));
+  const shouldHover = selectedTool === "erase";
+  const isEditing =
+    selectedTool === "brush" ||
+    selectedTool === "shape" ||
+    selectedTool === "erase";
 
   // Reset pointer position when tool changes
   useEffect(() => {
     setPointerPosition({ x: -1, y: -1 });
   }, [selectedTool]);
 
-  function getRelativePointerPosition(event) {
-    const container = containerRef.current;
-    if (container) {
-      const containerRect = container.getBoundingClientRect();
-      const x = (event.clientX - containerRect.x) / containerRect.width;
-      const y = (event.clientY - containerRect.y) / containerRect.height;
-      return { x, y };
-    }
-  }
-
   function handleStart(event) {
+    if (!isEditing) {
+      return;
+    }
     if (event.touches && event.touches.length !== 1) {
       setIsDrawing(false);
       setDrawingShape(null);
       return;
     }
     const pointer = event.touches ? event.touches[0] : event;
-    const position = getRelativePointerPosition(pointer);
+    const position = getRelativePointerPosition(pointer, containerRef.current);
     setPointerPosition(position);
     setIsDrawing(true);
     const brushPosition = getBrushPositionForTool(
@@ -67,6 +62,8 @@ function MapDrawing({
       shapes
     );
     const commonShapeData = {
+      color: toolSettings && toolSettings.color,
+      blend: toolSettings && toolSettings.useBlending,
       id: shortid.generate(),
     };
     if (selectedTool === "brush") {
@@ -75,8 +72,6 @@ function MapDrawing({
         pathType: toolSettings.type,
         data: { points: [brushPosition] },
         strokeWidth: toolSettings.type === "stroke" ? 1 : 0,
-        color: toolSettings && toolSettings.color,
-        blend: toolSettings && toolSettings.useBlending,
         ...commonShapeData,
       });
     } else if (selectedTool === "shape") {
@@ -85,33 +80,32 @@ function MapDrawing({
         shapeType: toolSettings.type,
         data: getDefaultShapeData(toolSettings.type, brushPosition),
         strokeWidth: 0,
-        color: toolSettings && toolSettings.color,
-        blend: toolSettings && toolSettings.useBlending,
-        ...commonShapeData,
-      });
-    } else if (selectedTool === "fog" && toolSettings.type === "add") {
-      setDrawingShape({
-        type: "fog",
-        data: { points: [brushPosition] },
-        strokeWidth: 0.1,
-        color: "black",
-        blend: true, // Blend while drawing
         ...commonShapeData,
       });
     }
   }
 
   function handleMove(event) {
+    if (!isEditing) {
+      return;
+    }
     if (event.touches && event.touches.length !== 1) {
       return;
     }
     const pointer = event.touches ? event.touches[0] : event;
-    const position = getRelativePointerPosition(pointer);
     // Set pointer position every frame for erase tool and fog
     if (shouldHover) {
+      const position = getRelativePointerPosition(
+        pointer,
+        containerRef.current
+      );
       setPointerPosition(position);
     }
     if (isDrawing) {
+      const position = getRelativePointerPosition(
+        pointer,
+        containerRef.current
+      );
       setPointerPosition(position);
       const brushPosition = getBrushPositionForTool(
         position,
@@ -150,28 +144,14 @@ function MapDrawing({
             brushPosition
           ),
         }));
-      } else if (selectedTool === "fog" && toolSettings.type === "add") {
-        setDrawingShape((prevShape) => {
-          const prevPoints = prevShape.data.points;
-          if (
-            comparePoints(
-              prevPoints[prevPoints.length - 1],
-              brushPosition,
-              0.001
-            )
-          ) {
-            return prevShape;
-          }
-          return {
-            ...prevShape,
-            data: { points: [...prevPoints, brushPosition] },
-          };
-        });
       }
     }
   }
 
   function handleStop(event) {
+    if (!isEditing) {
+      return;
+    }
     if (event.touches && event.touches.length !== 0) {
       return;
     }
@@ -182,15 +162,6 @@ function MapDrawing({
       }
     } else if (selectedTool === "shape") {
       onShapeAdd(drawingShape);
-    } else if (selectedTool === "fog" && toolSettings.type === "add") {
-      if (drawingShape.data.points.length > 1) {
-        const shape = {
-          ...drawingShape,
-          data: { points: simplifyPoints(drawingShape.data.points, gridSize) },
-          blend: false,
-        };
-        onShapeAdd(shape);
-      }
     }
 
     setDrawingShape(null);
@@ -237,17 +208,7 @@ function MapDrawing({
             hoveredShape = shape;
           }
         }
-        if (selectedTool === "fog") {
-          drawShape(
-            { ...shape, blend: true },
-            context,
-            gridSize,
-            width,
-            height
-          );
-        } else {
-          drawShape(shape, context, gridSize, width, height);
-        }
+        drawShape(shape, context, gridSize, width, height);
       }
       if (drawingShape) {
         drawShape(drawingShape, context, gridSize, width, height);
@@ -267,11 +228,19 @@ function MapDrawing({
     selectedTool,
     drawingShape,
     gridSize,
+    shouldHover,
   ]);
 
   return (
     <div
-      style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+      }}
       ref={containerRef}
     >
       <canvas