Polygon: Standard-Modus + Schließen-Button

- Polygon ist jetzt der Standard-Modus beim Öffnen
- Neuer Button "Polygon schließen" erscheint im Polygon-Modus
- Button aktiviert sich nach dem 2. gesetzten Punkt
- Klick schließt das Polygon automatisch (kein Doppelklick mehr nötig)
- Auswahl hinzufügen schließt offenes Polygon ebenfalls automatisch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/DrawCanvas.tsx

@@ -13,6 +13,7 @@ const imageCache = new Map<string, HTMLImageElement>()
 export interface DrawCanvasHandle {
   getCurrentSelection: () => Selection | null
   resetSelection: () => void
+  closePolygon: () => void
 }
 
 interface Props {
@@ -200,7 +201,11 @@ export default forwardRef<DrawCanvasHandle, Props>(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<DrawCanvasHandle, Props>(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<DrawCanvasHandle, Props>(function DrawCanvas(
         }
         polygonPoints.current.push({ x, y })
         isDragging.current = true
+        if (polygonPoints.current.length >= 2) onHasSelectionRef.current(true)
       }
       redraw()
     }

frontend/src/pages/DrawIt.tsx

@@ -35,7 +35,7 @@ export default function DrawIt() {
   const [userNotes, setUserNotes] = useState('')
   const [parentId, setParentId] = useState<string | null>(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() {
               </label>
             </div>
             <div className="action-group">
+              {mode === 'polygon' && (
+                <button
+                  className="btn-primary btn-sm btn-block"
+                  onClick={() => canvasRef.current?.closePolygon()}
+                  disabled={!hasSelection}
+                >
+                  Polygon schließen
+                </button>
+              )}
               <button className="btn-ghost btn-sm btn-block" onClick={() => canvasRef.current?.resetSelection()}>
                 Auswahl zurücksetzen
               </button>