administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-17 13:48:21 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

use dashed stroke to indicate disabled

Browse Source
This commit is contained in:
Josh Hawkins 2026-01-16 07:30:34 -06:00
parent 4f358c376f
commit 65b8a1c201
1 changed files with 9 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,26 +55,6 @@ export default function PolygonDrawer({
const groupRef = useRef<Konva.Group>(null); const groupRef = useRef<Konva.Group>(null);
const [cursor, setCursor] = useState("default"); const [cursor, setCursor] = useState("default");
const patternCanvas = useMemo(() => {
if (enabled) {
return undefined;
}
const canvas = document.createElement("canvas");
canvas.width = 10;
canvas.height = 10;
const ctx = canvas.getContext("2d");
if (ctx) {
ctx.strokeStyle = "rgba(0, 0, 0, 0.3)";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.stroke();
}
return canvas as unknown as HTMLImageElement;
}, [enabled]);
const handleMouseOverPoint = ( const handleMouseOverPoint = (
e: KonvaEventObject<MouseEvent | TouchEvent>, e: KonvaEventObject<MouseEvent | TouchEvent>,
) => { ) => {
@ -130,9 +110,15 @@ export default function PolygonDrawer({
const colorString = useCallback( const colorString = useCallback(
(darkened: boolean) => { (darkened: boolean) => {
if (!enabled) {
// Slightly desaturate the color when disabled
const avg = (color[0] + color[1] + color[2]) / 3;
const desaturated = color.map((c) => Math.round(c * 0.4 + avg * 0.6));
return toRGBColorString(desaturated, darkened);
}
return toRGBColorString(color, darkened); return toRGBColorString(color, darkened);
}, },
[color], [color, enabled],
); );
useEffect(() => { useEffect(() => {
@ -184,9 +170,11 @@ export default function PolygonDrawer({
points={flattenedPoints} points={flattenedPoints}
stroke={colorString(true)} stroke={colorString(true)}
strokeWidth={3} strokeWidth={3}
dash={enabled ? undefined : [10, 5]}
hitStrokeWidth={12} hitStrokeWidth={12}
closed={isFinished} closed={isFinished}
fill={colorString(isActive || isHovered ? true : false)} fill={colorString(isActive || isHovered ? true : false)}
opacity={enabled ? 1 : 0.85}
onMouseOver={() => onMouseOver={() =>
isActive isActive
? isFinished ? isFinished
@ -202,15 +190,6 @@ export default function PolygonDrawer({
: setCursor("default") : setCursor("default")
} }
/> />
{!enabled && isFinished && (
<Line
points={flattenedPoints}
closed={isFinished}
fillPriority="pattern"
fillPatternImage={patternCanvas}
listening={false}
/>
)}
{isFinished && isActive && ( {isFinished && isActive && (
<Line <Line
name="unfilled-line" name="unfilled-line"