- started painer on video feed will finish

src/features/cameras/components/VideoFeedGridPainter.tsx

@@ -1,74 +1,104 @@
 import { useRef, type RefObject } from "react";
-import { Stage, Layer, Image, Rect } from "react-konva";
+import { Stage, Layer, Image, Shape } from "react-konva";
+import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../hooks/useGetvideoSnapshots";
+import Card from "../../../ui/Card";
+import type { Region } from "../../../types/types";
 
-const VideoFeedGridPainter = () => {
+const rows = 40;
+const cols = 40;
+const size = 20;
+const gap = 0;
+
+type VideoFeedGridPainterProps = {
+  regions: Region[];
+  selectedRegionIndex: number;
+};
+
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex }: VideoFeedGridPainterProps) => {
   const { latestBitmapRef } = useCreateVideoSnapshot();
-  const isDrawing = useRef(false);
 
-  const rows = 100;
-  const cols = 100;
-  const size = 10;
-  const gap = 0;
+  const isDrawingRef = useRef(false);
+  const paintedCellsRef = useRef<Set<string>>(new Set());
 
-  const squares = [];
-  for (let row = 0; row < rows; row++) {
-    for (let col = 0; col < cols; col++) {
-      squares.push(
-        <Rect
-          key={`${row}-${col}`}
-          x={col * (size + gap)}
-          y={row * (size + gap)}
-          width={size}
-          height={size}
-          fill="#ddd"
-          stroke="black"
-          strokeWidth={0.5}
-          opacity={0.5}
-        />,
-      );
-    }
-  }
-
-  const getCoords = (e) => {
-    isDrawing.current = true;
-  };
-
-  const handleMouseMove = (e) => {
-    if (!isDrawing.current) {
-      return;
-    }
-    const pos = e.target.getStage().getPointerPosition();
-    console.log(pos);
-  };
-
-  const handleMouseUp = () => {
-    isDrawing.current = false;
-  };
+  const paintLayerRef = useRef<any>(null);
 
   const draw = (bmp: RefObject<ImageBitmap | null>) => {
-    if (!bmp || !bmp.current) {
-      return;
-    } else {
-      const frame = bmp.current;
-      return frame;
-    }
+    if (!bmp || !bmp.current) return null;
+    return bmp.current;
+  };
+
+  const paintCell = (x: number, y: number) => {
+    const col = Math.floor(x / (size + gap));
+    const row = Math.floor(y / (size + gap));
+
+    if (row < 0 || row >= rows || col < 0 || col >= cols) return;
+
+    const key = `${row}-${col}`;
+    const set = paintedCellsRef.current;
+    if (set.has(key)) return;
+
+    set.add(key);
+
+    paintLayerRef.current?.batchDraw();
+  };
+
+  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
+    if (!selectedRegionIndex) return;
+    isDrawingRef.current = true;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) paintCell(pos.x, pos.y);
+  };
+
+  const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
+    if (!isDrawingRef.current) return;
+    if (!selectedRegionIndex) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) paintCell(pos.x, pos.y);
+  };
+
+  const handleStageMouseUp = () => {
+    isDrawingRef.current = false;
   };
 
   return (
-    <Stage
-      width={640}
-      height={360}
-      onMouseDown={getCoords}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
-    >
-      <Layer>
-        <Image image={draw(latestBitmapRef)} width={640} height={360} />
-      </Layer>
-      <Layer opacity={0.3}>{squares}</Layer>
-    </Stage>
+    <Card className="w-187.5 place-self-start">
+      <Stage
+        width={740}
+        height={460}
+        onMouseDown={handleStageMouseDown}
+        onMouseMove={handleStageMouseMove}
+        onMouseUp={handleStageMouseUp}
+        onMouseLeave={handleStageMouseUp}
+      >
+        <Layer>
+          <Image image={draw(latestBitmapRef)} width={740} height={460} />
+        </Layer>
+
+        <Layer ref={paintLayerRef} opacity={0.6}>
+          <Shape
+            sceneFunc={(ctx, shape) => {
+              const cells = paintedCellsRef.current;
+              cells.forEach((key) => {
+                const [rowStr, colStr] = key.split("-");
+                const row = Number(rowStr);
+                const col = Number(colStr);
+
+                const x = col * (size + gap);
+                const y = row * (size + gap);
+
+                ctx.beginPath();
+                ctx.rect(x, y, size, size);
+                ctx.fillStyle = regions[selectedRegionIndex]?.brushColour;
+                ctx.fill();
+              });
+
+              ctx.fillStrokeShape(shape);
+            }}
+          />
+        </Layer>
+      </Stage>
+    </Card>
   );
 };