Working prototype

Drawing.js

@@ -13,7 +13,12 @@ const DEFAULT_ARROW_PARAMS = {
     range: 1,
     minValue: 0.1,
     widthArrow: 5,
-    lengthArrow: 8
+    lengthArrow: 8,
+    paintOptions: {
+        "fill-color": "#0099ff",
+        "fill-outline-color": "#005588",
+        "fill-opacity": 0.6
+    }
 };
 
 const DEFAULT_FRONTLINE_PARAMS = {
@@ -25,6 +30,16 @@ const DEFAULT_FRONTLINE_PARAMS = {
         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
     }
 };
 
@@ -184,8 +199,7 @@ function DrawArrow(coordinates, polygonId) {
             lengthArrow: params.lengthArrow
         }
     );
-
+    updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions);
-    updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON);
 }
 
 function DrawFrontline(coordinates, polygonId) {
@@ -203,7 +217,7 @@ function DrawFrontline(coordinates, polygonId) {
         },
         params.protrusion
     );
-
+    
     let polygonToDraw = frontlineGeoJSON;
 
     // Only one side
@@ -213,29 +227,34 @@ function DrawFrontline(coordinates, polygonId) {
 
     // Both sides
     if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
-        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw);
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
 
         let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
-        drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1));
+
+        drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1), params.paintOptionsRight);
         return;
     }
 
-    updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw);
+    if (params.style == 1){ // LEFT_SIDE
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
+    }else if(params.style == 2){ // RIGHT_SIDE
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight);
+    }
 }
 
-function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) {
+function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions) {
     const layerId =  prefix + "-" + polygonId;
 
     if (map.getLayer(layerId)) map.removeLayer(layerId);
     if (map.getSource(layerId)) map.removeSource(layerId);
 
-    drawFunction(geojson, layerId);
+    drawFunction(geojson, layerId, paintOptions);
 
     const allFeatures = draw.getAll().features;
-    currentFeature = allFeatures.find(f => f.polygonId === polygonId);
+    currentFeature = allFeatures.find(f => f.id === polygonId);
 }
 
-function drawOnMap(frontlineGeoJSON, id) {
+function drawOnMap(frontlineGeoJSON, id, paintOptions = {}) {
     if (map.getLayer(id)) map.removeLayer(id);
     if (map.getSource(id)) map.removeSource(id);
 
@@ -249,9 +268,9 @@ function drawOnMap(frontlineGeoJSON, id) {
         type: 'fill',
         source: id,
         paint: {
-            'fill-color': '#ff6600',
+            'fill-color': paintOptions['fill-color'],
-            'fill-opacity': 0.6,
+            'fill-opacity': paintOptions['fill-opacity'],
-            'fill-outline-color': '#cc3300'
+            'fill-outline-color': paintOptions['fill-outline-color']
         }
     });
 }
@@ -301,7 +320,6 @@ function DeleteFromMap(layerId, FeatureId){
 function showArrowEditor(params) {
     const popup = document.getElementById('arrow-editor');
     popup.style.display = 'block';
-
     popup.style.left = '10px';
     popup.style.top = '70px';
 
@@ -311,6 +329,10 @@ function showArrowEditor(params) {
     document.getElementById('minValue').value = params.minValue;
     document.getElementById('widthArrow').value = params.widthArrow;
     document.getElementById('lengthArrow').value = params.lengthArrow;
+    
+    document.getElementById('arrowFillColor').value = params.paintOptions["fill-color"];
+    document.getElementById('arrowOutlineColor').value = params.paintOptions["fill-outline-color"];
+    parseFloat(document.getElementById('arrowOpacity').value = params.paintOptions["fill-opacity"]);
 }
 
 function hideArrowEditor() {
@@ -322,7 +344,6 @@ function hideArrowEditor() {
 function showFrontlineEditor(params) {
     const popup = document.getElementById('frontline-editor');
     popup.style.display = 'block';
-
     popup.style.left = '10px';
     popup.style.top = '70px';
 
@@ -334,6 +355,14 @@ function showFrontlineEditor(params) {
     document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
     document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
     document.getElementById('protrusionGap').value = params.protrusion.gap;
+    
+    document.getElementById('frontlineFillColorLeft').value = params.paintOptionsLeft["fill-color"];
+    document.getElementById('frontlineOutlineColorLeft').value = params.paintOptionsLeft["fill-outline-color"];
+    parseFloat(document.getElementById('frontlineOpacityLeft').value = params.paintOptionsLeft["fill-opacity"]);
+
+    document.getElementById('frontlineFillColorRight').value = params.paintOptionsRight["fill-color"];
+    document.getElementById('frontlineOutlineColorRight').value = params.paintOptionsRight["fill-outline-color"];
+    parseFloat(document.getElementById('frontlineOpacityRight').value = params.paintOptionsRight["fill-opacity"]);
 }
 
 function hideFrontlineEditor() {
@@ -355,60 +384,71 @@ document.addEventListener('DOMContentLoaded', () => {
 
     document.getElementById('removeArrow').addEventListener('click', () => {
        
-        handleDelete(ARROW);
+        handleDelete(ARROW);
     });
 
     document.getElementById('removeFrontline').addEventListener('click', () => {
        
-        handleDelete(FRONTLINE);
+        handleDelete(FRONTLINE);
     });
 
     document.getElementById('applyArrowChanges').addEventListener('click', () => {
-       
+        if (!currentFeature) return;
-        if (!currentFeature) return;
+        
-        console.log("Test");
+        const coords = currentFeature.geometry.coordinates;
-        const coords = currentFeature.geometry.coordinates;
+        const id = currentFeature.id;
-        const id = currentFeature.id;
+        
+        const splineStep = parseFloat(document.getElementById('splineStep').value);
+        const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
+        const range = parseFloat(document.getElementById('range').value);
+        const minValue = parseFloat(document.getElementById('minValue').value);
+        const widthArrow = parseFloat(document.getElementById('widthArrow').value);
+        const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
 
-        const splineStep = parseFloat(document.getElementById('splineStep').value);
+        const fillColor = document.getElementById('arrowFillColor').value;
-        const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
+        const outlineColor = document.getElementById('arrowOutlineColor').value;
-        const range = parseFloat(document.getElementById('range').value);
+        const opacity = parseFloat(document.getElementById('arrowOpacity').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, {
+        const paintOptions = {
-            splineStep,
+            'fill-color': fillColor,
-            offsetDistance,
+            'fill-outline-color': outlineColor,
-            calculation: ARROW_BODY_STYLE_LINEAR,
+            'fill-opacity': opacity
-            range,
+        };
-            minValue,
-            widthArrow,
-            lengthArrow
-        });
 
-        const arrowGeoJSON = getArrowPolygon({
+        
-            points: coords,
+        arrowParamsMap.set(id, {
-            splineStep,
+            splineStep,
-            offsetDistance
+            offsetDistance,
-        }, {
+            calculation: ARROW_BODY_STYLE_LINEAR,
-            calculation: ARROW_BODY_STYLE_LINEAR,
+            range,
-            range,
+            minValue,
-            minValue
+            widthArrow,
-        }, {
+            lengthArrow,
-            widthArrow,
+            paintOptions 
-            lengthArrow
+        });
-        });
 
-        //ARROW
+        const arrowGeoJSON = getArrowPolygon({
-        const arrowLayerId = ARROW + "-" + id;
+            points: coords,
-        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+            splineStep,
-        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
+            offsetDistance
+        }, {
+            calculation: ARROW_BODY_STYLE_LINEAR,
+            range,
+            minValue
+        }, {
+            widthArrow,
+            lengthArrow
+        });
 
-        drawOnMap(arrowGeoJSON, ARROW + "-" + id);
+        //ARROW
+        const arrowLayerId = ARROW + "-" + id;
+        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
 
-        const allFeatures = draw.getAll().features;
+        drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions);
-        currentFeature = allFeatures.find(f => f.id === id);
+
+        const allFeatures = draw.getAll().features;
+        currentFeature = allFeatures.find(f => f.id === id);
     });
 
     document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
@@ -426,6 +466,24 @@ document.addEventListener('DOMContentLoaded', () => {
         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,
@@ -435,7 +493,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 startSize,
                 endSize,
                 gap
-            }
+            },
+            paintOptionsLeft,
+            paintOptionsRight
         });
 
         const frontlineData = {
@@ -446,14 +506,7 @@ document.addEventListener('DOMContentLoaded', () => {
         };
 
         const protrusionData = frontlineParamsMap.get(id).protrusion;
-
-        console.log("Update");
-        console.log(frontlineData);
-        console.log(protrusionData);
-
         const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
-
-        console.log("frontlineGeoJSON", frontlineGeoJSON);
         let polygonToDraw = frontlineGeoJSON;
 
         if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
@@ -462,18 +515,13 @@ document.addEventListener('DOMContentLoaded', () => {
         if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
             let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
             let polygonToDrawRight = frontlineGeoJSON.rightPoly;
-
-            console.log("polygonToDrawLeft", polygonToDrawLeft);
-            console.log("polygonToDrawRight", polygonToDrawRight);
-            
             const frontlineLayerId = FRONTLINE + "-" + id;
+
             if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
             if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
 
-            console.log(frontlineLayerId);
+            drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id+1, paintOptionsLeft);
-            console.log(FRONTLINE + "-" + (id+1));
+            drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight);
-            drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
-            drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
             
             const allFeatures = draw.getAll().features;
             currentFeature = allFeatures.find(f => f.id === id);
@@ -481,15 +529,21 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
         }
 
-        //if (last was both destroy id+1) TODO
-        console.log("Test2");
         const frontlineLayerId = FRONTLINE + "-" + id;
         if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);
         if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);
         if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
         if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+        
+        let paintOptions;
+        if(frontlineData.style == LEFT_SIDE){
+            paintOptions = paintOptionsLeft;
+        }else if(frontlineData.style == RIGHT_SIDE)
+        {
+            paintOptions = paintOptionsRight;
+        }
 
-        drawOnMap(polygonToDraw, FRONTLINE + "-" + id);
+        drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions);
 
         const allFeatures = draw.getAll().features;
         currentFeature = allFeatures.find(f => f.id === id);

index.html

@@ -59,8 +59,6 @@ MAPBOX - DRAWING
   <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>
@@ -69,8 +67,15 @@ MAPBOX - DRAWING
     <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>
+    
+    <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;">
@@ -89,6 +94,17 @@ MAPBOX - DRAWING
     <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 LeftSide</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 RightSide</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>
@@ -96,9 +112,7 @@ MAPBOX - DRAWING
     <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>
-      <!-- další styly můžeš přidat sem -->
     </div>
-    <!-- Hlavní JS -->
     <script type="module" src="Drawing.js"></script>
   </body>
 </html>