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({
+                        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,9 +554,14 @@ $(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) {
@@ -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
+                let currentPhoto = $("#samplePhotoAnnotations").attr("src");
-                if (markerObjects[partNumber]) {
+                let annotations = photoAnnotations[currentPhoto];
-                    const group = markerObjects[partNumber];
+
-                    const circle = group.item(0); // il cerchio
+                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) {
+        for (let markerId in markerObjects) {
-            fabricCanvas.remove(markerObjects[partNumber]);
+            fabricCanvas.remove(markerObjects[markerId]);
-            delete markerObjects[partNumber];
+            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) {
+        for (let markerId in markerObjects) {
-            fabricCanvas.remove(markerObjects[partNumber]);
+            fabricCanvas.remove(markerObjects[markerId]);
-            delete markerObjects[partNumber];
+            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]) {
+            if (markerObjects[lastMarker.id]) {
-                fabricCanvas.remove(markerObjects[lastMarker.partNumber]);
+                fabricCanvas.remove(markerObjects[lastMarker.id]);
-                delete markerObjects[lastMarker.partNumber];
+                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>