Merge pull request '- improved ui for region selector and camera settings' (#5) from feature/cameras-2 into develop

Reviewed-on: #5

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">
+    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
-      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
+      <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>

src/features/cameras/components/CameraSettings/CameraSettings.tsx

@@ -2,7 +2,8 @@ import Card from "../../../../ui/Card";
 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 type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";
 
 type CameraSettingsProps = {
   regions: Region[];
@@ -13,6 +14,7 @@ type CameraSettingsProps = {
   onSelectMode: (mode: string) => void;
   setTabIndex: (tabIndex: number) => void;
   tabIndex: number;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };
 
 const CameraSettings = ({
@@ -24,9 +26,10 @@ const CameraSettings = ({
   onSelectMode,
   tabIndex,
   setTabIndex,
+  paintedCells,
 }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 max-h-screen col-span-3">
+    <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"
@@ -46,6 +49,7 @@ const CameraSettings = ({
             onChangeRegionColour={onChangeRegionColour}
             mode={mode}
             onSelectMode={onSelectMode}
+            paintedCells={paintedCells}
           />
         </TabPanel>
         <TabPanel>

src/features/cameras/components/CameraSettings/ColourPicker.tsx

@@ -4,7 +4,16 @@ type ColourPickerProps = {
 };
 
 const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
-  return <input type="color" name="" id="" value={colour} onChange={(e) => setColour(e.target.value)} />;
+  return (
+    <input
+      type="color"
+      name=""
+      id=""
+      value={colour}
+      onChange={(e) => setColour(e.target.value)}
+      className="h-8 w-8 p-0 rounded-md border border-slate-500 cursor-pointer"
+    />
+  );
 };
 
 export default ColourPicker;

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -1,5 +1,6 @@
 import ColourPicker from "./ColourPicker";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -8,6 +9,7 @@ type RegionSelectorProps = {
   onChangeRegionColour: (index: number, colour: string) => void;
   mode: string;
   onSelectMode: (mode: string) => void;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };
 
 const RegionSelector = ({
@@ -17,49 +19,100 @@ const RegionSelector = ({
   onChangeRegionColour,
   mode,
   onSelectMode,
+  paintedCells,
 }: RegionSelectorProps) => {
   const handleChange = (e: { target: { value: string } }) => {
     onSelectMode(e.target.value);
   };
 
-  return (
+  const handleResetClick = () => {
-    <div>
+    const map = paintedCells.current;
-      <div>
+    map.clear();
-        <h2 className="text-xl">Region Select</h2>
+  };
-      </div>
-      <div>
-        {regions.map((region, idx) => (
-          <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={() => {
-                  onSelectMode("painter");
-                  onSelectRegion(idx);
-                }}
-              />{" "}
-              {region.name}
-            </label>
-            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
-          </div>
-        ))}
-        <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">
+  return (
-            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
+    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
-            Erase mode
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+        <h2 className="text-2xl mb-2">Tools</h2>
+        <div className="flex flex-col">
+          <label
+            htmlFor="paintMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+          >
+            <input
+              id="paintMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "painter"}
+              value="painter"
+              className="sr-only"
+            />
+            <span className="text-xl">Paint mode</span>
           </label>
+          <label
+            htmlFor="eraseMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+          >
+            <input
+              id="eraseMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "eraser"}
+              value={"eraser"}
+              className="sr-only"
+            />
+            <span className="text-xl">Erase mode</span>
+          </label>
+        </div>
+      </div>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+        <h2 className="text-2xl mb-2">Region Select</h2>
+        <>
+          {regions.map((region, idx) => {
+            const isSelected = selectedRegionIndex === idx;
+            const inputId = `region-${idx}`;
+            return (
+              <label
+                htmlFor={inputId}
+                key={region.name}
+                className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
+                  ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                <div className="flex flex-row gap-4 items-center">
+                  <input
+                    type="radio"
+                    checked={isSelected}
+                    id={inputId}
+                    name="region"
+                    className="sr-only"
+                    onChange={() => {
+                      onSelectMode("painter");
+                      onSelectRegion(idx);
+                    }}
+                  />
+                  <span className="text-xl">{region.name}</span>
+                </div>
+                <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
+                <p className="text-slate-400">{region.brushColour}</p>
+              </label>
+            );
+          })}
+        </>
+      </div>
+
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
+        <div className="flex flex-col">
+          <h2 className="text-2xl mb-2">Actions</h2>
+          <button
+            onClick={handleResetClick}
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset Regions
+          </button>
         </div>
       </div>
     </div>

src/features/cameras/components/PlatePatch/PlatePatch.tsx

@@ -1,7 +1,7 @@
 import Card from "../../../../ui/Card";
 
 const PlatePatch = () => {
-  return <Card>PlatePatch</Card>;
+  return <Card className="md:row-start-4 md:col-span-2">PlatePatch</Card>;
 };
 
 export default PlatePatch;

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
 import Card from "../../../../ui/Card";
 
 const rows = 40;
@@ -14,17 +14,14 @@ type VideoFeedGridPainterProps = {
   regions: Region[];
   selectedRegionIndex: number;
   mode: string;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };
 
-type PaintedCell = {
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells }: VideoFeedGridPainterProps) => {
-  colour: string;
-};
-
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
   const isDrawingRef = useRef(false);
-  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const paintLayerRef = useRef<any>(null);
 
@@ -50,7 +47,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
     const key = `${row}-${col}`;
     const currentColour = regions[selectedRegionIndex].brushColour;
 
-    const map = paintedCellsRef.current;
+    const map = paintedCells.current;
     const existing = map.get(key);
 
     if (mode === "eraser") {
@@ -103,12 +100,12 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
 
   if (image === null || isloading)
     return (
-      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+      <Card className="row-span-3 col-span-2 rounded-lg p-4 w-full">
         <span className="text-slate-500">Loading Video feed…</span>
       </Card>
     );
   return (
-    <div className="row-span-1 col-span-2 rounded-lg">
+    <div className="mt-4.5 row-span-1 col-span-2">
       <Stage
         width={stageSize.width}
         height={stageSize.height}
@@ -124,7 +121,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
         <Layer ref={paintLayerRef} opacity={0.6}>
           <Shape
             sceneFunc={(ctx, shape) => {
-              const cells = paintedCellsRef.current;
+              const cells = paintedCells.current;
               cells.forEach((cell, key) => {
                 const [rowStr, colStr] = key.split("-");
                 const row = Number(rowStr);

src/types/types.ts

@@ -57,3 +57,7 @@ export type InitialValuesFormErrors = {
 };
 
 export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
+
+export type PaintedCell = {
+  colour: string;
+};