Map controlls - Click

Drawing.js

@@ -6,7 +6,6 @@ import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.
 const ARROW = "arrow";
 const FRONTLINE = "frontline";
 
-let mouseMoveListener = null;
 let currentFeature = null;
 let currentDrawStyle = ARROW;
 
@@ -22,6 +21,7 @@ const map = new mapboxgl.Map({
     zoom: 5
 });
 
+// Drawing visuals
 const draw = new MapboxDraw({
     displayControlsDefault: false,
     controls: {
@@ -29,7 +29,7 @@ const draw = new MapboxDraw({
     },
     defaultMode: 'draw_line_string',
     styles: [
-        // Aktivní linka - úplně průhledná
+        // Main drawing line
         {
             id: 'gl-draw-line',
             type: 'line',
@@ -39,11 +39,11 @@ const draw = new MapboxDraw({
                 'line-join': 'round'
             },
             paint: {
-                'line-color': '#00ff00',  // zelená
+                'line-color': 'rgb(0, 255, 0)',
                 'line-width': 4
             }
         },
-        // Neaktivní linka - taky průhledná
+        // This makes the nonstop visible line invisible
         {
             id: 'gl-draw-line-inactive',
             type: 'line',
@@ -53,107 +53,184 @@ const draw = new MapboxDraw({
                 'line-join': 'round'
             },
             paint: {
-                'line-color': 'rgba(0,0,0,0)',
+                'line-color': 'rgba(0, 0, 0, 0)',
                 'line-width': 2
             }
         },
-        // Body (vertexy) - průhledné, pokud chceš
+        // Selected point
         {
             id: 'gl-draw-polygon-and-line-vertex-active',
             type: 'circle',
             filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'true']],
             paint: {
                 'circle-radius': 6,
-                'circle-color': '#00ff00'  // zelená
+                'circle-color': 'rgb(255, 255, 0)'
             }
         },
+        // Main points
         {
             id: 'gl-draw-polygon-and-line-vertex-inactive',
             type: 'circle',
             filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'false']],
             paint: {
                 'circle-radius': 4,
-                'circle-color': '#00aa00'  // tmavší zelená
+                'circle-color': 'rgb(0, 255, 0)'
             }
         },
-
+        // Midpoints
-        // midpointy - musí být viditelné, aby fungovalo kliknutí a přidávání vertexů
         {
             id: 'gl-draw-polygon-midpoint',
             type: 'circle',
             filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
-            paint: { 'circle-radius': 4, 'circle-color': '#fbb03b' } // žlutá
+            paint: { 
-        },
+                'circle-radius': 4,
-        {
+                'circle-color': 'rgb(0, 255, 174)'
-            id: 'gl-draw-polygon-midpoint-active',
+            }
-            type: 'circle',
-            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint'], ['==', 'active', 'true']],
-            paint: { 'circle-radius': 6, 'circle-color': '#fbb03b' }
         }
     ]
 });
 
-
+// Map controlls
-
 map.addControl(draw, 'top-left');
-
 map.on('draw.create', handleDraw);
 map.on('draw.update', handleDraw);
-map.on('click', (e) => {
+map.on('click', (e) => { 
-    // Hledání šipek
-    const arrowFeatures = map.queryRenderedFeatures(e.point, {
-        layers: map.getStyle().layers
-            .filter(l => l.id.startsWith(ARROW + "-"))
-            .map(l => l.id)
-    });
-    if (arrowFeatures.length > 0) {
-        const arrowFeature = arrowFeatures[0];
-        const featureId = arrowFeature.layer.id.replace(ARROW + "-", '');
-
-        const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === featureId);
-
-        if (currentFeature) {
-            const params = arrowParamsMap.get(featureId);
-            if (params) {
-                showArrowEditor(params);
-            }
-
-            draw.changeMode('direct_select', { featureId: featureId });
-        }
-        return;  // pokud kliknul na arrow, dále nekoukáme
-    }
-
-    // Hledání frontlinů
-    const frontlineFeatures = map.queryRenderedFeatures(e.point, {
-        layers: map.getStyle().layers
-            .filter(l => l.id.startsWith('frontline-'))
-            .map(l => l.id)
-    });
-    if (frontlineFeatures.length > 0) {
-        const frontlineFeature = frontlineFeatures[0];
-        const featureId = frontlineFeature.layer.id.replace('frontline-', '');
-
-        const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === featureId);
-
-        if (currentFeature) {
-            const params = frontlineParamsMap.get(featureId);
-            if (params) {
-                showFrontlineEditor(params);
-            }
-
-            draw.changeMode('direct_select', { featureId: featureId });
-        }
-        return;  // pokud kliknul na frontline, dále nekoukáme
-    }
-
-    // Když nic nenajdeme - schovej editory
-    hideFrontlineEditor();
     hideArrowEditor();
+    hideFrontlineEditor();
+    handleClick(e, ARROW, arrowParamsMap, showArrowEditor);
+    handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor);
 });
 
-map.dragPan.enable();
+function DrawArrow(coordinates, polygonId)
+{
+    if (!arrowParamsMap.has(polygonId)) {
+        arrowParamsMap.set(polygonId, {
+            splineStep: 20,
+            offsetDistance: 12000,
+            calculation: ARROW_BODY_STYLE_LINEAR,
+            range: 1,
+            minValue: 0.1,
+            widthArrow: 5,
+            lengthArrow: 8
+        });
+    }
+
+    const params = arrowParamsMap.get(polygonId);
+
+    const arrowGeoJSON = getArrowPolygon(
+        { points: coordinates, splineStep: params.splineStep, offsetDistance: params.offsetDistance },
+        { calculation: params.calculation, range: params.range, minValue: params.minValue },
+        { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
+    );
+
+    const arrowLayerId = ARROW + "-" + polygonId;
+    if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+    if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
+    drawArrowOnMap(arrowGeoJSON, ARROW + "-" + polygonId);
+    const allFeatures = draw.getAll().features;
+    currentFeature = allFeatures.find(f => f.polygonId === polygonId);
+    
+}
+
+function DrawFrontline(coordinates, polygonId){
+     if (!frontlineParamsMap.has(polygonId)) {
+            frontlineParamsMap.set(polygonId, {
+                splineStep: 0.08,
+                offsetDistance: 10000,
+                style: LEFT_SIDE,
+                protrusion: {
+                    length: 15000,
+                    startSize: 5000,
+                    endSize: 500,
+                    gap: 15000
+                }
+            });
+        }
+
+        const params = frontlineParamsMap.get(polygonId);
+
+        const frontlineData = {
+            points: coordinates,
+            splineStep: params.splineStep,
+            offsetDistance: params.offsetDistance,
+            style: params.style
+        };
+
+        const protrusionData = params.protrusion;
+
+        const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
+
+        let polygonToDraw = frontlineGeoJSON;
+        if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
+            polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
+        }
+
+        if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
+            let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
+            let polygonToDrawRight = frontlineGeoJSON.rightPoly;
+
+            const frontlineLayerId = FRONTLINE + "-" + polygonId;
+            if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+            if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+
+            drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + polygonId);
+            drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (polygonId+1));
+            
+            const allFeatures = draw.getAll().features;
+            currentFeature = allFeatures.find(f => f.polygonId === polygonId);
+
+            return;
+        }
+
+        const frontlineLayerId = FRONTLINE + "-" + polygonId;
+        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+        drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + polygonId);
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.polygonId === polygonId);
+        
+}
+
+function handleDraw(e) {
+    const feature = e.features[0];
+    const coords = feature.geometry.coordinates;
+    const id = feature.id;
+
+    
+
+    if (currentDrawStyle === ARROW) {
+        DrawArrow(coords, id);
+    } else if (currentDrawStyle === FRONTLINE) {
+        DrawFrontline(coords, id);
+    }
+}
+
+function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFunction) {
+
+    console.log("currentFeature" + currentFeature);
+    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;
+
+    const feature = features[0];
+    const featureId = feature.layer.id.replace(prefix + "-", '');
+
+    const allFeatures = draw.getAll().features;
+    currentFeature = allFeatures.find(f => f.id === featureId);
+
+    console.log("currentFeature" + currentFeature);
+    if (currentFeature) {
+        const params = paramsMap.get(featureId);
+        if (params) {
+            showEditorFunction(params);
+        }
+        draw.changeMode('direct_select', { featureId: featureId });
+    }
+}
 
 function MyDelete(polygonType)
 {
@@ -199,107 +276,7 @@ function MyDelete(polygonType)
     hideFrontlineEditor();
 }
 
-function handleDraw(e) {
-    const feature = e.features[0];
 
-    if (feature.geometry.type !== 'LineString') return;
-
-    const coords = feature.geometry.coordinates;
-    const id = feature.id;
-
-    if (currentDrawStyle === ARROW) {
-        if (!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 }
-        );
-
-        const arrowLayerId = ARROW + "-" + id;
-        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
-        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
-        drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
-        const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === id);
-
-    } else if (currentDrawStyle === FRONTLINE) {
-        if (!frontlineParamsMap.has(id)) {
-            frontlineParamsMap.set(id, {
-                splineStep: 0.08,
-                offsetDistance: 10000,
-                style: LEFT_SIDE,
-                protrusion: {
-                    length: 15000,
-                    startSize: 5000,
-                    endSize: 500,
-                    gap: 15000
-                }
-            });
-        }
-
-        const params = frontlineParamsMap.get(id);
-
-        const frontlineData = {
-            points: coords,
-            splineStep: params.splineStep,
-            offsetDistance: params.offsetDistance,
-            style: params.style
-        };
-
-        const protrusionData = params.protrusion;
-
-        console.log("Create");
-        console.log(frontlineData);
-        console.log(protrusionData);
-        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;
-
-            console.log("polygonToDrawLeft", polygonToDrawLeft);
-            console.log("polygonToDrawRight", polygonToDrawRight);
-            
-            const frontlineLayerId = FRONTLINE + "-" + id;
-            if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
-            if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
-
-            drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
-            drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
-            
-            const allFeatures = draw.getAll().features;
-            currentFeature = allFeatures.find(f => f.id === id);
-
-            return;
-        }
-
-        const frontlineLayerId = FRONTLINE + "-" + id;
-        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
-        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
-        drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
-        const allFeatures = draw.getAll().features;
-        currentFeature = allFeatures.find(f => f.id === id);
-        
-    }
-}
 
 function drawArrowOnMap(geojson, id) {
     map.addSource(id, {