From 136cb264a6240b5a1a41f351d83eb00a3c81be5d Mon Sep 17 00:00:00 2001 From: Tomas Richtar Date: Fri, 11 Jul 2025 13:21:07 +0200 Subject: [PATCH] Working prototype --- Drawing.js | 206 +++++++++++++++++++++++++++++++++-------------------- index.html | 22 ++++-- 2 files changed, 148 insertions(+), 80 deletions(-) diff --git a/Drawing.js b/Drawing.js index 38c77de..5530f43 100644 --- a/Drawing.js +++ b/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); + updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions); } 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-opacity': 0.6, - 'fill-outline-color': '#cc3300' + 'fill-color': paintOptions['fill-color'], + 'fill-opacity': paintOptions['fill-opacity'], + '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; -     console.log("Test"); -     const coords = currentFeature.geometry.coordinates; -     const id = currentFeature.id; + 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 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 fillColor = document.getElementById('arrowFillColor').value; + const outlineColor = document.getElementById('arrowOutlineColor').value; + const opacity = parseFloat(document.getElementById('arrowOpacity').value); -     arrowParamsMap.set(id, { -         splineStep, -         offsetDistance, -         calculation: ARROW_BODY_STYLE_LINEAR, -         range, -         minValue, -         widthArrow, -         lengthArrow -     }); + const paintOptions = { + 'fill-color': fillColor, + 'fill-outline-color': outlineColor, + 'fill-opacity': opacity + }; -     const arrowGeoJSON = getArrowPolygon({ -         points: coords, -         splineStep, -         offsetDistance -     }, { -         calculation: ARROW_BODY_STYLE_LINEAR, -         range, -         minValue -     }, { -         widthArrow, -         lengthArrow -     }); + + arrowParamsMap.set(id, { + splineStep, + offsetDistance, + calculation: ARROW_BODY_STYLE_LINEAR, + range, + minValue, + widthArrow, + lengthArrow, + paintOptions + }); -     //ARROW -     const arrowLayerId = ARROW + "-" + id; -     if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); -     if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); + const arrowGeoJSON = getArrowPolygon({ + points: coords, + splineStep, + 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; -     currentFeature = allFeatures.find(f => f.id === id); + drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions); + + 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); - console.log(FRONTLINE + "-" + (id+1)); - drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id); - drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1)); + drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id+1, paintOptionsLeft); + drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight); 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); diff --git a/index.html b/index.html index d33811f..a0a0e41 100644 --- a/index.html +++ b/index.html @@ -59,8 +59,6 @@ MAPBOX - DRAWING
- - @@ -96,9 +112,7 @@ MAPBOX - DRAWING
-
-