From 1243ce209808c020a94a11ee2cd0d7fcaf137cb6 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 13 Jan 2026 16:10:05 +0000
Subject: [PATCH] Implemented brush size feature in camera feed settings

---
 package.json                                  |  2 +-
 src/app/reducers/cameraFeedReducer.ts         |  7 ++++
 .../CameraSettings/RegionSelector.tsx         | 17 ++++++++-
 .../components/Video/VideoFeedGridPainter.tsx | 38 ++++++++++---------
 src/types/types.ts                            |  5 +++
 5 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index fee22eb..f321676 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bayiq-ui",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/app/reducers/cameraFeedReducer.ts b/src/app/reducers/cameraFeedReducer.ts
index f2d59a1..db77a9c 100644
--- a/src/app/reducers/cameraFeedReducer.ts
+++ b/src/app/reducers/cameraFeedReducer.ts
@@ -3,6 +3,7 @@ import { CAMERA_IDS, DEFAULT_REGIONS, type CameraID } from "../config/cameraConf
 
 export const initialState: CameraFeedState = {
   cameraFeedID: CAMERA_IDS[0],
+  brushSize: 1,
   paintedCells: CAMERA_IDS.reduce(
     (acc, id) => {
       acc[id] = new Map<string, PaintedCell>();
@@ -110,6 +111,12 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
           [action.payload.cameraFeedID]: action.payload.zoomLevel,
         },
       };
+
+    case "SET_BRUSH_SIZE":
+      return {
+        ...state,
+        brushSize: action.payload.brushSize,
+      };
     default:
       return state;
   }
diff --git a/src/features/cameras/components/CameraSettings/RegionSelector.tsx b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
index f095ec5..417d9a7 100644
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -7,6 +7,7 @@ import { toast } from "sonner";
 import { useCameraFeedSocket } from "../../../../app/context/WebSocketContext";
 import type { CameraID } from "../../../../app/config/cameraConfig";
 import { useEffect } from "react";
+import SliderComponent from "../../../../ui/SliderComponent";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -32,6 +33,7 @@ const RegionSelector = ({
   const { state, dispatch } = useCameraFeedContext();
   const { blackboardMutation } = useBlackBoard();
   const paintedCells = state.paintedCells[cameraFeedID];
+  const brushSize = state.brushSize;
   const cameraSocket = useCameraFeedSocket();
   useEffect(() => {
     if (subTabIndex === 0) {
@@ -171,7 +173,7 @@ const RegionSelector = ({
       <div className="flex flex-col md:flex-row gap-3">
         <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
           <h2 className="text-2xl mb-2">Tools</h2>
-          <div className="flex flex-col">
+          <div className="flex flex-col gap-2">
             <label
               htmlFor="paintMode"
               className={`p-4 border rounded-lg  mb-2
@@ -204,6 +206,19 @@ const RegionSelector = ({
               />
               <span className="text-xl">Erase mode</span>
             </label>
+            <div className="flex flex-col border border-gray-600 rounded-lg p-4">
+              <span className="text-lg mb-2">
+                {mode === "painter" ? "Brush" : "Eraser"} Size: {brushSize}
+              </span>
+              <SliderComponent
+                id="brushSize"
+                onChange={(value) => dispatch({ type: "SET_BRUSH_SIZE", payload: { brushSize: value as number } })}
+                value={brushSize}
+                min={1}
+                max={5}
+                step={1}
+              />
+            </div>
             <label
               htmlFor="magnifyMode"
               className={`p-4 border rounded-lg  mb-2
diff --git a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
index f7733d6..590d4d3 100644
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -23,6 +23,8 @@ const VideoFeedGridPainter = () => {
   const regions = state.regionsByCamera[cameraFeedID];
   const selectedRegionIndex = state.selectedRegionIndex;
   const mode = state.modeByCamera[cameraFeedID];
+  const brushSize = state.brushSize;
+
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
   const isDrawingRef = useRef(false);
@@ -85,35 +87,37 @@ const VideoFeedGridPainter = () => {
 
   const image = draw(latestBitmapRef);
 
-  const paintCell = (x: number, y: number) => {
+  const paintCell = (x: number, y: number, brushSize: number) => {
     if (mode === "controller" || mode === "zoom" || mode === "magnify") return;
     const col = Math.floor(x / (size + gap));
     const row = Math.floor(y / (size + gap));
+    const radius = Math.floor(brushSize / 2);
 
     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 = paintedCells;
-    const existing = map.get(key);
-
-    if (mode === "eraser") {
-      if (map.has(key)) {
-        map.delete(key);
-        paintLayerRef.current?.batchDraw();
+    for (let r = row - radius; r <= row + radius; r++) {
+      for (let c = col - radius; c <= col + radius; c++) {
+        if (r < 0 || r >= rows || c < 0 || c >= cols) continue;
+        const key = `${r}-${c}`;
+        const map = paintedCells;
+        const existing = map.get(key);
+        if (mode === "eraser") {
+          if (map.has(key)) {
+            map.delete(key);
+            paintLayerRef.current?.batchDraw();
+          }
+          continue;
+        }
+        if (existing && existing.colour === currentColour) continue;
+        map.set(key, { colour: currentColour, region: activeRegion });
       }
-
-      return;
     }
 
-    if (existing && existing.colour === currentColour) return;
-
-    map.set(key, { colour: currentColour, region: activeRegion });
-
     paintLayerRef.current?.batchDraw();
   };
 
@@ -121,14 +125,14 @@ const VideoFeedGridPainter = () => {
     if (!regions[selectedRegionIndex] || mode === "magnify" || mode === "zoom") return;
     isDrawingRef.current = true;
     const pos = e.target.getStage()?.getPointerPosition();
-    if (pos) paintCell(pos.x, pos.y);
+    if (pos) paintCell(pos.x, pos.y, brushSize);
   };
 
   const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
     if (!isDrawingRef.current || mode === "magnify") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
-    if (pos) paintCell(pos.x, pos.y);
+    if (pos) paintCell(pos.x, pos.y, brushSize);
   };
 
   const handleStageMouseUp = () => {
diff --git a/src/types/types.ts b/src/types/types.ts
index 12eabf9..1b193c7 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -175,6 +175,7 @@ export type OptionalBOF2LaneIDs = {
 
 export type CameraFeedState = {
   cameraFeedID: CameraID;
+  brushSize: number;
   paintedCells: Record<CameraID, Map<string, PaintedCell>>;
 
   regionsByCamera: Record<CameraID, Region[]>;
@@ -221,6 +222,10 @@ export type CameraFeedAction =
   | {
       type: "SET_ZOOM_LEVEL";
       payload: { cameraFeedID: CameraID; zoomLevel: number };
+    }
+  | {
+      type: "SET_BRUSH_SIZE";
+      payload: { brushSize: number };
     };
 
 export type DecodeReading = {