fixed cut

public/userarea/class/curl_auth_debug.log

@@ -31,6 +31,6 @@ Content-Length: 51
 < strict-transport-security: max-age=2592000
 < x-powered-by: ASP.NET
 < x-content-type-options: nosniff
-< date: Sat, 06 Sep 2025 10:24:00 GMT
+< date: Mon, 08 Sep 2025 11:59:10 GMT
 < 
 * Connection #0 to host 93.43.5.102 left intact

public/userarea/class/curl_request_debug.log

@@ -15,11 +15,11 @@
 * [HTTP/2] [1] [:scheme: https]
 * [HTTP/2] [1] [:authority: 93.43.5.102]
 * [HTTP/2] [1] [:path: /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues]
-* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzE2MTQ0MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.UgVN5wzjtR8MRU2xLDFWRHIAYLJTmxF3x7kWeVU11YU]
+* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMzOTk1MSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.JywaxXVFGeXH44RCOZUPfDGuEr5dt0cHAWN_vmIiFaw]
 * [HTTP/2] [1] [accept: application/json]
 > GET /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues HTTP/2
 Host: 93.43.5.102
-Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzE2MTQ0MCwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.UgVN5wzjtR8MRU2xLDFWRHIAYLJTmxF3x7kWeVU11YU
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMzOTk1MSwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.JywaxXVFGeXH44RCOZUPfDGuEr5dt0cHAWN_vmIiFaw
 Accept: application/json
 
 < HTTP/2 200 
@@ -30,6 +30,6 @@ Accept: application/json
 < odata-version: 4.0
 < x-powered-by: ASP.NET
 < x-content-type-options: nosniff
-< date: Sat, 06 Sep 2025 10:24:02 GMT
+< date: Mon, 08 Sep 2025 11:59:14 GMT
 < 
 * Connection #0 to host 93.43.5.102 left intact

public/userarea/docs/Swagger documentation/.swagger-codegen-ignore

@@ -0,0 +1,23 @@
+# Swagger Codegen Ignore
+# Generated by swagger-codegen https://github.com/swagger-api/swagger-codegen
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell Swagger Codgen to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md

public/userarea/docs/Swagger documentation/.swagger-codegen/VERSION

@@ -0,0 +1 @@
+3.0.34

public/userarea/error_log.txt

@@ -11,3 +11,4 @@
 2025-08-26 16:48:44 - Risposta non JSON valida: <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"><edmx:DataServices><Schema Namespace="DevExpress.ExpressApp.SystemModule" xmlns="http://docs.oasis-open.org/odata/ns/edm"><EntityType Name="DashboardViewItemDescriptor"><Key><PropertyRef Name="ViewId" /></Key><Property Name="ViewId" Type="Edm.String" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem" BaseType="DevExpress.ExpressApp.NonPersistentLiteObject" Abstract="true"><Property Name="Visibility" Type="DevExpress.ExpressApp.Editors.ViewItemVisibility" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem_1OfIModelDashboardViewItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem" Abstract="true" /><EntityType Name="ViewDashboardOrganizationItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem_1OfIModelDashboardViewItem"><Property Name="ObjectType" Type="System.Type" /><Proper
 2025-08-26 16:49:24 - Risposta non JSON valida: <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"><edmx:DataServices><Schema Namespace="DevExpress.ExpressApp.SystemModule" xmlns="http://docs.oasis-open.org/odata/ns/edm"><EntityType Name="DashboardViewItemDescriptor"><Key><PropertyRef Name="ViewId" /></Key><Property Name="ViewId" Type="Edm.String" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem" BaseType="DevExpress.ExpressApp.NonPersistentLiteObject" Abstract="true"><Property Name="Visibility" Type="DevExpress.ExpressApp.Editors.ViewItemVisibility" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem_1OfIModelDashboardViewItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem" Abstract="true" /><EntityType Name="ViewDashboardOrganizationItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem_1OfIModelDashboardViewItem"><Property Name="ObjectType" Type="System.Type" /><Proper
 2025-08-26 16:50:23 - Risposta non JSON valida: <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"><edmx:DataServices><Schema Namespace="DevExpress.ExpressApp.SystemModule" xmlns="http://docs.oasis-open.org/odata/ns/edm"><EntityType Name="DashboardViewItemDescriptor"><Key><PropertyRef Name="ViewId" /></Key><Property Name="ViewId" Type="Edm.String" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem" BaseType="DevExpress.ExpressApp.NonPersistentLiteObject" Abstract="true"><Property Name="Visibility" Type="DevExpress.ExpressApp.Editors.ViewItemVisibility" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem_1OfIModelDashboardViewItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem" Abstract="true" /><EntityType Name="ViewDashboardOrganizationItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem_1OfIModelDashboardViewItem"><Property Name="ObjectType" Type="System.Type" /><Proper
+2025-09-08 08:39:17 - Risposta non JSON valida: <?xml version="1.0" encoding="utf-8"?><edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx"><edmx:DataServices><Schema Namespace="DevExpress.ExpressApp.SystemModule" xmlns="http://docs.oasis-open.org/odata/ns/edm"><EntityType Name="DashboardViewItemDescriptor"><Key><PropertyRef Name="ViewId" /></Key><Property Name="ViewId" Type="Edm.String" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem" BaseType="DevExpress.ExpressApp.NonPersistentLiteObject" Abstract="true"><Property Name="Visibility" Type="DevExpress.ExpressApp.Editors.ViewItemVisibility" Nullable="false" /></EntityType><EntityType Name="DashboardOrganizationItem_1OfIModelDashboardViewItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem" Abstract="true" /><EntityType Name="ViewDashboardOrganizationItem" BaseType="DevExpress.ExpressApp.SystemModule.DashboardOrganizationItem_1OfIModelDashboardViewItem"><Property Name="ObjectType" Type="System.Type" /><Proper

public/userarea/get_commessaweb.php

@@ -0,0 +1,39 @@
+<?php
+require_once dirname(__DIR__, 2) . '/vendor/autoload.php';
+require_once dirname(__FILE__) . '/class/VisualLimsApiClient.class.php';
+
+header('Content-Type: application/json');
+
+ini_set('display_errors', '0');
+error_reporting(E_ALL);
+
+try {
+    $api = VisualLimsApiClient::getInstance();
+
+    // ID della CommessaWeb specifica (cambialo di volta in volta)
+    $id = 529435; // TODO: Cambia questo valore con l'ID desiderato
+
+    // Endpoint per recuperare la CommessaWeb specifica con espansione dello schema custom
+    $endpoint = "CommessaWeb({$id})";
+
+    // Opzioni per l'espansione: includi OrderCustomFields per ottenere i campi custom dello schema assegnato all'ordine
+    $options = ['$expand' => 'OrderCustomFields'];
+
+    // Debug: salva URL usato
+    $base_url = 'https://93.43.5.102/limsapi/api/odata/';
+    $query = http_build_query($options);
+    $full_url = $base_url . $endpoint . ($query ? '?' . $query : '');
+    file_put_contents(__DIR__ . '/last_url.txt', $full_url . PHP_EOL, FILE_APPEND);
+
+    // Chiamata API
+    $data = $api->get($endpoint, $options);
+
+    // Salva il JSON in locale
+    file_put_contents(__DIR__ . '/commessaweb_schema_response.json', json_encode($data, JSON_PRETTY_PRINT));
+
+    echo json_encode($data);
+} catch (Exception $e) {
+    file_put_contents(__DIR__ . '/error_log.txt', date('Y-m-d H:i:s') . ' - ' . $e->getMessage() . PHP_EOL, FILE_APPEND);
+    http_response_code(500);
+    echo json_encode(['error' => $e->getMessage()]);
+}

public/userarea/modal_parts.php

@@ -1,4 +1,4 @@
-<!-- Modal -->
+<!-- Modal modificato con pulsante per riconoscimento vocale -->
 <div class="modal fade" id="partsModal" tabindex="-1" aria-labelledby="partsModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-xl" style="max-width: 80% !important; width: 80% !important;">
         <div class="modal-content">
@@ -15,6 +15,7 @@
                                 <input type="checkbox" id="showMixParts" name="showMixParts" style="margin-right: 5px;">
                                 <label for="showMixParts" style="font-size: 0.9rem; margin-right: 10px;">Mix</label>
                                 <button type="button" class="btn btn-info btn-sm" id="renumberPartsBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;">Rinumera Parti</button>
+                                <button type="button" class="btn btn-secondary btn-sm ms-2" id="toggleVoiceBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem;"><i class="fas fa-microphone"></i> Voce</button>
                             </div>
                         </div>
                         <ul id="partsList" class="list-group"></ul>

public/userarea/parts.js

@@ -20,6 +20,115 @@ $(document).ready(function () {
     // selection
     let selectedPartNumber = null;
 
+    // ===================
+    // VOICE RECOGNITION SETUP
+    // ===================
+    const SpeechRecognition =
+        window.SpeechRecognition || window.webkitSpeechRecognition;
+    let recognition = null;
+    let isVoiceActive = false;
+    const magicWord = "salva"; // Parola magica scelta: "prossima" (fa andare alla riga successiva)
+
+    if (SpeechRecognition) {
+        recognition = new SpeechRecognition();
+        recognition.lang = "it-IT"; // Lingua italiana
+        recognition.continuous = true; // Ascolto continuo
+        recognition.interimResults = false; // Solo risultati finali per semplicità
+
+        recognition.onresult = function (event) {
+            const transcript = event.results[
+                event.results.length - 1
+            ][0].transcript
+                .trim()
+                .toLowerCase();
+            console.log("Transcript vocale:", transcript);
+
+            const $currentRow = $("#partsTableBody tr:last"); // Ultima riga corrente
+            const $descriptionInput = $currentRow.find(".part-description");
+
+            if (transcript.includes(magicWord)) {
+                // Rimuovi la parola magica e aggiungi il resto alla descrizione corrente
+                const cleanedTranscript = transcript
+                    .replace(magicWord, "")
+                    .trim();
+                if (cleanedTranscript) {
+                    $descriptionInput.val(
+                        (
+                            $descriptionInput.val() +
+                            " " +
+                            cleanedTranscript
+                        ).trim(),
+                    );
+                    $descriptionInput.trigger("blur"); // Salva se necessario
+                }
+                // Aggiungi nuova riga (simile a click su +)
+                const maxPartNumber = Math.max(
+                    ...$("#partsTableBody tr")
+                        .map(function () {
+                            return (
+                                parseInt($(this).find(".part-number").val()) ||
+                                0
+                            );
+                        })
+                        .get(),
+                );
+                addNewRow(maxPartNumber + 1);
+                // Focus sulla nuova descrizione
+                const $newRow = $("#partsTableBody tr:last");
+                $newRow.find(".part-description").focus();
+            } else {
+                // Aggiungi il transcript alla descrizione corrente
+                $descriptionInput.val(
+                    ($descriptionInput.val() + " " + transcript).trim(),
+                );
+                $descriptionInput.trigger("blur"); // Salva se necessario
+            }
+        };
+
+        recognition.onerror = function (event) {
+            console.error("Errore riconoscimento vocale:", event.error);
+            if (event.error === "no-speech" || event.error === "aborted") {
+                // Riavvia se necessario
+                if (isVoiceActive) recognition.start();
+            } else {
+                alert("Errore nel riconoscimento vocale: " + event.error);
+                toggleVoiceRecognition();
+            }
+        };
+
+        recognition.onend = function () {
+            if (isVoiceActive) {
+                recognition.start(); // Riavvia per ascolto continuo
+            }
+        };
+    } else {
+        console.warn("Riconoscimento vocale non supportato dal browser.");
+        $("#toggleVoiceBtn").hide(); // Nascondi pulsante se non supportato
+    }
+
+    function toggleVoiceRecognition() {
+        if (!recognition) return;
+
+        isVoiceActive = !isVoiceActive;
+        const $btn = $("#toggleVoiceBtn");
+        if (isVoiceActive) {
+            $btn.addClass("btn-danger").html(
+                '<i class="fas fa-microphone-slash"></i> Stop Voce',
+            );
+            recognition.start();
+            // Focus iniziale sull'ultima descrizione
+            const $currentRow = $("#partsTableBody tr:last");
+            $currentRow.find(".part-description").focus();
+        } else {
+            $btn.removeClass("btn-danger")
+                .addClass("btn-secondary")
+                .html('<i class="fas fa-microphone"></i> Voce');
+            recognition.stop();
+        }
+    }
+
+    $("#toggleVoiceBtn").on("click", toggleVoiceRecognition);
+
     // ===================
     // POPUP HANDLING
     // ===================

public/userarea/photos.js

@@ -396,11 +396,32 @@ document.addEventListener("DOMContentLoaded", function () {
             closeCollageBtn.addEventListener("click", () => {
                 console.log("Chiusura modale collage");
                 document.getElementById("collageModal").style.display = "none";
+                if (isCropping) {
+                    console.log(
+                        "Chiusura modale durante ritaglio, esco dalla modalità ritaglio",
+                    );
+                    exitCropMode();
+                }
+                if (isRemovingBackground) {
+                    console.log(
+                        "Chiusura modale durante rimozione sfondo, esco dalla modalità",
+                    );
+                    exitBackgroundRemovalMode();
+                }
             });
         }
 
         // Inizializza canvas con Fabric.js
         let canvas;
+        let cropRect = null;
+        let isCropping = false;
+        let croppedImage = null; // Memorizza l'immagine da ritagliare
+        let isApplyingCrop = false; // Flag per prevenire duplicazioni
+        let isRemovingBackground = false; // Flag per modalità rimozione sfondo
+        let backgroundRemovalImage = null; // Immagine in modalità rimozione sfondo
+        let history = []; // Pila per salvare gli stati del canvas
+        const maxHistory = 20; // Limite massimo di stati nella pila
+
         function initCollageCanvas() {
             if (typeof fabric === "undefined") {
                 console.error("Fabric.js non è caricato!");
@@ -413,8 +434,467 @@ document.addEventListener("DOMContentLoaded", function () {
                 backgroundColor: "#fff",
                 selection: true,
             });
+            // Imposta stile globale per i controlli
+            fabric.Object.prototype.set({
+                cornerColor: "black",
+                cornerStrokeColor: "black",
+                cornerSize: 12,
+                borderColor: "black",
+                transparentCorners: false,
+            });
             // Abilita ridimensionamento e trascinamento
-            canvas.on("object:modified", () => canvas.renderAll());
+            canvas.on("object:modified", () => {
+                console.log("Oggetto modificato nel canvas");
+                saveCanvasState();
+                canvas.renderAll();
+            });
+            // Gestisci selezione per abilitare/disabilitare pulsanti
+            canvas.on("selection:created", () => {
+                console.log("Evento selection:created triggerato");
+                updateButtons();
+            });
+            canvas.on("selection:updated", () => {
+                console.log("Evento selection:updated triggerato");
+                updateButtons();
+            });
+            canvas.on("selection:cleared", () => {
+                console.log("Evento selection:cleared triggerato");
+                if (!isCropping && !isRemovingBackground) {
+                    updateButtons();
+                } else if (isCropping && cropRect) {
+                    console.log(
+                        "Ignoro selection:cleared perché in modalità ritaglio",
+                    );
+                    canvas.setActiveObject(cropRect); // Ripristina selezione del rettangolo
+                    canvas.renderAll();
+                } else if (isRemovingBackground) {
+                    console.log(
+                        "Ignoro selection:cleared perché in modalità rimozione sfondo",
+                    );
+                    canvas.setActiveObject(backgroundRemovalImage); // Ripristina selezione dell'immagine
+                    canvas.renderAll();
+                }
+            });
+            // Gestisci click sul canvas per la rimozione dello sfondo
+            canvas.on("mouse:down", (event) => {
+                if (isRemovingBackground && backgroundRemovalImage) {
+                    console.log(
+                        "Click sul canvas in modalità rimozione sfondo",
+                    );
+                    handleBackgroundColorSelection(event);
+                }
+            });
+            // Salva lo stato iniziale del canvas
+            saveCanvasState();
+            // Forza un aggiornamento iniziale dei pulsanti
+            updateButtons();
+        }
+
+        // Salva lo stato del canvas nella pila
+        function saveCanvasState() {
+            if (isCropping || isRemovingBackground) {
+                console.log(
+                    "Non salvo lo stato perché in modalità ritaglio o rimozione sfondo",
+                );
+                return;
+            }
+            console.log("Salvataggio stato del canvas");
+            const state = JSON.stringify(
+                canvas.toJSON([
+                    "cornerColor",
+                    "cornerStrokeColor",
+                    "cornerSize",
+                    "borderColor",
+                    "transparentCorners",
+                ]),
+            );
+            history.push(state);
+            if (history.length > maxHistory) {
+                history.shift(); // Rimuovi lo stato più vecchio se superato il limite
+            }
+            console.log("Stato salvato, lunghezza pila:", history.length);
+            updateButtons();
+        }
+
+        // Ripristina l'ultimo stato del canvas
+        function undo() {
+            if (history.length <= 1) {
+                console.log("Nessuno stato da annullare");
+                return;
+            }
+            console.log("Annullamento ultima azione");
+            history.pop(); // Rimuovi lo stato corrente
+            const previousState = history[history.length - 1];
+            if (previousState) {
+                canvas.clear();
+                canvas.loadFromJSON(previousState, () => {
+                    canvas.renderAll();
+                    console.log("Stato ripristinato");
+                    updateButtons();
+                });
+            } else {
+                console.warn("Nessuno stato precedente disponibile");
+                canvas.clear();
+                canvas.setBackgroundColor("#fff");
+                canvas.renderAll();
+                updateButtons();
+            }
+        }
+
+        // Aggiorna stato dei pulsanti
+        function updateButtons() {
+            const cropBtn = document.getElementById("cropImageBtn");
+            const applyCropBtn = document.getElementById("applyCropBtn");
+            const cancelCropBtn = document.getElementById("cancelCropBtn");
+            const removeBackgroundBtn = document.getElementById(
+                "removeBackgroundBtn",
+            );
+            const removeImageBtn = document.getElementById("removeImageBtn");
+            const undoBtn = document.getElementById("undoBtn");
+            const instruction = document.getElementById(
+                "backgroundRemovalInstruction",
+            );
+            const activeObject = canvas.getActiveObject();
+            console.log(
+                "updateButtons: activeObject =",
+                activeObject ? activeObject.type : null,
+                "isCropping =",
+                isCropping,
+                "isRemovingBackground =",
+                isRemovingBackground,
+                "history.length =",
+                history.length,
+            );
+            if (isCropping && cropRect) {
+                console.log(
+                    "Modo ritaglio attivo, applyCropBtn e cancelCropBtn abilitati",
+                );
+                cropBtn.disabled = true;
+                applyCropBtn.disabled = false;
+                cancelCropBtn.disabled = false;
+                removeBackgroundBtn.disabled = true;
+                removeImageBtn.disabled = true;
+                undoBtn.disabled = true;
+                instruction.style.display = "none";
+            } else if (isRemovingBackground && backgroundRemovalImage) {
+                console.log(
+                    "Modo rimozione sfondo attivo, removeBackgroundBtn disabilitato",
+                );
+                cropBtn.disabled = true;
+                applyCropBtn.disabled = true;
+                cancelCropBtn.disabled = true;
+                removeBackgroundBtn.disabled = true;
+                removeImageBtn.disabled = true;
+                undoBtn.disabled = true;
+                instruction.style.display = "block";
+            } else if (
+                activeObject &&
+                activeObject.type === "image" &&
+                !isCropping &&
+                !isRemovingBackground
+            ) {
+                console.log(
+                    "Abilitazione cropImageBtn, removeBackgroundBtn e removeImageBtn",
+                );
+                cropBtn.disabled = false;
+                applyCropBtn.disabled = true;
+                cancelCropBtn.disabled = true;
+                removeBackgroundBtn.disabled = false;
+                removeImageBtn.disabled = false;
+                undoBtn.disabled = history.length <= 1;
+                instruction.style.display = "none";
+            } else {
+                console.log("Disabilitazione tutti i pulsanti");
+                cropBtn.disabled = true;
+                applyCropBtn.disabled = true;
+                cancelCropBtn.disabled = true;
+                removeBackgroundBtn.disabled = true;
+                removeImageBtn.disabled = true;
+                undoBtn.disabled = history.length <= 1;
+                instruction.style.display = "none";
+            }
+        }
+
+        // Entra in modalità ritaglio
+        function enterCropMode() {
+            const activeObject = canvas.getActiveObject();
+            if (!activeObject || activeObject.type !== "image") {
+                console.warn("Nessuna immagine selezionata per il ritaglio");
+                alert("Seleziona un'immagine prima di attivare il ritaglio!");
+                return;
+            }
+            console.log(
+                "Entrata in modalità ritaglio per immagine:",
+                activeObject,
+            );
+            isCropping = true;
+            croppedImage = activeObject; // Memorizza l'immagine da ritagliare
+            canvas.discardActiveObject(); // Deseleziona l'immagine
+            // Crea un rettangolo di ritaglio
+            cropRect = new fabric.Rect({
+                left: activeObject.left,
+                top: activeObject.top,
+                width: activeObject.width * activeObject.scaleX * 0.5,
+                height: activeObject.height * activeObject.scaleY * 0.5,
+                fill: "rgba(0, 0, 0, 0.3)",
+                stroke: "red",
+                strokeWidth: 2,
+                hasBorders: true,
+                hasControls: true,
+                lockRotation: true,
+                selectable: true,
+                cornerColor: "black",
+                cornerStrokeColor: "black",
+                cornerSize: 12,
+                borderColor: "black",
+                transparentCorners: false,
+            });
+            canvas.add(cropRect);
+            canvas.setActiveObject(cropRect);
+            canvas.renderAll();
+            updateButtons();
+            console.log("Rettangolo di ritaglio creato e applicato");
+        }
+
+        // Esci dalla modalità ritaglio
+        function exitCropMode() {
+            if (cropRect) {
+                console.log("Rimozione rettangolo di ritaglio");
+                canvas.remove(cropRect);
+                cropRect = null;
+            }
+            isCropping = false;
+            croppedImage = null;
+            isApplyingCrop = false;
+            canvas.discardActiveObject();
+            canvas.renderAll();
+            updateButtons();
+            console.log("Uscita dalla modalità ritaglio");
+        }
+
+        // Applica il ritaglio
+        function applyCrop() {
+            if (isApplyingCrop) {
+                console.log("applyCrop già in esecuzione, ignoro chiamata");
+                return;
+            }
+            console.log("applyCrop chiamato, stato:", {
+                isCropping,
+                cropRect: !!cropRect,
+                croppedImage: !!croppedImage,
+            });
+            if (!isCropping || !cropRect || !croppedImage) {
+                console.warn("Condizioni per il ritaglio non soddisfatte", {
+                    isCropping,
+                    cropRect: !!cropRect,
+                    croppedImage: !!croppedImage,
+                });
+                alert(
+                    "Nessun rettangolo di ritaglio attivo o immagine selezionata!",
+                );
+                exitCropMode();
+                return;
+            }
+            isApplyingCrop = true;
+            console.log("Applicazione ritaglio all'immagine:", croppedImage);
+            const img = croppedImage;
+            const cropX = (cropRect.left - img.left) / img.scaleX;
+            const cropY = (cropRect.top - img.top) / img.scaleY;
+            const cropWidth = (cropRect.width * cropRect.scaleX) / img.scaleX;
+            const cropHeight = (cropRect.height * cropRect.scaleY) / img.scaleY;
+            console.log("Parametri di ritaglio:", {
+                cropX,
+                cropY,
+                cropWidth,
+                cropHeight,
+            });
+
+            // Crea un'immagine ritagliata
+            fabric.Image.fromURL(
+                img.getSrc(),
+                (newImg) => {
+                    newImg.set({
+                        left: cropRect.left,
+                        top: cropRect.top,
+                        scaleX: img.scaleX,
+                        scaleY: img.scaleY,
+                        cropX: cropX,
+                        cropY: cropY,
+                        width: cropWidth,
+                        height: cropHeight,
+                        hasControls: true,
+                        hasBorders: true,
+                        cornerColor: "black",
+                        cornerStrokeColor: "black",
+                        cornerSize: 12,
+                        borderColor: "black",
+                        transparentCorners: false,
+                    });
+                    canvas.remove(img); // Rimuovi l'immagine originale
+                    canvas.remove(cropRect); // Rimuovi il rettangolo di ritaglio
+                    canvas.add(newImg); // Aggiungi l'immagine ritagliata
+                    canvas.setActiveObject(newImg);
+                    exitCropMode();
+                    saveCanvasState(); // Salva lo stato dopo il ritaglio
+                    canvas.renderAll();
+                    console.log("Ritaglio applicato con successo");
+                },
+                { crossOrigin: "anonymous" },
+            );
+        }
+
+        // Entra in modalità rimozione sfondo
+        function enterBackgroundRemovalMode() {
+            const activeObject = canvas.getActiveObject();
+            if (!activeObject || activeObject.type !== "image") {
+                console.warn(
+                    "Nessuna immagine selezionata per la rimozione dello sfondo",
+                );
+                alert(
+                    "Seleziona un'immagine prima di attivare la rimozione dello sfondo!",
+                );
+                return;
+            }
+            console.log(
+                "Entrata in modalità rimozione sfondo per immagine:",
+                activeObject,
+            );
+            isRemovingBackground = true;
+            backgroundRemovalImage = activeObject;
+            updateButtons();
+            console.log(
+                "Modalità rimozione sfondo attivata, clicca sull'immagine per selezionare il colore",
+            );
+        }
+
+        // Esci dalla modalità rimozione sfondo
+        function exitBackgroundRemovalMode() {
+            isRemovingBackground = false;
+            backgroundRemovalImage = null;
+            canvas.discardActiveObject();
+            canvas.renderAll();
+            updateButtons();
+            console.log("Uscita dalla modalità rimozione sfondo");
+        }
+
+        // Gestisci la selezione del colore dello sfondo
+        function handleBackgroundColorSelection(event) {
+            if (!isRemovingBackground || !backgroundRemovalImage) {
+                console.warn(
+                    "Condizioni per la rimozione dello sfondo non soddisfatte",
+                );
+                return;
+            }
+            const pointer = canvas.getPointer(event.e);
+            const img = backgroundRemovalImage;
+
+            // Crea una canvas temporanea per ottenere i dati dei pixel
+            const tempCanvas = document.createElement("canvas");
+            tempCanvas.width = img.width;
+            tempCanvas.height = img.height;
+            const ctx = tempCanvas.getContext("2d");
+            ctx.drawImage(img.getElement(), 0, 0, img.width, img.height);
+
+            // Calcola la posizione relativa del click rispetto all'immagine
+            const imgLeft = img.left;
+            const imgTop = img.top;
+            const scaleX = img.scaleX;
+            const scaleY = img.scaleY;
+            const x = (pointer.x - imgLeft) / scaleX;
+            const y = (pointer.y - imgTop) / scaleY;
+
+            // Ottieni il colore del pixel cliccato
+            const pixelData = ctx.getImageData(x, y, 1, 1).data;
+            const targetColor = {
+                r: pixelData[0],
+                g: pixelData[1],
+                b: pixelData[2],
+            };
+            console.log("Colore dello sfondo selezionato:", targetColor);
+
+            // Rimuovi il colore dello sfondo
+            removeBackground(img, targetColor);
+        }
+
+        // Rimuovi il colore dello sfondo
+        function removeBackground(img, targetColor) {
+            console.log("Inizio rimozione sfondo con colore:", targetColor);
+            const tempCanvas = document.createElement("canvas");
+            tempCanvas.width = img.width;
+            tempCanvas.height = img.height;
+            const ctx = tempCanvas.getContext("2d");
+            ctx.drawImage(img.getElement(), 0, 0, img.width, img.height);
+
+            const imageData = ctx.getImageData(
+                0,
+                0,
+                tempCanvas.width,
+                tempCanvas.height,
+            );
+            const data = imageData.data;
+            const tolerance = 50; // Tolleranza per colori simili
+
+            // Scansiona i pixel e rendi trasparenti quelli che corrispondono al colore target
+            for (let i = 0; i < data.length; i += 4) {
+                const r = data[i];
+                const g = data[i + 1];
+                const b = data[i + 2];
+                // Verifica se il colore è simile al targetColor
+                if (
+                    Math.abs(r - targetColor.r) <= tolerance &&
+                    Math.abs(g - targetColor.g) <= tolerance &&
+                    Math.abs(b - targetColor.b) <= tolerance
+                ) {
+                    data[i + 3] = 0; // Imposta l'alpha a 0 (trasparente)
+                }
+            }
+
+            ctx.putImageData(imageData, 0, 0);
+            const newImageUrl = tempCanvas.toDataURL("image/png");
+
+            // Crea una nuova immagine con lo sfondo rimosso
+            fabric.Image.fromURL(
+                newImageUrl,
+                (newImg) => {
+                    newImg.set({
+                        left: img.left,
+                        top: img.top,
+                        scaleX: img.scaleX,
+                        scaleY: img.scaleY,
+                        hasControls: true,
+                        hasBorders: true,
+                        cornerColor: "black",
+                        cornerStrokeColor: "black",
+                        cornerSize: 12,
+                        borderColor: "black",
+                        transparentCorners: false,
+                    });
+                    canvas.remove(img); // Rimuovi l'immagine originale
+                    canvas.add(newImg); // Aggiungi l'immagine con sfondo rimosso
+                    canvas.setActiveObject(newImg);
+                    exitBackgroundRemovalMode();
+                    saveCanvasState(); // Salva lo stato dopo la rimozione dello sfondo
+                    canvas.renderAll();
+                    console.log("Sfondo rimosso con successo");
+                },
+                { crossOrigin: "anonymous" },
+            );
+        }
+
+        // Rimuovi l'immagine selezionata
+        function removeImage() {
+            const activeObject = canvas.getActiveObject();
+            if (!activeObject || activeObject.type !== "image") {
+                console.warn("Nessuna immagine selezionata per la rimozione");
+                alert("Seleziona un'immagine da rimuovere!");
+                return;
+            }
+            console.log("Rimozione immagine selezionata:", activeObject);
+            canvas.remove(activeObject);
+            canvas.discardActiveObject();
+            saveCanvasState(); // Salva lo stato dopo la rimozione
+            canvas.renderAll();
+            console.log("Immagine rimossa con successo");
         }
 
         // Aggiungi foto selezionate al canvas
@@ -430,21 +910,35 @@ document.addEventListener("DOMContentLoaded", function () {
                 }
                 checkboxes.forEach((cb) => {
                     const imgPath = cb.getAttribute("data-path");
-                    fabric.Image.fromURL(imgPath, (img) => {
+                    fabric.Image.fromURL(
-                        img.set({
+                        imgPath,
-                            left: Math.random() * 600, // Posizione random iniziale
+                        (img) => {
-                            top: Math.random() * 400,
+                            img.set({
-                            scaleX: 0.5, // Scala iniziale
+                                left: Math.random() * 600, // Posizione random iniziale
-                            scaleY: 0.5,
+                                top: Math.random() * 400,
-                            hasControls: true, // Abilita resize/rotate
+                                scaleX: 0.5, // Scala iniziale
-                            hasBorders: true,
+                                scaleY: 0.5,
-                        });
+                                hasControls: true, // Abilita resize/rotate
-                        canvas.add(img);
+                                hasBorders: true,
-                        canvas.renderAll();
+                                cornerColor: "black",
-                    });
+                                cornerStrokeColor: "black",
+                                cornerSize: 12,
+                                borderColor: "black",
+                                transparentCorners: false,
+                            });
+                            canvas.add(img);
+                            canvas.renderAll();
+                            console.log(
+                                "Immagine aggiunta al canvas:",
+                                imgPath,
+                            );
+                        },
+                        { crossOrigin: "anonymous" },
+                    );
                 });
                 // Deseleziona checkbox dopo aggiunta
                 checkboxes.forEach((cb) => (cb.checked = false));
+                saveCanvasState(); // Salva lo stato dopo l'aggiunta
             });
         }
 
@@ -470,6 +964,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 // Chiudi modale e ricarica popup
                 document.getElementById("collageModal").style.display = "none";
                 loadPopupContent(iddatadb);
+                console.log("Collage salvato e modale chiuso");
             });
         }
 
@@ -479,7 +974,10 @@ document.addEventListener("DOMContentLoaded", function () {
             clearCanvasBtn.addEventListener("click", () => {
                 canvas.clear();
                 canvas.setBackgroundColor("#fff");
+                history = []; // Resetta la pila di stati
+                saveCanvasState(); // Salva lo stato vuoto
                 canvas.renderAll();
+                console.log("Canvas pulito");
             });
         }
 
@@ -491,6 +989,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.bringToFront(activeObject);
                     canvas.renderAll();
+                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
+                    console.log("Oggetto portato in primo piano");
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
@@ -504,6 +1004,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.sendToBack(activeObject);
                     canvas.renderAll();
+                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
+                    console.log("Oggetto mandato in fondo");
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
@@ -517,6 +1019,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.bringForward(activeObject);
                     canvas.renderAll();
+                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
+                    console.log("Oggetto spostato avanti di un livello");
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
@@ -530,12 +1034,68 @@ document.addEventListener("DOMContentLoaded", function () {
                 if (activeObject) {
                     canvas.sendBackwards(activeObject);
                     canvas.renderAll();
+                    saveCanvasState(); // Salva lo stato dopo il cambio di livello
+                    console.log("Oggetto spostato indietro di un livello");
                 } else {
                     alert("Seleziona un'immagine sul canvas!");
                 }
             });
         }
 
+        // Gestione ritaglio immagini
+        const cropImageBtn = document.getElementById("cropImageBtn");
+        if (cropImageBtn) {
+            cropImageBtn.addEventListener("click", () => {
+                console.log("Pulsante Ritaglia cliccato");
+                enterCropMode();
+            });
+        }
+
+        const applyCropBtn = document.getElementById("applyCropBtn");
+        if (applyCropBtn) {
+            applyCropBtn.addEventListener("click", () => {
+                console.log("Pulsante Applica Ritaglio cliccato");
+                applyCrop();
+            });
+        }
+
+        const cancelCropBtn = document.getElementById("cancelCropBtn");
+        if (cancelCropBtn) {
+            cancelCropBtn.addEventListener("click", () => {
+                console.log("Pulsante Annulla Ritaglio cliccato");
+                exitCropMode();
+            });
+        }
+
+        // Gestione rimozione sfondo
+        const removeBackgroundBtn = document.getElementById(
+            "removeBackgroundBtn",
+        );
+        if (removeBackgroundBtn) {
+            removeBackgroundBtn.addEventListener("click", () => {
+                console.log("Pulsante Rimuovi Sfondo cliccato");
+                enterBackgroundRemovalMode();
+            });
+        }
+
+        // Gestione rimozione immagine
+        const removeImageBtn = document.getElementById("removeImageBtn");
+        if (removeImageBtn) {
+            removeImageBtn.addEventListener("click", () => {
+                console.log("Pulsante Rimuovi Immagine cliccato");
+                removeImage();
+            });
+        }
+
+        // Gestione undo
+        const undoBtn = document.getElementById("undoBtn");
+        if (undoBtn) {
+            undoBtn.addEventListener("click", () => {
+                console.log("Pulsante Annulla cliccato");
+                undo();
+            });
+        }
+
         // Assicurati che il loader sia nascosto all'apertura del popup
         const loader = document.getElementById("loader");
         if (loader) {

public/userarea/photos_popup.php

@@ -4,6 +4,8 @@ include('include/headscript.php');
 // Includi Fabric.js solo per questa pagina
 ?>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
+
 <?php
 // Includi l'autoloader di Composer
 require_once __DIR__ . '/../../vendor/autoload.php';
@@ -171,7 +173,7 @@ $result->saveToFile($qrCodeFile);
         <img id="enlargedImage" class="image-modal-content" src="" alt="Immagine ingrandita">
     </div>
 
-    <!-- Nuovo modale per collage -->
+    <!-- Modale per collage -->
     <div id="collageModal" class="modal" style="display: none; position: fixed; z-index: 1002; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);">
         <div class="modal-content" style="background: white; margin: 5% auto; padding: 20px; width: 80%; max-width: 1200px; position: relative;">
             <span class="close-collage" style="position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer;">&times;</span>
@@ -194,13 +196,20 @@ $result->saveToFile($qrCodeFile);
             <canvas id="collageCanvas" width="800" height="600" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
 
             <!-- Bottoni azioni -->
-            <div style="margin-top: 20px;">
+            <div style="margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px;">
-                <button id="saveCollageBtn">Salva Collage</button>
+                <button id="saveCollageBtn" title="Salva il collage"><i class="fas fa-save"></i></button>
-                <button id="clearCanvasBtn">Pulisci Canvas</button>
+                <!-- <button id="clearCanvasBtn" title="Pulisci il canvas"><i class="fas fa-trash"></i></button> -->
-                <button id="bringToFrontBtn" title="Porta in primo piano">In Alto</button>
+                <button id="bringToFrontBtn" title="Porta in primo piano"><i class="fas fa-arrow-up"></i></button>
-                <button id="sendToBackBtn" title="Manda in fondo">In Fondo</button>
+                <button id="sendToBackBtn" title="Manda in fondo"><i class="fas fa-arrow-down"></i></button>
-                <button id="bringForwardBtn" title="Sposta avanti di un livello">Avanti</button>
+                <button id="bringForwardBtn" title="Sposta avanti di un livello"><i class="fas fa-arrow-circle-up"></i></button>
-                <button id="sendBackwardBtn" title="Sposta indietro di un livello">Indietro</button>
+                <button id="sendBackwardBtn" title="Sposta indietro di un livello"><i class="fas fa-arrow-circle-down"></i></button>
+                <button id="cropImageBtn" title="Ritaglia immagine selezionata" disabled><i class="fas fa-crop"></i></button>
+                <button id="applyCropBtn" title="Applica ritaglio" disabled><i class="fas fa-crop"></i> Applica</button>
+                <button id="cancelCropBtn" title="Annulla ritaglio" disabled><i class="fas fa-crop"></i> Annulla</button>
+                <button id="removeBackgroundBtn" title="Rimuovi sfondo immagine selezionata" disabled><i class="fas fa-eraser"></i> Rimuovi Sfondo</button>
+                <button id="removeImageBtn" title="Rimuovi immagine selezionata" disabled><i class="fas fa-trash-alt"></i> Rimuovi</button>
+                <button id="undoBtn" title="Annulla ultima azione" disabled><i class="fas fa-undo"></i></button>
+                <p id="backgroundRemovalInstruction" style="display: none; color: #007bff;">Clicca sull'immagine per selezionare il colore dello sfondo da rimuovere</p>
             </div>
         </div>
     </div>
@@ -283,4 +292,56 @@ $result->saveToFile($qrCodeFile);
         font-size: 16px;
         color: white;
     }
+
+    /* Stile per i pulsanti del modale collage */
+    #collageModal button {
+        padding: 8px 12px;
+        margin: 5px;
+        border: none;
+        cursor: pointer;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 14px;
+    }
+
+    #saveCollageBtn {
+        background: #28a745;
+        color: white;
+    }
+
+    #clearCanvasBtn {
+        background: #dc3545;
+        color: white;
+    }
+
+    #bringToFrontBtn,
+    #sendToBackBtn,
+    #bringForwardBtn,
+    #sendBackwardBtn {
+        background: #007bff;
+        color: white;
+        padding: 8px;
+        /* Pulsanti solo icona più piccoli */
+    }
+
+    #cropImageBtn,
+    #applyCropBtn,
+    #cancelCropBtn,
+    #removeBackgroundBtn,
+    #removeImageBtn,
+    #undoBtn {
+        background: #ffc107;
+        color: white;
+    }
+
+    #collageModal button:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+    }
+
+    #collageModal button i {
+        font-size: 16px;
+    }
 </style>