- improved ui for region selector and camera settings

src/features/cameras/components/CameraGrid.tsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
-import type { Region } from "../../../types/types";
+import type { PaintedCell, Region } from "../../../types/types";
 import PlatePatch from "./PlatePatch/PlatePatch";
 
 const CameraGrid = () => {
@@ -14,14 +14,21 @@ const CameraGrid = () => {
   const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
   const [mode, setMode] = useState("");
   const [tabIndex, setTabIndex] = useState(0);
-  console.log(tabIndex);
+
   const updateRegionColour = (index: number, newColour: string) => {
     setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
   };
-  console.log(mode);
+
+  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
-      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
+    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
+      <VideoFeedGridPainter
+        regions={regions}
+        selectedRegionIndex={selectedRegionIndex}
+        mode={mode}
+        paintedCells={paintedCellsRef}
+      />
       <CameraSettings
         regions={regions}
         selectedRegionIndex={selectedRegionIndex}
@@ -31,6 +38,7 @@ const CameraGrid = () => {
         onSelectMode={setMode}
         tabIndex={tabIndex}
         setTabIndex={setTabIndex}
+        paintedCells={paintedCellsRef}
       />
       <PlatePatch />
     </div>