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>

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>

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>
   );

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();