gitea-enwelo-jba
/
bwscheddebrock_trassenplaner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Live labeling, responsive drilling, and improved vertex insertion
Deploy TrassenPlaner / deploy (push) Waiting to run Details

This commit is contained in:
Johannes Baumeister 2026-04-20 11:35:27 +02:00
parent f7227421a1
commit 30ec96bd58
1 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@ -1722,7 +1722,12 @@
lineOptions: { color: '#cca300', weight: 6 }, lineOptions: { color: '#cca300', weight: 6 },
vertexOptions: { color: '#cca300', radius: 6 }, vertexOptions: { color: '#cca300', radius: 6 },
middleMarkerOptions: { color: '#cca300', opacity: 0.6, radius: 4 } 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' }); drillingLayers[v.id] = L.featureGroup({ interactive: false, pane: 'drillingPane' });
labelLayers[v.id] = L.featureGroup({ interactive: false, pane: 'labelPane' }); labelLayers[v.id] = L.featureGroup({ interactive: false, pane: 'labelPane' });
@ -1737,24 +1742,26 @@
if (!v.active) return; if (!v.active) return;
if (!map.editTools) return; if (!map.editTools) return;
// Prevent the default map click from bubbling
L.DomEvent.stopPropagation(e); L.DomEvent.stopPropagation(e);
const layer = routeLayers[v.id]; const layer = routeLayers[v.id];
// Find the closest segment and insert a point const point = e.latlng;
const point = map.mouseEventToLatLng(e.originalEvent); const latlngs = layer.getLatLngs();
const vertexIndex = findClosestSegmentIndex(layer.getLatLngs(), point); const vertexIndex = findClosestSegmentIndex(latlngs, point);
if (vertexIndex !== -1) { if (vertexIndex !== -1) {
const latlngs = layer.getLatLngs();
latlngs.splice(vertexIndex + 1, 0, point); latlngs.splice(vertexIndex + 1, 0, point);
layer.setLatLngs(latlngs); 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 calculateStats(v);
map.fire('editable:vertex:inserted', { layer: layer }); updateVariantStatsUI(v);
updateRouteLabels(v);
saveVariantToDB(v);
} }
}); });
updateRouteLabels(v);
} }
const layer = routeLayers[v.id]; 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 // Helper to find the best spot to insert a new vertex
function findClosestSegmentIndex(latlngs, point) { function findClosestSegmentIndex(latlngs, point) {
let minDistance = Infinity; let minDistance = Infinity;