From 9edbe952825ff87c2a476091f4452cf675d398d1 Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Wed, 8 Apr 2026 16:09:46 +0200
Subject: [PATCH] fix: Querformat-Bilder hochskalieren, Fabric-Overlay
 positioniert exakt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- renderImage skaliert auch hoch wenn img kleiner als Container (vorher
  blieb rechts leerer Platz bei kleinen Querformat-Handyfotos)
- max-width auf pdf-canvas entfernt (drawing-buffer != display size hat
  das Fabric-Overlay verrutschen lassen)
- resizeFabricToCanvas nutzt getBoundingClientRect für pixelgenaue
  Positionierung über requestAnimationFrame

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
---
 css/bericht.css |  4 +++-
 js/editor.js    | 31 ++++++++++++++++++++++---------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/css/bericht.css b/css/bericht.css
index c80f416..0ccc497 100644
--- a/css/bericht.css
+++ b/css/bericht.css
@@ -107,7 +107,9 @@
     padding: 10px; border-radius: 4px;
     display: flex; align-items: flex-start; justify-content: center;
 }
-#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); max-width: 100%; height: auto; }
+/* WICHTIG: kein max-width auf #pdf-canvas, sonst weicht display- von buffer-size ab
+   und das Fabric-Overlay rutscht weg. Stattdessen rendert JS auf passende Größe. */
+#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); display: block; }
 #fabric-canvas.fabric-overlay { position: absolute !important; pointer-events: auto; }
 
 .bericht-page-note { margin-top: 8px; }
diff --git a/js/editor.js b/js/editor.js
index cd04d1b..892d884 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -127,11 +127,12 @@
         await new Promise((res) => {
             const img = new Image();
             img.onload = () => {
-                // Auf Container-Breite skalieren statt fixe 1200px
+                // Immer auf Container-Breite skalieren — auch hochskalieren wenn
+                // die Quelle kleiner ist (sonst entsteht rechts leerer Platz).
                 const target = getTargetCanvasWidth();
-                const ratio = img.width > target ? target / img.width : 1;
-                pdfCanvas.width = img.width * ratio;
-                pdfCanvas.height = img.height * ratio;
+                const ratio = target / img.width;
+                pdfCanvas.width = Math.round(img.width * ratio);
+                pdfCanvas.height = Math.round(img.height * ratio);
                 const ctx = pdfCanvas.getContext('2d');
                 ctx.clearRect(0, 0, pdfCanvas.width, pdfCanvas.height);
                 ctx.drawImage(img, 0, 0, pdfCanvas.width, pdfCanvas.height);
@@ -144,13 +145,25 @@
     }
 
     function resizeFabricToCanvas() {
+        // Die tatsächlich angezeigte Größe (nicht der Drawing-Buffer) bestimmt
+        // die Position des Fabric-Overlays. Wir setzen das Fabric-Canvas auf
+        // die Buffer-Größe (für scharfe Annotationen) und positionieren es
+        // exakt über dem sichtbaren PDF-Canvas.
         fabricCanvas.setWidth(pdfCanvas.width);
         fabricCanvas.setHeight(pdfCanvas.height);
-        // Overlay positionieren
-        const fc = document.getElementById('fabric-canvas');
-        fc.style.position = 'absolute';
-        fc.style.left = pdfCanvas.offsetLeft + 'px';
-        fc.style.top  = pdfCanvas.offsetTop  + 'px';
+
+        // Warten bis der Browser die neue Größe applied hat
+        requestAnimationFrame(() => {
+            const rect = pdfCanvas.getBoundingClientRect();
+            const wrap = pdfCanvas.parentElement;
+            const wrapRect = wrap.getBoundingClientRect();
+            const fc = document.getElementById('fabric-canvas');
+            fc.style.position = 'absolute';
+            fc.style.left   = (rect.left - wrapRect.left + wrap.scrollLeft) + 'px';
+            fc.style.top    = (rect.top  - wrapRect.top  + wrap.scrollTop)  + 'px';
+            fc.style.width  = pdfCanvas.clientWidth  + 'px';
+            fc.style.height = pdfCanvas.clientHeight + 'px';
+        });
     }
 
     async function loadPageMeta() {