- improved ui for region selector and camera settings

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

@@ -2,7 +2,7 @@ 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 type { PaintedCell, Region } from "../../../../types/types";
 import Card from "../../../../ui/Card";
 
 const rows = 40;
@@ -14,17 +14,14 @@ type VideoFeedGridPainterProps = {
   regions: Region[];
   selectedRegionIndex: number;
   mode: string;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };
 
-type PaintedCell = {
-  colour: string;
-};
-
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells }: 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);
 
@@ -50,7 +47,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
     const key = `${row}-${col}`;
     const currentColour = regions[selectedRegionIndex].brushColour;
 
-    const map = paintedCellsRef.current;
+    const map = paintedCells.current;
     const existing = map.get(key);
 
     if (mode === "eraser") {
@@ -103,12 +100,12 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
 
   if (image === null || isloading)
     return (
-      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+      <Card className="row-span-3 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">
+    <div className="mt-4.5 row-span-1 col-span-2">
       <Stage
         width={stageSize.width}
         height={stageSize.height}
@@ -124,7 +121,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
         <Layer ref={paintLayerRef} opacity={0.6}>
           <Shape
             sceneFunc={(ctx, shape) => {
-              const cells = paintedCellsRef.current;
+              const cells = paintedCells.current;
               cells.forEach((cell, key) => {
                 const [rowStr, colStr] = key.split("-");
                 const row = Number(rowStr);