705 lines
26 KiB
Markdown
705 lines
26 KiB
Markdown
# Bauplan – web-cad-neu
|
||
|
||
**Komplett funktionierende 2D-CAD Software für Event-Bestuhlungspläne**
|
||
Basierend auf: Pflichtenheft v4 (633 Zeilen) + UI-Mockup Iteration 9
|
||
|
||
---
|
||
|
||
## Technologie-Stack
|
||
|
||
| Schicht | Technologie | Lizenz |
|
||
|---------|-------------|--------|
|
||
| Frontend | React 18 + TypeScript + Vite | MIT |
|
||
| Rendering | Canvas 2D + rbush (R-Tree) | MIT |
|
||
| CRDT/Sync | Yjs + y-websocket | MIT |
|
||
| Backend | Node 20 + TypeScript + Fastify | MIT |
|
||
| Datenbank | SQLite (better-sqlite3) | Public Domain |
|
||
| DXF | dxf-parser + dxf-writer | MIT |
|
||
| PDF | pdf-lib | MIT |
|
||
| Auth | bcrypt | Apache |
|
||
| KI | OpenAI-kompatibler Endpoint (user-provided) | – |
|
||
| Deployment | Docker + Coolify | Open Source |
|
||
|
||
---
|
||
|
||
## Phasen-Übersicht
|
||
|
||
| Phase | Titel | Anforderungen | Status |
|
||
|-------|-------|---------------|--------|
|
||
| 0 | Projekt-Setup & Config | – | ✅ Angelegt |
|
||
| 1 | Core Types & Canvas Engine | F-CAD-01, F-CAD-04 | ⬜ |
|
||
| 2 | UI-Gerüst nach Mockup | F-UI-01 bis F-UI-08 | ⬜ |
|
||
| 3 | Zeichen-Tools | F-CAD-01, F-CAD-11, F-CAD-12 | ⬜ |
|
||
| 4 | Bearbeitungs-Tools | F-CAD-02, F-CAD-07, F-CAD-08 | ⬜ |
|
||
| 5 | Auswahl & Snap | F-CAD-04, F-CAD-07 | ⬜ |
|
||
| 6 | Layer-System | F-LAY-01 bis F-LAY-06 | ⬜ |
|
||
| 7 | Block-Bibliothek | F-LIB-01 bis F-LIB-07 | ⬜ |
|
||
| 8 | Bestuhlungs-Tools | F-EVT-01 bis F-EVT-05 | ⬜ |
|
||
| 9 | Bemaßung & Text | F-CAD-03, F-CAD-11 | ⬜ |
|
||
| 10 | Hintergrund & Grundriss | F-BG-01 bis F-BG-04 | ⬜ |
|
||
| 11 | Undo/Redo & History | F-CAD-09, F-CAD-10 | ⬜ |
|
||
| 12 | Command Line | F-CAD-05, F-UI-04 | ⬜ |
|
||
| 13 | Import/Export | F-IMP-01 bis F-IMP-04, F-EXP-01 bis F-EXP-04 | ⬜ |
|
||
| 14 | Backend & REST-API | F-INT-01, F-INT-02, F-INT-04 | ⬜ |
|
||
| 15 | Auth & Benutzerverwaltung | F-AUTH-01 bis F-AUTH-05 | ⬜ |
|
||
| 16 | Multi-User & Kollaboration | F-MU-01 bis F-MU-07 | ⬜ |
|
||
| 17 | KI Copilot | F-AI-01 bis F-AI-15 | ⬜ |
|
||
| 18 | Plugin-System | F-EXT-01 bis F-EXT-08 | ⬜ |
|
||
| 19 | Theme & Responsive | F-UI-05, F-UI-06, F-UI-10 | ⬜ |
|
||
| 20 | Docker & Deployment | NF-DEP-01 bis NF-DEP-05 | ⬜ |
|
||
| 21 | Tests & QA | NF-PERF-01 bis NF-PERF-05 | ⬜ |
|
||
|
||
---
|
||
|
||
## Phase 0: Projekt-Setup & Config ✅
|
||
|
||
**Ziel:** Saubere Projektstruktur, Config-Dateien, keine Duplikate
|
||
|
||
**Dateien:**
|
||
- `package.json` (root, frontend, backend)
|
||
- `tsconfig.json` (frontend, backend)
|
||
- `vite.config.ts`
|
||
- `docker-compose.yml` (eine Datei, nicht 5)
|
||
- `Dockerfile` (frontend, backend)
|
||
- `nginx.conf`
|
||
- `.gitignore`
|
||
- `README.md`
|
||
- `frontend/index.html`
|
||
- `frontend/src/types/cad.types.ts` – Alle Core Types
|
||
|
||
**Erledigt:** ✅ Struktur, Config, Types, Canvas Core (SpatialIndex, ZoomPanController, LayerManager)
|
||
|
||
---
|
||
|
||
## Phase 1: Core Types & Canvas Engine
|
||
|
||
**Anforderungen:** F-CAD-01 (Grundelemente), F-CAD-04 (Raster & Fang)
|
||
|
||
**Dateien:**
|
||
- `frontend/src/canvas/RenderEngine.ts` – Haupt-Renderer mit Canvas 2D, Viewport-Culling, Layer-basiertem Rendering, Grid
|
||
- `frontend/src/canvas/SpatialIndex.ts` – ✅ Angelegt (rbush R-Tree)
|
||
- `frontend/src/canvas/ZoomPanController.ts` – ✅ Angelegt (Zoom, Pan, screenToWorld, worldToScreen, zoomFit)
|
||
- `frontend/src/canvas/LayerManager.ts` – ✅ Angelegt (CRUD, Visibility, Lock, Active Layer)
|
||
- `frontend/src/interaction/SnapEngine.ts` – Snap-to-Grid, Endpoint, Midpoint, Intersection, Ortho, Polar
|
||
- `frontend/src/interaction/SelectionEngine.ts` – Einzelauswahl, Fenster-Auswahl, Kreuz-Auswahl
|
||
|
||
**RenderEngine muss:**
|
||
- Canvas 2D Context verwalten
|
||
- requestAnimationFrame Render-Loop
|
||
- Zoom/Pan Transform anwenden
|
||
- Grid rendern (minor + major lines)
|
||
- Viewport-Culling via SpatialIndex
|
||
- Elemente nach Layer-Reihenfolge rendern
|
||
- Element-Typen rendern: line, circle, arc, rect, polygon, polyline, text, dimension, block_instance, chair
|
||
- Selection-Highlights rendern
|
||
- Snap-Points visuell hervorheben
|
||
- 50.000+ Elemente bei 60fps
|
||
|
||
---
|
||
|
||
## Phase 2: UI-Gerüst nach Mockup
|
||
|
||
**Anforderungen:** F-UI-01 bis F-UI-08
|
||
|
||
**Referenz:** `/a0/usr/workdir/web-cad-neu/mockup/editor.html` (Iteration 9)
|
||
|
||
**Komponenten:**
|
||
- `frontend/src/App.tsx` – Root, ThemeProvider, Layout-Container
|
||
- `frontend/src/main.tsx` – React Entry Point
|
||
- `frontend/src/styles/theme.css` – Design Tokens (CSS Custom Properties), Dark/Light Theme
|
||
- `frontend/src/styles/layout.css` – Layout-Regeln aus Mockup layout.css (1298 Zeilen)
|
||
- `frontend/src/styles/styles.css` – Base Styles aus Mockup styles.css (195 Zeilen)
|
||
- `frontend/src/components/Topbar.tsx` – Logo, Projektname, Saved-Badge, Undo/Redo, Version, Share, Theme, Hilfe, Sprache, Avatar
|
||
- `frontend/src/components/RibbonBar.tsx` – 6 Tabs (Start, Einfügen, Format, Ansicht, Extras, KI) mit Ribbon-Groups
|
||
- `frontend/src/components/LeftSidebar.tsx` – 4 Sektionen (Auswählen, Zeichnen, Bearbeiten, Bestuhlung), 20 Tools als Buttons mit SVG-Icons
|
||
- `frontend/src/components/CanvasArea.tsx` – Canvas-Container, Koordinaten-Display, View-Tabs (2D/ISO/Front/Top)
|
||
- `frontend/src/components/RightSidebar.tsx` – 4 Tabs: Properties, Layer (Tree), Bibliothek (Tree), KI Copilot
|
||
- `frontend/src/components/PropertiesPanel/PropertiesPanel.tsx` – Geometrie, Darstellung, Block-Info
|
||
- `frontend/src/components/LayerPanel.tsx` – Tree-Struktur mit Ordnern, Visibility-Toggle, Lock-Toggle, Add-Button
|
||
- `frontend/src/components/BlockLibrary.tsx` – Tree-Struktur, Suchfeld, Kategorie-Filter, Draggable Leafs
|
||
- `frontend/src/components/KICopilot.tsx` – Chat-UI, Schnell-Aktionen, Voice-Input, Send-Button
|
||
- `frontend/src/components/CommandLine.tsx` – History + Input mit Autovervollständigung
|
||
- `frontend/src/components/StatusBar.tsx` – SNAP/ORTHO/POLAR/GRID, Koordinaten, Layer, Werkzeug, Online
|
||
- `frontend/src/components/TreeView.tsx` – Generische Tree-Komponente (collapsible, draggable)
|
||
- `frontend/src/components/MobileDrawers.tsx` – Hamburger-Drawer + Right-Tab-Bar + Slide-in (≤768px)
|
||
|
||
**UI muss exakt dem Mockup entsprechen:**
|
||
- Topbar → Ribbon → (LeftSidebar | CanvasArea | RightSidebar) → CommandLine → StatusBar
|
||
- Inter/JetBrains Mono Fonts
|
||
- CSS Custom Properties für Theme
|
||
- SVG Icons aus Mockup übernehmen
|
||
- Responsive: Desktop ≥1280px, Mobile Drawers ≤768px
|
||
|
||
---
|
||
|
||
## Phase 3: Zeichen-Tools
|
||
|
||
**Anforderungen:** F-CAD-01, F-CAD-11, F-CAD-12
|
||
|
||
**Dateien:**
|
||
- `frontend/src/tools/Tool.ts` – Base Tool Interface (onMouseDown, onMouseMove, onMouseUp, onKeyDown, render)
|
||
- `frontend/src/tools/ToolManager.ts` – Active Tool, Tool-Switching, Tool-Events
|
||
- `frontend/src/tools/drawing/LineTool.ts` – Linie (L): 2 Punkte → Linie
|
||
- `frontend/src/tools/drawing/PolylineTool.ts` – Polylinie (PL): Multiple Punkte → Polyline
|
||
- `frontend/src/tools/drawing/RectTool.ts` – Rechteck (REC): 2 Punkte → Rechteck
|
||
- `frontend/src/tools/drawing/CircleTool.ts` – Kreis (C): Center + Radius
|
||
- `frontend/src/tools/drawing/ArcTool.ts` – Bogen (A): Center + StartAngle + EndAngle
|
||
- `frontend/src/tools/drawing/PolygonTool.ts` – Polygon: Multiple Punkte → Geschlossen
|
||
- `frontend/src/tools/drawing/TextTool.ts` – Text (T): Position + Text + FontSize
|
||
- `frontend/src/tools/drawing/DimensionTool.ts` – Bemaßung (DIM): 2 Punkte + Maßlinie
|
||
- `frontend/src/tools/drawing/HatchTool.ts` – Schraffur (H): Fläche + Muster
|
||
- `frontend/src/tools/drawing/index.ts` – Export aller Tools
|
||
|
||
**Jedes Tool:**
|
||
- Mouse-Events (down/move/up) verarbeiten
|
||
- Snap-Engine nutzen
|
||
- Preview während des Zeichnens
|
||
- Element auf aktiver Ebene erstellen
|
||
- Undo-Historie aktualisieren
|
||
|
||
---
|
||
|
||
## Phase 4: Bearbeitungs-Tools
|
||
|
||
**Anforderungen:** F-CAD-02, F-CAD-07, F-CAD-08
|
||
|
||
**Dateien:**
|
||
- `frontend/src/tools/modification/MoveTool.ts` – Verschieben (M): Basispunkt + Ziel
|
||
- `frontend/src/tools/modification/CopyTool.ts` – Kopieren (CO): Basispunkt + Ziel
|
||
- `frontend/src/tools/modification/RotateTool.ts` – Rotieren (RO): Basispunkt + Winkel
|
||
- `frontend/src/tools/modification/ScaleTool.ts` – Skalieren (SC): Basispunkt + Faktor
|
||
- `frontend/src/tools/modification/MirrorTool.ts` – Spiegeln (MI): Spiegelachse
|
||
- `frontend/src/tools/modification/TrimTool.ts` – Trimmen (TR): Schneiden an Grenzelementen
|
||
- `frontend/src/tools/modification/ExtendTool.ts` – Verlängern (EX): Bis zu Grenzelement
|
||
- `frontend/src/tools/modification/FilletTool.ts` – Abrunden (F): Radius + 2 Elemente
|
||
- `frontend/src/tools/modification/OffsetTool.ts` – Versatz (O): Parallelverschiebung
|
||
- `frontend/src/tools/modification/DeleteTool.ts` – Löschen (E)
|
||
- `frontend/src/tools/modification/index.ts` – Export
|
||
|
||
**Gruppierung:**
|
||
- `frontend/src/tools/GroupTool.ts` – Gruppe erstellen/auflösen
|
||
- Gruppen können verschachtelt werden
|
||
- Gruppen in Bibliothek speicherbar
|
||
|
||
---
|
||
|
||
## Phase 5: Auswahl & Snap
|
||
|
||
**Anforderungen:** F-CAD-04, F-CAD-07
|
||
|
||
**Dateien:**
|
||
- `frontend/src/interaction/SelectionEngine.ts` – Einzelauswahl (Klick), Fenster-Auswahl (Links-Rechts), Kreuz-Auswahl (Rechts-Links), Quick-Select (Eigenschafts-basiert)
|
||
- `frontend/src/interaction/SnapEngine.ts` – Snap-to-Grid, Endpoint, Midpoint, Intersection, Ortho-Modus, Polar-Tracking
|
||
- `frontend/src/interaction/index.ts` – Export
|
||
|
||
**Snap-Engine:**
|
||
- Snap-Modi umschaltbar (F3)
|
||
- Visuelle Hervorhebung der Snap-Punkte
|
||
- Ortho-Modus (F8): Nur horizontal/vertikal
|
||
- Polar-Tracking: Winkel-Snaps (0°, 30°, 45°, 60°, 90°)
|
||
|
||
---
|
||
|
||
## Phase 6: Layer-System
|
||
|
||
**Anforderungen:** F-LAY-01 bis F-LAY-06
|
||
|
||
**Dateien:**
|
||
- `frontend/src/canvas/LayerManager.ts` – ✅ Angelegt, erweitern um: Baumstruktur (parentId), Filter, Duplizieren
|
||
- `frontend/src/components/LayerPanel.tsx` – Tree-Widget mit Parent-Child, Visibility/Lock/Color/LineType/Transparency pro Ebene
|
||
- `frontend/src/components/TreeView.tsx` – Generische Tree-Komponente
|
||
|
||
**Funktionen:**
|
||
- Ebenen als Baumstruktur (Parent-Child)
|
||
- Eigenschaften pro Ebene: Name, Visibility, Lock, Color, LineType, Transparency
|
||
- Operationen: Erstellen, Löschen, Umbenennen, Verschieben im Baum, Duplizieren
|
||
- Element-Zuordnung: Drag-and-Drop zwischen Ebenen
|
||
- Aktive Ebene markieren
|
||
- Ebenen-Filter nach Eigenschaften
|
||
|
||
---
|
||
|
||
## Phase 7: Block-Bibliothek
|
||
|
||
**Anforderungen:** F-LIB-01 bis F-LIB-07
|
||
|
||
**Dateien:**
|
||
- `frontend/src/components/BlockLibrary.tsx` – Tree mit Ordnern, Suchfeld, Kategorie-Filter, Draggable Leafs
|
||
- `frontend/src/services/blockService.ts` – Block CRUD, SVG-Import, Block-Definition vs. Referenz
|
||
- `frontend/src/types/cad.types.ts` – BlockDefinition Type ✅
|
||
|
||
**Funktionen:**
|
||
- Bibliothek als Baumstruktur (Ordner + Unterordner)
|
||
- SVG-Import in Bibliothek
|
||
- Gruppen als Blöcke speichern
|
||
- Drag-and-Drop in Zeichenbereich
|
||
- Block-Bearbeitung (Skalieren, Rotieren, Spiegeln)
|
||
- Block-Verwaltung (Umbenennen, Duplizieren, Löschen, Verschieben)
|
||
- Block-Definition vs. Referenz (Änderung an Definition → alle Instanzen aktualisieren)
|
||
|
||
---
|
||
|
||
## Phase 8: Bestuhlungs-Tools
|
||
|
||
**Anforderungen:** F-EVT-01 bis F-EVT-05
|
||
|
||
**Dateien:**
|
||
- `frontend/src/tools/drawing/ChairTool.ts` – Einzelner Stuhl
|
||
- `frontend/src/tools/drawing/SeatingRowTool.ts` – Reihen-Bestuhlung (R): Reihe mit Anzahl, Abstand, Ausrichtung
|
||
- `frontend/src/tools/drawing/SeatingBlockTool.ts` – Block-Bestuhlung (B): Rechteck-Bereich mit Reihen, Spalten, Abständen
|
||
- `frontend/src/tools/drawing/TableTool.ts` – Tisch (TAB)
|
||
- `frontend/src/tools/drawing/StageTool.ts` – Bühne (S)
|
||
- `frontend/src/tools/drawing/SeatingTemplateTool.ts` – Bestuhlungs-Vorlagen
|
||
|
||
**Funktionen:**
|
||
- Reihen-Bestuhlung: Anzahl, Abstand, Ausrichtung konfigurierbar
|
||
- Block-Bestuhlung: Reihen × Spalten, Abstände, Versatz
|
||
- Stuhl-Typ aus Bibliothek wählbar
|
||
- Parameter im Nachhinein änderbar
|
||
- Einzelne Stühle hinzufügen/entfernen/verschieben
|
||
- Automatische Zählung (pro Reihe, Block, Gesamt)
|
||
|
||
---
|
||
|
||
## Phase 9: Bemaßung & Text
|
||
|
||
**Anforderungen:** F-CAD-03, F-CAD-11
|
||
|
||
**Dateien:**
|
||
- `frontend/src/tools/drawing/DimensionTool.ts` – Lineare, winkelige, radiale Bemaßung
|
||
- `frontend/src/tools/drawing/TextTool.ts` – Einzel- und Mehrzeilentext
|
||
- `frontend/src/tools/drawing/LeaderTool.ts` – Leaders (MLEADER)
|
||
- `frontend/src/tools/drawing/RevCloudTool.ts` – Revision Clouds (REVCLOUD)
|
||
|
||
**Bemaßung:**
|
||
- Maßberechnung basierend auf Hintergrund-Maßstab
|
||
- Werte in realen Maßeinheiten (m/cm)
|
||
- Lineare, winkelige, radiale Bemaßung
|
||
|
||
---
|
||
|
||
## Phase 10: Hintergrund & Grundriss
|
||
|
||
**Anforderungen:** F-BG-01 bis F-BG-04
|
||
|
||
**Dateien:**
|
||
- `frontend/src/services/backgroundService.ts` – Laden, Positionieren, Skalieren von Hintergrundbildern
|
||
- `frontend/src/components/BackgroundImport.tsx` – Upload-Dialog
|
||
|
||
**Funktionen:**
|
||
- PNG, JPG, SVG, PDF-Seite als Hintergrund laden
|
||
- Maßstab definieren (1:100, Referenzstrecke)
|
||
- Hintergrund verschieben, rotieren, skalieren
|
||
- Sichtbarkeit ein/aus
|
||
|
||
---
|
||
|
||
## Phase 11: Undo/Redo & History
|
||
|
||
**Anforderungen:** F-CAD-09, F-CAD-10
|
||
|
||
**Dateien:**
|
||
- `frontend/src/history/HistoryManager.ts` – Undo/Redo Stack mit beliebig vielen Schritten
|
||
- `frontend/src/history/index.ts` – Export
|
||
|
||
**Funktionen:**
|
||
- Jede Operation erzeugt History-Eintrag
|
||
- Undo (Strg+Z) / Redo (Strg+Y)
|
||
- Historie einsehbar
|
||
- Kopieren zwischen Dateien via Zwischenablage
|
||
|
||
---
|
||
|
||
## Phase 12: Command Line
|
||
|
||
**Anforderungen:** F-CAD-05, F-UI-04
|
||
|
||
**Dateien:**
|
||
- `frontend/src/components/CommandLine.tsx` – History + Input mit Autovervollständigung
|
||
- `frontend/src/services/commandRegistry.ts` – Befehls-Registry (L, PL, C, REC, M, CO, RO, SC, MI, TR, O, DIM, H, BESTUHLUNG, etc.)
|
||
|
||
**Funktionen:**
|
||
- Befehlseingabe via Tastatur (AutoCAD-Style)
|
||
- Autovervollständigung
|
||
- Befehls-History
|
||
- Tastatur-Shortcuts (L, C, M, CO, RO, SC, MI, PL, H, etc.)
|
||
|
||
---
|
||
|
||
## Phase 13: Import/Export
|
||
|
||
**Anforderungen:** F-IMP-01 bis F-IMP-04, F-EXP-01 bis F-EXP-04
|
||
|
||
**Dateien:**
|
||
- `frontend/src/services/importService.ts` – DXF, SVG, PDF, JSON Import
|
||
- `frontend/src/services/exportService.ts` – DXF, SVG, PDF, PNG, JSON Export
|
||
- `frontend/src/services/dxfParser.ts` – DXF Parsing (dxf-parser library)
|
||
- `frontend/src/services/dxfWriter.ts` – DXF Writing
|
||
- `frontend/src/services/pdfExport.ts` – PDF mit pdf-lib
|
||
|
||
**Formate:**
|
||
- Import: DXF, SVG, PDF (optional DWG via libredwg), JSON
|
||
- Export: DXF, SVG, PDF, PNG, JSON
|
||
- JSON enthält alle Daten (Layers, Elements, Blocks, Background)
|
||
|
||
---
|
||
|
||
## Phase 14: Backend & REST-API
|
||
|
||
**Anforderungen:** F-INT-01, F-INT-02, F-INT-04, F-INT-07
|
||
|
||
**Dateien:**
|
||
- `backend/src/index.ts` – Fastify Server Start
|
||
- `backend/src/server.ts` – Server-Konfiguration (CORS, Static, WebSocket)
|
||
- `backend/src/database/DatabaseInterface.ts` – Abstrahierte DB-Schicht
|
||
- `backend/src/database/SqliteAdapter.ts` – SQLite Implementation
|
||
- `backend/src/database/schema.sql` – Schema: users, projects, drawings, blocks, layers, elements, settings
|
||
- `backend/src/database/migrations.ts` – Migration-Runner
|
||
- `backend/src/routes/index.ts` – Route-Registration
|
||
- `backend/src/routes/projects.ts` – CRUD für Projekte
|
||
- `backend/src/routes/drawings.ts` – CRUD für Zeichnungen
|
||
- `backend/src/routes/layers.ts` – CRUD für Layer
|
||
- `backend/src/routes/elements.ts` – CRUD für Elemente
|
||
- `backend/src/routes/blocks.ts` – CRUD für Blöcke
|
||
- `backend/src/routes/export.ts` – Export-Endpunkte
|
||
- `backend/src/routes/import.ts` – Import-Endpunkte
|
||
- `backend/src/routes/settings.ts` – App-Settings (KI-Config, etc.)
|
||
- `backend/src/routes/users.ts` – User-Verwaltung
|
||
|
||
**API-First:**
|
||
- Alle Funktionen über REST-API erreichbar
|
||
- OpenAPI/Swagger Dokumentation
|
||
- Headless-Modus (nur API, keine UI)
|
||
- Webhook-Support
|
||
|
||
---
|
||
|
||
## Phase 15: Auth & Benutzerverwaltung
|
||
|
||
**Anforderungen:** F-AUTH-01 bis F-AUTH-05, NF-SEC-01, NF-SEC-02
|
||
|
||
**Dateien:**
|
||
- `backend/src/auth/AuthService.ts` – Register, Login, Password-Reset, Session-Management
|
||
- `backend/src/routes/auth.ts` – Auth-Endpunkte
|
||
- `frontend/src/contexts/AuthContext.tsx` – Auth-State Management
|
||
- `frontend/src/pages/Login.tsx` – Login-Seite
|
||
- `frontend/src/pages/Register.tsx` – Registrierung
|
||
- `frontend/src/pages/Dashboard.tsx` – Projekt-Übersicht
|
||
|
||
**Funktionen:**
|
||
- E-Mail/Passwort-Login (bcrypt)
|
||
- Passwort-Reset via E-Mail
|
||
- Session-Management (HTTP-only Cookies, CSRF-Schutz)
|
||
- Rollen: Planer, Betrachter, Admin, Gast
|
||
- Gast-Zugänge für spezifische Pläne
|
||
|
||
---
|
||
|
||
## Phase 16: Multi-User & Kollaboration
|
||
|
||
**Anforderungen:** F-MU-01 bis F-MU-07
|
||
|
||
**Dateien:**
|
||
- `backend/src/websocket/yjsServer.ts` – Yjs WebSocket Server mit Persistenz
|
||
- `frontend/src/crdt/YjsDocument.ts` – Yjs Document Wrapper
|
||
- `frontend/src/crdt/WebSocketProvider.ts` – WebSocket-Verbindung
|
||
- `frontend/src/crdt/AwarenessManager.ts` – Nutzer-Anwesenheit, Cursor-Positionen
|
||
- `frontend/src/crdt/useYjsBinding.ts` – React Hook für Yjs-Binding
|
||
|
||
**Funktionen:**
|
||
- Echtzeit-Kollaboration (Yjs CRDT)
|
||
- Konfliktfreie Bearbeitung
|
||
- Nutzer-Anwesenheit (Avatar/Farbe)
|
||
- Cursor-Anzeige anderer Nutzer
|
||
- Berechtigungs-System (Rollen)
|
||
- Offline-Unterstützung (IndexedDB)
|
||
- Versionshistorie
|
||
|
||
---
|
||
|
||
## Phase 17: KI Copilot
|
||
|
||
**Anforderungen:** F-AI-01 bis F-AI-15
|
||
|
||
**Dateien:**
|
||
- `backend/src/routes/ai.ts` – KI-Proxy-Endpoint (leitet an OpenAI-kompatiblen API weiter)
|
||
- `frontend/src/services/aiService.ts` – KI-Client (sendet an Backend, Backend leitet weiter)
|
||
- `frontend/src/services/functionRegistry.ts` – CAD-Function-Registry (alle CAD-Operationen als Functions)
|
||
- `frontend/src/components/KICopilot.tsx` – Chat-UI, Schnell-Aktionen, Voice-Input
|
||
|
||
**Architektur:**
|
||
```
|
||
User Input → Backend → OpenAI-kompatibler API-Endpoint
|
||
→ LLM generiert Function Call (z.B. draw_line(x1,y1,x2,y2))
|
||
→ Function-Registry führt Function aus
|
||
→ Canvas aktualisiert sich
|
||
→ Ergebnis an LLM → Bestätigung an User
|
||
```
|
||
|
||
**Functions (registriert):**
|
||
- draw_line, draw_circle, draw_rect, draw_arc, draw_polyline, draw_text, draw_dimension
|
||
- move, copy, rotate, scale, mirror, trim, offset, delete
|
||
- create_layer, delete_layer, set_active_layer, toggle_layer_visibility
|
||
- insert_block, create_block, delete_block
|
||
- seating_row, seating_block, count_seats
|
||
- export_dxf, export_svg, export_pdf, import_dxf, import_svg
|
||
- undo, redo
|
||
- get_context (aktuelle Zeichnung, Selektion, Layer, Zoom)
|
||
|
||
**Guardrails:**
|
||
- Destruktive Operationen erfordern Bestätigung
|
||
- Function-Validation vor Ausführung
|
||
- Safety-Checks (nicht "Lösche alles" ohne Bestätigung)
|
||
|
||
**Context Injection:**
|
||
- Aktuelle Zeichnung (Summary, nicht alle Elemente)
|
||
- Selektion
|
||
- Aktive Ebene
|
||
- Zoom-Bereich
|
||
- Maßstab
|
||
|
||
---
|
||
|
||
## Phase 18: Plugin-System
|
||
|
||
**Anforderungen:** F-EXT-01 bis F-EXT-08
|
||
|
||
**Dateien:**
|
||
- `frontend/src/services/pluginRegistry.ts` – Plugin-Registration, Lifecycle, Isolation
|
||
- `frontend/src/types/plugin.types.ts` – Plugin-Manifest, Tool-API Interface
|
||
- `frontend/src/components/PluginSettings.tsx` – Plugin-Verwaltung UI
|
||
|
||
**Funktionen:**
|
||
- Plugin-Manifest (Name, Version, Dependencies)
|
||
- Tool-API (Zeichnen, Bearbeiten, Bibliothek, Export, UI)
|
||
- Plugin-Isolation (try-catch, kein Core-Crash)
|
||
- Aktivieren/Deaktivieren ohne Neustart
|
||
- Plugin-UI-Integration (Ribbon-Tabs, Panels, Dialoge)
|
||
- Laufzeit-Laden
|
||
|
||
---
|
||
|
||
## Phase 19: Theme & Responsive
|
||
|
||
**Anforderungen:** F-UI-05, F-UI-06, F-UI-10
|
||
|
||
**Dateien:**
|
||
- `frontend/src/contexts/ThemeContext.tsx` – Dark/Light Theme Toggle
|
||
- `frontend/src/styles/theme.css` – CSS Custom Properties für beide Themes
|
||
- Mobile Drawers aus Mockup übernehmen
|
||
|
||
**Funktionen:**
|
||
- Dark- und Light-Mode
|
||
- Responsive: Desktop ≥1280px (alle Panels)
|
||
- Mobile ≤768px: Hamburger-Drawer + Right-Tab-Bar + Slide-in Drawers
|
||
- Voice Input (Web Speech API, optional)
|
||
|
||
---
|
||
|
||
## Phase 20: Docker & Deployment
|
||
|
||
**Anforderungen:** NF-DEP-01 bis NF-DEP-05
|
||
|
||
**Dateien:**
|
||
- `docker-compose.yml` – ✅ Angelegt (frontend + backend)
|
||
- `frontend/Dockerfile` – ✅ Angelegt (Node build + nginx)
|
||
- `backend/Dockerfile` – ✅ Angelegt (Node + tsx)
|
||
- `docker-compose.coolify.yml` – Coolify-spezifische Config
|
||
|
||
**Deployment:**
|
||
- 2 Container: Frontend (nginx) + Backend (Node)
|
||
- SQLite als Volume
|
||
- WebSocket-Proxy via Traefik
|
||
- SSL via Let's Encrypt
|
||
- Env-Variablen: API_URL, API_KEY, DB_PATH, JWT_SECRET
|
||
- Coolify-kompatibel
|
||
|
||
---
|
||
|
||
## Phase 21: Tests & QA
|
||
|
||
**Anforderungen:** NF-PERF-01 bis NF-PERF-05, NF-SEC-01 bis NF-SEC-05
|
||
|
||
**Tests:**
|
||
- `frontend/src/tools/__tests__/` – Tool-Tests (Zeichnen, Bearbeiten)
|
||
- `backend/src/routes/__tests__/` – API-Tests
|
||
- `backend/src/auth/__tests__/` – Auth-Tests
|
||
- Performance-Benchmark: 50.000 Elemente bei 60fps
|
||
- Lighthouse-Score ≥ 80
|
||
- Security-Tests: Input-Validierung, CSRF, Auth
|
||
|
||
---
|
||
|
||
## Build-Reihenfolge
|
||
|
||
```
|
||
Phase 0 ✅ Setup
|
||
Phase 1 ⬜ Canvas Engine (RenderEngine, SnapEngine, SelectionEngine)
|
||
Phase 2 ⬜ UI-Gerüst (alle Komponenten nach Mockup)
|
||
Phase 3 ⬜ Zeichen-Tools (Line, Circle, Rect, Arc, Polyline, Polygon, Text, Dimension, Hatch)
|
||
Phase 4 ⬜ Bearbeitungs-Tools (Move, Copy, Rotate, Scale, Mirror, Trim, Extend, Fillet, Offset, Delete)
|
||
Phase 5 ⬜ Auswahl & Snap (Selection, Snap-Modes, Ortho, Polar)
|
||
Phase 6 ⬜ Layer-System (Tree, Eigenschaften, Operationen)
|
||
Phase 7 ⬜ Block-Bibliothek (Tree, SVG-Import, Drag-and-Drop, Definition/Referenz)
|
||
Phase 8 ⬜ Bestuhlungs-Tools (Reihe, Block, Tisch, Bühne, Zählung)
|
||
Phase 9 ⬜ Bemaßung & Text (Linear, Winkel, Radial, MTEXT, Leader, RevCloud)
|
||
Phase 10 ⬜ Hintergrund (Laden, Maßstab, Positionieren)
|
||
Phase 11 ⬜ Undo/Redo (History-Stack, Zwischenablage)
|
||
Phase 12 ⬜ Command Line (Befehlseingabe, Autovervollständigung, Shortcuts)
|
||
Phase 13 ⬜ Import/Export (DXF, SVG, PDF, PNG, JSON)
|
||
Phase 14 ⬜ Backend & REST-API (Fastify, SQLite, CRUD, OpenAPI)
|
||
Phase 15 ⬜ Auth (Login, Register, Rollen, Sessions)
|
||
Phase 16 ⬜ Multi-User (Yjs, WebSocket, Cursor, Awareness, Offline)
|
||
Phase 17 ⬜ KI Copilot (Function Calling, Context, Guardrails)
|
||
Phase 18 ⬜ Plugin-System (Manifest, API, Isolation, UI)
|
||
Phase 19 ⬜ Theme & Responsive (Dark/Light, Mobile Drawers)
|
||
Phase 20 ⬜ Docker & Deployment (Coolify, SSL, Env)
|
||
Phase 21 ⬜ Tests & QA (Unit, Integration, Performance, Security)
|
||
```
|
||
|
||
---
|
||
|
||
## Verzeichnis-Struktur (Final)
|
||
|
||
```
|
||
web-cad-neu/
|
||
├── package.json
|
||
├── docker-compose.yml
|
||
├── docker-compose.coolify.yml
|
||
├── .gitignore
|
||
├── README.md
|
||
├── BAUPLAN.md
|
||
├── mockup/ # UI-Referenz (Iteration 9)
|
||
│ ├── editor.html
|
||
│ └── assets/
|
||
├── frontend/
|
||
│ ├── package.json
|
||
│ ├── tsconfig.json
|
||
│ ├── vite.config.ts
|
||
│ ├── Dockerfile
|
||
│ ├── nginx.conf
|
||
│ ├── index.html
|
||
│ └── src/
|
||
│ ├── main.tsx
|
||
│ ├── App.tsx
|
||
│ ├── types/
|
||
│ │ ├── cad.types.ts
|
||
│ │ └── plugin.types.ts
|
||
│ ├── canvas/
|
||
│ │ ├── RenderEngine.ts
|
||
│ │ ├── SpatialIndex.ts
|
||
│ │ ├── ZoomPanController.ts
|
||
│ │ └── LayerManager.ts
|
||
│ ├── interaction/
|
||
│ │ ├── SnapEngine.ts
|
||
│ │ ├── SelectionEngine.ts
|
||
│ │ └── index.ts
|
||
│ ├── tools/
|
||
│ │ ├── Tool.ts
|
||
│ │ ├── ToolManager.ts
|
||
│ │ ├── drawing/
|
||
│ │ │ ├── LineTool.ts
|
||
│ │ │ ├── PolylineTool.ts
|
||
│ │ │ ├── RectTool.ts
|
||
│ │ │ ├── CircleTool.ts
|
||
│ │ │ ├── ArcTool.ts
|
||
│ │ │ ├── PolygonTool.ts
|
||
│ │ │ ├── TextTool.ts
|
||
│ │ │ ├── DimensionTool.ts
|
||
│ │ │ ├── HatchTool.ts
|
||
│ │ │ ├── ChairTool.ts
|
||
│ │ │ ├── SeatingRowTool.ts
|
||
│ │ │ ├── SeatingBlockTool.ts
|
||
│ │ │ ├── TableTool.ts
|
||
│ │ │ ├── StageTool.ts
|
||
│ │ │ └── index.ts
|
||
│ │ └── modification/
|
||
│ │ ├── MoveTool.ts
|
||
│ │ ├── CopyTool.ts
|
||
│ │ ├── RotateTool.ts
|
||
│ │ ├── ScaleTool.ts
|
||
│ │ ├── MirrorTool.ts
|
||
│ │ ├── TrimTool.ts
|
||
│ │ ├── ExtendTool.ts
|
||
│ │ ├── FilletTool.ts
|
||
│ │ ├── OffsetTool.ts
|
||
│ │ ├── DeleteTool.ts
|
||
│ │ └── index.ts
|
||
│ ├── components/
|
||
│ │ ├── Topbar.tsx
|
||
│ │ ├── RibbonBar.tsx
|
||
│ │ ├── LeftSidebar.tsx
|
||
│ │ ├── CanvasArea.tsx
|
||
│ │ ├── RightSidebar.tsx
|
||
│ │ ├── CommandLine.tsx
|
||
│ │ ├── StatusBar.tsx
|
||
│ │ ├── LayerPanel.tsx
|
||
│ │ ├── BlockLibrary.tsx
|
||
│ │ ├── KICopilot.tsx
|
||
│ │ ├── TreeView.tsx
|
||
│ │ ├── MobileDrawers.tsx
|
||
│ │ ├── PropertiesPanel/
|
||
│ │ │ └── PropertiesPanel.tsx
|
||
│ │ └── pages/
|
||
│ │ ├── Login.tsx
|
||
│ │ ├── Register.tsx
|
||
│ │ └── Dashboard.tsx
|
||
│ ├── services/
|
||
│ │ ├── api.ts
|
||
│ │ ├── blockService.ts
|
||
│ │ ├── importService.ts
|
||
│ │ ├── exportService.ts
|
||
│ │ ├── backgroundService.ts
|
||
│ │ ├── aiService.ts
|
||
│ │ ├── functionRegistry.ts
|
||
│ │ ├── commandRegistry.ts
|
||
│ │ └── pluginRegistry.ts
|
||
│ ├── history/
|
||
│ │ ├── HistoryManager.ts
|
||
│ │ └── index.ts
|
||
│ ├── crdt/
|
||
│ │ ├── YjsDocument.ts
|
||
│ │ ├── WebSocketProvider.ts
|
||
│ │ ├── AwarenessManager.ts
|
||
│ │ └── useYjsBinding.ts
|
||
│ ├── contexts/
|
||
│ │ ├── AuthContext.tsx
|
||
│ │ └── ThemeContext.tsx
|
||
│ └── styles/
|
||
│ ├── theme.css
|
||
│ ├── layout.css
|
||
│ └── styles.css
|
||
├── backend/
|
||
│ ├── package.json
|
||
│ ├── tsconfig.json
|
||
│ ├── Dockerfile
|
||
│ └── src/
|
||
│ ├── index.ts
|
||
│ ├── server.ts
|
||
│ ├── auth/
|
||
│ │ ├── AuthService.ts
|
||
│ │ └── authPlugin.ts
|
||
│ ├── database/
|
||
│ │ ├── DatabaseInterface.ts
|
||
│ │ ├── SqliteAdapter.ts
|
||
│ │ ├── schema.sql
|
||
│ │ └── migrations.ts
|
||
│ ├── routes/
|
||
│ │ ├── index.ts
|
||
│ │ ├── auth.ts
|
||
│ │ ├── projects.ts
|
||
│ │ ├── drawings.ts
|
||
│ │ ├── layers.ts
|
||
│ │ ├── elements.ts
|
||
│ │ ├── blocks.ts
|
||
│ │ ├── export.ts
|
||
│ │ ├── import.ts
|
||
│ │ ├── settings.ts
|
||
│ │ ├── users.ts
|
||
│ │ └── ai.ts
|
||
│ └── websocket/
|
||
│ └── yjsServer.ts
|
||
└── specs/
|
||
└── requirements.md # Kopie des Pflichtenhefts
|
||
```
|