administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

allow dragging of points while drawing polygon

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-18 11:00:16 -05:00
parent 98085a028b
commit bd1fb901a7
2 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/components/settings/PolygonCanvas.tsx
View File

@ -60,7 +60,7 @@ export function PolygonCanvas({
return [stage.getPointerPosition()!.x, stage.getPointerPosition()!.y];
};
const isMouseOverPoint = (polygon: Polygon, mousePos: number[]) => {
const isMouseOverFirstPoint = (polygon: Polygon, mousePos: number[]) => {
if (!polygon || !polygon.points) {
return false;
}
@ -72,6 +72,25 @@ export function PolygonCanvas({
return distance < 15;
};
const isMouseOverAnyPoint = (polygon: Polygon, mousePos: number[]) => {
if (!polygon || !polygon.points || polygon.points.length === 0) {
return false;
}
for (let i = 1; i < polygon.points.length; i++) {
const point = polygon.points[i];
const distance = Math.hypot(
mousePos[0] - point[0],
mousePos[1] - point[1],
);
if (distance < 15) {
return true;
}
}
return false;
};
const handleMouseDown = (e: KonvaEventObject<MouseEvent | TouchEvent>) => {
if (activePolygonIndex === undefined || !polygons) {
return;
@ -84,7 +103,7 @@ export function PolygonCanvas({
if (
activePolygon.points.length >= 3 &&
isMouseOverPoint(activePolygon, mousePos)
isMouseOverFirstPoint(activePolygon, mousePos)
) {
// Close the polygon
updatedPolygons[activePolygonIndex] = {
@ -93,7 +112,10 @@ export function PolygonCanvas({
};
setPolygons(updatedPolygons);
} else {
if (!activePolygon.isFinished) {
if (
!activePolygon.isFinished &&
!isMouseOverAnyPoint(activePolygon, mousePos)
) {
// Add a new point to the active polygon
updatedPolygons[activePolygonIndex] = {
...activePolygon,
@ -136,6 +158,24 @@ export function PolygonCanvas({
}
};
const handleMouseOverAnyPoint = (
e: KonvaEventObject<MouseEvent | TouchEvent>,
) => {
if (activePolygonIndex === undefined || !polygons) {
return;
}
e.target.getStage()!.container().style.cursor = "move";
};
const handleMouseOutAnyPoint = (
e: KonvaEventObject<MouseEvent | TouchEvent>,
) => {
if (activePolygonIndex === undefined || !polygons) {
return;
}
e.target.getStage()!.container().style.cursor = "default";
};
const handlePointDragMove = (
e: KonvaEventObject<MouseEvent | TouchEvent>,
) => {
@ -215,6 +255,8 @@ export function PolygonCanvas({
handleGroupDragEnd={handleGroupDragEnd}
handleMouseOverStartPoint={handleMouseOverStartPoint}
handleMouseOutStartPoint={handleMouseOutStartPoint}
handleMouseOverAnyPoint={handleMouseOverAnyPoint}
handleMouseOutAnyPoint={handleMouseOutAnyPoint}
/>
),
)}

16
web/src/components/settings/PolygonDrawer.tsx
View File

@ -20,6 +20,12 @@ type PolygonDrawerProps = {
handleMouseOutStartPoint: (
e: KonvaEventObject<MouseEvent | TouchEvent>,
) => void;
handleMouseOverAnyPoint: (
e: KonvaEventObject<MouseEvent | TouchEvent>,
) => void;
handleMouseOutAnyPoint: (
e: KonvaEventObject<MouseEvent | TouchEvent>,
) => void;
};
export default function PolygonDrawer({
@ -33,6 +39,8 @@ export default function PolygonDrawer({
handleGroupDragEnd,
handleMouseOverStartPoint,
handleMouseOutStartPoint,
handleMouseOverAnyPoint,
handleMouseOutAnyPoint,
}: PolygonDrawerProps) {
const vertexRadius = 6;
const [stage, setStage] = useState<Konva.Stage>();
@ -121,6 +129,13 @@ export default function PolygonDrawer({
onMouseOut: handleMouseOutStartPoint,
}
: null;
const otherPointsAttr =
index !== 0
? {
onMouseOver: handleMouseOverAnyPoint,
onMouseOut: handleMouseOutAnyPoint,
}
: null;
return (
<Circle
@ -146,6 +161,7 @@ export default function PolygonDrawer({
}
}}
{...startPointAttr}
{...otherPointsAttr}
/>
);
})}