From 82af925ac1ee16193600239d8c5b059faba1d8c2 Mon Sep 17 00:00:00 2001 From: solocla Date: Wed, 29 Oct 2025 13:45:38 +0100 Subject: [PATCH] added size to line markers --- public/userarea/annotationsModal.js | 73 ++++++++++++++++++++++++--- public/userarea/modal_annotations.php | 4 +- 2 files changed, 67 insertions(+), 10 deletions(-) diff --git a/public/userarea/annotationsModal.js b/public/userarea/annotationsModal.js index 15bdb4b..ca06152 100644 --- a/public/userarea/annotationsModal.js +++ b/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 = ` -
  • - ${partNumber} - ${partDescription} -
    -
    - -
    +
  • +${partNumber} - ${partDescription} +
    +
    + +
    +
    + + ${partSizes[partNumber] || globalMarkerSize}px +
    • `; 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 fontSize = Math.max(10, Math.round(globalMarkerSize * 0.65)); + const size = partSizes[marker.partNumber] || globalMarkerSize; + const radius = size / 2; + const fontSize = Math.max(10, Math.round(size * 0.65)); + const markerColor = marker.color || partColors[marker.partNumber] || "#ff0000"; diff --git a/public/userarea/modal_annotations.php b/public/userarea/modal_annotations.php index fcc66e6..72fff2d 100644 --- a/public/userarea/modal_annotations.php +++ b/public/userarea/modal_annotations.php @@ -17,7 +17,7 @@
    -
    +
    Elenco Parti
    @@ -29,7 +29,7 @@
    -
    +
    Foto del Campione