# Aktive Zeichen- und Bearbeitungs-Werkzeuge

Status: Entwurf. Dieses Dokument spezifiziert das **Tool-System** für das aktive
Erzeugen von Modell-Elementen durch Zeichnen im Grundriss: Wände (Achs-Polylinie
→ `Wall` eines `WallType`) sowie reine 2D-Geometrie (Linie, Polylinie, Rechteck,
Kreis, Bogen, Text). Es definiert die Werkzeug-Zustandsmaschine, die Live-Vorschau
(Rubber-Band), das **Snapping** mit Bildschirm-Markern, die Ebenen-/Kategorie-/
Stil-Zuordnung neuer Elemente und das neue Element `Drawing2D` samt Ableitung in
`generatePlan`.

Bezugsdokumente: [elements.md](elements.md) (Wand-/Tür-Modell),
[resources-graphics.md](resources-graphics.md) (Stil-Auflösung),
[plans-output.md](plans-output.md) (Papier-Maßstab, mm-Strichstärken),
[context-menu.md](context-menu.md) (Maus-Schema).

## 0. Architektur-Prinzip (Bezug zum Repo)

Die App folgt der Regel **ein semantisches Modell ist die einzige Wahrheit; jede
Ansicht ist abgeleitet** (CONVENTIONS.md, `App.tsx`). Werkzeuge greifen darum NUR über
`setProject` immutabel auf das `Project`-Modell zu; sie schreiben NIE Geometrie
direkt in den Plan. Der `PlanView` bleibt eine reine Darstellungs-/Eingabe-
Schicht. Das Tool-System setzt genau an der bestehenden Naht in `PlanView` an:

- **Modell↔Screen.** `PlanView` rechnet bereits Cursor-Pixel → viewBox-Einheiten
  (`clientToView`) → Modell-Meter (`viewToModel`). Diese Umrechnung ist die
  Grundlage; Werkzeuge arbeiten ausschließlich in **Modell-Metern** (CONVENTIONS.md:
  intern alles in Metern). Für Snap-Marker brauchen Werkzeuge zusätzlich die
  Rückrichtung Modell → viewBox (`toScreen`, existiert bereits) bzw. Modell →
  Client-Pixel.
- **Pointer-Handling.** `PlanView` besitzt heute drei Gesten an der linken Taste/
  Mitte/rechts: Auswahl/Marquee, Pan, Kontextmenü. Das Tool-System schiebt sich
  VOR diese Logik: ist ein aktives Zeichenwerkzeug gewählt (≠ `select`), übernimmt
  das Werkzeug `pointerdown/move/up`; das `select`-Werkzeug delegiert an die heute
  schon vorhandene Auswahl-/Marquee-Logik (kein Verhaltensbruch).
- **Pan/Zoom bleiben immer aktiv.** Mittlere Maustaste (Pan) und Mausrad (Zoom)
  laufen unverändert weiter, auch während ein Zeichenwerkzeug aktiv ist — sonst
  kann man beim Zeichnen nicht navigieren.

## 1. Datenfluss-Überblick

```
TopBar (Werkzeugleiste)  --activeTool-->  App-State
                                              │
            ┌──── activeTool, wallTypeId, defaultCategoryCode ────┐
            ▼                                                      ▼
        PlanView  ── pointerdown/move/up (Modellpunkt) ──>  ToolController
            ▲                                                      │
   Snap-Marker + Rubber-Band-Overlay  <── DraftState (Vorschau) ──┘
            │                                                      │
            └──────────────── commit ──> onToolCommit(Element) ──> setProject
```

`activeTool` und die Werkzeug-Parameter (aktiver `WallType`, Default-Kategorie)
liegen als **View-State** in `App.tsx` — wie `viewType`, `detail`, `selectedWallIds`
bereits dort liegen. Der `ToolController` ist **frameworkfrei** (reines TS, kein
React-State pro Mausbewegung — analog zu `drag`/`marquee` als `useRef` in
`PlanView`), damit die Live-Vorschau ohne Re-Render des ganzen Baums läuft. Nur
beim **Commit** wird `setProject` (Re-Render) ausgelöst.

## 2. Koordinaten & Hilfsfunktionen

`PlanView` exportiert künftig zwei reine Konverter (heute intern vorhanden),
plus die effektive Pixel-pro-Meter-Skala für die Snap-Toleranz:

```ts
// PlanView-intern bereits da; wird als stabile Callbacks nach außen gereicht.
type ToModel = (clientX: number, clientY: number) => Vec2;        // Pixel → Meter
type ToClient = (m: Vec2) => { x: number; y: number };            // Meter → Pixel
type PxPerMeter = () => number;  // aktuelle meet-Skala * PX_PER_M (Snap-Toleranz)
```

`PxPerMeter` ergibt sich aus `meetScale(view) * PX_PER_M` (beides in `PlanView`
vorhanden). Snap-Toleranzen werden in **Bildschirm-Pixeln** definiert (z. B. 10 px)
und über `pxPerMeter` in Meter umgerechnet — so ist der Fangradius zoom-unabhängig
konstant am Bildschirm.

## 3. Tool-System

### 3.1 Werkzeug-Identität und Registry

```ts
export type ToolId =
  | "select"     // Default: Auswahl/Marquee (heutiges Verhalten)
  | "wall"       // Wand-Achs-Polylinie → Wall je Segment
  | "line"       // einzelne 2D-Strecke
  | "polyline"   // offene 2D-Polylinie
  | "rect"       // 2D-Rechteck (zwei Ecken)
  | "circle"     // 2D-Kreis (Zentrum + Radius)
  | "arc"        // 2D-Bogen (3-Punkt oder Zentrum-Start-Ende)
  | "text";      // 2D-Textmarke

/** Live-Kontext, den ein Werkzeug bei jedem Schritt erhält. */
export interface ToolContext {
  project: Project;
  /** Aktives Geschoss/Zeichnungsebene (Ziel der neuen Elemente). */
  level: DrawingLevel;
  /** Default-Kategorie-Code für neue Elemente (siehe §6). */
  defaultCategoryCode: string;
  /** Aktiver Wandtyp für das Wand-Werkzeug. */
  activeWallTypeId: string;
  /** Aktiver Linienstil-Code für 2D-Primitive (Line Manager). */
  activeLineStyleId: string;
  /** Snapping-Einstellungen (an/aus je Typ, ortho, grid). */
  snap: SnapSettings;
  /** Pixel pro Meter (für Snap-Toleranz in Metern). */
  pxPerMeter: number;
}

/** Ein an einer Modellposition ausgelöstes Pointer-Ereignis. */
export interface ToolPointer {
  /** Roher Modellpunkt (vor Snapping), in Metern. */
  raw: Vec2;
  /** Gesnappter Punkt + Marker-Info (siehe §5). null = kein Snap. */
  snap: SnapResult | null;
  /** Effektiver Punkt = snap?.point ?? raw. */
  point: Vec2;
  /** Modifikatoren (Shift = Ortho erzwingen, Ctrl = Snap aus, Alt = …). */
  shift: boolean;
  ctrl: boolean;
  alt: boolean;
  button: number; // 0 links, 2 rechts
}

/** Was ein Werkzeug-Schritt nach außen meldet. */
export interface ToolResult {
  /** Neuer Vorschau-Zustand (Rubber-Band-Geometrie); null = nichts zu zeigen. */
  draft: ToolDraft | null;
  /** Bei Abschluss: Mutation, die App über setProject anwendet. */
  commit?: (p: Project) => Project;
  /** true → Werkzeug ist fertig und kehrt in seinen Ruhezustand zurück. */
  done?: boolean;
}

/** Die Werkzeug-Schnittstelle (reine Funktionen über einen internen State). */
export interface Tool {
  id: ToolId;
  /** UI-Label-Key (i18n), z. B. "tool.wall". */
  labelKey: string;
  /** Material-Symbol-Name für die Werkzeugleiste. */
  icon: string;
  /** Statuszeilen-Hinweis-Key je Phase (z. B. "tool.wall.firstPoint"). */
  hintKey: (state: ToolState) => string;

  /** Initialer Ruhezustand. */
  init(): ToolState;
  /** Klick/Tap (pointerdown→up ohne Drag, bzw. „setze Punkt"). */
  onClick(state: ToolState, p: ToolPointer, ctx: ToolContext): [ToolState, ToolResult];
  /** Bewegung (Hover/Drag): nur Vorschau, nie Commit. */
  onMove(state: ToolState, p: ToolPointer, ctx: ToolContext): [ToolState, ToolResult];
  /** Doppelklick/Enter: mehrteilige Werkzeuge abschließen (z. B. Polylinie). */
  onCommitGesture(state: ToolState, ctx: ToolContext): [ToolState, ToolResult];
  /** Esc: aktuellen Entwurf verwerfen, zurück in den Ruhezustand. */
  onCancel(state: ToolState): [ToolState, ToolResult];
  /** Backspace: letzten gesetzten Punkt zurücknehmen (mehrteilig). */
  onUndoPoint?(state: ToolState, ctx: ToolContext): [ToolState, ToolResult];
}
```

`ToolState` ist je Werkzeug ein Discriminated Union (Beispiel Wand in §4). Der
`ToolController` hält genau eine aktive `Tool`-Instanz + deren `ToolState` in
einem `useRef` und ist die einzige Stelle, die diese Methoden aufruft.

### 3.2 Vorschau-Geometrie (Rubber-Band)

```ts
/** Darstellbare Vorschau — dieselben Primitive wie der Plan, plus Marker. */
export interface ToolDraft {
  /** Vorschau-Primitive (gestrichelt/halbtransparent gezeichnet). */
  preview: Primitive[];
  /** Bereits gesetzte „feste" Stützpunkte (kleine Quadrate). */
  vertices: Vec2[];
  /** Optionaler Maß-/Winkel-Text am Cursor (z. B. "3.20 m, 90°"). */
  hud?: { at: Vec2; text: string };
}
```

Wichtig: Die Vorschau benutzt **dieselben `Primitive`-Typen** wie `generatePlan`
(`polygon | line | arc`). Damit kann der Vorschau-Layer mit derselben
`PrimitiveShape`-Renderlogik gezeichnet werden (DRY) — nur mit einer
Vorschau-CSS-Klasse (gestrichelt, Akzentfarbe). Für die Wand-Vorschau kann das
Werkzeug sogar `generatePlan` auf einem **temporären Projekt** (Original + die in
Bau befindliche Wand) aufrufen, um echte gehrte Poché live zu zeigen; in der
ersten Phase reicht eine einfache Bandvorschau (`wallCorners`).

### 3.3 Zustandsmaschine (allgemein)

Jedes Werkzeug ist eine kleine Maschine über `pointerdown → move → up`. Da
`PlanView` Pointer-Capture nutzt, kommen `move`/`up` zuverlässig an. Generisches
Muster:

```
 ruht ──pointerdown──> (Werkzeug setzt 1. Punkt / startet Drag)
   ▲                         │
   │                         ├──move──> Vorschau (rubber-band), kein Commit
   │                         │
   │      (mehrteilig)  pointerdown──> Punkt anhängen, Vorschau weiter
   │                         │
   └──Esc/Cancel─────────────┤
                             ▼
              Doppelklick/Enter/letzter Punkt ──> commit(project) ──> ruht
```

- **Klick-vs-Drag.** Wie heute in `PlanView` (`MARQUEE_THRESHOLD_PX`): unter der
  Schwelle ist es ein „Punkt setzen" (Klick), darüber ein Drag. Rechteck/Kreis/
  Linie unterstützen BEIDE Bedienarten: Zwei-Klick (Punkt, Punkt) ODER Drücken-
  Ziehen-Loslassen. Polyline/Wall sind reine Klickfolgen mit Abschluss per
  Doppelklick/Enter.
- **Esc** verwirft den Entwurf (`onCancel`) und bleibt im selben Werkzeug.
  Zweites Esc (im Ruhezustand) schaltet zurück auf `select`.
- **Rechtsklick** während eines aktiven Entwurfs = „abschließen/abbrechen"
  (CAD-üblich), KEIN Kontextmenü; im Ruhezustand öffnet Rechtsklick wie bisher
  das Plan-Kontextmenü.

### 3.4 Einbettung in PlanView (Pointer-Routing)

`PlanView` bekommt zwei neue Props:

```ts
interface PlanViewProps {
  // … bisherige Props …
  /** Aktives Werkzeug; "select" = bisheriges Verhalten. */
  activeTool?: ToolId;
  /**
   * Werkzeug-Treiber. PlanView ruft diese Callbacks mit fertig gesnappten
   * Modellpunkten auf und rendert den zurückgegebenen Draft als Overlay.
   */
  toolHandlers?: {
    onToolDown(p: ToolPointer): void;
    onToolMove(p: ToolPointer): void;
    onToolUp(p: ToolPointer): void;
    onToolDoubleClick(): void;
    /** liefert die zu zeichnende Vorschau (von App/Controller gehalten). */
    draft: ToolDraft | null;
  };
}
```

Routing in `onPointerDown` (Ergänzung der bestehenden Methode):

```
onPointerDown(e):
  if e.button === 1: → bestehender Pan (unverändert)
  if e.button === 0:
     if activeTool === "select": → bestehende Auswahl-/Marquee-Geste
     else:
        setPointerCapture
        p = makeToolPointer(e)            // raw → snap → point (§5)
        toolHandlers.onToolDown(p)
  if e.button === 2 (rechts):
     if activeTool !== "select" && entwurf aktiv: toolHandlers.onToolUp({button:2,…})  // abschließen
     else: bestehendes Kontextmenü
```

`onPointerMove`/`onPointerUp` analog: bei aktivem Zeichenwerkzeug an
`onToolMove`/`onToolUp` routen statt an Pan/Marquee. Der Cursor wird auf
`crosshair` gesetzt. `makeToolPointer` führt das Snapping aus (§5) und liefert den
fertigen `ToolPointer`.

Die **Snap-Marker** und der **Draft** werden als zusätzliche SVG-Gruppe NACH den
Plan-Primitiven, aber vor der Auswahl-Hervorhebung gerendert (immer obenauf,
`pointerEvents="none"`). Marker werden in viewBox-Einheiten über `toScreen`
positioniert (existiert bereits).

## 4. Werkzeug: Wand (Wall)

Das Wand-Werkzeug zeichnet eine **Achs-Polylinie**; jedes Segment wird zu einem
eigenständigen `Wall`-Element des aktiven `WallType` auf dem aktiven Geschoss.
Aufeinanderfolgende Segmente teilen sich einen Knoten → die bestehende
`computeJoins`-Verschneidung (in `generatePlan`) erzeugt automatisch saubere
Gehrungen an den Ecken. Kein zusätzlicher Join-Code nötig.

### 4.1 Zustand

```ts
type WallToolState =
  | { phase: "idle" }
  | {
      phase: "drawing";
      /** Bisher gesetzte Achs-Knoten (in Metern). */
      points: Vec2[];
      /** Aktuelle Cursor-Position (gesnappt) für die Rubber-Band-Vorschau. */
      cursor: Vec2 | null;
    };
```

### 4.2 Pseudocode

```
WallTool.onClick(state, p, ctx):
  if state.phase === "idle":
     return [{phase:"drawing", points:[p.point], cursor:p.point}, {draft: draftFor([p.point], p.point, ctx)}]
  else:  // weiteren Knoten anhängen
     pts = [...state.points, p.point]
     # Ortho/Snap haben p.point bereits ausgerichtet (§5).
     return [{phase:"drawing", points: pts, cursor: p.point}, {draft: draftFor(pts, p.point, ctx)}]

WallTool.onMove(state, p, ctx):
  if state.phase !== "drawing": return [state, {draft:null}]
  return [{...state, cursor:p.point}, {draft: draftFor(state.points, p.point, ctx)}]

WallTool.onCommitGesture(state, ctx):   // Doppelklick / Enter / Rechtsklick
  if state.phase !== "drawing" || state.points.length < 2:
     return [{phase:"idle"}, {draft:null, done:true}]
  pts = state.points
  return [{phase:"idle"}, {
     draft: null, done: true,
     commit: (proj) => appendWalls(proj, pts, ctx)
  }]

WallTool.onCancel(state):
  return [{phase:"idle"}, {draft:null, done:true}]

WallTool.onUndoPoint(state):
  if state.phase==="drawing" && state.points.length>1:
     return [{...state, points: state.points.slice(0,-1)}, {draft: …}]
  return [{phase:"idle"}, {draft:null}]
```

`draftFor` baut die Vorschau: feste Segmente zwischen `points` + ein „lebendes"
Segment `points[last] → cursor`. Pro Segment werden die vier Band-Eckpunkte über
`wallCorners(a, b, thickness)` (vorhanden) berechnet und als Vorschau-`polygon`
gezeichnet; zusätzlich ein HUD mit Länge `|b−a|` und Winkel. `thickness =
wallTypeThickness(getWallType(...))`.

### 4.3 Commit ins Modell

```
appendWalls(project, pts, ctx):
  newWalls = []
  for i in 0 .. pts.length-2:
     a = pts[i]; b = pts[i+1]
     if |b-a| < EPS: continue           // Null-Segmente überspringen
     newWalls.push({
        id: uniqueId("W"),               // siehe §8 (ID-Vergabe)
        type: "wall",
        floorId: ctx.level.id,           // aktives Geschoss
        categoryCode: ctx.defaultCategoryCode,   // §6
        start: a, end: b,
        wallTypeId: ctx.activeWallTypeId,
        height: ctx.level.floorHeight ?? 2.6,    // Geschosshöhe als Default
     })
  return { ...project, walls: [...project.walls, ...newWalls] }
```

Hinweise:
- **Höhe** erbt die lichte Geschosshöhe (`DrawingLevel.floorHeight`), Fallback 2.6 m.
- **Geschossbindung**: Das Wand-Werkzeug ist nur aktiv, wenn `level.kind === "floor"`
  (sonst gibt es keine Wände). In `drawing`-Ebenen ist das Wand-Werkzeug
  deaktiviert (nur 2D-Werkzeuge); siehe §6.
- Die Wicklung wird NICHT erzwungen — `leftNormal`-Konvention (CONVENTIONS.md) und
  `computeJoins` arbeiten richtungsunabhängig pro Segment.

## 5. Snapping

Snapping läuft in `makeToolPointer` (PlanView) BEVOR der Punkt an das Werkzeug
geht. Es prüft mehrere Snap-Quellen, wählt die nächstgelegene innerhalb der
Toleranz und liefert sowohl den gefangenen Punkt als auch eine **Marker-Art** für
die Bildschirmdarstellung.

### 5.1 Typen

```ts
export type SnapKind =
  | "endpoint"     // Wand-Achsenende, Polylinien-Knoten, Primitiv-Endpunkt
  | "midpoint"     // Mitte einer Strecke/Wandachse
  | "intersection" // Schnittpunkt zweier Achsen/Linien
  | "center"       // Kreis-/Bogenzentrum
  | "quadrant"     // Kreis-Quadrantenpunkte (0/90/180/270°)
  | "onEdge"       // nächster Punkt AUF einer Wandachse/Linie (Lot)
  | "grid"         // Rasterpunkt
  | "ortho"        // orthogonal/winkelrastriert zum vorigen Punkt
  | "extension";   // Verlängerung einer Achse (gestrichelte Hilfslinie)

export interface SnapResult {
  point: Vec2;          // gefangener Punkt (Meter)
  kind: SnapKind;
  /** Quell-Element (für Marker/Hilfslinien), optional. */
  refA?: Vec2;
  refB?: Vec2;
  /** Bildschirm-Distanz Cursor→Snap (px) — für die Auswahl des Besten. */
  distPx: number;
}

export interface SnapSettings {
  enabled: boolean;          // Master-Schalter (Ctrl invertiert temporär)
  endpoint: boolean;
  midpoint: boolean;
  intersection: boolean;
  center: boolean;
  onEdge: boolean;
  grid: boolean;
  gridSize: number;          // Rasterweite in Metern, z. B. 0.10
  ortho: boolean;            // Shift erzwingt zusätzlich
  angleStep: number;         // Winkelraster in Grad (z. B. 45)
  tolerancePx: number;       // Fangradius am Bildschirm, z. B. 10
}
```

### 5.2 Snap-Kandidaten sammeln

Quellen pro Geschoss (gefiltert auf sichtbare Kategorien, wie der Plan):

| Snap | Quelle |
|------|--------|
| endpoint | `wall.start`, `wall.end` aller sichtbaren Wände; Knoten bereits gesetzter Draft-Punkte; `Drawing2D`-Vertices |
| midpoint | Mitte jeder Wandachse und jedes 2D-Segments |
| intersection | paarweise `lineIntersect` der Wandachsen (nur Paare, deren Boxen sich am Cursor nähern) |
| center/quadrant | Kreise/Bögen aus `Drawing2D` |
| onEdge | Lotfußpunkt des Cursors auf jede nahe Wandachse/2D-Linie |
| grid | Rundung des Cursors auf `gridSize` |
| ortho | Ausrichtung relativ zum letzten Draft-Punkt (§5.4) |

Performance: Kandidaten werden je `move` neu erzeugt, aber **früh nach
Bildschirm-Distanz gefiltert** (nur Punkte innerhalb ~`2·tolerancePx`). Bei
großen Modellen kann eine grobe Bounding-Box-Vorauswahl je Wand vorgeschaltet
werden; in den ersten Phasen genügt lineares Scannen (Wandzahl ist klein).

### 5.3 Auswahl-Pseudocode

```
computeSnap(rawModel, ctx, draftPoints, lastPoint):
  if ctrl(): return null                       # Snap temporär aus
  s = ctx.snap
  tolM = s.tolerancePx / ctx.pxPerMeter        # px-Toleranz → Meter
  cands: SnapResult[] = []

  if s.endpoint:  cands += endpoints(...) filtered to within tolM
  if s.midpoint:  cands += midpoints(...)
  if s.intersection: cands += intersections(...)
  if s.center:    cands += centers/quadrants(...)
  if s.onEdge:    cands += perpendicularFeet(...)   # niedrigere Priorität

  # Punkt-Snaps haben Vorrang vor Linien-/Raster-Snaps:
  pick = argmin(cands, by distPx within tolM, tie-break by priority)
  if pick: rawModel = pick.point

  # Ortho/Winkelraster wirkt RELATIV zum letzten Punkt und ÜBERLAGERT:
  if (s.ortho || shift()) && lastPoint:
     rawModel = applyAngleConstraint(lastPoint, rawModel, s.angleStep)
     # Wenn dabei auch ein Punkt-Snap nahe der Ortho-Linie liegt → bevorzugen.

  if !pick && s.grid:
     g = snapToGrid(rawModel, s.gridSize)
     if dist(g, rawModel) within tolM: return {point:g, kind:"grid", …}

  return pick ?? null
```

Prioritätsreihenfolge bei gleichem Abstand: `endpoint > intersection > midpoint >
center/quadrant > onEdge > grid`. Ortho/Winkelraster ist eine **Projektion**, kein
Punkt-Kandidat: es verschiebt den (ggf. schon gesnappten) Punkt auf die nächste
erlaubte Richtung vom letzten Knoten.

### 5.4 Ortho / Winkelraster

```
applyAngleConstraint(from, to, stepDeg):
  d = to - from
  ang = atan2(d.y, d.x)
  k = round(ang / rad(stepDeg)) * rad(stepDeg)
  len = |d|
  return from + (cos(k), sin(k)) * len
```

Mit `stepDeg = 90` ist das klassisches Ortho (H/V); `45` erlaubt Diagonalen.
`Shift` erzwingt Ortho temporär unabhängig von der Einstellung.

### 5.5 Bildschirm-Marker

Pro aktivem Snap zeichnet `PlanView` ein Marker-Glyph an `toScreen(snap.point)`
(`pointerEvents="none"`, eigene CSS-Klassen, papierkonstante Größe via
non-scaling): 

- `endpoint` → kleines Quadrat ▫
- `midpoint` → Dreieck �△
- `intersection` → ✕
- `center` → ○, `quadrant` → ◇
- `onEdge` → ⟂-Glyph
- `grid` → feiner Punkt
- `ortho`/`extension` → zusätzlich eine **gestrichelte Hilfslinie** von `refA`
  (Bezugspunkt) zum Cursor

Marker erscheinen NUR während ein Zeichenwerkzeug aktiv ist. i18n-Tooltips/Status
(„Endpunkt", „Mittelpunkt", …) über `t('snap.endpoint')` etc.

## 6. Ebene, Kategorie und Stil neuer Elemente

Neue Elemente brauchen eine **Zeichnungsebene** (DrawingLevel) und eine
**Kategorie** (LayerCategory `code`) sowie — bei 2D-Primitiven — einen Stift/
Schraffur-Stil.

### 6.1 Zeichnungsebene (Ziel)

- Ziel ist **immer das aktive Geschoss/die aktive Zeichnungsebene** (`activeLevelId`
  in `App.tsx`). Wände nur auf `kind === "floor"`. 2D-Primitive (`Drawing2D`) auf
  jeder Ebene, also auch auf `kind === "drawing"` (freie 2D-Zeichnung).

### 6.2 Kategorie (categoryCode)

- Es gibt eine **aktive Kategorie** als View-State (`activeCategoryCode` in App,
  neu). Default beim Start: der Code der gewählten Wand-Kategorie (im Sample „20"
  Wände), bzw. die erste sichtbare Kategorie. Die Statusleiste zeigt heute schon
  die „aktive Ebene" (`activeLayerName`); diese wird künftig von `activeCategoryCode`
  gespeist statt nur aus der Auswahl abgeleitet.
- Neue Wände: `categoryCode = activeCategoryCode` (z. B. „20").
- Neue 2D-Primitive: ebenfalls `activeCategoryCode`. Sinnvoll ist eine eigene
  2D-/Hilfslinien-Kategorie (z. B. „90 Zeichnung"); diese wird über die
  Kategorie-Auswahl in der Statusleiste/Werkzeugleiste gesetzt.
- Die Kategorie liefert Farbe + Strichstärke (`LayerCategory.color`, `.lw`), genau
  wie `generatePlan` es heute für Wände via `categoryLwMap` nutzt.

### 6.3 Stift/Schraffur

- **Wände** erhalten KEINEN eigenen Stift — ihr Erscheinungsbild kommt aus dem
  `WallType` (Component → Hatch → LineStyle) und der Kategorie-`lw` (bestehender
  Pfad in `generatePlan`).
- **2D-Primitive** referenzieren optional einen `LineStyle` aus dem Line Manager
  (`activeLineStyleId`). Ohne expliziten Stil erben sie Farbe/Strichstärke aus der
  Kategorie (`color`, `lw`). Flächige 2D-Primitive (geschlossenes Rechteck/Kreis/
  Polyline) können optional eine Schraffur (`hatchId`) tragen.

## 7. Speicherung der 2D-Primitive: `Drawing2D`

2D-Geometrie wird als neues Modell-Element `Drawing2D` gespeichert — analog zu
`Wall`/`Door` ein semantisches Element, das beim Rendern abgeleitet wird (KEINE
vorab erzeugten Primitive im Modell). Damit bleibt die Architektur „Modell →
abgeleitete Ansicht" intakt.

### 7.1 Typ

```ts
/** Geometrie-Form eines 2D-Zeichenelements. */
export type Drawing2DGeom =
  | { shape: "line"; a: Vec2; b: Vec2 }
  | { shape: "polyline"; pts: Vec2[]; closed: boolean }
  | { shape: "rect"; min: Vec2; max: Vec2 }       // achsparallel
  | { shape: "circle"; center: Vec2; r: number }
  | {
      shape: "arc";
      center: Vec2;
      r: number;
      /** Start-/Endwinkel in Radiant (math. Konvention, CCW positiv). */
      a0: number;
      a1: number;
    }
  | { shape: "text"; at: Vec2; text: string; height: number; angle: number };

/** Ein freies 2D-Zeichenelement auf einer Zeichnungsebene. */
export interface Drawing2D {
  id: string;
  type: "drawing2d";
  /** Zeichnungsebene (Geschoss ODER freie 2D-Ebene). */
  levelId: string;
  /** Grafik-Kategorie (Ebene) — liefert Farbe/Strichstärke als Default. */
  categoryCode: string;
  geom: Drawing2DGeom;
  /** Optionaler Linienstil (Line Manager); sonst Kategorie-Default. */
  lineStyleId?: string;
  /** Optionale Schraffur für geschlossene Formen (Hatch Manager). */
  hatchId?: string;
  /** Optionale explizite Strichfarbe; sonst Kategorie-Farbe. */
  color?: string;
}
```

Ergänzung am `Project`:

```ts
export interface Project {
  // … bisher …
  drawings2d: Drawing2D[];   // NEU
}
export type Element = Wall | Door | Drawing2D;   // erweitert
```

`sampleProject` bekommt ein leeres `drawings2d: []`. Lösch-/Referenz-Regeln:
beim Löschen einer Zeichnungsebene werden auch deren `Drawing2D` entfernt (analog
zur bestehenden Wand-/Tür-Bereinigung in `deleteLevel`).

### 7.2 Ableitung in `generatePlan`

`generatePlan` rendert künftig zusätzlich die `Drawing2D` des Geschosses (gefiltert
wie Wände auf sichtbare Kategorien + `categoryDisplay`). Neue Funktion
`addDrawing2D(out, project, d, greyed, lwMm)`:

```
addDrawing2D(out, project, d):
  color  = d.color ?? categoryColor(d.categoryCode)
  weight = lineStyle(d.lineStyleId)?.weight ?? categoryLw(d.categoryCode)
  dash   = lineStyle(d.lineStyleId)?.dash ?? null
  switch d.geom.shape:
    "line":     out.push({kind:"line", a, b, cls:"draw2d", weightMm:weight, dash})
    "polyline": for each segment → line-Primitive (closed → Schluss-Segment)
    "rect":     vier Kanten als line-Primitive (oder polygon, falls hatchId)
    "circle":   → als zwei 180°-Bögen (arc-Primitive) ODER neues Primitiv (s. u.)
    "arc":      → arc-Primitive (center/from/to/r aus a0,a1)
    "text":     → neues text-Primitiv (s. u.)
```

Dabei wird, wo möglich, der **vorhandene** `Primitive`-Vorrat (`line`, `arc`,
`polygon`) wiederverwendet — die Strichstärke kommt in mm Papier (wie der Rest des
Plans), Farbe über eine CSS-Klasse oder ein neues optionales `color`-Feld am
`line`-Primitive.

Zwei `Primitive`-Erweiterungen sind nötig:

```ts
// kreisförmige Vollkurve (Kreis) — sonst muss man sie in zwei Bögen zerlegen:
| { kind: "circle"; center: Vec2; r: number; cls: string; weightMm: number;
    dash?: number[] | null; fill?: string; greyed?: boolean }
// Textmarke:
| { kind: "text"; at: Vec2; text: string; heightMm: number; angle: number;
    cls: string; color?: string; greyed?: boolean }
```

`PlanView.renderPrimitive` bekommt entsprechende `case`-Zweige (`<circle>`,
`<text>`). Text wird in **Papier-Millimetern** dimensioniert (Höhe → `mmToPx`,
non-scaling), damit die Schrifthöhe beim Zoomen papierkonstant bleibt (analog zu
Strichstärken in `plans-output.md`).

Das `arc`-Primitiv zeichnet heute nur Kurzbögen (≤180°, `large-arc=0`). Für
beliebige 2D-Bögen wird es um ein `largeArc`-Flag erweitert (aus `|a1−a0|`
berechnet); abwärtskompatibel (Default 0).

## 8. ID-Vergabe & Immutabilität

- Neue IDs über einen kleinen Helfer `uniqueId(prefix)` (z. B.
  `\`${prefix}-${Date.now()}-${counter++}\``), konsistent mit der bestehenden
  Praxis in `App.tsx` (`floor-${Date.now()}` usw.). Wand-Präfix „W", 2D-Präfix
  „dr2d".
- Alle Mutationen laufen über `setProject` immutabel (CONVENTIONS.md / App-Konvention).
  Der `commit(project)` eines Werkzeugs ist eine reine Funktion `Project →
  Project`; App ruft `setProject(prev => result.commit(prev))`.

## 9. App- und PlanView-Verdrahtung (konkret)

Neuer View-State in `App.tsx`:

```ts
const [activeTool, setActiveTool] = useState<ToolId>("select");
const [activeCategoryCode, setActiveCategoryCode] = useState<string>(/* erste Wand-Kat */);
const [activeWallTypeId, setActiveWallTypeId] = useState<string>(project.wallTypes[0].id);
const [activeLineStyleId, setActiveLineStyleId] = useState<string>(project.lineStyles[0].id);
const [snap, setSnap] = useState<SnapSettings>(DEFAULT_SNAP);
const toolStateRef = useRef<ToolState>(getTool(activeTool).init());
const [draft, setDraft] = useState<ToolDraft | null>(null);
```

Der `ToolController` ist eine kleine Hook/Klasse, die `toolStateRef` hält und die
`PlanView.toolHandlers` implementiert:

```
onToolDown(p): [st, res] = tool.onClick(toolStateRef.current, p, ctx)
               toolStateRef.current = st; setDraft(res.draft)
               if res.commit: setProject(res.commit)
               if res.done: toolStateRef.current = tool.init()
onToolMove(p): [st, res] = tool.onMove(...); toolStateRef.current=st; setDraft(res.draft)
onToolDoubleClick(): [st,res]=tool.onCommitGesture(...); apply commit/done; setDraft(null)
```

Keyboard (global, nur wenn ein Zeichenwerkzeug aktiv ist):
`Esc → onCancel`, `Enter → onCommitGesture`, `Backspace → onUndoPoint`. Beim
Wechsel von `activeLevelId`/`viewType` wird der laufende Entwurf verworfen (analog
zur bestehenden Auswahl-Bereinigung in den `useEffect`s).

`ctx` (ToolContext) wird in App via `useMemo` aus Project + aktiven Selektionen
gebaut und an PlanView/Controller gereicht.

### 9.1 Werkzeugleiste (TopBar)

Eine neue Werkzeug-Gruppe in der `TopBar` (links, vor den Ansichts-Toggles), als
i18n-beschriftete Icon-Buttons (`t('tool.select')`, `t('tool.wall')`, …). Aktiv-
Zustand hervorgehoben. Daneben: Auswahl des aktiven `WallType` (für Wand) und der
aktiven Kategorie/des Linienstils (Dropdowns), sowie Snap-Toggles (kleines
Snap-Menü mit Checkboxen je `SnapKind`, Grid-Größe, Winkelraster). Wand-/2D-
Werkzeuge werden je nach `level.kind` aktiviert/deaktiviert (Tooltip nennt den
Grund — wie die bestehenden disabled-Menüpunkte in `App.tsx`).

### 9.2 i18n-Keys (neu, Auszug)

```
tool.select / tool.wall / tool.line / tool.polyline / tool.rect /
tool.circle / tool.arc / tool.text
tool.wall.firstPoint / tool.wall.nextPoint / tool.wall.finish
snap.endpoint / snap.midpoint / snap.intersection / snap.center /
snap.quadrant / snap.onEdge / snap.grid / snap.ortho
snap.settings / snap.gridSize / snap.angleStep
status.activeWallType / status.activeCategory / status.activeTool
```

Alle sichtbaren Strings über `t(...)` (CONVENTIONS.md). Identifier bleiben englisch.

## 10. Übrige Werkzeuge (Kurzspezifikation)

| Werkzeug | Eingabe | Zustand | Commit |
|----------|---------|---------|--------|
| **Line** | 2 Punkte (Klick-Klick oder Drag) | `{a?}` | `Drawing2D{shape:"line"}` |
| **Polyline** | n Punkte, Abschluss Doppelklick/Enter; `closed` per „C" oder Klick auf Start | `{pts}` | `Drawing2D{shape:"polyline"}` |
| **Rectangle** | 2 Ecken (Drag oder Klick-Klick) | `{p0?}` | `Drawing2D{shape:"rect"}` (min/max sortiert) |
| **Circle** | Zentrum + Radius-Punkt | `{center?}` | `Drawing2D{shape:"circle"}` |
| **Arc** | 3 Punkte (Start, durch, Ende) ODER Zentrum-Start-Ende (Modus-Toggle) | `{p0?,p1?}` | `Drawing2D{shape:"arc"}` (a0/a1 aus Punkten) |
| **Text** | 1 Punkt → Inline-Eingabefeld (wie `InlineEditor` in App) | `{at?}` | `Drawing2D{shape:"text"}` |

Alle nutzen dasselbe `Tool`-Interface, dasselbe Snapping und denselben Draft-/
Commit-Pfad. Text öffnet beim Setzen des Ankerpunkts ein kleines Overlay-Eingabe-
feld (an `toClient(at)` positioniert) und committet bei Enter/Blur.

3-Punkt-Bogen → Zentrum: Umkreismittelpunkt der drei Punkte (Schnitt der
Mittelsenkrechten via `lineIntersect`), `r`, `a0/a1` aus Start-/Endwinkel; Drehsinn
aus dem mittleren Punkt.

## 11. Phasenplan

**Phase 1 — Gerüst + Select + Wall + Line (MVP).**
1. `ToolId`, `Tool`, `ToolContext`, `ToolPointer`, `ToolDraft`, `ToolResult`,
   `SnapResult`, `SnapSettings`, `Drawing2D`(+`Project.drawings2d`) als Typen.
2. `PlanView`: `toScreen`/`viewToModel`/`pxPerMeter` als Callbacks nach außen;
   Pointer-Routing für `activeTool !== "select"`; Draft-/Marker-Overlay-Rendering;
   Crosshair-Cursor.
3. `ToolController` + App-State (`activeTool`, `activeCategoryCode`,
   `activeWallTypeId`, `snap`) + Keyboard (Esc/Enter/Backspace).
4. **WallTool** voll funktionsfähig (Polylinie → Wände, Live-Band-Vorschau, HUD,
   Commit via `appendWalls`). Verschneidung kommt automatisch aus `computeJoins`.
5. **LineTool** als erstes 2D-Werkzeug; `generatePlan.addDrawing2D` für `line`;
   `Drawing2D`-Löschung beim Geschoss-Löschen.
6. **Snapping Stufe 1**: endpoint + grid + ortho (Shift), mit Bildschirm-Markern.
7. TopBar-Werkzeuggruppe (select/wall/line) + WallType-/Kategorie-Auswahl;
   i18n-Keys; Statusleiste zeigt aktives Werkzeug + Kategorie.
8. Verifizieren: `npx tsc -b`, `npm run build`, Screenshot via `scripts/probe.mjs`
   (Wand zeichnen, Gehrung prüfen).

**Phase 2 — Snapping vervollständigen + 2D-Grundformen.**
- Snap: midpoint, intersection, onEdge (Lot), extension-Hilfslinien, Winkelraster
  (45°), Snap-Einstellungsmenü in der TopBar.
- Werkzeuge: Polyline, Rectangle (inkl. optionaler Schraffur für geschlossene
  Formen). `Primitive`-Erweiterung nur für tatsächlich gebrauchte Formen.

**Phase 3 — Kurven + Text.**
- `Primitive` um `circle` (+ `arc` `largeArc`) und `text` erweitern; PlanView-
  Renderzweige; Text papierkonstant.
- Werkzeuge: Circle, Arc (3-Punkt), Text (Inline-Eingabe). Snap: center/quadrant.

**Phase 4 — Bearbeitung (Folge-Doku).**
- Grips/Editieren bestehender Elemente (Wand-Enden ziehen, 2D-Vertices verschieben),
  Verschieben/Kopieren/Rotieren der Auswahl, numerische Direkteingabe von
  Länge/Winkel im HUD. Baut auf demselben Snapping + Draft-Pfad auf. (Eigenes
  Design-Dokument; hier nur als Ausblick.)

## 12. Architektur-Garantien (Checkliste)

- Modell bleibt einzige Wahrheit; Werkzeuge schreiben nur `Project`, nie Plan-
  Primitive. Ansichten (Plan/3D) leiten ab.
- Alle Bezeichner englisch; alle UI-Texte über `t(...)`; Einheiten in Metern,
  Anzeige via `formatM`; Strichstärken/Texthöhen in mm Papier (non-scaling).
- Native-App-Verhalten: kein Browser-Kontextmenü während des Zeichnens; keine
  Textauswahl (außer Text-Eingabefeld); Pan/Zoom immer verfügbar.
- DRY: Vorschau nutzt dieselben `Primitive` + Renderlogik wie der Plan; Snapping
  und Commit-Pfad sind werkzeugübergreifend geteilt.
</content>
</invoke>