Whiteboard URL-Referenzen

Ziel: Nextcloud Whiteboard von Base64-Bildern auf URL-Referenzen umstellen — 50+ Bilder ohne Browser-OOM.

Problem

Das Nextcloud Whiteboard (Excalidraw) speichert jedes importierte Bild als Base64-Data-URL inline im Board-JSON. Ein 4000×3000px Bild belegt ~50 MB RAM. Ab 3 Bildern crasht Chrome mit Out-of-Memory.

Lösung

Statt Base64 wird das Bild als Datei in Nextcloud gespeichert. Im Board-JSON steht nur eine URL. Der Browser lädt Vollbilder nur bei Bedarf (lazy, beim Reinzoomen) — ähnlich wie Miro.

Projektstruktur

whiteboard-url-refs/
├── README.md
├── docs/
│   ├── 01-reference.md              ← Recap aller bestehenden Patches
│   └── 02-implementierungsplan.md   ← 4-Phasen-Plan + 23 Test-Gates
├── src/
│   ├── README.md                    ← Source-Herkunft dokumentiert
│   ├── whiteboard-source/           ← TypeScript-Source (aus upstream)
│   │   ├── hooks/useFiles.ts        ← 🔑 File-Handler (hier dataURL→URL)
│   │   ├── constants/excalidraw.ts  ← Excalidraw Init-State
│   │   ├── main.ts                  ← Entry Point
│   │   └── vite.config.ts           ← Build-Config
│   └── whiteboard-built/            ← Live JS-Bundles (gepatcht)
│       ├── NcSelect-*.chunk.mjs     ← Whiteboard→Excalidraw Bridge
│       ├── percentages-*.chunk.mjs  ← Excalidraw Core Constants
│       ├── image-blob-reduce-*.mjs  ← Resize-Library
│       └── whiteboard-*-patch.js    ← Unsere bestehenden Patches
├── upstream/
│   └── excalidraw/
│       └── constants.ts             ← DEFAULT_IMAGE_OPTIONS (1440px/4MB)
├── patches/                         ← (kommende JS-Patches)
└── test-scripts/
    ├── generate-test-images.sh      ← Testbilder 500–8000px
    └── verify-phase1.sh            ← CORS + WebDAV prüfen

Phasen

Phase	Beschreibung	Status
0	Baseline: RAM messen, bestehende Patches verifizieren	⬜
1	CORS + WebDAV: Ordner anlegen, Cross-Origin erlauben	⬜
2	Import-Handler: Bild als Datei speichern, Thumbnail generieren	⬜
3	Rendering/LOD: Lazy-Loading, Viewport-Culling	⬜
4	Migration: Bestehende Boards konvertieren, Stress-Test	⬜

Jede Phase hat ein 🚦 GATE — alle Checks müssen grün sein, bevor die nächste beginnt.

Setup

git clone http://192.168.178.94:3000/Hermes/whiteboard-url-refs.git