- improved grid painting and included resizing

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { Stage, Layer, Image, Shape } from "react-konva";
+import type { KonvaEventObject } from "konva/lib/Node";
+import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
+import type { Region } from "../../../../types/types";
+import Card from "../../../../ui/Card";
+
+const rows = 40;
+const cols = 40;
+const size = 20;
+const gap = 0;
+
+type VideoFeedGridPainterProps = {
+  regions: Region[];
+  selectedRegionIndex: number;
+  isErasing: boolean;
+};
+
+type PaintedCell = {
+  colour: string;
+};
+
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: VideoFeedGridPainterProps) => {
+  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
+  const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
+  const isDrawingRef = useRef(false);
+  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>): ImageBitmap | null => {
+    if (!bmp || !bmp.current) {
+      return null;
+    }
+    const image = bmp.current;
+    return image;
+  };
+
+  const image = draw(latestBitmapRef);
+
+  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 activeRegion = regions[selectedRegionIndex];
+    if (!activeRegion) return;
+
+    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 (!regions[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 (!regions[selectedRegionIndex]) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) paintCell(pos.x, pos.y);
+  };
+
+  const handleStageMouseUp = () => {
+    isDrawingRef.current = false;
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+
+      const aspectRatio = 740 / 460;
+      const newWidth = width * 0.36;
+      const newHeight = newWidth / aspectRatio;
+      setStageSize({ width: newWidth, height: newHeight });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  if (image === null || isloading)
+    return (
+      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+        <span className="text-slate-500">Loading Video feed…</span>
+      </Card>
+    );
+  return (
+    <div className="row-span-1 col-span-2 rounded-lg">
+      <Stage
+        width={stageSize.width}
+        height={stageSize.height}
+        onMouseDown={handleStageMouseDown}
+        onMouseMove={handleStageMouseMove}
+        onMouseUp={handleStageMouseUp}
+        onMouseLeave={handleStageMouseUp}
+      >
+        <Layer>
+          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
+        </Layer>
+
+        <Layer ref={paintLayerRef} opacity={0.6}>
+          <Shape
+            sceneFunc={(ctx, shape) => {
+              const cells = paintedCellsRef.current;
+              cells.forEach((cell, 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 = cell.colour;
+                ctx.fill();
+              });
+
+              ctx.fillStrokeShape(shape);
+            }}
+            width={stageSize.width}
+            height={stageSize.height}
+          />
+        </Layer>
+      </Stage>
+    </div>
+  );
+};
+
+export default VideoFeedGridPainter;