From 01812ce9544c143b0596deac7c80e5dcc6d72ee9 Mon Sep 17 00:00:00 2001
From: admin <tim.leikauf@gmail.com>
Date: Sat, 25 Apr 2026 11:34:06 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Canvas-Gr=C3=B6=C3=9Fe=20und=20Bild-Cach?=
 =?UTF-8?q?ing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bilder werden im Speicher gecacht (kein erneutes Laden beim Zurücknavigieren)
- Größenberechnung nutzt canvas-area statt canvas-frame als Referenz
  → Bilder werden nicht mehr bei jedem Bildwechsel kleiner
- Bild füllt den verfügbaren Bereich so groß wie möglich aus

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/DrawCanvas.tsx | 39 ++++++++++++++++++--------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/DrawCanvas.tsx b/frontend/src/components/DrawCanvas.tsx
index 500254c..7207ca2 100644
--- a/frontend/src/components/DrawCanvas.tsx
+++ b/frontend/src/components/DrawCanvas.tsx
@@ -7,6 +7,9 @@ import {
 } from 'react'
 import type { ObjectMeta, Point, Selection } from '../types'
 
+// Module-level cache: URL → fertig geladenes Image-Objekt
+const imageCache = new Map<string, HTMLImageElement>()
+
 export interface DrawCanvasHandle {
   getCurrentSelection: () => Selection | null
   resetSelection: () => void
@@ -232,25 +235,39 @@ export default forwardRef<DrawCanvasHandle, Props>(function DrawCanvas(
 
   // Load image when src changes
   useEffect(() => {
+    const canvas = canvasRef.current
     if (!imageSrc) {
       imageRef.current = null
-      const canvas = canvasRef.current
       const ctx = canvas?.getContext('2d')
       if (canvas && ctx) ctx.clearRect(0, 0, canvas.width, canvas.height)
       return
     }
+    if (!canvas) return
+
+    const applyImage = (img: HTMLImageElement) => {
+      if (!canvasRef.current) return
+      imageRef.current = img
+      // canvas-frame (parentElement) wraps canvas — go up to canvas-area for real available space
+      const area = canvas.parentElement?.parentElement
+      const availW = (area?.clientWidth ?? 900) - 56
+      const availH = (area?.clientHeight ?? 700) - 56
+      const scale = Math.min(availW / img.width, availH / img.height, 1)
+      displayScale.current = isFinite(scale) && scale > 0 ? scale : 1
+      canvas.width = Math.round(img.width * displayScale.current)
+      canvas.height = Math.round(img.height * displayScale.current)
+      redraw()
+    }
+
+    const cached = imageCache.get(imageSrc)
+    if (cached) {
+      applyImage(cached)
+      return
+    }
+
     const img = new Image()
     img.onload = () => {
-      const canvas = canvasRef.current
-      if (!canvas) return
-      imageRef.current = img
-      const maxW = (canvas.parentElement?.clientWidth ?? 816) - 16
-      const maxH = window.innerHeight * 0.7
-      const scale = Math.min(maxW / img.width, maxH / img.height, 1)
-      displayScale.current = isFinite(scale) && scale > 0 ? scale : 1
-      canvas.width = img.width * displayScale.current
-      canvas.height = img.height * displayScale.current
-      redraw()
+      imageCache.set(imageSrc, img)
+      applyImage(img)
     }
     img.onerror = () => console.error('Fehler beim Laden des Bildes:', imageSrc)
     img.src = imageSrc