Arrow delete

Drawing.js

@@ -22,8 +22,7 @@ const map = new mapboxgl.Map({
 const draw = new MapboxDraw({
     displayControlsDefault: false,
     controls: {
-        line_string: true,
+        line_string: true
-        trash: true
     },
     defaultMode: 'draw_line_string',
     styles: [
@@ -94,16 +93,8 @@ const draw = new MapboxDraw({
 
 
 map.addControl(draw, 'top-left');
+
 map.on('draw.create', handleDraw);
-map.on('draw.delete', () => {
-    draw.deleteAll();
-    clearAllArrowLayers();
-    clearAllFrontlineLayers();
-    hideArrowEditor();
-    hideFrontlineEditor();
-    document.getElementById('calculated-area').innerHTML = '';
-});
-map.on('draw.update', handleDraw);
 map.on('click', (e) => {
     const arrowFeatures = map.queryRenderedFeatures(e.point, {
         layers: map.getStyle().layers
@@ -121,7 +112,6 @@ map.on('click', (e) => {
             const params = arrowParamsMap.get(featureId);
             if (params) {
                 showArrowEditor(params);
-                hideFrontlineEditor();
             }
 
             draw.changeMode('direct_select', { featureId: featureId });
@@ -129,37 +119,35 @@ map.on('click', (e) => {
         return;
     }
 
-    // Pokud to není arrow, zkus frontline
-    const frontlineFeatures = map.queryRenderedFeatures(e.point, {
-        layers: map.getStyle().layers
-            .filter(l => l.id.startsWith('frontline-'))
-            .map(l => l.id)
-    });
-
-    if (frontlineFeatures.length > 0) {
-        const frontlineFeature = frontlineFeatures[0];
-        const featureId = frontlineFeature.layer.id.replace('frontline-', '');
-
-        const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === featureId);
-
-        if (currentFeature) {
-            const params = frontlineParamsMap.get(featureId);
-            if (params) {
-                showFrontlineEditor(params);
-                hideArrowEditor();
-            }
-
-            draw.changeMode('direct_select', { featureId: featureId });
-        }
-        return;
-    }
 
     hideArrowEditor();
-    hideFrontlineEditor();
 });
 map.dragPan.enable();
 
+function MyDelete()
+{
+    if (!currentFeature) return;
+    
+    const id = currentFeature.id;
+
+    draw.delete(id);
+    //ARROW
+    const arrowLayerId = `arrow-${id}`;
+    if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+    if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
+
+    arrowParamsMap.delete(id);
+
+    //Frontline
+    const frontlineLayerId = `frontline-${id}`;
+    if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+    if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+    frontlineParamsMap.delete(id);
+
+    hideArrowEditor();
+    hideFrontlineEditor();
+    document.getElementById('calculated-area').innerHTML = '';
+}
 
 function handleDraw(e) {
     const data = draw.getAll();
@@ -198,6 +186,7 @@ function handleDraw(e) {
                     { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
                 );
 
+                console.log('Draw');
                 drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
 
             } else if (currentDrawStyle === 'frontline') {
@@ -289,17 +278,17 @@ function drawFrontlineOnMap(frontlineGeoJSON, id) {
 }
 
 function clearAllArrowLayers() {
-    const layers = map.getStyle().layers;
+    const allLayerIds = map.getStyle().layers.map(l => l.id);
-    if (!layers) return;
 
-    layers.forEach(layer => {
+    allLayerIds.forEach(id => {
-        if (layer.id.startsWith('arrow-')) {
+        if (id.startsWith('arrow-')) {
-            if (map.getLayer(layer.id)) map.removeLayer(layer.id);
+            if (map.getLayer(id)) map.removeLayer(id);
-            if (map.getSource(layer.id)) map.removeSource(layer.id);
+            if (map.getSource(id)) map.removeSource(id);
         }
     });
 }
 
+
 function clearAllFrontlineLayers() {
     const layers = map.getStyle().layers;
     if (!layers) return;
@@ -360,10 +349,14 @@ function hideFrontlineEditor() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+
+    document.getElementById('removeArrow').addEventListener('click', () => {
+        
+        MyDelete();
+    });
+
     document.getElementById('applyArrowChanges').addEventListener('click', () => {
         
-    console.log("arrowFeatures");
-    console.log(arrowFeatures);
         if (!currentFeature) return;
         console.log("Test");
         const coords = currentFeature.geometry.coordinates;
@@ -398,7 +391,6 @@ document.getElementById('applyArrowChanges').addEventListener('click', () => {
             widthArrow,
             lengthArrow
         });
-
         drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
     });
 
@@ -465,6 +457,8 @@ buttonsContainer.addEventListener('click', (event) => {
         currentDrawStyle = event.target.getAttribute('data-style');
 
         // Při změně stylu překreslíme aktuální kreslené prvky
+        
+                    console.log('handleDraw');
         handleDraw({ type: 'draw.update' });
     });
 });

index.html

@@ -70,6 +70,7 @@ MAPBOX - DRAWING
     <label>Width Arrow: <input id="widthArrow" type="number" step="1"></label><br>
     <label>Length Arrow: <input id="lengthArrow" type="number" step="1"></label><br>
     <button id="applyArrowChanges">Apply Changes</button>
+    <button id="removeArrow">Remove Arrow</button>
 </div>
 
 <div id="frontline-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
@@ -90,6 +91,7 @@ MAPBOX - DRAWING
     <label>End Size: <input id="protrusionEndSize" type="number" step="100"></label><br>
     <label>Gap: <input id="protrusionGap" type="number" step="100"></label><br>
     <button id="applyFrontlineChanges">Apply Changes</button>
+    <button id="removeFrontline">Remove Arrow</button>
 </div>
 
     <div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">