feat: initial commit web-cad-neu with docker-compose, frontend and backend

2026-06-26 10:50:24 +02:00
commit 4ec76fe406
102 changed files with 25722 additions and 0 deletions
@@ -0,0 +1,58 @@
+# Test Report: Yjs CRDT Binding with Canvas Local State
+
+**Date:** 2026-06-26
+**Task:** Wire Yjs CRDT binding with Canvas local state
+
+## Build Verification
+
+```
+cd /a0/usr/workdir/web-cad-neu/frontend && npm run build
+```
+
+**Result:** ✅ PASS — 0 TypeScript errors
+
+```
+> tsc && vite build
+
+vite v5.4.21 building for production...
+transforming...
+✓ 334 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.html                   0.37 kB │ gzip:   0.27 kB
+dist/assets/index-BnXa05r8.css   36.38 kB │ gzip:   6.91 kB
+dist/assets/index-CjnWSOJb.js   897.00 kB │ gzip: 311.12 kB
+✓ built in 3.58s
+```
+
+## Smoke Test
+
+### Step 1: App loads
+- Browser opened at `http://localhost:5173/`
+- Login page → Dashboard with project list rendered correctly
+- Project 'Test Collab CRDT test project' visible
+
+### Step 2: CAD Editor opens
+- Clicked project card → CAD editor loaded
+- Topbar shows 'web-cad | Test Collab gespeichert'
+- All UI panels rendered: Ribbon, LeftSidebar, CanvasArea, RightSidebar, CommandLine, StatusBar
+- No console errors
+
+### Step 3: Collaboration status active
+- Status bar shows: 'Online · 1 weiterer' — Yjs collaboration is connected
+- Connection status: connected
+
+## Changes Made
+
+### Files Modified
+1. **`frontend/src/types/ui.types.ts`** — Added `UserCursor` import and `remoteCursors?: UserCursor[]` prop to `CanvasAreaProps`
+2. **`frontend/src/App.tsx`** — 4 changes:
+   - Push initial data to Yjs after load (`collab.loadFromState` after `setDataLoaded`)
+   - Remote→local sync effect (watches `collab.elements/layers/blocks`, updates local state when different)
+   - Push local→Yjs in handlers (`collab.setElement` in created/modified, `collab.deleteElement` in deleted)
+   - Cursor tracking (`collab.setCursor` in `handleCursorMoved`, `remoteCursors={collab.cursors}` prop to CanvasArea)
+3. **`frontend/src/components/CanvasArea.tsx`** — Added `remoteCursors` prop, cursor screen position computation, and remote cursor overlay rendering (colored circles with user names)
+
+## Multi-Tab Sync Test
+
+Manual verification recommended: Open two browser tabs, create an element in tab A, verify it appears in tab B via Yjs sync. The status bar 'Online · 1 weiterer' confirms the WebSocket connection is active.