Arrow.js

@@ -2,20 +2,12 @@ export const ARROW_BODY_STYLE_CONSTANT = 1;
 export const ARROW_BODY_STYLE_LINEAR = 2;
 export const ARROW_BODY_STYLE_EXPONENTIAL = 3;
 
-
-export const METERS = 'meters';
-
 import * as turf from "@turf/turf";
 
 //ARROW
 // Cubic interpolation source from https://www.paulinternet.nl/?page=bicubic
-/**
+function cubicInterpolate(p, x) {
- * @param {number[]} points - An array of 4 values [p0, p1, p2, p3] representing control points.
+    return p[1] + 0.5 * x * (p[2] - p[0] + x * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + x * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
- * @param {number} t - The relative position between p1 and p2 (range typically from 0 to 1).
- * @returns {number} The interpolated value.
- */
-export function cubicInterpolate(p, t) {
-    return p[1] + 0.5 * t * (p[2] - p[0] + t * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + t * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
 }
 
 function exponentialWidthCurve(normalizedPosition, range = 5, minValue = 0.1) {
@@ -45,18 +37,12 @@ function linearWidthCurve(normalizedPosition, range = 1, minValue = 0.1) {
  * @returns {GeoJSON.Feature<GeoJSON.Polygon>} - An array of points representing the arrow polygon.
  */
 export function getArrowPolygon(arrowData, style, arrowHeadData) {
-    if (!arrowData || !(arrowData.points) || arrowData.points.length === 0) {
+    if (!style)
-        console.warn("getArrowPolygon: Invalid arrowData or empty points array.");
-        return [];
-    }
-
-    if (!style) {
         style = {
             calculation: ARROW_BODY_STYLE_CONSTANT,
             range: 0,
             minValue: 0
         };
-    }
 
     const splinePoints = computeSplinePoints(arrowData.points, arrowData.splineStep);
     const { leftSidePoints, rightSidePoints } = computeSideOffsets(splinePoints, arrowData.offsetDistance, style);
@@ -83,7 +69,8 @@ function averageBearing(points, count = 3) {
     const bearings = [];
     for (let i = points.length - count; i < points.length -1; i++) {
         if (i >= 0) {
-            bearings.push(turf.bearing(turf.point(points[i]), turf.point(points[i + 1])));
+            const b = turf.bearing(turf.point(points[i]), turf.point(points[i + 1]));
+            bearings.push(b);
         }
     }
 
@@ -103,7 +90,7 @@ function computeSplinePoints(points, splineStep = 10) {
         const p3 = points[i + 2] || p2;
         for (let j = 0; j < splineStep; j++) {
             const t = j / splineStep;
-            const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
+           const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
             const lat = cubicInterpolate([p0[1], p1[1], p2[1], p3[1]], t);
             result.push([lon, lat]);
         }
@@ -125,7 +112,7 @@ function computeSideOffsets(points, offsetMeters, style) {
         const normalizedPosition = i / total;
 
         let localOffsetDistance;
-        switch (style.calculation) {
+         switch (style.calculation) {
             case ARROW_BODY_STYLE_LINEAR:
                 localOffsetDistance = offsetMeters * linearWidthCurve(normalizedPosition, style.range, style.minValue);
                 break;
@@ -137,8 +124,8 @@ function computeSideOffsets(points, offsetMeters, style) {
                 localOffsetDistance = offsetMeters;
         }
 
-        leftSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing - 90, { units: METERS }).geometry.coordinates);
+        leftSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing - 90, { units: 'meters' }).geometry.coordinates);
-        rightSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing + 90, { units: METERS }).geometry.coordinates);
+        rightSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing + 90, { units: 'meters' }).geometry.coordinates);
     }
 
     return { leftSidePoints, rightSidePoints };
@@ -146,9 +133,9 @@ function computeSideOffsets(points, offsetMeters, style) {
 
 function createIsoscelesTriangleCoords(center, baseLengthMeters, heightMeters, bearing = 0) {
     const halfBase = baseLengthMeters / 2;
-    const left = turf.destination(center, halfBase, bearing - 90, { units: METERS }).geometry.coordinates;
+    const left = turf.destination(center, halfBase, bearing - 90, { units: 'meters' }).geometry.coordinates;
-    const right = turf.destination(center, halfBase, bearing + 90, { units: METERS }).geometry.coordinates;
+    const right = turf.destination(center, halfBase, bearing + 90, { units: 'meters' }).geometry.coordinates;
-    const tip = turf.destination(center, heightMeters, bearing, { units: METERS }).geometry.coordinates;
+    const tip = turf.destination(center, heightMeters, bearing, { units: 'meters' }).geometry.coordinates;
     return [left, tip, right];
 }
 //GEOJSON
@@ -175,6 +162,7 @@ export function getArrowPolygonEuclidean(
     arrowData,
     style= undefined,
     arrowHeadData = undefined) {
+
     if (!style)
         style = {
             calculation: ARROW_BODY_STYLE_CONSTANT,

ArrowPoints.js

@@ -4,7 +4,7 @@ import { getArrowPolygonEuclidean } 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 { getCirclePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
 import { getRectanglePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
-import { getFrontlineEuclidean } from "athena-utils/shape/Frontline.js";
+import { getFrontline } from "athena-utils/shape/Frontline.js";
 import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
 // Polygon merge using Turf library
 import {mergeTurfPolygons} from "athena-utils/shape/Polygon.js";
@@ -171,18 +171,18 @@ const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);
 const rectanglePoly = getRectanglePolygonEuclidean(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
 const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);
 
-const frontlinePolygonA = getFrontlineEuclidean(frontlineDataA);
+const frontlinePolygonA = getFrontline(frontlineDataA);
 let frontlinePolygonMergedA = toTurfPolygon(frontlinePolygonA.body);
 
 
-const frontlinePolygonB = getFrontlineEuclidean(frontlineDataB, protrusionDataB);
+const frontlinePolygonB = getFrontline(frontlineDataB, protrusionDataB);
 let frontlinePolygonMergedB = mergeTurfPolygons(frontlinePolygonB.body,frontlinePolygonB.protrusions[0]);
 for (let i = 1; i < frontlinePolygonB.protrusions.length; i++) 
 {
     frontlinePolygonMergedB = addTurfPolygonToMerge(frontlinePolygonMergedB, frontlinePolygonB.protrusions[i]);
 }
 
-const frontlinePolygonC = getFrontlineEuclidean(frontlineDataC, protrusionDataC);
+const frontlinePolygonC = getFrontline(frontlineDataC, protrusionDataC);
 
 let frontlinePolygonMergedLeft = mergeTurfPolygons(frontlinePolygonC.bodyLeft, frontlinePolygonC.protrusionsLeft[0]);
 for (let i = 1; i < frontlinePolygonC.protrusionsLeft.length; i++) {

BasicShapes.js

@@ -2,8 +2,8 @@ import * as turf from "@turf/turf";
 import { toMercator, toWgs84 } from '@turf/projection';
 
 //CIRCLE
-const DISTANCE_PER_DEGREE_LONGITUDE = 111.320; // 2π×6378.1km/360
+const distancePerDegreeLongitude = 111.320; // 2π×6378.1km/360
-const DISTANCE_PER_DEGREE_LATITUDE  = 110.574; // 2π×6356.75km/360
+const distancePerDegreeLatitude  = 110.574; // 2π×6356.75km/360
 
 //GEOJSON
 /**
@@ -16,20 +16,15 @@ const DISTANCE_PER_DEGREE_LATITUDE  = 110.574; // 2π×6356.75km/360
  * @returns {GeoJSON.Feature<GeoJSON.Polygon>} GeoJSON Feature representing the circle polygon.
  */
 export function getCirclePolygon(center, radius, density = 64) {
-    if (!center || !radius ) {
-        console.warn("getCirclePolygon: Invalid center, radius.");
-        return [];
-    }
-
     const points = [];
 
     const coords = {
-        latitude: center[1],
+        latitude: center[1], // Latitude
-        longitude: center[0]
+        longitude: center[0] // Longitude
     };
 
-    const distanceX = radius / (DISTANCE_PER_DEGREE_LONGITUDE * Math.cos(coords.latitude * Math.PI / 180));
+    const distanceX = radius / (distancePerDegreeLongitude * Math.cos(coords.latitude * Math.PI / 180));
-    const distanceY = radius / DISTANCE_PER_DEGREE_LATITUDE;
+    const distanceY = radius / distancePerDegreeLatitude;
 
     for (let i = 0; i < density; i++) {
         const angle = (i / density) * Math.PI * 2;
@@ -42,7 +37,6 @@ export function getCirclePolygon(center, radius, density = 64) {
     points.push(points[0]);
 
     return turf.polygon([[...points]]);
-    /*
     return {
         "type": "Feature",
         "geometry": {
@@ -50,7 +44,7 @@ export function getCirclePolygon(center, radius, density = 64) {
             "coordinates": [points]
         },
         "properties": {}
-    };*/
+    };
 }
 //GEOJSON
 //CANVAS
@@ -64,11 +58,6 @@ export function getCirclePolygon(center, radius, density = 64) {
  * @returns {{x: number, y: number}[]} An array of points representing the vertices of the circle polygon.
  */
 export function getCirclePolygonEuclidean(center, radius, density) {
-    if (!center || !radius || !density) {
-        console.warn("getCirclePolygonEuclidean: Invalid center, radius or density.");
-        return [];
-    }
-
     const points = [];
     for (let i = 0; i < density; i++) {
         const angle = (i / density) * Math.PI * 2;
@@ -94,11 +83,6 @@ export function getCirclePolygonEuclidean(center, radius, density) {
  * @returns {GeoJSON.Feature<GeoJSON.Polygon>} GeoJSON Feature representing the rectangle polygon.
  */
 export function getRectanglePolygon(center, width, height, rotation = 0) {
-    if (!center || !width || !height) {
-        console.warn("getRectanglePolygon: Invalid center, width or height.");
-        return [];
-    }
-
   const widthMeters = width * 1000 ;
   const heightMeters = height * 1000;
 
@@ -146,12 +130,7 @@ function rotateXY(x, y, cx, cy, angleRad) {
  * 
  * @returns {{x: number, y: number}[]} An array of points representing the vertices of the rectangle polygon.
  */
-export function getRectanglePolygonEuclidean(center, sideA, sideB, rotation = 0) {
+export function getRectanglePolygonEuclidean(center, sideA, sideB, rotation) {
-    if (!center || !sideA || !sideB) {
-        console.warn("getRectanglePolygonEuclidean: Invalid center, sideA or sideB.");
-        return [];
-    }
-
     const halfA = sideA / 2;
     const halfB = sideB / 2;
     

Drawing.js

@@ -1,296 +0,0 @@
-import { getArrowPolygon } 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 { handleDraw, handleClick, showArrowEditor, hideArrowEditor, showFrontlineEditor, hideFrontlineEditor, handleDelete, drawOnMap } from "./DrawingFunctions.js";
-import { arrowParamsMap, frontlineParamsMap, currentFeature, setCurrentFeature} from "./DrawingFunctions.js";
-
-export const ARROW = "arrow";
-export const FRONTLINE = "frontline";
-export const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
-
-let currentDrawStyle = ARROW;
-
-mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
-
-const map = new mapboxgl.Map({
-    container: 'map',
-    style: 'mapbox://styles/mapbox/streets-v12',
-    center: [10, 50],
-    zoom: 5
-});
-
-// Drawing visuals
-const draw = new MapboxDraw({
-    displayControlsDefault: false,
-    controls: {
-        line_string: true
-    },
-    defaultMode: 'draw_line_string',
-    styles: [
-        // Main drawing line
-        {
-            id: 'gl-draw-line',
-            type: 'line',
-            filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
-            layout: {
-                'line-cap': 'round',
-                'line-join': 'round'
-            },
-            paint: {
-                'line-color': 'rgb(0, 255, 0)',
-                'line-width': 4
-            }
-        },
-        // This makes the nonstop visible line invisible
-        {
-            id: 'gl-draw-line-inactive',
-            type: 'line',
-            filter: ['all', ['==', '$type', 'LineString'], ['==', 'deactive', 'false']],
-            layout: {
-                'line-cap': 'round',
-                'line-join': 'round'
-            },
-            paint: {
-                'line-color': 'rgba(0, 0, 0, 0)',
-                'line-width': 2
-            }
-        },
-        // 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': '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': 'rgb(0, 255, 0)'
-            }
-        },
-        // Midpoints
-        {
-            id: 'gl-draw-polygon-midpoint',
-            type: 'circle',
-            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
-            paint: {
-                'circle-radius': 4,
-                'circle-color': 'rgb(0, 255, 174)'
-            }
-        }
-    ]
-});
-
-// Map controlls
-map.addControl(draw, 'top-left');
-map.on('draw.create', (e) => {
-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, map, draw, currentDrawStyle);
-    handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor, map, draw, currentDrawStyle);
-});
-map.dragPan.enable();
-
-export function updateButtonStyles(drawStyle) {
-    currentDrawStyle = drawStyle;
-    const buttonsContainer = document.getElementById('drawStyleButtons');
-    Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
-        const isSelected = btn.getAttribute('data-style') === drawStyle;
-        btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
-        btn.style.color = isSelected ? '#fff' : '#000';
-    });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    document.getElementById('removeArrow').addEventListener('click', () => {
-        handleDelete(ARROW, map, draw);
-    });
-
-    document.getElementById('removeFrontline').addEventListener('click', () => {
-        handleDelete(FRONTLINE, map, draw);
-    });
-
-    document.getElementById('applyArrowChanges').addEventListener('click', () => {
-        if (!currentFeature) return;
-        
-        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 calculation = parseInt(document.getElementById('styleArrow').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,
-            calculation,
-            range,
-            minValue,
-            widthArrow,
-            lengthArrow,
-            paintOptions 
-        });
-
-        const arrowGeoJSON = getArrowPolygon({
-            points: coords,
-            splineStep,
-            offsetDistance
-        }, {
-            calculation,
-            range,
-            minValue
-        }, {
-            widthArrow,
-            lengthArrow
-        });
-
-        //ARROW
-        const arrowLayerId = ARROW + "-" + id;
-        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
-        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
-
-        drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions, map);
-
-        const allFeatures = draw.getAll().features;
-        setCurrentFeature(allFeatures.find(f => f.id === id));
-    });
-
-    document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
-        if (!currentFeature) return;
-
-        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 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 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,
-            style,
-            protrusion: {
-                length,
-                startSize,
-                endSize,
-                gap
-            },
-            paintOptionsLeft,
-            paintOptionsRight
-        });
-
-        const frontlineData = {
-            points: coords,
-            splineStep,
-            offsetDistance,
-            style
-        };
-
-        const protrusionData = frontlineParamsMap.get(id).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 + "-" + id;
-
-            if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
-            if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
-
-            drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft, map);
-            drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight, map);
-            
-            const allFeatures = draw.getAll().features;
-            setCurrentFeature(allFeatures.find(f => f.id === id));
-
-            return;
-        }
-
-        const frontlineLayerId = FRONTLINE + "-" + id;
-        if (map.getLayer(frontlineLayerId + ADDITIONAL_SIDE)) map.removeLayer(frontlineLayerId + ADDITIONAL_SIDE);
-        if (map.getSource(frontlineLayerId + ADDITIONAL_SIDE)) map.removeSource(frontlineLayerId + ADDITIONAL_SIDE);
-        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
-        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
-        
-        let paintOptions;
-        if(frontlineData.style == LEFT_SIDE){
-            paintOptions = paintOptionsLeft;
-        }else if(frontlineData.style == RIGHT_SIDE)
-        {
-            paintOptions = paintOptionsRight;
-        }
-
-        drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions, map);
-
-        const allFeatures = draw.getAll().features;
-        setCurrentFeature(allFeatures.find(f => f.id === id));
-    });
-
-    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'));
-        
-        event.target.classList.add('active');
-        
-        currentDrawStyle = event.target.getAttribute('data-style');
-        updateButtonStyles(currentDrawStyle);
-    });
-
-    updateButtonStyles(currentDrawStyle);
-});

DrawingFunctions.js

@@ -1,285 +0,0 @@
-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

@@ -1,105 +1,74 @@
-import { cubicInterpolate } from "athena-utils/shape/Arrow.js";
+// Cubic interpolation source from https://www.paulinternet.nl/?page=bicubic
-import * as turf from '@turf/turf';
+function cubicInterpolate(p, x) {
+    return p[1] + 0.5 * x * (p[2] - p[0] + x * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + x * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
+}
 
 export const LEFT_SIDE = 1;
 export const RIGHT_SIDE = 2;
 export const BOTH_SIDES = 3;
-export const METERS = 'meters';
 
 /**
- * @param {Object, Object} frontlineData, protrusionData - Object containing parameters for the frontline.
+ * @param {Object} arrowData - Object with data for arrow
- * @param {{x: number, y: number}[]} frontlineData.points - List of points defining the base path of the frontline.
+ * @param {{x: number, y: number}[]} arrowData.points - List of points defining the arrow's path.
- * @param {number} frontlineData.splineStep - The resolution of the spline interpolation (smaller = smoother curve).
+ * @param {number} arrowData.splineStep - The density factor for the arrow's points.
- * @param {number} frontlineData.spacing - Distance between interpolated points along the path.
+ * @param {number} arrowData.spacing - The spacing between the points along the arrow.
- * @param {number} frontlineData.offsetDistance - Distance to offset the entire shape from the base path.
+ * @param {number} arrowData.offsetDistance - The offset distance for the arrow's path (width).
- * @param {string} frontlineData.style - Which side to draw the protrusions on (e.g., "LEFT_SIDE" or "RIGHT_SIDE").
+ * @param {number} arrowData.protrusionSize - Length of the square protrusion from the offset side.
- * @param {number} protrusionData.Length - Length of each individual protrusion element.
- * @param {number} protrusionData.StartSize - Width of protrusion at the start (base).
- * @param {number} protrusionData.EndSize - Width of protrusion at the end (tip).
- * @param {number} protrusionData.Gap - Distance between the starts of each protrusion.
  *
+ * @returns {{x: number, y: number}[]} - An array of points representing the arrow polygon.
  */
-export function getFrontline(frontlineData, protrusionData = null) {
+export function getFrontline(protrusionData) {
-    if (!frontlineData || !(frontlineData.points) || frontlineData.points.length === 0) {
+    const style = protrusionData.style ?? LEFT_SIDE;
-        console.warn("getFrontline: Invalid frontlineData or empty points array.");
+    const splinePoints = computeSplinePoints(protrusionData.points, protrusionData.splineStep);
-        return [];
-    }
-
-    const style = frontlineData.style ?? LEFT_SIDE;
-    const splinePoints = computeSplinePoints(frontlineData.points, frontlineData.splineStep);
 
     let bodyPolygonLeft = [];
     let bodyPolygonRight = [];
 
     if (style === BOTH_SIDES) {
-        const left = computeSides(splinePoints, frontlineData.offsetDistance, LEFT_SIDE);
+        const {
-        bodyPolygonLeft = [...left.leftSidePoints, ...left.rightSidePoints.reverse()];
+            leftSidePoints: leftSidePointsLeftSide,
+            rightSidePoints: rightSidePointsLeftSide
+        } = computeSides(splinePoints, protrusionData.spacing, protrusionData.offsetDistance, LEFT_SIDE);
+    bodyPolygonLeft = [...leftSidePointsLeftSide, ...rightSidePointsLeftSide.reverse()];
 
-        const right = computeSides(splinePoints, frontlineData.offsetDistance, RIGHT_SIDE);
+        const {
-        bodyPolygonRight = [...right.leftSidePoints, ...right.rightSidePoints.reverse()];
+            leftSidePoints: leftSidePointsRightSide,
+            rightSidePoints: rightSidePointsRightSide
+        } = computeSides(splinePoints, protrusionData.spacing, protrusionData.offsetDistance, RIGHT_SIDE);
+    bodyPolygonRight = [...leftSidePointsRightSide, ...rightSidePointsRightSide.reverse()];
     }
 
-    const { leftSidePoints, rightSidePoints } = computeSides(splinePoints, frontlineData.offsetDistance, frontlineData.style);
+    const { leftSidePoints, rightSidePoints } = computeSides(splinePoints, protrusionData.spacing, protrusionData.offsetDistance, protrusionData.style);
+    
     const bodyPolygon = [...leftSidePoints, ...rightSidePoints.reverse()];
 
-    if (protrusionData == null) {
+    let protrusionPolygons = [];
-        let polygonCoords;
 
-        if (style === BOTH_SIDES) {
-            polygonCoords = [
-                ...bodyPolygonLeft,
-                ...bodyPolygonRight,
-                bodyPolygonLeft[0]
-            ];
-        } else {
-            polygonCoords = [
-                ...bodyPolygon,
-                bodyPolygon[0]
-            ];
-        }
-
-        return turf.polygon([polygonCoords]);
-    }
-    
-    const prostrusionsData = (points, sidePoints) => {
-        const coords = [...points, points[0]];
-        const basePoly = turf.polygon([coords]);
-        return constructProstrusions(basePoly, sidePoints, protrusionData, frontlineData);
-    };
 
     if (style === LEFT_SIDE) {
-        return {
+    protrusionPolygons = computeProtrusion(leftSidePoints, protrusionData);
-            rightPoly: null,
-            leftPoly: prostrusionsData(bodyPolygon, leftSidePoints)
-        };
     } else if (style === RIGHT_SIDE) {
-        return {
+    protrusionPolygons = computeProtrusion(rightSidePoints, protrusionData);
-            rightPoly: prostrusionsData(bodyPolygon, rightSidePoints),
+    } else if (style === BOTH_SIDES){
-            leftPoly: null
+    let protrusionPolygonsLeft = computeProtrusion(leftSidePoints, protrusionData);
-        };
+    let protrusionPolygonsRight = computeProtrusion(rightSidePoints, protrusionData);
-    } else if (style === BOTH_SIDES) {
+    //protrusionPolygonsA = [...computeProtrusion(leftSidePoints, protrusionData), ...computeProtrusion(rightSidePoints, protrusionData)];
-         return {
+     return {
-            rightPoly: prostrusionsData(bodyPolygonRight, rightSidePoints),
+        bodyLeft: bodyPolygonLeft,
-            leftPoly: prostrusionsData(bodyPolygonLeft, leftSidePoints),
+        bodyRight: bodyPolygonRight,
-        };
+        protrusionsLeft: protrusionPolygonsLeft,
-    }
+        protrusionsRight: protrusionPolygonsRight
-}
+    };
-
-function constructProstrusions(mainPoly, points, protrusionData, frontlineData) {
-   
-    const protrusions = computeProtrusion(points, protrusionData, frontlineData.offsetDistance);
-
-    for(let i = 0; i <= protrusions.length -1 ; i++)
-    {
-        mainPoly = turf.union(turf.featureCollection([mainPoly, protrusions[i]]));
     }
 
-    return mainPoly;
+    return {
+        body: bodyPolygon,
+        protrusions: protrusionPolygons
+    };
 }
 
 function computeSplinePoints(points, density) {
-    if (points.length < 2) return points;
+    let splinePoints = [];
-    const splinePoints = [];
 
     for (let i = 0; i < points.length - 1; i++) {
         const p0 = points[i === 0 ? i : i - 1];
@@ -107,99 +76,118 @@ function computeSplinePoints(points, density) {
         const p2 = points[i + 1];
         const p3 = points[i + 2] || p2;
         for (let t = 0; t <= 1; t += density) {
-            const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
+            splinePoints.push({
-            const lat = cubicInterpolate([p0[1], p1[1], p2[1], p3[1]], t);
+                x: cubicInterpolate([p0.x, p1.x, p2.x, p3.x], t),
-            splinePoints.push([lon, lat]);
+                y: cubicInterpolate([p0.y, p1.y, p2.y, p3.y], t)
+            });
         }
     }
 
-    splinePoints.push(points[points.length - 1]);
     return splinePoints;
 }
 
-function computeSides(splinePoints, offsetDistance, style = LEFT_SIDE) {
+function computeSides(splinePoints, spacing, offsetDistance, style = LEFT_SIDE) {
+    let dots = [];
     let leftSidePoints = [];
     let rightSidePoints = [];
+    let accumulatedDistance = 0;
 
     for (let i = 1; i < splinePoints.length; i++) {
         const previousPoint = splinePoints[i - 1];
         const currentPoint = splinePoints[i];
+        const segmentLength = Math.hypot(currentPoint.x - previousPoint.x, currentPoint.y - previousPoint.y);
+        accumulatedDistance += segmentLength;
+        if (accumulatedDistance >= spacing || i === 1 || i === splinePoints.length - 1) {
+            const distanceX = currentPoint.y - previousPoint.y;
+            const distanceY = previousPoint.x - currentPoint.x;
+            const length = Math.hypot(distanceX, distanceY);
+            
+            let localOffsetDistance = offsetDistance;
 
-        const bearing = turf.bearing(turf.point(previousPoint), turf.point(currentPoint));
+            const offsetX = (distanceX / length) * localOffsetDistance;
+            const offsetY = (distanceY / length) * localOffsetDistance;
 
-        const leftPoint = style === RIGHT_SIDE
+            dots.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY });
-            ? currentPoint
+            dots.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY });
-            : turf.destination(turf.point(currentPoint), offsetDistance, bearing - 90, { units: METERS }).geometry.coordinates;
 
-        const rightPoint = style === LEFT_SIDE
+            accumulatedDistance = 0;
-            ? currentPoint
-            : turf.destination(turf.point(currentPoint), offsetDistance, bearing + 90, { units: METERS }).geometry.coordinates;
 
-        leftSidePoints.push(leftPoint);
+            if (style === LEFT_SIDE) {
-        rightSidePoints.push(rightPoint);
+                leftSidePoints.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY});
+                rightSidePoints.push({ x: currentPoint.x, y: currentPoint.y});
+            } else if (style === RIGHT_SIDE) {
+                leftSidePoints.push({ x: currentPoint.x, y: currentPoint.y});
+                rightSidePoints.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY});
+            } else if (style === BOTH_SIDES) {
+                leftSidePoints.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY });
+                rightSidePoints.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY});
+            }
+        }
     }
     
     return { leftSidePoints, rightSidePoints };
 }
 
-function computeProtrusion(leftSidePoints, protrusionData, sideOffset) {
+function computeProtrusion(leftSidePoints, protrusionData) {
-    const protrusions = [];
+    let protrusions = [];
+
     const segments = [];
     let totalLength = 0;
-    
+
     for (let i = 0; i < leftSidePoints.length - 1; i++) {
         const p0 = leftSidePoints[i];
         const p1 = leftSidePoints[i + 1];
-        const length = turf.distance(turf.point(p0), turf.point(p1), { units: METERS });
+        const dx = p1.x - p0.x;
-        const bearing = turf.bearing(turf.point(p0), turf.point(p1));
+        const dy = p1.y - p0.y;
-        segments.push({ p0, p1, length, bearing });
+        const length = Math.hypot(dx, dy);
+        segments.push({ p0, p1, dx, dy, length });
         totalLength += length;
     }
 
     const positions = [];
-    for (let d = 0; d <= totalLength - (protrusionData.gap + protrusionData.startSize); d += protrusionData.gap) {
-        positions.push(d + protrusionData.startSize);
-    }
     
+    for (let d = 0; d <= totalLength - (protrusionData.protrusionGap + protrusionData.protrusionStartSize); d += protrusionData.protrusionGap) {
+        positions.push(d + protrusionData.protrusionStartSize);
+    }
     if (positions[positions.length - 1] < totalLength) {
-        positions.push(totalLength - protrusionData.startSize);
+        positions.push(totalLength - protrusionData.protrusionStartSize);
     }
 
     let currentSegmentIndex = 0;
     let currentSegmentPos = 0;
 
     for (const distance of positions) {
-        while (currentSegmentIndex < segments.length && currentSegmentPos + segments[currentSegmentIndex].length < distance) {
+        while (currentSegmentIndex < segments.length &&
+               currentSegmentPos + segments[currentSegmentIndex].length < distance) {
             currentSegmentPos += segments[currentSegmentIndex].length;
             currentSegmentIndex++;
         }
 
-        if (currentSegmentIndex >= segments.length) {
+        if (currentSegmentIndex >= segments.length) break;
-            break;
+
-        }
-        
         const seg = segments[currentSegmentIndex];
         const localDistance = distance - currentSegmentPos;
+        const t = localDistance / seg.length;
 
-        const pointOnSegment = turf.along(turf.lineString([seg.p0, seg.p1]), localDistance, { units: METERS }).geometry.coordinates;
+        const x = seg.p0.x + seg.dx * t;
-        const thicknessOffset = sideOffset * 0.1;
+        const y = seg.p0.y + seg.dy * t;
 
-        const adjustedPoint = movePoint(pointOnSegment, thicknessOffset, seg.bearing + 90);
+        const nx = -seg.dy / seg.length;
-        const centerPoint = movePoint(adjustedPoint, protrusionData.length, seg.bearing - 90);
+        const ny = seg.dx / seg.length;
 
+        const centerX = x - nx * protrusionData.protrusionLength;
+        const centerY = y - ny * protrusionData.protrusionLength;
 
-        const corner1 = movePoint(adjustedPoint, -protrusionData.startSize, seg.bearing);
+        const ux = seg.dx / seg.length;
-        const corner2 = movePoint(adjustedPoint, protrusionData.startSize, seg.bearing);
+        const uy = seg.dy / seg.length;
-        const corner3 = movePoint(centerPoint, protrusionData.endSize, seg.bearing);
-        const corner4 = movePoint(centerPoint, -protrusionData.endSize, seg.bearing);
 
-        const polygon = turf.polygon([[corner1, corner2, corner3, corner4, corner1]]);
+        const corner1 = { x: x - ux * protrusionData.protrusionStartSize - nx * 0, y: y - uy * protrusionData.protrusionStartSize - ny * 0 };
-        protrusions.push(polygon);
+        const corner2 = { x: x + ux * protrusionData.protrusionStartSize - nx * 0, y: y + uy * protrusionData.protrusionStartSize - ny * 0 };
+        const corner3 = { x: centerX + ux * protrusionData.protrusionEndSize, y: centerY + uy * protrusionData.protrusionEndSize };
+        const corner4 = { x: centerX - ux * protrusionData.protrusionEndSize, y: centerY - uy * protrusionData.protrusionEndSize };
+
+        protrusions.push([corner1, corner2, corner3, corner4]);
     }
 
     return protrusions;
 }
-
-function movePoint(point, distance, bearing) {
-    return turf.destination(turf.point(point), distance, bearing, { units: METERS }).geometry.coordinates;
-}

MapPolygons.js

@@ -1,118 +1,42 @@
-//import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
 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 { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
 import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";
-import { getFrontline } from "athena-utils/shape/Frontline.js";
-import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
 
 mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
-const map = new mapboxgl.Map({
+    const map = new mapboxgl.Map({
-    container: 'map',
+        container: 'map',
-    center: [10, 50],
+        center: [10, 50],
-    zoom: 5
+        zoom: 5
-});
+    });
-//this is my test push
+
-//second
 map.on('load', () => {
     const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
     const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);
     const rectangleGeoJSON = getRectanglePolygon([20, 80], 2200, 2200);
     const rectangleBGeoJSON = getRectanglePolygon([20, 20], 2200, 2200);
-    const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
-
-    // FRONTLINE
-    if (frontlineData.style === LEFT_SIDE){
-        map.addSource("frontlinePolygon", {
-            "type": "geojson",
-            "data": frontlineGeoJSON.leftPoly
-        });
-    }else if (frontlineData.style === RIGHT_SIDE){
-        map.addSource("frontlinePolygon", {
-            "type": "geojson",
-            "data": frontlineGeoJSON.rightPoly
-        });
-    } else {
-        map.addSource("frontlinePolygon", {
-            "type": "geojson",
-            "data": frontlineGeoJSON.rightPoly
-        });
-        map.addSource("frontlinePolygonSecond", {
-            "type": "geojson",
-            "data": frontlineGeoJSON.leftPoly
-        });
-    }
 
+    //ARROW
+    map.addSource("arrow-shape", { type: "geojson", data: fullPolygon });
     map.addLayer({
-        "id": "frontlinePolygon",
+        "id": "arrow-shape",
         "type": "fill",
-        "source": "frontlinePolygon",
+        "source": "arrow-shape",
-        "layout": {},
         "paint": {
-            "fill-color": "blue",
+            "fill-color": "#ff0000",
-            "fill-opacity": 0.6
+            "fill-opacity": 0.7
         }
     });
     map.addLayer({
-        "id": "frontlinePolygon-outline",
+        "id": "arrow-outline",
         "type": "line",
-        "source": "frontlinePolygon",
+        "source": "arrow-shape",
         "paint": {
             "line-color": "#000000",
             "line-width": 2,
             "line-opacity": 1
         }
     });
-
-    if (frontlineData.style === BOTH_SIDES) {
-        map.addLayer({
-            "id": "frontlinePolygonSecond",
-            "type": "fill",
-            "source": "frontlinePolygonSecond",
-            "layout": {},
-            "paint": {
-                "fill-color": "green",
-                "fill-opacity": 0.6
-            }
-        });
-        map.addLayer({
-            "id": "frontlinePolygonSecond-outline",
-            "type": "line",
-            "source": "frontlinePolygonSecond",
-            "paint": {
-                "line-color": "#000000",
-                "line-width": 2,
-                "line-opacity": 1
-            }
-        });
-    }
-    // FRONTLINE
-
-    //ARROW
-    if (fullPolygon.length != 0)
-    {
-        map.addSource("arrow-shape", { type: "geojson", data: fullPolygon });
-
-        map.addLayer({
-            "id": "arrow-shape",
-            "type": "fill",
-            "source": "arrow-shape",
-            "paint": {
-                "fill-color": "#ff0000",
-                "fill-opacity": 0.7
-            }
-        });
-        map.addLayer({
-            "id": "arrow-outline",
-            "type": "line",
-            "source": "arrow-shape",
-            "paint": {
-                "line-color": "#000000",
-                "line-width": 2,
-                "line-opacity": 1
-            }
-        });
-    }
     //ARROW
 
     // CIRCLE
@@ -237,39 +161,11 @@ const arrowData = {
   };
 //ARROW
 
-//FRONTLINE
-/*
-const frontlinePoints = [
-        [10.42076, 40.08804],
-        [25.42076, 80.08804],
-        [65.42076, 75.08804]
-    ];
-    */
-const frontlinePoints = [
-        [14.32076, 50.08804],
-        [15.42076, 51.08804],
-        [16.42076, 52.08804],
-        [18.42076, 50.08804]
-    ];
-const frontlineData = {
-    points: frontlinePoints,
-    splineStep: 0.08,
-    offsetDistance: 10000,
-    style: BOTH_SIDES,
-    };
-const protrusionData = {
-    length: 15000,
-    startSize: 5000,
-    endSize: 500,
-    gap: 15000,
-};
-//FRONTLINE
-
 //CIRCLE
 const circleCenter = [20, 80];
 const circleRadius = 120;
 const circleDensity = 20;
-//CIRCLE
+//CORCLE
 
 //MAP GRID
 function generateLatLonGrid(step = 10) {

Polygon.js

@@ -75,6 +75,5 @@ export function mergePolygonFeatures(features) {
     if (features.length === 1)
         return features[0];
 
-        console.log("3" + features.length)
     return turf.union(turf.featureCollection(features));
-}
+}

index.html

@@ -1,133 +1,6 @@
-<!--
-MAPBOX - DRAWING
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Draw a polygon and calculate its area</title>
-    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
-
-    <link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet">
-    <script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
-    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
-    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.js"></script>
-    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.css" type="text/css">
-
-    <style>
-      body { margin: 0; padding: 0; }
-      #map { position: absolute; top: 0; bottom: 0; width: 100%; }
-
-      .calculation-box {
-          height: 75px;
-          width: 150px;
-          position: absolute;
-          bottom: 40px;
-          left: 10px;
-          background-color: rgba(255, 255, 255, 0.9);
-          padding: 15px;
-          text-align: center;
-      }
-
-      p {
-          font-family: 'Open Sans';
-          margin: 0;
-          font-size: 13px;
-      }
-
-      #arrow-editor {
-          position: absolute;
-          display: none;
-          background: white;
-          padding: 10px;
-          border: 1px solid gray;
-          z-index: 10;
-      }
-
-      #arrow-editor label {
-          display: block;
-          margin-bottom: 5px;
-          font-family: sans-serif;
-          font-size: 13px;
-      }
-
-      #applyArrowChanges {
-          margin-top: 10px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div id="map"></div>
-    <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>
-    <label>Offset Distance: <input id="offsetDistance" type="number" step="1000"></label><br>
-    <label>Range: <input id="range" type="number" step="0.1" min="0"></label><br>
-    <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>
-    
-    <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>
-    <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;">
-    <h3>Frontline Editor</h3>
-    <label>Spline Step: <input id="splineStepFrontline" type="number" step="1"></label><br>
-    <label>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
-    <label>Style:
-        <select id="styleFrontline">
-            <option value=1>Left Side</option>
-            <option value=2>Right Side</option>
-            <option value=3>Both Sides</option>
-        </select>
-    </label><br>
-    <h4>Protrusion</h4>
-    <label>Length: <input id="protrusionLength" type="number" step="100"></label><br>
-    <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>
-
-    <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>
-    </div>
-    <script type="module" src="Drawing.js"></script>
-  </body>
-</html>
-
-
 <!--
 MAPBOX
+-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -146,7 +19,7 @@ body { margin: 0; padding: 0; }
     <script type="module" src="MapPolygons.js"></script>
 </body>
 </html>
--->
+
 
 <!--
 CANVAS

package-lock.json

@@ -2718,7 +2718,7 @@
       "dev": true
     },
     "node_modules/athena-utils": {
-      "resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#4425aaa18d",
+      "resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#284cea819e",
       "dev": true,
       "dependencies": {
         "@turf/turf": "7.2.0"