photos fixed background

public/userarea/photos.js

@@ -475,6 +475,11 @@ document.addEventListener("DOMContentLoaded", function () {
                 );
                 return;
             }
+
+            if (canvas) {
+                canvas.dispose();
+            }
+
             canvas = new fabric.Canvas("collageCanvas", {
                 backgroundColor: "#fff",
                 selection: true,
@@ -583,6 +588,7 @@ document.addEventListener("DOMContentLoaded", function () {
             if (isCropping || isRemovingBackground) {
                 return;
             }
+
             const state = JSON.stringify(
                 canvas.toJSON([
                     "cornerColor",
@@ -590,12 +596,16 @@ document.addEventListener("DOMContentLoaded", function () {
                     "cornerSize",
                     "borderColor",
                     "transparentCorners",
+                    "backgroundImage",
                 ]),
             );
+
             history.push(state);
+
             if (history.length > maxHistory) {
                 history.shift();
             }
+
             updateButtons();
         }
 
@@ -603,10 +613,11 @@ document.addEventListener("DOMContentLoaded", function () {
             if (history.length <= 1) {
                 return;
             }
+
             history.pop();
             const previousState = history[history.length - 1];
+
             if (previousState) {
-                canvas.clear();
                 canvas.loadFromJSON(previousState, () => {
                     canvas.renderAll();
                     updateLayersPanel();
@@ -615,8 +626,11 @@ document.addEventListener("DOMContentLoaded", function () {
             } else {
                 console.warn("Nessuno stato precedente disponibile");
                 canvas.clear();
-                canvas.setBackgroundColor("#fff");
-                canvas.renderAll();
+                canvas.backgroundImage = null;
+                canvas.setBackgroundColor(
+                    "#fff",
+                    canvas.renderAll.bind(canvas),
+                );
                 updateLayersPanel();
                 updateButtons();
             }
@@ -909,6 +923,61 @@ document.addEventListener("DOMContentLoaded", function () {
             canvas.renderAll();
         }
 
+        function setCanvasBackground(imgPath) {
+            console.log("setCanvasBackground chiamata con:", imgPath);
+
+            if (!canvas) {
+                console.error("Canvas non inizializzato");
+                return;
+            }
+
+            fabric.Image.fromURL(
+                imgPath,
+                (img) => {
+                    const canvasWidth = canvas.getWidth();
+                    const canvasHeight = canvas.getHeight();
+
+                    const imgWidth = img.width;
+                    const imgHeight = img.height;
+
+                    if (!imgWidth || !imgHeight) {
+                        alert(
+                            "Impossibile leggere le dimensioni dell'immagine.",
+                        );
+                        return;
+                    }
+
+                    // Scale to cover: l'immagine copre tutto il canvas mantenendo il ratio
+                    const scale = Math.max(
+                        canvasWidth / imgWidth,
+                        canvasHeight / imgHeight,
+                    );
+
+                    img.set({
+                        originX: "left",
+                        originY: "top",
+                        scaleX: scale,
+                        scaleY: scale,
+                        left: (canvasWidth - imgWidth * scale) / 2,
+                        top: (canvasHeight - imgHeight * scale) / 2,
+                        selectable: false,
+                        evented: false,
+                        hasControls: false,
+                        hasBorders: false,
+                        excludeFromExport: false,
+                    });
+
+                    canvas.setBackgroundImage(img, () => {
+                        canvas.requestRenderAll();
+                        saveCanvasState();
+                        updateLayersPanel();
+                        updateButtons();
+                    });
+                },
+                { crossOrigin: "anonymous" },
+            );
+        }
+
         const addToCanvasBtn = document.getElementById("addToCanvasBtn");
         if (addToCanvasBtn) {
             addToCanvasBtn.addEventListener("click", () => {
@@ -948,6 +1017,32 @@ document.addEventListener("DOMContentLoaded", function () {
             });
         }
 
+        const setBackgroundBtn = document.getElementById("setBackgroundBtn");
+        if (setBackgroundBtn) {
+            setBackgroundBtn.addEventListener("click", () => {
+                const checkboxes = document.querySelectorAll(
+                    ".photo-checkbox:checked",
+                );
+
+                if (checkboxes.length === 0) {
+                    alert("Seleziona una foto da usare come sfondo!");
+                    return;
+                }
+
+                if (checkboxes.length > 1) {
+                    alert("Seleziona una sola foto per lo sfondo!");
+                    return;
+                }
+
+                const imgPath = checkboxes[0].getAttribute("data-path");
+                setCanvasBackground(imgPath);
+
+                checkboxes.forEach((cb) => {
+                    cb.checked = false;
+                });
+            });
+        }
+
         const saveCollageBtn = document.getElementById("saveCollageBtn");
         if (saveCollageBtn) {
             saveCollageBtn.addEventListener("click", async () => {