From d5f2ce465931b57d4acd204ac1834eb488b07c63 Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Tue, 3 Mar 2026 23:01:19 +0100 Subject: [PATCH] fix: Fabric.js v6 API compatibility + CLAUDE.md SSH commands - Replace setBackgroundImage() with backgroundImage property (v6 breaking change) - Replace setWidth/setHeight with Canvas constructor options - Fix opacity handler to use direct property access - Update CLAUDE.md: use git -C and docker compose -f instead of cd Co-Authored-By: Claude Opus 4.6 --- .claude/CLAUDE.md | 17 ++++---- .../FabricReconstructionCanvas.tsx | 41 ++++++++----------- 2 files changed, 27 insertions(+), 31 deletions(-) diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md index d75bf0b..51a5bd5 100644 --- a/.claude/CLAUDE.md +++ b/.claude/CLAUDE.md @@ -19,15 +19,17 @@ git push origin main && git push gitea main # 3. Auf Mac Mini pullen und Container neu bauen: -ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && git pull --no-rebase origin main" -ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && /usr/local/bin/docker compose build --no-cache && /usr/local/bin/docker compose up -d " +ssh macmini "git -C /Users/benjaminadmin/Projekte/breakpilot-lehrer pull --no-rebase origin main" +ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml build --no-cache " +ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml up -d " ``` ### SSH-Verbindung (fuer Docker/Tests) -```bash -ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && " -``` +**WICHTIG:** `cd` in SSH-Kommandos funktioniert NICHT zuverlaessig! Stattdessen: +- Git: `git -C /Users/benjaminadmin/Projekte/breakpilot-lehrer ` +- Docker: `/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml ` +- Logs: `/usr/local/bin/docker logs -f bp-lehrer-` --- @@ -170,10 +172,10 @@ breakpilot-lehrer/ ```bash # Lehrer-Services starten (Core muss laufen!) -ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && /usr/local/bin/docker compose up -d" +ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml up -d" # Einzelnen Service neu bauen -ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && /usr/local/bin/docker compose build --no-cache " +ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml build --no-cache " # Logs ssh macmini "/usr/local/bin/docker logs -f bp-lehrer-" @@ -183,6 +185,7 @@ ssh macmini "/usr/local/bin/docker ps --filter name=bp-lehrer" ``` **WICHTIG:** Docker-Pfad auf Mac Mini ist `/usr/local/bin/docker` (nicht im Standard-SSH-PATH). +**WICHTIG:** Immer `-f` mit vollem Pfad zur docker-compose.yml nutzen, `cd` in SSH funktioniert nicht! ### Frontend-Entwicklung diff --git a/admin-lehrer/components/ocr-pipeline/FabricReconstructionCanvas.tsx b/admin-lehrer/components/ocr-pipeline/FabricReconstructionCanvas.tsx index b5b1f4c..f99e8b8 100644 --- a/admin-lehrer/components/ocr-pipeline/FabricReconstructionCanvas.tsx +++ b/admin-lehrer/components/ocr-pipeline/FabricReconstructionCanvas.tsx @@ -100,34 +100,28 @@ export function FabricReconstructionCanvas({ const canvasEl = canvasElRef.current if (!canvasEl) return - const canvas = new fabricModule.Canvas(canvasEl, { - selection: true, - preserveObjectStacking: true, - }) as unknown as FabricCanvas - - fabricRef.current = canvas - - // Load background image + // Load background image first to get dimensions const imgUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped` - const bgImg = await new Promise((resolve, reject) => { - fabricModule.FabricImage.fromURL(imgUrl, { crossOrigin: 'anonymous' }) - .then((img: FabricImage) => resolve(img)) - .catch((err: Error) => reject(err)) - }) + const bgImg = await fabricModule.FabricImage.fromURL(imgUrl, { crossOrigin: 'anonymous' }) as FabricImage if (disposed) return const imgW = (bgImg.width || 800) * (bgImg.scaleX || 1) const imgH = (bgImg.height || 600) * (bgImg.scaleY || 1) - canvas.setWidth(imgW) - canvas.setHeight(imgH) - bgImg.set({ opacity: opacity / 100, selectable: false, evented: false } as Record) - canvas.setBackgroundImage(bgImg, () => { - canvas.renderAll() - }) + + const canvas = new fabricModule.Canvas(canvasEl, { + width: imgW, + height: imgH, + selection: true, + preserveObjectStacking: true, + backgroundImage: bgImg, + }) as unknown as FabricCanvas + + fabricRef.current = canvas + canvas.renderAll() // Add cell objects addCellObjects(canvas, fabricModule, cells, imgW, imgH) @@ -221,9 +215,8 @@ export function FabricReconstructionCanvas({ setOpacity(val) const canvas = fabricRef.current if (!canvas) return - // Update background image opacity - // Access internal property — Fabric stores bgImage on the canvas - const bgImg = (canvas as unknown as Record).backgroundImage as FabricObject | null + // Fabric v6: backgroundImage is a direct property on the canvas + const bgImg = (canvas as unknown as { backgroundImage?: FabricObject }).backgroundImage if (bgImg) { bgImg.set({ opacity: val / 100 }) canvas.renderAll() @@ -235,8 +228,8 @@ export function FabricReconstructionCanvas({ setZoom(val) const canvas = fabricRef.current if (!canvas) return - canvas.setZoom(val / 100) - canvas.renderAll() + ;(canvas as unknown as { zoom: number }).zoom = val / 100 + canvas.requestRenderAll() }, []) // ---- Undo / Redo via keyboard ----