From 36aad9539aaf1eae80f8cfc924676188fbb6cd9d Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Thu, 9 Apr 2026 15:28:45 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20wei=C3=9Fe=20Seiten=20nach=20Reload=20?=
 =?UTF-8?q?=E2=80=94=20bgImage=20nicht=20mehr=20als=20blob-URL=20serialisi?=
 =?UTF-8?q?eren=20[deploy]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die fabric.Image der Quell-Bilder wurde mit toJSON([bgImage]) inkl. ihrer
blob:-URL gespeichert. Nach Reload ist die Blob-URL ungültig, fabric kann
das Bild nicht holen → weißer Canvas.

Fix: bgImage-Objekte beim Speichern aus dem JSON rausfiltern. Beim Laden
immer rerenderCurrent() aufrufen (frisches Quellbild aus page_image.php),
dann nur die Overlay-Shapes via enlivenObjects restoren.
---
 js/editor.js | 45 +++++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/js/editor.js b/js/editor.js
index d3e409c..476d111 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -195,32 +195,34 @@
         pctx.fillRect(0, 0, pdfCanvas.width, pdfCanvas.height);
         resizeFabricToCanvas();
 
-        let jsonHasObjects = false;
-        let jsonHasBgImage = false;
+        // Quellbild IMMER frisch laden — gespeicherte bgImage-Objekte haben eine
+        // blob:-URL, die nach Reload ungültig ist.
+        await rerenderCurrent();
+
+        // Overlay-Shapes (Pfeile, Text, Rechtecke, …) aus JSON wiederherstellen,
+        // aber ohne bgImage/type=image-Einträge (Legacy-Cleanup).
         if (loadedFabricJson) {
             try {
                 const parsed = (typeof loadedFabricJson === 'string') ? JSON.parse(loadedFabricJson) : loadedFabricJson;
-                jsonHasObjects = parsed && Array.isArray(parsed.objects) && parsed.objects.length > 0;
-                jsonHasBgImage = jsonHasObjects && parsed.objects.some(o => o.bgImage === true || (o.type === 'image'));
-                if (jsonHasObjects) {
-                    await new Promise((res) => {
-                        fabricCanvas.loadFromJSON(parsed, () => {
-                            fabricCanvas.renderAll();
-                            res();
+                if (parsed && Array.isArray(parsed.objects) && parsed.objects.length > 0) {
+                    const bg = fabricCanvas.getObjects().find(o => o.bgImage === true);
+                    const overlays = parsed.objects.filter(o => !o.bgImage && o.type !== 'image');
+                    if (overlays.length > 0) {
+                        await new Promise((res) => {
+                            fabric.util.enlivenObjects(overlays, (objs) => {
+                                objs.forEach(o => fabricCanvas.add(o));
+                                if (bg) bg.sendToBack();
+                                fabricCanvas.requestRenderAll();
+                                res();
+                            });
                         });
-                    });
-                    applyTool();
+                        applyTool();
+                    }
                 }
             } catch (e) {
                 console.warn('Fabric-JSON restore fehlgeschlagen:', e);
             }
         }
-
-        // Wenn kein Bild im JSON (alter Bericht vor Phase 6) ODER nie gespeichert:
-        // Quellbild frisch als Fabric-Image laden und hinter die existierenden Shapes legen
-        if (!jsonHasBgImage) {
-            await rerenderCurrent();
-        }
     }
 
     /**
@@ -767,7 +769,14 @@
         const fd = new FormData();
         fd.append('token', cfg.token);
         fd.append('pageid', currentPageId);
-        fd.append('fabric_json', JSON.stringify(fabricCanvas.toJSON(['bgImage'])));
+        // WICHTIG: bgImage-Objekte nicht serialisieren — ihre src ist eine
+        // blob:-URL, die nach Reload ungültig ist und zum weißen Canvas führt.
+        // Das Quellbild wird beim Laden frisch aus page_image.php geholt.
+        const jsonOut = fabricCanvas.toJSON(['bgImage']);
+        if (jsonOut && Array.isArray(jsonOut.objects)) {
+            jsonOut.objects = jsonOut.objects.filter(o => !o.bgImage);
+        }
+        fd.append('fabric_json', JSON.stringify(jsonOut));
         fd.append('note', getNoteValue() || '');
         fd.append('rotation', currentPageRotation);