Drawing

Drawing.js

@@ -0,0 +1,470 @@
+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 "athena-utils/shape/Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
+
+let mouseMoveListener = null;
+let currentFeature = null;
+let currentDrawStyle = 'arrow';
+
+const arrowParamsMap = new Map();
+const frontlineParamsMap = new Map();
+
+mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
+
+const map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v12',
+    center: [10, 50],
+    zoom: 5
+});
+
+const draw = new MapboxDraw({
+    displayControlsDefault: false,
+    controls: {
+        line_string: true,
+        trash: true
+    },
+    defaultMode: 'draw_line_string',
+    styles: [
+        // Aktivní linka - úplně průhledná
+        {
+            id: 'gl-draw-line',
+            type: 'line',
+            filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round'
+            },
+            paint: {
+                'line-color': '#00ff00',  // zelená
+                'line-width': 4
+            }
+        },
+        // Neaktivní linka - taky průhledná
+        {
+            id: 'gl-draw-line-inactive',
+            type: 'line',
+            filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'false']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round'
+            },
+            paint: {
+                'line-color': 'rgba(0,0,0,0)',
+                'line-width': 2
+            }
+        },
+        // Body (vertexy) - průhledné, pokud chceš
+        {
+            id: 'gl-draw-polygon-and-line-vertex-active',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'true']],
+            paint: {
+                'circle-radius': 6,
+                'circle-color': '#00ff00'  // zelená
+            }
+        },
+        {
+            id: 'gl-draw-polygon-and-line-vertex-inactive',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'false']],
+            paint: {
+                'circle-radius': 4,
+                'circle-color': '#00aa00'  // tmavší zelená
+            }
+        },
+
+        // midpointy - musí být viditelné, aby fungovalo kliknutí a přidávání vertexů
+        {
+            id: 'gl-draw-polygon-midpoint',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
+            paint: { 'circle-radius': 4, 'circle-color': '#fbb03b' } // žlutá
+        },
+        {
+            id: 'gl-draw-polygon-midpoint-active',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint'], ['==', 'active', 'true']],
+            paint: { 'circle-radius': 6, 'circle-color': '#fbb03b' }
+        }
+    ]
+});
+
+
+
+map.addControl(draw, 'top-left');
+map.on('draw.create', handleDraw);
+map.on('draw.delete', () => {
+    draw.deleteAll();
+    clearAllArrowLayers();
+    clearAllFrontlineLayers();
+    hideArrowEditor();
+    hideFrontlineEditor();
+    document.getElementById('calculated-area').innerHTML = '';
+});
+map.on('draw.update', handleDraw);
+map.on('click', (e) => {
+    const arrowFeatures = map.queryRenderedFeatures(e.point, {
+        layers: map.getStyle().layers
+            .filter(l => l.id.startsWith('arrow-'))
+            .map(l => l.id)
+    });
+    if (arrowFeatures.length > 0) {
+        const arrowFeature = arrowFeatures[0];
+        const featureId = arrowFeature.layer.id.replace('arrow-', '');
+
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.id === featureId);
+
+        if (currentFeature) {
+            const params = arrowParamsMap.get(featureId);
+            if (params) {
+                showArrowEditor(params);
+                hideFrontlineEditor();
+            }
+
+            draw.changeMode('direct_select', { featureId: featureId });
+        }
+        return;
+    }
+
+    // Pokud to není arrow, zkus frontline
+    const frontlineFeatures = map.queryRenderedFeatures(e.point, {
+        layers: map.getStyle().layers
+            .filter(l => l.id.startsWith('frontline-'))
+            .map(l => l.id)
+    });
+
+    if (frontlineFeatures.length > 0) {
+        const frontlineFeature = frontlineFeatures[0];
+        const featureId = frontlineFeature.layer.id.replace('frontline-', '');
+
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.id === featureId);
+
+        if (currentFeature) {
+            const params = frontlineParamsMap.get(featureId);
+            if (params) {
+                showFrontlineEditor(params);
+                hideArrowEditor();
+            }
+
+            draw.changeMode('direct_select', { featureId: featureId });
+        }
+        return;
+    }
+
+    hideArrowEditor();
+    hideFrontlineEditor();
+});
+map.dragPan.enable();
+
+
+function handleDraw(e) {
+    const data = draw.getAll();
+    const answer = document.getElementById('calculated-area');
+
+    clearAllArrowLayers();
+    clearAllFrontlineLayers();
+
+    if (data.features.length > 0) {
+        answer.innerHTML = '';
+
+        data.features.forEach((line, index) => {
+            if (line.geometry.type !== 'LineString') return;
+
+            const coords = line.geometry.coordinates;
+            const id = line.id || `line-${index}`;
+
+            if (currentDrawStyle === 'arrow') {
+                if (!arrowParamsMap.has(id)) {
+                    arrowParamsMap.set(id, {
+                        splineStep: 20,
+                        offsetDistance: 12000,
+                        calculation: ARROW_BODY_STYLE_LINEAR,
+                        range: 1,
+                        minValue: 0.1,
+                        widthArrow: 5,
+                        lengthArrow: 8
+                    });
+                }
+
+                const params = arrowParamsMap.get(id);
+
+                const arrowGeoJSON = getArrowPolygon(
+                    { points: coords, splineStep: params.splineStep, offsetDistance: params.offsetDistance },
+                    { calculation: params.calculation, range: params.range, minValue: params.minValue },
+                    { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
+                );
+
+                drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
+
+            } else if (currentDrawStyle === 'frontline') {
+                if (!frontlineParamsMap.has(id)) {
+                    frontlineParamsMap.set(id, {
+                        splineStep: 20,
+                        spacing: 500,
+                        offsetDistance: 12000,
+                        style: LEFT_SIDE,
+                        protrusion: {
+                            length: 2000,
+                            startSize: 5000,
+                            endSize: 5000,
+                            gap: 10000
+                        }
+                    });
+                }
+
+                const params = frontlineParamsMap.get(id);
+
+                const frontlineData = {
+                    points: coords,
+                    splineStep: params.splineStep,
+                    spacing: params.spacing,
+                    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;
+                }
+
+                drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
+            }
+        });
+    } else {
+        answer.innerHTML = '';
+        if (e.type !== 'draw.delete')
+            alert('Klikni na mapu pro kreslení čáry.');
+    }
+}
+
+function drawArrowOnMap(geojson, id) {
+
+    if (map.getLayer(id)) map.removeLayer(id);
+    if (map.getSource(id)) map.removeSource(id);
+
+    map.addSource(id, {
+        type: 'geojson',
+        data: geojson
+    });
+
+    map.addLayer({
+        id: id,
+        type: 'fill',
+        source: id,
+        paint: {
+            'fill-color': '#ff0000',
+            'fill-opacity': 0.5
+        }
+    });
+    console.log('HERE');
+}
+
+function drawFrontlineOnMap(frontlineGeoJSON, id) {
+    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': '#ff6600',
+            'fill-opacity': 0.6,
+            'fill-outline-color': '#cc3300'
+        }
+    });
+}
+
+function clearAllArrowLayers() {
+    const layers = map.getStyle().layers;
+    if (!layers) return;
+
+    layers.forEach(layer => {
+        if (layer.id.startsWith('arrow-')) {
+            if (map.getLayer(layer.id)) map.removeLayer(layer.id);
+            if (map.getSource(layer.id)) map.removeSource(layer.id);
+        }
+    });
+}
+
+function clearAllFrontlineLayers() {
+    const layers = map.getStyle().layers;
+    if (!layers) return;
+
+    layers.forEach(layer => {
+        if (layer.id.startsWith('frontline-')) {
+            if (map.getLayer(layer.id)) map.removeLayer(layer.id);
+            if (map.getSource(layer.id)) map.removeSource(layer.id);
+        }
+    });
+}
+
+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;
+}
+
+
+
+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('spacing').value = params.spacing;
+    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;
+}
+
+function hideFrontlineEditor() {
+    const popup = document.getElementById('frontline-editor');
+    popup.style.display = 'none';
+    currentFeature = null;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+document.getElementById('applyArrowChanges').addEventListener('click', () => {
+    
+    console.log("arrowFeatures");
+    console.log(arrowFeatures);
+    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);
+
+    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
+    });
+
+    drawArrowOnMap(arrowGeoJSON, `arrow-${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 spacing = parseFloat(document.getElementById('spacing').value);
+    const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
+    const style = 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);
+
+    frontlineParamsMap.set(id, {
+        splineStep,
+        spacing,
+        offsetDistance,
+        style,
+        protrusion: {
+            length,
+            startSize,
+            endSize,
+            gap
+        }
+    });
+
+    const frontlineData = {
+        points: coords,
+        splineStep,
+        spacing,
+        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;
+    }
+
+    drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
+});
+
+const buttonsContainer = document.getElementById('drawStyleButtons');
+buttonsContainer.addEventListener('click', (event) => {
+    if (event.target.tagName !== 'BUTTON') return;
+
+    // Odeber aktivní třídu ze všech tlačítek
+    Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
+
+    // Nastav aktivní třídu na kliknuté tlačítko
+    event.target.classList.add('active');
+
+    // Nastav styl podle data atributu
+    currentDrawStyle = event.target.getAttribute('data-style');
+
+    // Při změně stylu překreslíme aktuální kreslené prvky
+    handleDraw({ type: 'draw.update' });
+});
+});

MapPolygons.js

@@ -12,7 +12,8 @@ const map = new mapboxgl.Map({
     center: [10, 50],
     zoom: 5
 });
-
+//this is my test push
+//second
 map.on('load', () => {
     const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
     const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);

index.html

@@ -1,6 +1,117 @@
+<!--
+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>
+
+    <!-- Editor parametrů šipky -->
+    <div id="arrow-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
+    <h3>Arrow Editor</h3>
+    <label>Spline Step: <input id="splineStep" type="number" step="1"></label><br>
+    <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>
+    <button id="applyArrowChanges">Apply Changes</button>
+</div>
+
+<div id="frontline-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
+    <h3>Frontline Editor</h3>
+    <label>Spline Step: <input id="splineStepFrontline" type="number" step="1"></label><br>
+    <label>Spacing: <input id="spacing" type="number" step="100"></label><br>
+    <label>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
+    <label>Style:
+        <select id="styleFrontline">
+            <option value="leftSide">Left Side</option>
+            <option value="rightSide">Right Side</option>
+            <option value="bothSides">Both Sides</option>
+        </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>
+    <button id="applyFrontlineChanges">Apply Changes</button>
+</div>
+
+    <div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
+      <button data-style="frontline" class="active">Frontline</button>
+      <button data-style="arrow">Arrow</button>
+      <!-- další styly můžeš přidat sem -->
+    </div>
+
+    <!-- Box pro výpis -->
+    <div class="calculation-box">
+      <p>Click the map to draw a polygon.</p>
+      <div id="calculated-area"></div>
+    </div>
+
+    <!-- Hlavní JS -->
+    <script type="module" src="Drawing.js"></script>
+  </body>
+</html>
+
+
 <!--
 MAPBOX
--->
 <!DOCTYPE html>
 <html>
 <head>
@@ -19,7 +130,7 @@ body { margin: 0; padding: 0; }
     <script type="module" src="MapPolygons.js"></script>
 </body>
 </html>
-
+-->
 
 <!--
 CANVAS