added size to line markers

public/userarea/annotationsModal.js

@@ -12,6 +12,7 @@ $(document).ready(function () {
 
     let photoAnnotations = {};
     let partColors = {};
+    let partSizes = {}; // memorizza la dimensione specifica per parte
     let selectedPartNumber = null;
     let unsavedChanges = false;
     let fabricCanvas = null;
@@ -616,12 +617,19 @@ $(document).ready(function () {
                     )
                     .join("");
                 const listItem = `
-                    <li class="list-group-item" data-part-number="${partNumber}">
+                  <li class="list-group-item" data-part-number="${partNumber}">
-                        <span class="part-info" style="cursor: pointer;">${partNumber} - ${partDescription}</span>
+<span class="part-info" style="cursor: pointer;">${partNumber} - ${partDescription}</span>
-                        <div class="color-picker-container" style="display: inline-block; position: relative; overflow: visible; z-index: 2000;">
+<div class="color-picker-container" style="display:inline-block; position: relative; overflow: visible; z-index: 2000; margin-left:5px;">
-                            <div class="color-option selected-color" style="background-color: ${partColor}; width: 20px; height: 20px; display: inline-block; margin-left: 5px; cursor: pointer; pointer-events: auto;"></div>
+    <div class="color-option selected-color" style="background-color: ${partColor}; width: 20px; height: 20px; display: inline-block; cursor: pointer; pointer-events: auto;"></div>
-                            <div class="color-picker" style="display: none; position: absolute; right: 0; z-index: 2000; background: #fff; border: 1px solid #ccc; padding: 5px;">${colorOptions}</div>
+    <div class="color-picker" style="display: none; position: absolute; right: 0; z-index: 2000; background: #fff; border: 1px solid #ccc; padding: 5px;">${colorOptions}</div>
-                        </div>
+</div>
+<div style="display:inline-flex; align-items:center; gap:4px; margin-left:5px;">
+    <input type="range" class="marker-size-slider" 
+           min="12" max="48" step="2" 
+           value="${partSizes[partNumber] || globalMarkerSize}"
+           style="width:70px;">
+    <span class="marker-size-value" style="font-size:0.8rem;">${partSizes[partNumber] || globalMarkerSize}px</span>
+</div>
                     </li>`;
                 partsListElement.append(listItem);
             }
@@ -670,30 +678,77 @@ $(document).ready(function () {
                 $picker.toggle();
             });
 
+        // === Gestione cambio colore ===
         partsListElement
             .off("click.colorOption")
             .on("click.colorOption", ".color-option", function (e) {
                 e.stopPropagation();
                 e.preventDefault();
+
                 const $this = $(this);
                 const color = $this.data("color");
                 const $listItem = $this.closest("li");
                 const partNumber = $listItem.data("part-number");
+
                 console.log(
                     "Cliccato .color-option, colore:",
                     color,
                     "per parte:",
                     partNumber,
                 );
+
+                // Salva il nuovo colore
                 partColors[partNumber] = color;
+
+                // Aggiorna il colore visivo nel selettore
                 $listItem
                     .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);
+                    fabricCanvas.renderAll();
+                }
+
+                // Chiudi la palette e aggiorna canvas
                 $this.closest(".color-picker").hide();
                 updateMarkers();
                 markUnsaved();
             });
 
+        // === Slider locale per dimensione marker ===
+        partsListElement
+            .off("input.localMarkerSize")
+            .on("input.localMarkerSize", ".marker-size-slider", function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+
+                // Riferimenti alla parte e valore scelto
+                const $slider = $(this);
+                const partNumber = $slider.closest("li").data("part-number");
+                const newSize = parseInt($slider.val());
+
+                // Aggiorna il valore visivo accanto allo slider
+                $slider.siblings(".marker-size-value").text(newSize + "px");
+
+                // Memorizza la nuova dimensione per quella parte
+                partSizes[partNumber] = newSize;
+
+                // Aggiorna i marker sul canvas
+                updateMarkers();
+
+                // Segnala modifiche non salvate
+                markUnsaved();
+
+                console.log(
+                    `Dimensione marker aggiornata per parte ${partNumber}: ${newSize}px`,
+                );
+            });
+
         $(document)
             .off("click.colorPicker")
             .on("click.colorPicker", function (e) {
@@ -875,8 +930,10 @@ $(document).ready(function () {
                 return;
             }
 
-            const radius = globalMarkerSize / 2;
+            const size = partSizes[marker.partNumber] || globalMarkerSize;
-            const fontSize = Math.max(10, Math.round(globalMarkerSize * 0.65));
+            const radius = size / 2;
+            const fontSize = Math.max(10, Math.round(size * 0.65));
+
             const markerColor =
                 marker.color || partColors[marker.partNumber] || "#ff0000";
 

public/userarea/modal_annotations.php

@@ -17,7 +17,7 @@
             <div class="modal-body">
                 <div class="row">
                     <!-- COLONNA SINISTRA RIDOTTA -->
-                    <div class="col-md-4">
+                    <div class="col-md-6">
                         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                             <h6 style="margin: 0;">Elenco Parti</h6>
                             <div style="display: flex; align-items: center;">
@@ -29,7 +29,7 @@
                     </div>
 
                     <!-- COLONNA DESTRA PIÙ GRANDE -->
-                    <div class="col-md-8">
+                    <div class="col-md-6">
                         <h6>Foto del Campione</h6>
                         <div style="display: flex; align-items: center; margin-bottom: 10px;">
                             <button type="button" class="btn btn-primary btn-sm" id="downloadPhotoBtnAnnotations" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i></button>