const ADDITIONAL_SIDE

Drawing.js

@@ -1,11 +1,52 @@
 import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
-import {  ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL  } from "athena-utils/shape/Arrow.js";
+import {  ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL  } from "athena-utils/shape/Arrow.js";
 import { getFrontline } from "athena-utils/shape/Frontline.js";
 import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
 
-let mouseMoveListener = null;
+const ARROW = "arrow";
+const FRONTLINE = "frontline";
+
+const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
+
+const DEFAULT_ARROW_PARAMS = {
+    splineStep: 20,
+    offsetDistance: 12000,
+    calculation: ARROW_BODY_STYLE_LINEAR,
+    range: 1,
+    minValue: 0.1,
+    widthArrow: 5,
+    lengthArrow: 8,
+    paintOptions: {
+        "fill-color": "#0099ff",
+        "fill-outline-color": "#005588",
+        "fill-opacity": 0.6
+    }
+};
+
+const DEFAULT_FRONTLINE_PARAMS = {
+    splineStep: 0.08,
+    offsetDistance: 10000,
+    style: LEFT_SIDE,
+    protrusion: {
+        length: 15000,
+        startSize: 5000,
+        endSize: 500,
+        gap: 15000
+    },
+    paintOptionsLeft: {
+        "fill-color": "#00ff37",
+        "fill-outline-color": "#008809",
+        "fill-opacity": 0.6
+    },
+    paintOptionsRight: {
+        "fill-color": "#0011ff",
+        "fill-outline-color": "#002b88",
+        "fill-opacity": 0.6
+    }
+};
+
 let currentFeature = null;
-let currentDrawStyle = 'arrow';
+let currentDrawStyle = ARROW;
 
 const arrowParamsMap = new Map();
 const frontlineParamsMap = new Map();
@@ -19,6 +60,7 @@ const map = new mapboxgl.Map({
     zoom: 5
 });
 
+// Drawing visuals
 const draw = new MapboxDraw({
     displayControlsDefault: false,
     controls: {
@@ -26,7 +68,7 @@ const draw = new MapboxDraw({
     },
     defaultMode: 'draw_line_string',
     styles: [
-        // Aktivní linka - úplně průhledná
+        // Main drawing line
         {
             id: 'gl-draw-line',
             type: 'line',
@@ -36,15 +78,15 @@ const draw = new MapboxDraw({
                 'line-join': 'round'
             },
             paint: {
-                'line-color': '#00ff00',  // zelená
+                'line-color': 'rgb(0, 255, 0)',
                 'line-width': 4
             }
         },
-        // Neaktivní linka - taky průhledná
+        // This makes the nonstop visible line invisible
         {
             id: 'gl-draw-line-inactive',
             type: 'line',
-            filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'false']],
+            filter: ['all', ['==', '$type', 'LineString'], ['==', 'deactive', 'false']],
             layout: {
                 'line-cap': 'round',
                 'line-join': 'round'
@@ -54,267 +96,167 @@ const draw = new MapboxDraw({
                 'line-width': 2
             }
         },
-        // Body (vertexy) - průhledné, pokud chceš
+        // Selected point
         {
             id: 'gl-draw-polygon-and-line-vertex-active',
             type: 'circle',
             filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'true']],
             paint: {
                 'circle-radius': 6,
-                'circle-color': '#00ff00'  // zelená
+                'circle-color': 'rgb(255, 255, 0)'
             }
         },
+        // Main points
         {
             id: 'gl-draw-polygon-and-line-vertex-inactive',
             type: 'circle',
             filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'false']],
             paint: {
                 'circle-radius': 4,
-                'circle-color': '#00aa00'  // tmavší zelená
+                'circle-color': 'rgb(0, 255, 0)'
             }
         },
-
+        // Midpoints
-        // midpointy - musí být viditelné, aby fungovalo kliknutí a přidávání vertexů
         {
             id: 'gl-draw-polygon-midpoint',
             type: 'circle',
             filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
-            paint: { 'circle-radius': 4, 'circle-color': '#fbb03b' } // žlutá
+            paint: {
-        },
+                'circle-radius': 4,
-        {
+                'circle-color': 'rgb(0, 255, 174)'
-            id: 'gl-draw-polygon-midpoint-active',
+            }
-            type: 'circle',
-            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint'], ['==', 'active', 'true']],
-            paint: { 'circle-radius': 6, 'circle-color': '#fbb03b' }
         }
     ]
 });
 
-
+// Map controlls
-
 map.addControl(draw, 'top-left');
-
 map.on('draw.create', handleDraw);
 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-'))
-            .map(l => l.id)
-    });
-    if (arrowFeatures.length > 0) {
-        const arrowFeature = arrowFeatures[0];
-        const featureId = arrowFeature.layer.id.replace('arrow-', '');
-
-        const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === featureId);
-
-        if (currentFeature) {
-            const params = arrowParamsMap.get(featureId);
-            if (params) {
-                showArrowEditor(params);
-            }
-
-            draw.changeMode('direct_select', { featureId: featureId });
-        }
-        return;  // pokud kliknul na arrow, dále nekoukáme
-    }
-
-    // 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-', '');
-
-        const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === featureId);
-
-        if (currentFeature) {
-            const params = frontlineParamsMap.get(featureId);
-            if (params) {
-                showFrontlineEditor(params);
-            }
-
-            draw.changeMode('direct_select', { featureId: featureId });
-        }
-        return;  // pokud kliknul na frontline, dále nekoukáme
-    }
-
-    // Když nic nenajdeme - schovej editory
-    hideFrontlineEditor();
     hideArrowEditor();
+    hideFrontlineEditor();
+    handleClick(e, ARROW, arrowParamsMap, showArrowEditor);
+    handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor);
 });
-
 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();
-        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 feature = e.features[0];
-
-    if (feature.geometry.type !== 'LineString') return;
-
     const coords = feature.geometry.coordinates;
     const id = feature.id;
 
-    if (currentDrawStyle === 'arrow') {
+    if (currentDrawStyle === ARROW) {
-        if (!arrowParamsMap.has(id)) {
+        DrawArrow(coords, id);
-            arrowParamsMap.set(id, {
+    } else if (currentDrawStyle === FRONTLINE) {
-                splineStep: 20,
+        DrawFrontline(coords, id);
-                offsetDistance: 12000,
+    }
-                calculation: ARROW_BODY_STYLE_LINEAR,
-                range: 1,
-                minValue: 0.1,
-                widthArrow: 5,
-                lengthArrow: 8
-            });
 }
 
-        const params = arrowParamsMap.get(id);
+function handleClick(click, prefix, paramsMap, showEditorFunction) {
+    const features = map.queryRenderedFeatures(click.point, {
+        layers: map.getStyle().layers
+            .filter(l => l.id.startsWith(prefix + "-"))
+            .map(l => l.id)
+    });
 
-        const arrowGeoJSON = getArrowPolygon(
+    if (features.length === 0) return;
-            { points: coords, splineStep: params.splineStep, offsetDistance: params.offsetDistance },
+
-            { calculation: params.calculation, range: params.range, minValue: params.minValue },
+    currentDrawStyle = prefix;
-            { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
+    updateButtonStyles();
-        );
+    const feature = features[0];
+    const featureId = feature.layer.id.replace(prefix + "-", '');
 
-        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);
+    currentFeature = allFeatures.find(f => f.id === featureId);
 
-    } else if (currentDrawStyle === 'frontline') {
+    if (currentFeature) {
-        if (!frontlineParamsMap.has(id)) {
+        const params = paramsMap.get(featureId);
-            frontlineParamsMap.set(id, {
+        if (params) {
-                splineStep: 0.08,
+            showEditorFunction(params);
-                offsetDistance: 10000,
+        }
-                style: LEFT_SIDE,
+        draw.changeMode('direct_select', { featureId: featureId });
-                protrusion: {
-                    length: 15000,
-                    startSize: 5000,
-                    endSize: 500,
-                    gap: 15000
     }
-            });
 }
 
-        const params = frontlineParamsMap.get(id);
+function DrawArrow(coordinates, polygonId) {
+    if (!arrowParamsMap.has(polygonId)) {
+        arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
+    }
 
-        const frontlineData = {
+    const params = arrowParamsMap.get(polygonId);
-            points: coords,
+    const arrowGeoJSON = getArrowPolygon(
+        {
+            points: coordinates,
+            splineStep: params.splineStep,
+            offsetDistance: params.offsetDistance
+        },
+        {
+            calculation: params.calculation,
+            range: params.range,
+            minValue: params.minValue
+        },
+        {
+            widthArrow: params.widthArrow,
+            lengthArrow: params.lengthArrow
+        }
+    );
+    updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions);
+}
+
+function DrawFrontline(coordinates, polygonId) {
+    if (!frontlineParamsMap.has(polygonId)) {
+        frontlineParamsMap.set(polygonId, structuredClone(DEFAULT_FRONTLINE_PARAMS));
+    }
+
+    const params = frontlineParamsMap.get(polygonId);
+    const frontlineGeoJSON = getFrontline(
+        {
+            points: coordinates,
             splineStep: params.splineStep,
             offsetDistance: params.offsetDistance,
             style: params.style
-        };
+        },
-
+        params.protrusion
-        const protrusionData = params.protrusion;
+    );
-
-        console.log("Create");
-        console.log(frontlineData);
-        console.log(protrusionData);
-        const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
 
     let polygonToDraw = frontlineGeoJSON;
+
+    // Only one side
     if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
         polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
     }
 
+    // Both sides
     if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
-            let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
-            let polygonToDrawRight = frontlineGeoJSON.rightPoly;
 
-            console.log("polygonToDrawLeft", polygonToDrawLeft);
+        let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
-            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);
 
+        drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight);
         return;
     }
 
-        const frontlineLayerId = `frontline-${id}`;
+    if (params.style == 1){ // LEFT_SIDE
-        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
-        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+    }else if(params.style == 2){ // RIGHT_SIDE
-        drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight);
+    }
+}
+
+function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions) {
+    const layerId =  prefix + "-" + polygonId;
+
+    if (map.getLayer(layerId)) map.removeLayer(layerId);
+    if (map.getSource(layerId)) map.removeSource(layerId);
+
+    drawFunction(geojson, layerId, paintOptions);
+
     const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === id);
+    currentFeature = allFeatures.find(f => f.id === polygonId);
-        
-    }
 }
 
-function drawArrowOnMap(geojson, id) {
+function drawOnMap(frontlineGeoJSON, id, paintOptions = {}) {
-    map.addSource(id, {
-        type: 'geojson',
-        data: geojson
-    });
-
-    map.addLayer({
-        id: id,
-        type: 'fill',
-        source: id,
-        paint: {
-            'fill-color': '#ff0000',
-            'fill-opacity': 0.5
-        }
-    });
-}
-
-function drawFrontlineOnMap(frontlineGeoJSON, id) {
     if (map.getLayer(id)) map.removeLayer(id);
     if (map.getSource(id)) map.removeSource(id);
 
@@ -328,41 +270,59 @@ function drawFrontlineOnMap(frontlineGeoJSON, id) {
         type: 'fill',
         source: id,
         paint: {
-            'fill-color': '#ff6600',
+            'fill-color': paintOptions['fill-color'],
-            'fill-opacity': 0.6,
+            'fill-opacity': paintOptions['fill-opacity'],
-            'fill-outline-color': '#cc3300'
+            'fill-outline-color': paintOptions['fill-outline-color']
-        }
-    });
-}
-
-function clearAllArrowLayers() {
-    const allLayerIds = map.getStyle().layers.map(l => l.id);
-
-    allLayerIds.forEach(id => {
-        if (id.startsWith('arrow-')) {
-            if (map.getLayer(id)) map.removeLayer(id);
-            if (map.getSource(id)) map.removeSource(id);
         }
     });
 }
 
 
-function clearAllFrontlineLayers() {
+function handleDelete(polygonType)
-    const layers = map.getStyle().layers;
+{
-    if (!layers) return;
+    if (!currentFeature) return;
+       
+    const id = currentFeature.id;
 
-    layers.forEach(layer => {
+    draw.delete(id);
-        if (layer.id.startsWith('frontline-')) {
+
-            if (map.getLayer(layer.id)) map.removeLayer(layer.id);
+    //ARROW
-            if (map.getSource(layer.id)) map.removeSource(layer.id);
+    if(polygonType == ARROW){
+        const arrowLayerId = polygonType + "-" + id;
+        DeleteFromMap(arrowLayerId, id);
     }
-    });
+
+    //Frontline
+    if(polygonType == FRONTLINE){
+        const frontlineLayerId = polygonType + "-" + id;
+
+        if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
+            const frontlineLayerIdB = polygonType + "-" + (id + ADDITIONAL_SIDE);
+
+            DeleteFromMap(frontlineLayerId, id);
+            DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE);
+            hideArrowEditor();
+            hideFrontlineEditor();
+            return;
+        }
+
+        DeleteFromMap(frontlineLayerId, id);
+    }
+       
+    hideArrowEditor();
+    hideFrontlineEditor();
+}
+
+function DeleteFromMap(layerId, FeatureId){
+    if (map.getLayer(layerId)) map.removeLayer(layerId);
+    if (map.getSource(layerId)) map.removeSource(layerId);
+
+    arrowParamsMap.delete(FeatureId);
 }
 
 function showArrowEditor(params) {
     const popup = document.getElementById('arrow-editor');
     popup.style.display = 'block';
-
     popup.style.left = '10px';
     popup.style.top = '70px';
 
@@ -372,10 +332,12 @@ function showArrowEditor(params) {
     document.getElementById('minValue').value = params.minValue;
     document.getElementById('widthArrow').value = params.widthArrow;
     document.getElementById('lengthArrow').value = params.lengthArrow;
+    
+    document.getElementById('arrowFillColor').value = params.paintOptions["fill-color"];
+    document.getElementById('arrowOutlineColor').value = params.paintOptions["fill-outline-color"];
+    parseFloat(document.getElementById('arrowOpacity').value = params.paintOptions["fill-opacity"]);
 }
 
-
-
 function hideArrowEditor() {
     const popup = document.getElementById('arrow-editor');
     popup.style.display = 'none';
@@ -385,7 +347,6 @@ function hideArrowEditor() {
 function showFrontlineEditor(params) {
     const popup = document.getElementById('frontline-editor');
     popup.style.display = 'block';
-
     popup.style.left = '10px';
     popup.style.top = '70px';
 
@@ -397,6 +358,14 @@ function showFrontlineEditor(params) {
     document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
     document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
     document.getElementById('protrusionGap').value = params.protrusion.gap;
+    
+    document.getElementById('frontlineFillColorLeft').value = params.paintOptionsLeft["fill-color"];
+    document.getElementById('frontlineOutlineColorLeft').value = params.paintOptionsLeft["fill-outline-color"];
+    parseFloat(document.getElementById('frontlineOpacityLeft').value = params.paintOptionsLeft["fill-opacity"]);
+
+    document.getElementById('frontlineFillColorRight').value = params.paintOptionsRight["fill-color"];
+    document.getElementById('frontlineOutlineColorRight').value = params.paintOptionsRight["fill-outline-color"];
+    parseFloat(document.getElementById('frontlineOpacityRight').value = params.paintOptionsRight["fill-opacity"]);
 }
 
 function hideFrontlineEditor() {
@@ -405,22 +374,30 @@ function hideFrontlineEditor() {
     currentFeature = null;
 }
 
+function updateButtonStyles() {
+    const buttonsContainer = document.getElementById('drawStyleButtons');
+    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';
+    });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
 
     document.getElementById('removeArrow').addEventListener('click', () => {
-        
+       
-        MyDelete();
+        handleDelete(ARROW);
     });
 
     document.getElementById('removeFrontline').addEventListener('click', () => {
-        
+       
-        MyDelete();
+        handleDelete(FRONTLINE);
     });
 
     document.getElementById('applyArrowChanges').addEventListener('click', () => {
-        
         if (!currentFeature) return;
-        console.log("Test");
+        
         const coords = currentFeature.geometry.coordinates;
         const id = currentFeature.id;
         
@@ -431,6 +408,17 @@ document.addEventListener('DOMContentLoaded', () => {
         const widthArrow = parseFloat(document.getElementById('widthArrow').value);
         const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
 
+        const fillColor = document.getElementById('arrowFillColor').value;
+        const outlineColor = document.getElementById('arrowOutlineColor').value;
+        const opacity = parseFloat(document.getElementById('arrowOpacity').value);
+
+        const paintOptions = {
+            'fill-color': fillColor,
+            'fill-outline-color': outlineColor,
+            'fill-opacity': opacity
+        };
+
+        
         arrowParamsMap.set(id, {
             splineStep,
             offsetDistance,
@@ -438,7 +426,8 @@ document.addEventListener('DOMContentLoaded', () => {
             range,
             minValue,
             widthArrow,
-            lengthArrow
+            lengthArrow,
+            paintOptions 
         });
 
         const arrowGeoJSON = getArrowPolygon({
@@ -455,11 +444,11 @@ document.addEventListener('DOMContentLoaded', () => {
         });
 
         //ARROW
-        const arrowLayerId = `arrow-${id}`;
+        const arrowLayerId = ARROW + "-" + id;
         if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
         if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
 
-        drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
+        drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions);
 
         const allFeatures = draw.getAll().features;
         currentFeature = allFeatures.find(f => f.id === id);
@@ -480,6 +469,24 @@ document.addEventListener('DOMContentLoaded', () => {
         const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
         const gap = parseFloat(document.getElementById('protrusionGap').value);
 
+        const fillColorLeft = document.getElementById('frontlineFillColorLeft').value;
+        const outlineColorLeft = document.getElementById('frontlineOutlineColorLeft').value;
+        const opacityLeft = parseFloat(document.getElementById('frontlineOpacityLeft').value);
+        const paintOptionsLeft = {
+            'fill-color': fillColorLeft,
+            'fill-outline-color': outlineColorLeft,
+            'fill-opacity': opacityLeft
+        };
+
+        const fillColorRight = document.getElementById('frontlineFillColorRight').value;
+        const outlineColorRight = document.getElementById('frontlineOutlineColorRight').value;
+        const opacityRight = parseFloat(document.getElementById('frontlineOpacityRight').value);
+        const paintOptionsRight = {
+            'fill-color': fillColorRight,
+            'fill-outline-color': outlineColorRight,
+            'fill-opacity': opacityRight
+        };
+
         frontlineParamsMap.set(id, {
             splineStep,
             offsetDistance,
@@ -489,7 +496,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 startSize,
                 endSize,
                 gap
-            }
+            },
+            paintOptionsLeft,
+            paintOptionsRight
         });
 
         const frontlineData = {
@@ -500,14 +509,7 @@ document.addEventListener('DOMContentLoaded', () => {
         };
 
         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) {
@@ -516,18 +518,13 @@ document.addEventListener('DOMContentLoaded', () => {
         if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
             let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
             let polygonToDrawRight = frontlineGeoJSON.rightPoly;
+            const frontlineLayerId = FRONTLINE + "-" + id;
 
-            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);
+            drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft);
-            console.log(`frontline-${id+1}`);
+            drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight);
-            drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`);
-            drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`);
             
             const allFeatures = draw.getAll().features;
             currentFeature = allFeatures.find(f => f.id === id);
@@ -535,15 +532,21 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
         }
 
-        //if (last was both destroy id+1) TODO
+        const frontlineLayerId = FRONTLINE + "-" + id;
-        console.log("Test2");
+        if (map.getLayer(frontlineLayerId + ADDITIONAL_SIDE)) map.removeLayer(frontlineLayerId + ADDITIONAL_SIDE);
-        const frontlineLayerId = `frontline-${id}`;
+        if (map.getSource(frontlineLayerId + ADDITIONAL_SIDE)) map.removeSource(frontlineLayerId + ADDITIONAL_SIDE);
-        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}`);
+        let paintOptions;
+        if(frontlineData.style == LEFT_SIDE){
+            paintOptions = paintOptionsLeft;
+        }else if(frontlineData.style == RIGHT_SIDE)
+        {
+            paintOptions = paintOptionsRight;
+        }
+
+        drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions);
 
         const allFeatures = draw.getAll().features;
         currentFeature = allFeatures.find(f => f.id === id);
@@ -561,12 +564,5 @@ document.addEventListener('DOMContentLoaded', () => {
         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';
 });
-    }
 
-});

index.html

@@ -59,8 +59,6 @@ MAPBOX - DRAWING
   <body>
 
     <div id="map"></div>
-
-    <!-- Editor parametrů šipky -->
     <div id="arrow-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
     <h3>Arrow Editor</h3>
     <label>Spline Step: <input id="splineStep" type="number" step="1"></label><br>
@@ -69,8 +67,15 @@ MAPBOX - DRAWING
     <label>Min Value: <input id="minValue" type="number" step="0.1" min="0"></label><br>
     <label>Width Arrow: <input id="widthArrow" type="number" step="1"></label><br>
     <label>Length Arrow: <input id="lengthArrow" type="number" step="1"></label><br>
+    
+    <h4>Styling</h4>
+    <label>Fill Color: <input id="arrowFillColor" type="color" value="#000000"></label><br>
+    <label>Outline Color: <input id="arrowOutlineColor" type="color" value="#000000"></label><br>
+    <label>Opacity: <input id="arrowOpacity" type="number" min="0" max="1" step="0.1" value="0.6"></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;">
@@ -89,6 +94,17 @@ MAPBOX - DRAWING
     <label>Start Size: <input id="protrusionStartSize" type="number" step="100"></label><br>
     <label>End Size: <input id="protrusionEndSize" type="number" step="100"></label><br>
     <label>Gap: <input id="protrusionGap" type="number" step="100"></label><br>
+
+    <h4>Styling right side</h4>
+    <label>Fill Color: <input id="frontlineFillColorRight" type="color" value="#000000"></label><br>
+    <label>Outline Color: <input id="frontlineOutlineColorRight" type="color" value="#000000"></label><br>
+    <label>Opacity: <input id="frontlineOpacityRight" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
+
+    <h4>Styling left side</h4>
+    <label>Fill Color: <input id="frontlineFillColorLeft" type="color" value="#000000"></label><br>
+    <label>Outline Color: <input id="frontlineOutlineColorLeft" type="color" value="#000000"></label><br>
+    <label>Opacity: <input id="frontlineOpacityLeft" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
+
     <button id="applyFrontlineChanges">Apply Changes</button>
     <button id="removeFrontline">Remove Frontline</button>
 </div>
@@ -96,16 +112,7 @@ MAPBOX - DRAWING
     <div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
       <button data-style="frontline">Frontline</button>
       <button data-style="arrow">Arrow</button>
-      <!-- další styly můžeš přidat sem -->
     </div>
-
-    <!-- Box pro výpis -->
-    <div class="calculation-box">
-      <p>Click the map to draw a polygon.</p>
-      <div id="calculated-area"></div>
-    </div>
-
-    <!-- Hlavní JS -->
     <script type="module" src="Drawing.js"></script>
   </body>
 </html>