mirror of
https://github.com/alexhopeoconnor/frigate.git
synced 2026-10-17 09:01:31 +10:00
Josh Hawkins
5f15641b1b
* initial working konva * working multi polygons * multi zones * clean up * new zone dialog * clean up * relative coordinates and colors * fix color order * better motion tuner * objects for zones * progress * merge dev * edit pane * motion and object masks * filtering * add objects and unsaved to type * motion tuner, edit controls, tooltips * object and motion edit panes * polygon item component, switch color, object form, hover cards * working zone edit pane * working motion masks * object masks and deletion of all types * use FilterSwitch * motion tuner fixes and tweaks * clean up * tweaks * spaces in camera name * tweaks * allow dragging of points while drawing polygon * turn off editing mode when switching camera * limit interpolated coordinates and use crosshair cursor * padding * fix tooltip trigger for icons * konva tweaks * consolidate * fix top menu items on mobile
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { Polygon } from "@/types/canvas";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
|
import { MdOutlineRestartAlt, MdUndo } from "react-icons/md";
|
|
import { Button } from "../ui/button";
|
|
|
|
type PolygonEditControlsProps = {
|
|
polygons: Polygon[];
|
|
setPolygons: React.Dispatch<React.SetStateAction<Polygon[]>>;
|
|
activePolygonIndex: number | undefined;
|
|
};
|
|
|
|
export default function PolygonEditControls({
|
|
polygons,
|
|
setPolygons,
|
|
activePolygonIndex,
|
|
}: PolygonEditControlsProps) {
|
|
const undo = () => {
|
|
if (activePolygonIndex === undefined || !polygons) {
|
|
return;
|
|
}
|
|
|
|
const updatedPolygons = [...polygons];
|
|
const activePolygon = updatedPolygons[activePolygonIndex];
|
|
updatedPolygons[activePolygonIndex] = {
|
|
...activePolygon,
|
|
points: [...activePolygon.points.slice(0, -1)],
|
|
isFinished: false,
|
|
};
|
|
setPolygons(updatedPolygons);
|
|
};
|
|
|
|
const reset = () => {
|
|
if (activePolygonIndex === undefined || !polygons) {
|
|
return;
|
|
}
|
|
|
|
const updatedPolygons = [...polygons];
|
|
const activePolygon = updatedPolygons[activePolygonIndex];
|
|
updatedPolygons[activePolygonIndex] = {
|
|
...activePolygon,
|
|
points: [],
|
|
isFinished: false,
|
|
};
|
|
setPolygons(updatedPolygons);
|
|
};
|
|
|
|
if (activePolygonIndex === undefined || !polygons) {
|
|
return;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-row justify-center gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="default"
|
|
className="size-6 p-1 rounded-md"
|
|
disabled={!polygons[activePolygonIndex].points.length}
|
|
onClick={undo}
|
|
>
|
|
<MdUndo className="text-secondary-foreground" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Undo</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="default"
|
|
className="size-6 p-1 rounded-md"
|
|
disabled={!polygons[activePolygonIndex].points.length}
|
|
onClick={reset}
|
|
>
|
|
<MdOutlineRestartAlt className="text-secondary-foreground" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Reset</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|