From 8dd20e409c915b60746cd6220845fe2866b0b61d Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 24 Nov 2025 13:29:00 +0000
Subject: [PATCH] - minor improvements to painter

---
 .../cameras/components/CameraGrid.tsx         | 14 ++++--
 .../CameraSettings/CameraSettings.tsx         | 18 ++++----
 .../CameraSettings/RegionSelector.tsx         | 46 +++++++++++++------
 .../components/Video/VideoFeedGridPainter.tsx |  6 +--
 4 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/features/cameras/components/CameraGrid.tsx b/src/features/cameras/components/CameraGrid.tsx
index 6482fa9..27a5b0c 100644
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -12,21 +12,25 @@ const CameraGrid = () => {
     { name: "Region 3", brushColour: "#0400ff" },
   ]);
   const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
-  const [isErasing, setErasing] = useState(false);
-
+  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);
   return (
     <div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
-      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} isErasing={isErasing} />
+      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
       <CameraSettings
         regions={regions}
         selectedRegionIndex={selectedRegionIndex}
         onSelectRegion={setSelectedRegionIndex}
         onChangeRegionColour={updateRegionColour}
-        isErasing={isErasing}
-        onSelectErasing={setErasing}
+        mode={mode}
+        onSelectMode={setMode}
+        tabIndex={tabIndex}
+        setTabIndex={setTabIndex}
       />
       <PlatePatch />
     </div>
diff --git a/src/features/cameras/components/CameraSettings/CameraSettings.tsx b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
index 88f383b..b0ad443 100644
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -3,15 +3,16 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import RegionSelector from "./RegionSelector";
 import type { Region } from "../../../../types/types";
-import { useState } from "react";
 
 type CameraSettingsProps = {
   regions: Region[];
   selectedRegionIndex: number;
   onSelectRegion: (index: number) => void;
   onChangeRegionColour: (index: number, colour: string) => void;
-  isErasing: boolean;
-  onSelectErasing: (isErasing: boolean) => void;
+  mode: string;
+  onSelectMode: (mode: string) => void;
+  setTabIndex: (tabIndex: number) => void;
+  tabIndex: number;
 };
 
 const CameraSettings = ({
@@ -19,10 +20,11 @@ const CameraSettings = ({
   selectedRegionIndex,
   onSelectRegion,
   onChangeRegionColour,
-  isErasing,
-  onSelectErasing,
+  mode,
+  onSelectMode,
+  tabIndex,
+  setTabIndex,
 }: CameraSettingsProps) => {
-  const [tabIndex, setTabIndex] = useState(0);
   return (
     <Card className="p-4 max-h-screen col-span-3">
       <Tabs
@@ -42,8 +44,8 @@ const CameraSettings = ({
             selectedRegionIndex={selectedRegionIndex}
             onSelectRegion={onSelectRegion}
             onChangeRegionColour={onChangeRegionColour}
-            isErasing={isErasing}
-            onSelectErasing={onSelectErasing}
+            mode={mode}
+            onSelectMode={onSelectMode}
           />
         </TabPanel>
         <TabPanel>
diff --git a/src/features/cameras/components/CameraSettings/RegionSelector.tsx b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
index b8a1688..f03d132 100644
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -6,8 +6,8 @@ type RegionSelectorProps = {
   selectedRegionIndex: number;
   onSelectRegion: (index: number) => void;
   onChangeRegionColour: (index: number, colour: string) => void;
-  isErasing: boolean;
-  onSelectErasing: (isErasing: boolean) => void;
+  mode: string;
+  onSelectMode: (mode: string) => void;
 };
 
 const RegionSelector = ({
@@ -15,32 +15,52 @@ const RegionSelector = ({
   selectedRegionIndex,
   onSelectRegion,
   onChangeRegionColour,
-  isErasing,
-  onSelectErasing,
+  mode,
+  onSelectMode,
 }: RegionSelectorProps) => {
-  const handleChange = () => {
-    onSelectErasing(!isErasing);
+  const handleChange = (e: { target: { value: string } }) => {
+    onSelectMode(e.target.value);
   };
 
   return (
     <div>
       <div>
-        <h2>Region Select</h2>
+        <h2 className="text-xl">Region Select</h2>
       </div>
       <div>
         {regions.map((region, idx) => (
-          <div key={region.name}>
+          <div
+            key={region.name}
+            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
+          >
             <label style={{ marginRight: "0.5rem" }}>
-              <input type="radio" checked={selectedRegionIndex === idx} onChange={() => onSelectRegion(idx)} />{" "}
+              <input
+                type="radio"
+                checked={selectedRegionIndex === idx}
+                onChange={() => {
+                  onSelectMode("painter");
+                  onSelectRegion(idx);
+                }}
+              />{" "}
               {region.name}
             </label>
             <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
           </div>
         ))}
-        <label htmlFor="">
-          <input type="checkbox" onChange={handleChange} checked={isErasing} />
-          Eraser
-        </label>
+        <div>
+          <h2 className="text-xl">Tools</h2>
+        </div>
+        <div className="flex flex-col">
+          <label htmlFor="mode">
+            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
+            Paint mode
+          </label>
+
+          <label htmlFor="erase">
+            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
+            Erase mode
+          </label>
+        </div>
       </div>
     </div>
   );
diff --git a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
index ce706e1..4ddebdb 100644
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -13,14 +13,14 @@ const gap = 0;
 type VideoFeedGridPainterProps = {
   regions: Region[];
   selectedRegionIndex: number;
-  isErasing: boolean;
+  mode: string;
 };
 
 type PaintedCell = {
   colour: string;
 };
 
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: VideoFeedGridPainterProps) => {
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
   const isDrawingRef = useRef(false);
@@ -53,7 +53,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: Video
     const map = paintedCellsRef.current;
     const existing = map.get(key);
 
-    if (isErasing) {
+    if (mode === "eraser") {
       if (map.has(key)) {
         map.delete(key);
         paintLayerRef.current?.batchDraw();