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() + export interface DrawCanvasHandle { getCurrentSelection: () => Selection | null resetSelection: () => void @@ -232,25 +235,39 @@ export default forwardRef(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