fixed part.js

public/userarea/modal_parts.php

@@ -1,4 +1,4 @@
-<!-- Modal modificato con pulsante per riconoscimento vocale -->
+<!-- Modal modificato con pulsante per riconoscimento vocale e download -->
 <div class="modal fade" id="partsModal" tabindex="-1" aria-labelledby="partsModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-xl" style="max-width: 80% !important; width: 80% !important;">
         <div class="modal-content">
@@ -44,13 +44,14 @@
                     </div>
                     <div class="col-md-6">
                         <h6>Foto del Campione</h6>
-                        <div id="photoSelectorContainer" style="display: none;">
-                            <!-- Dropdown or buttons for photo selection will appear here -->
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <button type="button" class="btn btn-secondary btn-sm" id="downloadPhotoBtn" style="padding: 0.1rem 0.5rem; font-size: 0.8rem; margin-right: 10px;"><i class="fas fa-download"></i> Scarica Foto</button>
+                            <div id="photoSelectorContainer" style="display: none;"></div>
                         </div>
                         <div style="position: relative; width: 100%; min-height: 400px;">
                             <img id="samplePhoto" src="" alt="Foto del campione" style="max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; top: 0; left: 0;">
                             <canvas id="photoCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
-                            <div id="descriptionList" class="draggable-description" style="display: none;"></div>
+                            <canvas id="overlayCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;"></canvas> <!-- Nuovo canvas per Fabric.js -->
                             <div id="markerContainer"></div>
                         </div>
                     </div>
@@ -99,7 +100,10 @@
 
     #partsModal {
         z-index: 1060 !important;
-        /* Aumentato per superare il modale foto (z-index: 1050) */
+    }
+
+    #partsModal .modal-backdrop {
+        z-index: 1055 !important;
     }
 
     #partsModal .modal-content {
@@ -132,12 +136,33 @@
         position: absolute;
         background: rgba(255, 255, 255, 0.8);
         padding: 5px;
-        font-size: 10px;
         font-family: Arial, sans-serif;
         color: #000000;
         cursor: move;
         user-select: none;
         z-index: 1000;
+        min-width: 100px;
+        min-height: 50px;
+        overflow: visible;
+        border: 1px solid #ccc;
+    }
+
+    .draggable-description.active-interaction {
+        border: 2px dashed #000;
+    }
+
+    .draggable-description div {
+        white-space: nowrap;
+    }
+
+    .resize-handle {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 10px;
+        height: 10px;
+        background: #888;
+        cursor: se-resize;
     }
 
     .draggable-marker {
@@ -167,21 +192,17 @@
         font-size: 0.8rem;
     }
 
-    /* Normale Save button */
     #savePhotoBtn {
         transition: all 0.3s ease-in-out;
     }
 
-    /* Unsaved changes */
     #savePhotoBtn.unsaved {
         background-color: #dc3545 !important;
-        /* Rosso */
         border-color: #dc3545 !important;
         color: white !important;
         animation: pulse 1.2s infinite;
     }
 
-    /* Animazione pulsante */
     @keyframes pulse {
         0% {
             box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
@@ -195,4 +216,37 @@
             box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
         }
     }
+
+    .color-picker-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .color-picker {
+        display: none;
+        position: absolute;
+        top: 25px;
+        left: 0;
+        background: #fff;
+        border: 1px solid #ccc;
+        padding: 5px;
+        z-index: 1002;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        flex-wrap: wrap;
+        width: 120px;
+    }
+
+    .color-option {
+        width: 24px;
+        height: 24px;
+        margin: 3px;
+        border: 1px solid #000;
+        cursor: pointer;
+        display: inline-block;
+    }
+
+    .color-option:hover {
+        border: 2px solid #000;
+        margin: 2px;
+    }
 </style>