fixed colour painting and eraser

src/features/cameras/components/VideoFeedGridPainter.tsx

@@ -13,19 +13,26 @@ const gap = 0;
 type VideoFeedGridPainterProps = {
   regions: Region[];
   selectedRegionIndex: number;
+  isErasing: boolean;
 };
 
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex }: VideoFeedGridPainterProps) => {
+type PaintedCell = {
+  colour: string;
+};
+
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: VideoFeedGridPainterProps) => {
   const { latestBitmapRef } = useCreateVideoSnapshot();
-
   const isDrawingRef = useRef(false);
-  const paintedCellsRef = useRef<Set<string>>(new Set());
-
+  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const paintLayerRef = useRef<any>(null);
 
-  const draw = (bmp: RefObject<ImageBitmap | null>) => {
-    if (!bmp || !bmp.current) return null;
-    return bmp.current;
+  const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
+    if (!bmp || !bmp.current) {
+      return null;
+    }
+    const image = bmp.current;
+    return image;
   };
 
   const paintCell = (x: number, y: number) => {
@@ -34,17 +41,32 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex }: VideoFeedGridPai
 
     if (row < 0 || row >= rows || col < 0 || col >= cols) return;
 
-    const key = `${row}-${col}`;
-    const set = paintedCellsRef.current;
-    if (set.has(key)) return;
+    const activeRegion = regions[selectedRegionIndex];
+    if (!activeRegion) return;
 
-    set.add(key);
+    const key = `${row}-${col}`;
+    const currentColour = regions[selectedRegionIndex].brushColour;
+
+    const map = paintedCellsRef.current;
+    const existing = map.get(key);
+
+    if (isErasing) {
+      if (map.has(key)) {
+        map.delete(key);
+        paintLayerRef.current?.batchDraw();
+      }
+      return;
+    }
+
+    if (existing && existing.colour === currentColour) return;
+
+    map.set(key, { colour: currentColour });
 
     paintLayerRef.current?.batchDraw();
   };
 
   const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!selectedRegionIndex) return;
+    if (!regions[selectedRegionIndex]) return;
     isDrawingRef.current = true;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
@@ -52,7 +74,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex }: VideoFeedGridPai
 
   const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
     if (!isDrawingRef.current) return;
-    if (!selectedRegionIndex) return;
+    if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
   };
@@ -79,7 +101,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex }: VideoFeedGridPai
           <Shape
             sceneFunc={(ctx, shape) => {
               const cells = paintedCellsRef.current;
-              cells.forEach((key) => {
+              cells.forEach((cell, key) => {
                 const [rowStr, colStr] = key.split("-");
                 const row = Number(rowStr);
                 const col = Number(colStr);
@@ -89,7 +111,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex }: VideoFeedGridPai
 
                 ctx.beginPath();
                 ctx.rect(x, y, size, size);
-                ctx.fillStyle = regions[selectedRegionIndex]?.brushColour;
+                ctx.fillStyle = cell.colour;
                 ctx.fill();
               });