From 03642fdfabaef1b53416996fff35007583690da6 Mon Sep 17 00:00:00 2001
From: Martin Grigoryan <grigoryanmartin20@gmail.com>
Date: Thu, 30 Oct 2025 17:08:57 +0400
Subject: [PATCH] feat(annotations): support multiple pins per part

---
 public/userarea/annotationsModal.js | 82 +++++++++++++++++------------
 1 file changed, 48 insertions(+), 34 deletions(-)

diff --git a/public/userarea/annotationsModal.js b/public/userarea/annotationsModal.js
index 2c6cf42..7e92fd7 100644
--- a/public/userarea/annotationsModal.js
+++ b/public/userarea/annotationsModal.js
@@ -18,6 +18,7 @@ $(document).ready(function () {
     let fabricCanvas = null;
     let descriptionTextbox = null;
     let markerObjects = {};
+    let nextMarkerId = 1;
     let partsListData = [];
     // DIMENSIONE GLOBALE MARKER
     let globalMarkerSize = 24;
@@ -159,6 +160,16 @@ $(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 +377,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 +393,6 @@ $(document).ready(function () {
                     });
                     updateMarkers();
                     markUnsaved();
-                    selectedPartNumber = null;
-                    $("#partsListAnnotations li").removeClass("active");
                 });
 
                 fabricCanvas.upperCanvasEl.focus();
@@ -711,12 +711,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 +915,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 +998,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 +1013,7 @@ $(document).ready(function () {
             });
 
             fabricCanvas.add(group);
-            markerObjects[marker.partNumber] = group;
+            markerObjects[marker.id] = group;
         });
 
         fabricCanvas.renderAll();
@@ -1153,9 +1167,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 +1204,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);