Implemented brush size feature in camera feed settings

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bayiq-ui",
   "private": true,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

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

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

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 = () => {

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 = {