From 89d137e577018136ae02ff8050c3e02bf028f822 Mon Sep 17 00:00:00 2001 From: Tomas Richtar Date: Thu, 10 Jul 2025 21:04:42 +0200 Subject: [PATCH] Create, Update --- Drawing.js | 663 +++++++++++++++++++++++++++-------------------------- 1 file changed, 333 insertions(+), 330 deletions(-) diff --git a/Drawing.js b/Drawing.js index c978a5c..4de9d76 100644 --- a/Drawing.js +++ b/Drawing.js @@ -1,11 +1,33 @@ 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"; const ARROW = "arrow"; const FRONTLINE = "frontline"; +const DEFAULT_ARROW_PARAMS = { + splineStep: 20, + offsetDistance: 12000, + calculation: ARROW_BODY_STYLE_LINEAR, + range: 1, + minValue: 0.1, + widthArrow: 5, + lengthArrow: 8 +}; + +const DEFAULT_FRONTLINE_PARAMS = { + splineStep: 0.08, + offsetDistance: 10000, + style: LEFT_SIDE, + protrusion: { + length: 15000, + startSize: 5000, + endSize: 500, + gap: 15000 + } +}; + let currentFeature = null; let currentDrawStyle = ARROW; @@ -47,7 +69,7 @@ const draw = new MapboxDraw({ { 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' @@ -82,7 +104,7 @@ const draw = new MapboxDraw({ id: 'gl-draw-polygon-midpoint', type: 'circle', filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']], - paint: { + paint: { 'circle-radius': 4, 'circle-color': 'rgb(0, 255, 174)' } @@ -94,110 +116,19 @@ const draw = new MapboxDraw({ map.addControl(draw, 'top-left'); map.on('draw.create', handleDraw); map.on('draw.update', handleDraw); -map.on('click', (e) => { +map.on('click', (e) => { hideArrowEditor(); hideFrontlineEditor(); handleClick(e, ARROW, arrowParamsMap, showArrowEditor); handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor); }); - -function DrawArrow(coordinates, polygonId) -{ - if (!arrowParamsMap.has(polygonId)) { - arrowParamsMap.set(polygonId, { - splineStep: 20, - offsetDistance: 12000, - calculation: ARROW_BODY_STYLE_LINEAR, - range: 1, - minValue: 0.1, - widthArrow: 5, - lengthArrow: 8 - }); - } - - const params = arrowParamsMap.get(polygonId); - - 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 } - ); - - const arrowLayerId = ARROW + "-" + polygonId; - if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); - if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); - drawArrowOnMap(arrowGeoJSON, ARROW + "-" + polygonId); - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.polygonId === polygonId); - -} - -function DrawFrontline(coordinates, polygonId){ - if (!frontlineParamsMap.has(polygonId)) { - frontlineParamsMap.set(polygonId, { - splineStep: 0.08, - offsetDistance: 10000, - style: LEFT_SIDE, - protrusion: { - length: 15000, - startSize: 5000, - endSize: 500, - gap: 15000 - } - }); - } - - const params = frontlineParamsMap.get(polygonId); - - const frontlineData = { - points: coordinates, - splineStep: params.splineStep, - offsetDistance: params.offsetDistance, - style: params.style - }; - - const protrusionData = params.protrusion; - - const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); - - 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; - - const frontlineLayerId = FRONTLINE + "-" + polygonId; - if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); - if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); - - drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + polygonId); - drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (polygonId+1)); - - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.polygonId === polygonId); - - return; - } - - const frontlineLayerId = FRONTLINE + "-" + polygonId; - if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); - if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); - drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + polygonId); - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.polygonId === polygonId); - -} +map.dragPan.enable(); function handleDraw(e) { const feature = e.features[0]; const coords = feature.geometry.coordinates; const id = feature.id; - - if (currentDrawStyle === ARROW) { DrawArrow(coords, id); } else if (currentDrawStyle === FRONTLINE) { @@ -205,9 +136,7 @@ function handleDraw(e) { } } -function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFunction) { - - console.log("currentFeature" + currentFeature); +function handleClick(click, prefix, paramsMap, showEditorFunction) { const features = map.queryRenderedFeatures(click.point, { layers: map.getStyle().layers .filter(l => l.id.startsWith(prefix + "-")) @@ -216,13 +145,14 @@ function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFun if (features.length === 0) return; + currentDrawStyle = prefix; + updateButtonStyles(); const feature = features[0]; const featureId = feature.layer.id.replace(prefix + "-", ''); const allFeatures = draw.getAll().features; currentFeature = allFeatures.find(f => f.id === featureId); - console.log("currentFeature" + currentFeature); if (currentFeature) { const params = paramsMap.get(featureId); if (params) { @@ -232,297 +162,370 @@ function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFun } } -function MyDelete(polygonType) -{ - if (!currentFeature) return; - - const id = currentFeature.id; - - draw.delete(id); - //ARROW - if(polygonType == ARROW){ - const arrowLayerId = polygonType + "-" + id; - if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); - if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); - - arrowParamsMap.delete(id); +function DrawArrow(coordinates, polygonId) { + if (!arrowParamsMap.has(polygonId)) { + arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS)); } - - //Frontline - if(polygonType == FRONTLINE){ - const frontlineLayerId = polygonType + "-" + 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 = polygonType + "-" + (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(); - return; + const params = arrowParamsMap.get(polygonId); + 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 } + ); - if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); - if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); - frontlineParamsMap.delete(id); - } - - hideArrowEditor(); - hideFrontlineEditor(); + updatePolygonOnMap(ARROW, polygonId, drawArrowOnMap, arrowGeoJSON); } +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 + ); + + let polygonToDraw = frontlineGeoJSON; + + // Only one side + if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) { + polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly; + } + + // Both sides + if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){ + updatePolygonOnMap(FRONTLINE, polygonId, drawFrontlineOnMap, polygonToDraw); + + let additionalPolygonToDraw = frontlineGeoJSON.rightPoly; + drawFrontlineOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1)); + return; + } + + updatePolygonOnMap(FRONTLINE, polygonId, drawFrontlineOnMap, polygonToDraw); +} + +function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) { + const layerId =  prefix + "-" + polygonId; + + if (map.getLayer(layerId)) map.removeLayer(layerId); + if (map.getSource(layerId)) map.removeSource(layerId); + + drawFunction(geojson, layerId); + + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.polygonId === polygonId); +} function drawArrowOnMap(geojson, id) { - map.addSource(id, { - type: 'geojson', - data: geojson - }); +    map.addSource(id, { +        type: 'geojson', +        data: geojson +    }); - map.addLayer({ - id: id, - type: 'fill', - source: id, - paint: { - 'fill-color': '#ff0000', - 'fill-opacity': 0.5 - } - }); +    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); +    if (map.getLayer(id)) map.removeLayer(id); +    if (map.getSource(id)) map.removeSource(id); - map.addSource(id, { - type: 'geojson', - data: frontlineGeoJSON - }); +    map.addSource(id, { +        type: 'geojson', +        data: frontlineGeoJSON +    }); - map.addLayer({ - id: id, - type: 'fill', - source: id, - paint: { - 'fill-color': '#ff6600', - 'fill-opacity': 0.6, - 'fill-outline-color': '#cc3300' - } - }); +    map.addLayer({ +        id: id, +        type: 'fill', +        source: id, +        paint: { +            'fill-color': '#ff6600', +            'fill-opacity': 0.6, +            'fill-outline-color': '#cc3300' +        } +    }); } +function MyDelete(polygonType) +{ +    if (!currentFeature) return; +    +    const id = currentFeature.id; + +    draw.delete(id); +    //ARROW +    if(polygonType == ARROW){ +        const arrowLayerId = polygonType + "-" + id; +        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); +        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); + +        arrowParamsMap.delete(id); +    } +    +    //Frontline +    if(polygonType == FRONTLINE){ +        const frontlineLayerId = polygonType + "-" + 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 = polygonType + "-" + (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(); +            return; +        } + +        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); +        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); +        frontlineParamsMap.delete(id); +    } +    +    hideArrowEditor(); +    hideFrontlineEditor(); +} + + function showArrowEditor(params) { - const popup = document.getElementById('arrow-editor'); - popup.style.display = 'block'; +    const popup = document.getElementById('arrow-editor'); +    popup.style.display = 'block'; - popup.style.left = '10px'; - popup.style.top = '70px'; +    popup.style.left = '10px'; +    popup.style.top = '70px'; - document.getElementById('splineStep').value = params.splineStep; - document.getElementById('offsetDistance').value = params.offsetDistance; - document.getElementById('range').value = params.range; - document.getElementById('minValue').value = params.minValue; - document.getElementById('widthArrow').value = params.widthArrow; - document.getElementById('lengthArrow').value = params.lengthArrow; +    document.getElementById('splineStep').value = params.splineStep; +    document.getElementById('offsetDistance').value = params.offsetDistance; +    document.getElementById('range').value = params.range; +    document.getElementById('minValue').value = params.minValue; +    document.getElementById('widthArrow').value = params.widthArrow; +    document.getElementById('lengthArrow').value = params.lengthArrow; } - - function hideArrowEditor() { - const popup = document.getElementById('arrow-editor'); - popup.style.display = 'none'; - currentFeature = null; +    const popup = document.getElementById('arrow-editor'); +    popup.style.display = 'none'; +    currentFeature = null; } function showFrontlineEditor(params) { - const popup = document.getElementById('frontline-editor'); - popup.style.display = 'block'; +    const popup = document.getElementById('frontline-editor'); +    popup.style.display = 'block'; - popup.style.left = '10px'; - popup.style.top = '70px'; +    popup.style.left = '10px'; +    popup.style.top = '70px'; - document.getElementById('splineStepFrontline').value = params.splineStep; - document.getElementById('offsetDistanceFrontline').value = params.offsetDistance; - document.getElementById('styleFrontline').value = params.style; +    document.getElementById('splineStepFrontline').value = params.splineStep; +    document.getElementById('offsetDistanceFrontline').value = params.offsetDistance; +    document.getElementById('styleFrontline').value = params.style; - document.getElementById('protrusionLength').value = params.protrusion.length; - document.getElementById('protrusionStartSize').value = params.protrusion.startSize; - document.getElementById('protrusionEndSize').value = params.protrusion.endSize; - document.getElementById('protrusionGap').value = params.protrusion.gap; +    document.getElementById('protrusionLength').value = params.protrusion.length; +    document.getElementById('protrusionStartSize').value = params.protrusion.startSize; +    document.getElementById('protrusionEndSize').value = params.protrusion.endSize; +    document.getElementById('protrusionGap').value = params.protrusion.gap; } function hideFrontlineEditor() { - const popup = document.getElementById('frontline-editor'); - popup.style.display = 'none'; - currentFeature = null; +    const popup = document.getElementById('frontline-editor'); +    popup.style.display = 'none'; +    currentFeature = null; } document.addEventListener('DOMContentLoaded', () => { - document.getElementById('removeArrow').addEventListener('click', () => { - - MyDelete(ARROW); - }); +    document.getElementById('removeArrow').addEventListener('click', () => { +        +        MyDelete(ARROW); +    }); - document.getElementById('removeFrontline').addEventListener('click', () => { - - MyDelete(FRONTLINE); - }); +    document.getElementById('removeFrontline').addEventListener('click', () => { +        +        MyDelete(FRONTLINE); +    }); - document.getElementById('applyArrowChanges').addEventListener('click', () => { - - if (!currentFeature) return; - console.log("Test"); - const coords = currentFeature.geometry.coordinates; - const id = currentFeature.id; +    document.getElementById('applyArrowChanges').addEventListener('click', () => { +        +        if (!currentFeature) return; +        console.log("Test"); +        const coords = currentFeature.geometry.coordinates; +        const id = currentFeature.id; - const splineStep = parseFloat(document.getElementById('splineStep').value); - const offsetDistance = parseFloat(document.getElementById('offsetDistance').value); - const range = parseFloat(document.getElementById('range').value); - const minValue = parseFloat(document.getElementById('minValue').value); - const widthArrow = parseFloat(document.getElementById('widthArrow').value); - const lengthArrow = parseFloat(document.getElementById('lengthArrow').value); +        const splineStep = parseFloat(document.getElementById('splineStep').value); +        const offsetDistance = parseFloat(document.getElementById('offsetDistance').value); +        const range = parseFloat(document.getElementById('range').value); +        const minValue = parseFloat(document.getElementById('minValue').value); +        const widthArrow = parseFloat(document.getElementById('widthArrow').value); +        const lengthArrow = parseFloat(document.getElementById('lengthArrow').value); - arrowParamsMap.set(id, { - splineStep, - offsetDistance, - calculation: ARROW_BODY_STYLE_LINEAR, - range, - minValue, - widthArrow, - lengthArrow - }); +        arrowParamsMap.set(id, { +            splineStep, +            offsetDistance, +            calculation: ARROW_BODY_STYLE_LINEAR, +            range, +            minValue, +            widthArrow, +            lengthArrow +        }); - const arrowGeoJSON = getArrowPolygon({ - points: coords, - splineStep, - offsetDistance - }, { - calculation: ARROW_BODY_STYLE_LINEAR, - range, - minValue - }, { - widthArrow, - lengthArrow - }); +        const arrowGeoJSON = getArrowPolygon({ +            points: coords, +            splineStep, +            offsetDistance +        }, { +            calculation: ARROW_BODY_STYLE_LINEAR, +            range, +            minValue +        }, { +            widthArrow, +            lengthArrow +        }); - //ARROW - const arrowLayerId = ARROW + "-" + id; - if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); - if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); +        //ARROW +        const arrowLayerId = ARROW + "-" + id; +        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); +        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); - drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id); +        drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id); - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === id); - }); +        const allFeatures = draw.getAll().features; +        currentFeature = allFeatures.find(f => f.id === id); +    }); - document.getElementById('applyFrontlineChanges').addEventListener('click', () => { - if (!currentFeature) return; +    document.getElementById('applyFrontlineChanges').addEventListener('click', () => { +        if (!currentFeature) return; - const coords = currentFeature.geometry.coordinates; - const id = currentFeature.id; +        const coords = currentFeature.geometry.coordinates; +        const id = currentFeature.id; - const splineStep = parseFloat(document.getElementById('splineStepFrontline').value); - const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value); - const style = parseInt(document.getElementById('styleFrontline').value); +        const splineStep = parseFloat(document.getElementById('splineStepFrontline').value); +        const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value); +        const style = parseInt(document.getElementById('styleFrontline').value); - const length = parseFloat(document.getElementById('protrusionLength').value); - const startSize = parseFloat(document.getElementById('protrusionStartSize').value); - const endSize = parseFloat(document.getElementById('protrusionEndSize').value); - const gap = parseFloat(document.getElementById('protrusionGap').value); +        const length = parseFloat(document.getElementById('protrusionLength').value); +        const startSize = parseFloat(document.getElementById('protrusionStartSize').value); +        const endSize = parseFloat(document.getElementById('protrusionEndSize').value); +        const gap = parseFloat(document.getElementById('protrusionGap').value); - frontlineParamsMap.set(id, { - splineStep, - offsetDistance, - style, - protrusion: { - length, - startSize, - endSize, - gap - } - }); +        frontlineParamsMap.set(id, { +            splineStep, +            offsetDistance, +            style, +            protrusion: { +                length, +                startSize, +                endSize, +                gap +            } +        }); - const frontlineData = { - points: coords, - splineStep, - offsetDistance, - style - }; +        const frontlineData = { +            points: coords, +            splineStep, +            offsetDistance, +            style +        }; - const protrusionData = frontlineParamsMap.get(id).protrusion; +        const protrusionData = frontlineParamsMap.get(id).protrusion; - console.log("Update"); - console.log(frontlineData); - console.log(protrusionData); +        console.log("Update"); +        console.log(frontlineData); +        console.log(protrusionData); - const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); +        const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); - console.log("frontlineGeoJSON", frontlineGeoJSON); - let polygonToDraw = frontlineGeoJSON; +        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; +        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("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); +            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; - } +            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); +        //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); - }); +        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; +    const buttonsContainer = document.getElementById('drawStyleButtons'); +    buttonsContainer.addEventListener('click', (event) => { +        if (event.target.tagName !== 'BUTTON') return; - Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active')); +        Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active')); - event.target.classList.add('active'); +        event.target.classList.add('active'); - 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'; - }); - } -}); \ No newline at end of file +        currentDrawStyle = event.target.getAttribute('data-style'); +        updateButtonStyles(); +    }); +    updateButtonStyles(); +}); + +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'; +    }); +} \ No newline at end of file