TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented brush size feature in camera feed settings

Browse Source
This commit is contained in:
Toba Ojo
2026-01-13 16:10:05 +00:00
parent 1653d9f0d4
commit 1243ce2098
5 changed files with 50 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/features/cameras/components/Video/VideoFeedGridPainter.tsx
View File

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