Frontline

Drawing.js

@@ -22,8 +22,7 @@ const map = new mapboxgl.Map({
 const draw = new MapboxDraw({
     displayControlsDefault: false,
     controls: {
-        line_string: true,
-        trash: true
+        line_string: true
     },
     defaultMode: 'draw_line_string',
     styles: [
@@ -94,17 +93,11 @@ 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) => {
+    // Hledání šipek
     const arrowFeatures = map.queryRenderedFeatures(e.point, {
         layers: map.getStyle().layers
             .filter(l => l.id.startsWith('arrow-'))
@@ -121,21 +114,19 @@ map.on('click', (e) => {
             const params = arrowParamsMap.get(featureId);
             if (params) {
                 showArrowEditor(params);
-                hideFrontlineEditor();
             }
 
             draw.changeMode('direct_select', { featureId: featureId });
         }
-        return;
+        return;  // pokud kliknul na arrow, dále nekoukáme
     }
 
-    // Pokud to není arrow, zkus frontline
+    // Hledání frontlinů
     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-', '');
@@ -147,35 +138,70 @@ map.on('click', (e) => {
             const params = frontlineParamsMap.get(featureId);
             if (params) {
                 showFrontlineEditor(params);
-                hideArrowEditor();
             }
 
             draw.changeMode('direct_select', { featureId: featureId });
         }
-        return;
+        return;  // pokud kliknul na frontline, dále nekoukáme
     }
 
+    // Když nic nenajdeme - schovej editory
+    hideFrontlineEditor();
+    hideArrowEditor();
+});
+
+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 (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
+
+        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+        const frontlineLayerIdB = `frontline-${id+1}`;
+        if (map.getLayer(frontlineLayerIdB)) map.removeLayer(frontlineLayerIdB);
+        if (map.getSource(frontlineLayerIdB)) map.removeSource(frontlineLayerIdB);
+        frontlineParamsMap.delete(id);
+        frontlineParamsMap.delete(id+1);
+        
         hideArrowEditor();
         hideFrontlineEditor();
-});
-map.dragPan.enable();
+        document.getElementById('calculated-area').innerHTML = '';
+        return;
+    }
 
+    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();
-    const answer = document.getElementById('calculated-area');
+    const feature = e.features[0];
 
-    clearAllArrowLayers();
-    clearAllFrontlineLayers();
+    if (feature.geometry.type !== 'LineString') return;
 
-    if (data.features.length > 0) {
-        answer.innerHTML = '';
-
-        data.features.forEach((line, index) => {
-            if (line.geometry.type !== 'LineString') return;
-
-            const coords = line.geometry.coordinates;
-            const id = line.id || `line-${index}`;
+    const coords = feature.geometry.coordinates;
+    const id = feature.id;
 
     if (currentDrawStyle === 'arrow') {
         if (!arrowParamsMap.has(id)) {
@@ -198,20 +224,24 @@ function handleDraw(e) {
             { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
         );
 
+        const arrowLayerId = `arrow-${id}`;
+        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
         drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.id === id);
 
     } else if (currentDrawStyle === 'frontline') {
         if (!frontlineParamsMap.has(id)) {
             frontlineParamsMap.set(id, {
-                        splineStep: 20,
-                        spacing: 500,
-                        offsetDistance: 12000,
+                splineStep: 0.08,
+                offsetDistance: 10000,
                 style: LEFT_SIDE,
                 protrusion: {
-                            length: 2000,
+                    length: 15000,
                     startSize: 5000,
-                            endSize: 5000,
-                            gap: 10000
+                    endSize: 500,
+                    gap: 15000
                 }
             });
         }
@@ -221,13 +251,15 @@ function handleDraw(e) {
         const frontlineData = {
             points: coords,
             splineStep: params.splineStep,
-                    spacing: params.spacing,
             offsetDistance: params.offsetDistance,
             style: params.style
         };
 
         const protrusionData = params.protrusion;
 
+        console.log("Create");
+        console.log(frontlineData);
+        console.log(protrusionData);
         const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
 
         let polygonToDraw = frontlineGeoJSON;
@@ -235,21 +267,37 @@ function handleDraw(e) {
             polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
         }
 
-                drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
+        if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
+            let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
+            let polygonToDrawRight = frontlineGeoJSON.rightPoly;
+
+            console.log("polygonToDrawLeft", polygonToDrawLeft);
+            console.log("polygonToDrawRight", polygonToDrawRight);
+            
+            const frontlineLayerId = `frontline-${id}`;
+            if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+            if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+
+            drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`);
+            drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`);
+            
+            const allFeatures = draw.getAll().features;
+            currentFeature = allFeatures.find(f => f.id === id);
+
+            return;
         }
-        });
-    } else {
-        answer.innerHTML = '';
-        if (e.type !== 'draw.delete')
-            alert('Klikni na mapu pro kreslení čáry.');
+
+        const frontlineLayerId = `frontline-${id}`;
+        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+        drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.id === id);
+        
     }
 }
 
 function drawArrowOnMap(geojson, id) {
-
-    if (map.getLayer(id)) map.removeLayer(id);
-    if (map.getSource(id)) map.removeSource(id);
-
     map.addSource(id, {
         type: 'geojson',
         data: geojson
@@ -264,7 +312,6 @@ function drawArrowOnMap(geojson, id) {
             'fill-opacity': 0.5
         }
     });
-    console.log('HERE');
 }
 
 function drawFrontlineOnMap(frontlineGeoJSON, id) {
@@ -289,17 +336,17 @@ function drawFrontlineOnMap(frontlineGeoJSON, id) {
 }
 
 function clearAllArrowLayers() {
-    const layers = map.getStyle().layers;
-    if (!layers) return;
+    const allLayerIds = map.getStyle().layers.map(l => l.id);
 
-    layers.forEach(layer => {
-        if (layer.id.startsWith('arrow-')) {
-            if (map.getLayer(layer.id)) map.removeLayer(layer.id);
-            if (map.getSource(layer.id)) map.removeSource(layer.id);
+    allLayerIds.forEach(id => {
+        if (id.startsWith('arrow-')) {
+            if (map.getLayer(id)) map.removeLayer(id);
+            if (map.getSource(id)) map.removeSource(id);
         }
     });
 }
 
+
 function clearAllFrontlineLayers() {
     const layers = map.getStyle().layers;
     if (!layers) return;
@@ -343,7 +390,6 @@ function showFrontlineEditor(params) {
     popup.style.top = '70px';
 
     document.getElementById('splineStepFrontline').value = params.splineStep;
-    document.getElementById('spacing').value = params.spacing;
     document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
     document.getElementById('styleFrontline').value = params.style;
 
@@ -360,10 +406,19 @@ function hideFrontlineEditor() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+
+    document.getElementById('removeArrow').addEventListener('click', () => {
+        
+        MyDelete();
+    });
+
+    document.getElementById('removeFrontline').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;
@@ -399,7 +454,15 @@ document.getElementById('applyArrowChanges').addEventListener('click', () => {
             lengthArrow
         });
 
+        //ARROW
+        const arrowLayerId = `arrow-${id}`;
+        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
+
         drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
+
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.id === id);
     });
 
     document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
@@ -409,9 +472,8 @@ document.getElementById('applyFrontlineChanges').addEventListener('click', () =>
         const id = currentFeature.id;
 
         const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
-    const spacing = parseFloat(document.getElementById('spacing').value);
         const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
-    const style = document.getElementById('styleFrontline').value;
+        const style = parseInt(document.getElementById('styleFrontline').value);
 
         const length = parseFloat(document.getElementById('protrusionLength').value);
         const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
@@ -420,7 +482,6 @@ document.getElementById('applyFrontlineChanges').addEventListener('click', () =>
 
         frontlineParamsMap.set(id, {
             splineStep,
-        spacing,
             offsetDistance,
             style,
             protrusion: {
@@ -434,37 +495,78 @@ document.getElementById('applyFrontlineChanges').addEventListener('click', () =>
         const frontlineData = {
             points: coords,
             splineStep,
-        spacing,
             offsetDistance,
             style
         };
 
         const protrusionData = frontlineParamsMap.get(id).protrusion;
 
+        console.log("Update");
+        console.log(frontlineData);
+        console.log(protrusionData);
+
         const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
 
+        console.log("frontlineGeoJSON", frontlineGeoJSON);
         let polygonToDraw = frontlineGeoJSON;
+
         if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
             polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
         }
+        if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
+            let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
+            let polygonToDrawRight = frontlineGeoJSON.rightPoly;
+
+            console.log("polygonToDrawLeft", polygonToDrawLeft);
+            console.log("polygonToDrawRight", polygonToDrawRight);
+            
+            const frontlineLayerId = `frontline-${id}`;
+            if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+            if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+
+            console.log(frontlineLayerId);
+            console.log(`frontline-${id+1}`);
+            drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`);
+            drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`);
+            
+            const allFeatures = draw.getAll().features;
+            currentFeature = allFeatures.find(f => f.id === id);
+
+            return;
+        }
+
+        //if (last was both destroy id+1) TODO
+        console.log("Test2");
+        const frontlineLayerId = `frontline-${id}`;
+        if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);
+        if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);
+        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
 
         drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
+        
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.id === id);
     });
 
     const buttonsContainer = document.getElementById('drawStyleButtons');
     buttonsContainer.addEventListener('click', (event) => {
         if (event.target.tagName !== 'BUTTON') return;
 
-    // Odeber aktivní třídu ze všech tlačítek
         Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
 
-    // Nastav aktivní třídu na kliknuté tlačítko
         event.target.classList.add('active');
 
-    // Nastav styl podle data atributu
         currentDrawStyle = event.target.getAttribute('data-style');
+        updateButtonStyles();
+    });
+    updateButtonStyles();
+    function updateButtonStyles() {
+        Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
+            const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
+            btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
+            btn.style.color = isSelected ? '#fff' : '#000';
+        });
+    }
 
-    // Při změně stylu překreslíme aktuální kreslené prvky
-    handleDraw({ type: 'draw.update' });
-});
 });

index.html

@@ -70,18 +70,18 @@ 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;">
     <h3>Frontline Editor</h3>
     <label>Spline Step: <input id="splineStepFrontline" type="number" step="1"></label><br>
-    <label>Spacing: <input id="spacing" type="number" step="100"></label><br>
     <label>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
     <label>Style:
         <select id="styleFrontline">
-            <option value="leftSide">Left Side</option>
-            <option value="rightSide">Right Side</option>
-            <option value="bothSides">Both Sides</option>
+            <option value=1>Left Side</option>
+            <option value=2>Right Side</option>
+            <option value=3>Both Sides</option>
         </select>
     </label><br>
     <h4>Protrusion</h4>
@@ -90,10 +90,11 @@ 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 Frontline</button>
 </div>
 
     <div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
-      <button data-style="frontline" class="active">Frontline</button>
+      <button data-style="frontline">Frontline</button>
       <button data-style="arrow">Arrow</button>
       <!-- další styly můžeš přidat sem -->
     </div>