diff --git a/frontend/src/components/DrawCanvas.tsx b/frontend/src/components/DrawCanvas.tsx index ae17623..7f6d8a5 100644 --- a/frontend/src/components/DrawCanvas.tsx +++ b/frontend/src/components/DrawCanvas.tsx @@ -13,6 +13,7 @@ const imageCache = new Map() export interface DrawCanvasHandle { getCurrentSelection: () => Selection | null resetSelection: () => void + closePolygon: () => void } interface Props { @@ -200,7 +201,11 @@ export default forwardRef(function DrawCanvas( }, } } else { - if (!isPolygonClosed.current || polygonPoints.current.length < 3) return null + if (polygonPoints.current.length < 2) return null + if (!isPolygonClosed.current) { + isPolygonClosed.current = true + redraw() + } return { mode: 'polygon', polygon: polygonPoints.current.map(p => ({ @@ -219,6 +224,13 @@ export default forwardRef(function DrawCanvas( onHasSelectionRef.current(false) redraw() }, + closePolygon() { + if (polygonPoints.current.length >= 2) { + isPolygonClosed.current = true + onHasSelectionRef.current(true) + redraw() + } + }, }), [redraw]) // Reset drawing when mode changes @@ -306,6 +318,7 @@ export default forwardRef(function DrawCanvas( } polygonPoints.current.push({ x, y }) isDragging.current = true + if (polygonPoints.current.length >= 2) onHasSelectionRef.current(true) } redraw() } diff --git a/frontend/src/pages/DrawIt.tsx b/frontend/src/pages/DrawIt.tsx index 01d38f5..fc56d7b 100644 --- a/frontend/src/pages/DrawIt.tsx +++ b/frontend/src/pages/DrawIt.tsx @@ -35,7 +35,7 @@ export default function DrawIt() { const [userNotes, setUserNotes] = useState('') const [parentId, setParentId] = useState(null) const [editingNotes, setEditingNotes] = useState<{ id: string; notes: string } | null>(null) - const [mode, setMode] = useState<'rect' | 'polygon'>('rect') + const [mode, setMode] = useState<'rect' | 'polygon'>('polygon') const [hasSelection, setHasSelection] = useState(false) const [saving, setSaving] = useState(false) const [status, setStatus] = useState('') @@ -258,6 +258,15 @@ export default function DrawIt() {
+ {mode === 'polygon' && ( + + )}