Live labeling, responsive drilling, and improved vertex insertion

index.html

@@ -1722,7 +1722,12 @@
                         lineOptions: { color: '#cca300', weight: 6 },
                         vertexOptions: { color: '#cca300', radius: 6 },
                         middleMarkerOptions: { color: '#cca300', opacity: 0.6, radius: 4 }
+                    }).on('editable:vertex:drag editable:vertex:dragend editable:vertex:new editable:vertex:deleted editable:vertex:inserted', (e) => {
+                         calculateStats(v);
+                         updateVariantStatsUI(v);
+                         updateRouteLabels(v);
                     });
+                    
                     drillingLayers[v.id] = L.featureGroup({ interactive: false, pane: 'drillingPane' });
                     labelLayers[v.id] = L.featureGroup({ interactive: false, pane: 'labelPane' });
 
@@ -1737,24 +1742,26 @@
                         if (!v.active) return;
                         if (!map.editTools) return;
                         
-                        // Prevent the default map click from bubbling
                         L.DomEvent.stopPropagation(e);
                         
                         const layer = routeLayers[v.id];
-                        // Find the closest segment and insert a point
-                        const point = map.mouseEventToLatLng(e.originalEvent);
-                        const vertexIndex = findClosestSegmentIndex(layer.getLatLngs(), point);
+                        const point = e.latlng;
+                        const latlngs = layer.getLatLngs();
+                        const vertexIndex = findClosestSegmentIndex(latlngs, point);
                         
                         if (vertexIndex !== -1) {
-                            const latlngs = layer.getLatLngs();
                             latlngs.splice(vertexIndex + 1, 0, point);
                             layer.setLatLngs(latlngs);
-                            layer.editor.refresh(); // Tell the Leaflet.Editable editor to update markers
+                            if (layer.editor) layer.editor.refresh();
                             
-                            // Trigger all the sync events manually
-                            map.fire('editable:vertex:inserted', { layer: layer });
+                            calculateStats(v);
+                            updateVariantStatsUI(v);
+                            updateRouteLabels(v);
+                            saveVariantToDB(v);
                         }
                     });
+                    
+                    updateRouteLabels(v);
                 }
 
                 const layer = routeLayers[v.id];
@@ -1920,6 +1927,29 @@
             }
         });
 
+        // Helper for labels
+        function updateRouteLabels(variant) {
+            const labelGroup = labelLayers[variant.id];
+            if (!labelGroup) return;
+            labelGroup.clearLayers();
+            
+            if (variant.routes && variant.routes.length > 1) {
+                const midIndex = Math.floor(variant.routes.length / 2);
+                const pos = variant.routes[midIndex];
+                
+                if (pos) {
+                    L.marker(pos, {
+                        icon: L.divIcon({
+                            className: 'route-label',
+                            html: `<div style="background: white; padding: 2px 8px; border: 2px solid #cca300; border-radius: 10px; font-weight: bold; font-size: 11px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">${variant.name}</div>`,
+                            iconSize: [80, 20],
+                            iconAnchor: [40, 10]
+                        })
+                    }).addTo(labelGroup);
+                }
+            }
+        }
+
         // Helper to find the best spot to insert a new vertex
         function findClosestSegmentIndex(latlngs, point) {
             let minDistance = Infinity;