Split scripts

Drawing.js

@@ -1,55 +1,15 @@
 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 { getFrontline } from "./Frontline.js";
-import { getFrontline } from "athena-utils/shape/Frontline.js";
 import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
+import { handleDraw, handleClick, showArrowEditor, hideArrowEditor, showFrontlineEditor, hideFrontlineEditor, handleDelete, drawOnMap } from "./DrawingFunctions.js";
+import { arrowParamsMap, frontlineParamsMap, currentFeature, setCurrentFeature} from "./DrawingFunctions.js";
 
-const ARROW = "arrow";
+export const ARROW = "arrow";
-const FRONTLINE = "frontline";
+export const FRONTLINE = "frontline";
-const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
+export 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;
 
-const arrowParamsMap = new Map();
-const frontlineParamsMap = new Map();
-
 mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
 
 const map = new mapboxgl.Map({
@@ -130,252 +90,25 @@ const draw = new MapboxDraw({
 
 // Map controlls
 map.addControl(draw, 'top-left');
-map.on('draw.create', handleDraw);
+map.on('draw.create', (e) => {
-map.on('draw.update', handleDraw);
+handleDraw(e, map, draw, currentDrawStyle)
+});
+map.on('draw.update', (e) => {
+handleDraw(e, map, draw, currentDrawStyle)
+});
 map.on('click', (e) => {
     hideArrowEditor();
     hideFrontlineEditor();
-    handleClick(e, ARROW, arrowParamsMap, showArrowEditor);
+    handleClick(e, ARROW, arrowParamsMap, showArrowEditor, map, draw, currentDrawStyle);
-    handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor);
+    handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor, map, draw, currentDrawStyle);
 });
 map.dragPan.enable();
 
-function handleDraw(e) {
+export function updateButtonStyles(drawStyle) {
-    const feature = e.features[0];
+    currentDrawStyle = drawStyle;
-    const coords = feature.geometry.coordinates;
-    const id = feature.id;
-
-    if (currentDrawStyle === ARROW) {
-        DrawArrow(coords, id);
-    } else if (currentDrawStyle === FRONTLINE) {
-        DrawFrontline(coords, 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)
-    });
-
-    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);
-
-    if (currentFeature) {
-        const params = paramsMap.get(featureId);
-        if (params) {
-            showEditorFunction(params);
-        }
-        draw.changeMode('direct_select', { featureId: featureId });
-    }
-}
-
-function DrawArrow(coordinates, polygonId) {
-    if (!arrowParamsMap.has(polygonId)) {
-        arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
-    }
-
-    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
-        }
-    );
-    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
-    );
-
-    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, drawOnMap, polygonToDraw, params.paintOptionsLeft);
-
-        let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
-
-        drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight);
-        return;
-    }
-
-    if (params.style == 1){ // LEFT_SIDE
-        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
-    }else if(params.style == 2){ // RIGHT_SIDE
-        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 === polygonId);
-}
-
-function drawOnMap(frontlineGeoJSON, id, paintOptions = {}) {
-    if (map.getLayer(id)) map.removeLayer(id);
-    if (map.getSource(id)) map.removeSource(id);
-
-    map.addSource(id, {
-        type: 'geojson',
-        data: frontlineGeoJSON
-    });
-
-    map.addLayer({
-        id: id,
-        type: 'fill',
-        source: id,
-        paint: {
-            'fill-color': paintOptions['fill-color'],
-            'fill-opacity': paintOptions['fill-opacity'],
-            'fill-outline-color': paintOptions['fill-outline-color']
-        }
-    });
-}
-
-
-function handleDelete(polygonType)
-{
-    if (!currentFeature) return;
-
-    const id = currentFeature.id;
-    draw.delete(id);
-
-    //ARROW
-    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';
-
-    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('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';
-    currentFeature = null;
-}
-
-function showFrontlineEditor(params) {
-    const popup = document.getElementById('frontline-editor');
-    popup.style.display = 'block';
-    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('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('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() {
-    const popup = document.getElementById('frontline-editor');
-    popup.style.display = 'none';
-    currentFeature = null;
-}
-
-function updateButtonStyles() {
     const buttonsContainer = document.getElementById('drawStyleButtons');
     Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
-        const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
+        const isSelected = btn.getAttribute('data-style') === drawStyle;
         btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
         btn.style.color = isSelected ? '#fff' : '#000';
     });
@@ -383,11 +116,11 @@ function updateButtonStyles() {
 
 document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('removeArrow').addEventListener('click', () => {
-        handleDelete(ARROW);
+        handleDelete(ARROW, map, draw);
     });
 
     document.getElementById('removeFrontline').addEventListener('click', () => {
-        handleDelete(FRONTLINE);
+        handleDelete(FRONTLINE, map, draw);
     });
 
     document.getElementById('applyArrowChanges').addEventListener('click', () => {
@@ -402,6 +135,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const minValue = parseFloat(document.getElementById('minValue').value);
         const widthArrow = parseFloat(document.getElementById('widthArrow').value);
         const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
+        const calculation = parseInt(document.getElementById('styleArrow').value);
 
         const fillColor = document.getElementById('arrowFillColor').value;
         const outlineColor = document.getElementById('arrowOutlineColor').value;
@@ -416,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => {
         arrowParamsMap.set(id, {
             splineStep,
             offsetDistance,
-            calculation: ARROW_BODY_STYLE_LINEAR,
+            calculation,
             range,
             minValue,
             widthArrow,
@@ -429,7 +163,7 @@ document.addEventListener('DOMContentLoaded', () => {
             splineStep,
             offsetDistance
         }, {
-            calculation: ARROW_BODY_STYLE_LINEAR,
+            calculation,
             range,
             minValue
         }, {
@@ -442,10 +176,10 @@ document.addEventListener('DOMContentLoaded', () => {
         if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
         if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
 
-        drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions);
+        drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions, map);
 
         const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === id);
+        setCurrentFeature(allFeatures.find(f => f.id === id));
     });
 
     document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
@@ -517,11 +251,11 @@ document.addEventListener('DOMContentLoaded', () => {
             if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
             if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
 
-            drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft);
+            drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft, map);
-            drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight);
+            drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight, map);
             
             const allFeatures = draw.getAll().features;
-            currentFeature = allFeatures.find(f => f.id === id);
+            setCurrentFeature(allFeatures.find(f => f.id === id));
 
             return;
         }
@@ -540,10 +274,10 @@ document.addEventListener('DOMContentLoaded', () => {
             paintOptions = paintOptionsRight;
         }
 
-        drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions);
+        drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions, map);
 
         const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === id);
+        setCurrentFeature(allFeatures.find(f => f.id === id));
     });
 
     const buttonsContainer = document.getElementById('drawStyleButtons');
@@ -555,8 +289,8 @@ document.addEventListener('DOMContentLoaded', () => {
         event.target.classList.add('active');
         
         currentDrawStyle = event.target.getAttribute('data-style');
-        updateButtonStyles();
+        updateButtonStyles(currentDrawStyle);
     });
 
-    updateButtonStyles();
+    updateButtonStyles(currentDrawStyle);
 });

DrawingFunctions.js

@@ -0,0 +1,285 @@
+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 { getFrontline } from "./Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
+import { updateButtonStyles } from "./Drawing.js";
+import { ARROW, FRONTLINE, ADDITIONAL_SIDE } from "./Drawing.js";
+
+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
+    }
+};
+
+export let currentFeature = null;
+
+export function setCurrentFeature(feature) {
+    currentFeature = feature;
+}
+
+export const arrowParamsMap = new Map();
+export const frontlineParamsMap = new Map();
+
+export function handleDraw(e, myMap, myDraw, drawStyle) {
+    const feature = e.features[0];
+    const coords = feature.geometry.coordinates;
+    const id = feature.id;
+
+    if (drawStyle === ARROW) {
+        DrawArrow(coords, id, myMap, myDraw);
+    } else if (drawStyle === FRONTLINE) {
+        DrawFrontline(coords, id, myMap, myDraw);
+    }
+}
+
+export function handleClick(click, prefix, paramsMap, showEditorFunction, myMap, myDraw, drawStyle) {
+    const features = myMap.queryRenderedFeatures(click.point, {
+        layers: myMap.getStyle().layers
+            .filter(l => l.id.startsWith(prefix + "-"))
+            .map(l => l.id)
+    });
+
+    if (features.length === 0) return;
+
+    drawStyle = prefix;
+    updateButtonStyles(drawStyle);
+    const feature = features[0];
+    const featureId = feature.layer.id.replace(prefix + "-", '');
+
+    const allFeatures = myDraw.getAll().features;
+    currentFeature = allFeatures.find(f => f.id === featureId);
+
+    if (currentFeature) {
+        const params = paramsMap.get(featureId);
+        if (params) {
+            showEditorFunction(params);
+        }
+        myDraw.changeMode('direct_select', { featureId: featureId });
+    }
+}
+
+function DrawArrow(coordinates, polygonId, myMap, myDraw) {
+    if (!arrowParamsMap.has(polygonId)) {
+        arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
+    }
+
+    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
+        }
+    );
+    updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions, myMap, myDraw);
+}
+
+function DrawFrontline(coordinates, polygonId, myMap, myDraw) {
+    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, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
+
+        let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
+
+        drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight, myMap, myDraw);
+        return;
+    }
+
+    if (params.style == 1){ // LEFT_SIDE
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
+    }else if(params.style == 2){ // RIGHT_SIDE
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight, myMap, myDraw);
+    }
+}
+
+function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions, myMap, myDraw) {
+    const layerId = prefix + "-" + polygonId;
+
+    if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
+    if (myMap.getSource(layerId)) myMap.removeSource(layerId);
+
+    drawFunction(geojson, layerId, paintOptions, myMap);
+
+    const allFeatures = myDraw.getAll().features;
+    currentFeature = allFeatures.find(f => f.id === polygonId);
+}
+
+export function drawOnMap(frontlineGeoJSON, id, paintOptions = {}, myMap) {
+    if (myMap.getLayer(id)) myMap.removeLayer(id);
+    if (myMap.getSource(id)) myMap.removeSource(id);
+
+    myMap.addSource(id, {
+        type: 'geojson',
+        data: frontlineGeoJSON
+    });
+
+    myMap.addLayer({
+        id: id,
+        type: 'fill',
+        source: id,
+        paint: {
+            'fill-color': paintOptions['fill-color'],
+            'fill-opacity': paintOptions['fill-opacity'],
+            'fill-outline-color': paintOptions['fill-outline-color']
+        }
+    });
+}
+
+
+export function handleDelete(polygonType, myMap, myDraw)
+{
+    if (!currentFeature) return;
+
+    const id = currentFeature.id;
+    myDraw.delete(id);
+
+    //ARROW
+    if(polygonType == ARROW){
+        const arrowLayerId = polygonType + "-" + id;
+        DeleteFromMap(arrowLayerId, id, myMap);
+    }
+
+    //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, myMap);
+            DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE, myMap);
+            hideArrowEditor();
+            hideFrontlineEditor();
+            return;
+        }
+
+        DeleteFromMap(frontlineLayerId, id, myMap);
+    }
+
+    hideArrowEditor();
+    hideFrontlineEditor();
+}
+
+function DeleteFromMap(layerId, FeatureId, myMap){
+    if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
+    if (myMap.getSource(layerId)) myMap.removeSource(layerId);
+
+    arrowParamsMap.delete(FeatureId);
+}
+
+export function showArrowEditor(params) {
+    const popup = document.getElementById('arrow-editor');
+    popup.style.display = 'block';
+    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('styleArrow').value = params.calculation;
+    
+    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"]);
+}
+
+export function hideArrowEditor() {
+    const popup = document.getElementById('arrow-editor');
+    popup.style.display = 'none';
+    currentFeature = null;
+}
+
+export function showFrontlineEditor(params) {
+    const popup = document.getElementById('frontline-editor');
+    popup.style.display = 'block';
+    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('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('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"]);
+}
+
+export function hideFrontlineEditor() {
+    const popup = document.getElementById('frontline-editor');
+    popup.style.display = 'none';
+    currentFeature = null;
+}

Frontline.js

@@ -182,7 +182,7 @@ function computeProtrusion(leftSidePoints, protrusionData, sideOffset) {
         const localDistance = distance - currentSegmentPos;
 
         const pointOnSegment = turf.along(turf.lineString([seg.p0, seg.p1]), localDistance, { units: METERS }).geometry.coordinates;
-        const thicknessOffset = sideOffset * 0.2;
+        const thicknessOffset = sideOffset * 0.1;
 
         const adjustedPoint = movePoint(pointOnSegment, thicknessOffset, seg.bearing + 90);
         const centerPoint = movePoint(adjustedPoint, protrusionData.length, seg.bearing - 90);

index.html

@@ -68,6 +68,14 @@ 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>
     
+    <label>Style:
+        <select id="styleArrow">
+            <option value=1>Constant</option>
+            <option value=2>Linear</option>
+            <option value=3>Exponential</option>
+        </select>
+    </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>