change marker dimension

public/userarea/annotationsModal.js

@@ -18,9 +18,10 @@ $(document).ready(function () {
     let fabricCanvas = null;
     let descriptionTextbox = null;
     let markerObjects = {};
+    let nextMarkerId = 1;
     let partsListData = [];
     // DIMENSIONE GLOBALE MARKER
-    let globalMarkerSize = 24;
+    let globalMarkerSize = 16;
 
     // ===================
     // MODAL INITIALIZATION
@@ -32,7 +33,7 @@ $(document).ready(function () {
             trfHeader,
         });
 
-		$("#annotationsModal").attr('data-iddatadb', iddatadb);
+        $("#annotationsModal").attr("data-iddatadb", iddatadb);
 
         if (!iddatadb && !idquotations) {
             const errorMsg = $(
@@ -136,7 +137,7 @@ $(document).ready(function () {
         }
         descriptionTextbox = null;
         markerObjects = {};
-        globalMarkerSize = 24;
+        globalMarkerSize = 16;
         $("#photoSelectorContainerAnnotations").empty().hide();
         $("#samplePhotoAnnotations").attr("src", "");
         $("#partsListAnnotations").empty();
@@ -159,6 +160,20 @@ $(document).ready(function () {
         .on("input", "#markerSizeSlider", function () {
             globalMarkerSize = parseInt($(this).val());
             $("#markerSizeValue").text(globalMarkerSize + "px");
+
+            partsListData.forEach(function (part) {
+                if (part && part.part_number != null) {
+                    partSizes[part.part_number] = globalMarkerSize;
+                }
+            });
+
+            $("#partsListAnnotations .marker-size-slider").val(
+                globalMarkerSize,
+            );
+            $("#partsListAnnotations .marker-size-value").text(
+                globalMarkerSize + "px",
+            );
+
             updateMarkers();
             markUnsaved();
         });
@@ -366,22 +381,13 @@ $(document).ready(function () {
 
                     const partColor =
                         partColors[selectedPartNumber] || "#ff0000";
-                    const existingMarker = photoAnnotations[
-                        currentPhoto
-                    ].markers.find((m) => m.partNumber == selectedPartNumber);
-
-                    if (existingMarker) {
-                        existingMarker.x = x;
-                        existingMarker.y = y;
-                        existingMarker.color = partColor;
-                    } else {
-                        photoAnnotations[currentPhoto].markers.push({
-                            partNumber: selectedPartNumber,
-                            x,
-                            y,
-                            color: partColor,
-                        });
-                    }
+                    photoAnnotations[currentPhoto].markers.push({
+                        id: nextMarkerId++,
+                        partNumber: selectedPartNumber,
+                        x,
+                        y,
+                        color: partColor,
+                    });
 
                     console.log("Marker aggiunto/spostato:", {
                         partNumber: selectedPartNumber,
@@ -391,8 +397,6 @@ $(document).ready(function () {
                     });
                     updateMarkers();
                     markUnsaved();
-                    selectedPartNumber = null;
-                    $("#partsListAnnotations li").removeClass("active");
                 });
 
                 fabricCanvas.upperCanvasEl.focus();
@@ -550,10 +554,15 @@ $(document).ready(function () {
                         });
                         modal.show();
                     } else {
-						let iddatadb = $("#annotationsModal").attr('data-iddatadb');
+                        let iddatadb =
+                            $("#annotationsModal").attr("data-iddatadb");
 
-						$("button.parts-btn[data-iddatadb='" + iddatadb + "']").trigger('click');
-					}
+                        $(
+                            "button.parts-btn[data-iddatadb='" +
+                                iddatadb +
+                                "']",
+                        ).trigger("click");
+                    }
                 },
             ).fail(function (xhr) {
                 console.error("Errore caricamento modale parti:", xhr);
@@ -660,8 +669,21 @@ $(document).ready(function () {
                     );
                     return;
                 }
+
                 const $listItem = $(this);
-                selectedPartNumber = $listItem.data("part-number");
+                const partNumber = $listItem.data("part-number");
+
+                if (
+                    selectedPartNumber == partNumber &&
+                    $listItem.hasClass("active")
+                ) {
+                    selectedPartNumber = null;
+                    $listItem.removeClass("active");
+
+                    return;
+                }
+
+                selectedPartNumber = partNumber;
                 $listItem.addClass("active").siblings().removeClass("active");
                 console.log(
                     "Parte selezionata tramite riga:",
@@ -711,12 +733,23 @@ $(document).ready(function () {
                     .find(".selected-color")
                     .css("background-color", color);
 
-                // Se il marker è già presente, aggiorna anche sul canvas
-                if (markerObjects[partNumber]) {
-                    const group = markerObjects[partNumber];
-                    const circle = group.item(0); // il cerchio
-                    circle.set("fill", color);
-                    circle.set("stroke", color);
+                let currentPhoto = $("#samplePhotoAnnotations").attr("src");
+                let annotations = photoAnnotations[currentPhoto];
+
+                if (annotations) {
+                    annotations.markers.forEach(function (m) {
+                        if (m.partNumber == partNumber) {
+                            m.color = color;
+                            let group = markerObjects[m.id];
+
+                            if (group) {
+                                let circle = group.item(0);
+
+                                circle.set("fill", color);
+                                circle.set("stroke", color);
+                            }
+                        }
+                    });
                     fabricCanvas.renderAll();
                 }
 
@@ -904,9 +937,9 @@ $(document).ready(function () {
             "updateMarkers chiamato, markerObjects:",
             Object.keys(markerObjects),
         );
-        for (let partNumber in markerObjects) {
-            fabricCanvas.remove(markerObjects[partNumber]);
-            delete markerObjects[partNumber];
+        for (let markerId in markerObjects) {
+            fabricCanvas.remove(markerObjects[markerId]);
+            delete markerObjects[markerId];
         }
         markerObjects = {};
 
@@ -987,6 +1020,9 @@ $(document).ready(function () {
                 lockRotation: true,
             });
 
+            group.markerId = marker.id;
+            group.partNumber = marker.partNumber;
+
             group.on("moving", function () {
                 marker.x = this.left / photoData.scale;
                 marker.y = this.top / photoData.scale;
@@ -999,7 +1035,7 @@ $(document).ready(function () {
             });
 
             fabricCanvas.add(group);
-            markerObjects[marker.partNumber] = group;
+            markerObjects[marker.id] = group;
         });
 
         fabricCanvas.renderAll();
@@ -1153,9 +1189,9 @@ $(document).ready(function () {
             }
         }
 
-        for (let partNumber in markerObjects) {
-            fabricCanvas.remove(markerObjects[partNumber]);
-            delete markerObjects[partNumber];
+        for (let markerId in markerObjects) {
+            fabricCanvas.remove(markerObjects[markerId]);
+            delete markerObjects[markerId];
         }
         markerObjects = {};
 
@@ -1190,9 +1226,9 @@ $(document).ready(function () {
             photoAnnotations[currentPhoto].markers.length > 0
         ) {
             const lastMarker = photoAnnotations[currentPhoto].markers.pop();
-            if (markerObjects[lastMarker.partNumber]) {
-                fabricCanvas.remove(markerObjects[lastMarker.partNumber]);
-                delete markerObjects[lastMarker.partNumber];
+            if (markerObjects[lastMarker.id]) {
+                fabricCanvas.remove(markerObjects[lastMarker.id]);
+                delete markerObjects[lastMarker.id];
                 fabricCanvas.renderAll();
             }
             console.log("Ultimo marker rimosso:", lastMarker);

public/userarea/modal_annotations.php

@@ -8,7 +8,7 @@
                 <!-- SLIDER PER DIMENSIONE MARKER -->
                 <div style="display: flex; align-items: center; gap: 10px; margin-left: 20px;">
                     <label for="markerSizeSlider" style="margin: 0; font-size: 0.9rem; white-space: nowrap;">Dimensione marker:</label>
-                    <input type="range" id="markerSizeSlider" min="16" max="48" value="24" step="2" style="width: 120px;">
+                    <input type="range" id="markerSizeSlider" min="16" max="48" value="16" step="2" style="width: 120px;">
                     <span id="markerSizeValue" style="font-weight: bold; min-width: 30px;">24px</span>
                 </div>