diff --git a/Drawing.js b/Drawing.js index 3cea62f..17fa003 100644 --- a/Drawing.js +++ b/Drawing.js @@ -1,55 +1,15 @@ 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 { 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"; -const ARROW = "arrow"; -const FRONTLINE = "frontline"; -const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style +export const ARROW = "arrow"; +export const FRONTLINE = "frontline"; +export const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style -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 - } -}; - -let currentFeature = null; let currentDrawStyle = ARROW; -const arrowParamsMap = new Map(); -const frontlineParamsMap = new Map(); - mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg'; const map = new mapboxgl.Map({ @@ -130,252 +90,25 @@ const draw = new MapboxDraw({ // Map controlls map.addControl(draw, 'top-left'); -map.on('draw.create', handleDraw); -map.on('draw.update', handleDraw); +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); - handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor); + handleClick(e, ARROW, arrowParamsMap, showArrowEditor, map, draw, currentDrawStyle); + handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor, map, draw, currentDrawStyle); }); map.dragPan.enable(); -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) { - 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; - - currentDrawStyle = prefix; - updateButtonStyles(); - const feature = features[0]; - const featureId = feature.layer.id.replace(prefix + "-", ''); - - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === featureId); - - if (currentFeature) { - const params = paramsMap.get(featureId); - if (params) { - showEditorFunction(params); - } - draw.changeMode('direct_select', { featureId: featureId }); - } -} - -function DrawArrow(coordinates, polygonId) { - 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); -} - -function DrawFrontline(coordinates, polygonId) { - 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); - - let additionalPolygonToDraw = frontlineGeoJSON.rightPoly; - - drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight); - return; - } - - 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, paintOptions) { - const layerId = prefix + "-" + polygonId; - - if (map.getLayer(layerId)) map.removeLayer(layerId); - if (map.getSource(layerId)) map.removeSource(layerId); - - drawFunction(geojson, layerId, paintOptions); - - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === polygonId); -} - -function drawOnMap(frontlineGeoJSON, id, paintOptions = {}) { - 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': paintOptions['fill-color'], - 'fill-opacity': paintOptions['fill-opacity'], - 'fill-outline-color': paintOptions['fill-outline-color'] - } - }); -} - - -function handleDelete(polygonType) -{ - if (!currentFeature) return; - - const id = currentFeature.id; - draw.delete(id); - - //ARROW - if(polygonType == ARROW){ - const arrowLayerId = polygonType + "-" + id; - DeleteFromMap(arrowLayerId, id); - } - - //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); - DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE); - hideArrowEditor(); - hideFrontlineEditor(); - return; - } - - DeleteFromMap(frontlineLayerId, id); - } - - hideArrowEditor(); - hideFrontlineEditor(); -} - -function DeleteFromMap(layerId, FeatureId){ - if (map.getLayer(layerId)) map.removeLayer(layerId); - if (map.getSource(layerId)) map.removeSource(layerId); - - arrowParamsMap.delete(FeatureId); -} - -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('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() { - 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('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"]); -} - -function hideFrontlineEditor() { - const popup = document.getElementById('frontline-editor'); - popup.style.display = 'none'; - currentFeature = null; -} - -function updateButtonStyles() { +export function updateButtonStyles(drawStyle) { + currentDrawStyle = drawStyle; const buttonsContainer = document.getElementById('drawStyleButtons'); Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => { - const isSelected = btn.getAttribute('data-style') === currentDrawStyle; + const isSelected = btn.getAttribute('data-style') === drawStyle; btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0'; btn.style.color = isSelected ? '#fff' : '#000'; }); @@ -383,11 +116,11 @@ function updateButtonStyles() { document.addEventListener('DOMContentLoaded', () => { document.getElementById('removeArrow').addEventListener('click', () => { - handleDelete(ARROW); + handleDelete(ARROW, map, draw); }); document.getElementById('removeFrontline').addEventListener('click', () => { - handleDelete(FRONTLINE); + handleDelete(FRONTLINE, map, draw); }); document.getElementById('applyArrowChanges').addEventListener('click', () => { @@ -402,6 +135,7 @@ document.addEventListener('DOMContentLoaded', () => { 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; @@ -416,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => { arrowParamsMap.set(id, { splineStep, offsetDistance, - calculation: ARROW_BODY_STYLE_LINEAR, + calculation, range, minValue, widthArrow, @@ -429,7 +163,7 @@ document.addEventListener('DOMContentLoaded', () => { splineStep, offsetDistance }, { - calculation: ARROW_BODY_STYLE_LINEAR, + calculation, range, minValue }, { @@ -442,10 +176,10 @@ document.addEventListener('DOMContentLoaded', () => { if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); - drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions); + drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions, map); const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === id); + setCurrentFeature(allFeatures.find(f => f.id === id)); }); document.getElementById('applyFrontlineChanges').addEventListener('click', () => { @@ -517,11 +251,11 @@ document.addEventListener('DOMContentLoaded', () => { if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); - drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft); - drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight); + drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft, map); + drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight, map); const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === id); + setCurrentFeature(allFeatures.find(f => f.id === id)); return; } @@ -540,10 +274,10 @@ document.addEventListener('DOMContentLoaded', () => { paintOptions = paintOptionsRight; } - drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions); + drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions, map); const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === id); + setCurrentFeature(allFeatures.find(f => f.id === id)); }); const buttonsContainer = document.getElementById('drawStyleButtons'); @@ -555,8 +289,8 @@ document.addEventListener('DOMContentLoaded', () => { event.target.classList.add('active'); currentDrawStyle = event.target.getAttribute('data-style'); - updateButtonStyles(); + updateButtonStyles(currentDrawStyle); }); - updateButtonStyles(); + updateButtonStyles(currentDrawStyle); }); \ No newline at end of file diff --git a/DrawingFunctions.js b/DrawingFunctions.js new file mode 100644 index 0000000..4d8561c --- /dev/null +++ b/DrawingFunctions.js @@ -0,0 +1,285 @@ +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; +} \ No newline at end of file diff --git a/Frontline.js b/Frontline.js index ea424e4..cb519dd 100644 --- a/Frontline.js +++ b/Frontline.js @@ -182,7 +182,7 @@ function computeProtrusion(leftSidePoints, protrusionData, sideOffset) { const localDistance = distance - currentSegmentPos; const pointOnSegment = turf.along(turf.lineString([seg.p0, seg.p1]), localDistance, { units: METERS }).geometry.coordinates; - const thicknessOffset = sideOffset * 0.2; + const thicknessOffset = sideOffset * 0.1; const adjustedPoint = movePoint(pointOnSegment, thicknessOffset, seg.bearing + 90); const centerPoint = movePoint(adjustedPoint, protrusionData.length, seg.bearing - 90); diff --git a/index.html b/index.html index 3b4ea18..2f5773f 100644 --- a/index.html +++ b/index.html @@ -68,6 +68,14 @@ MAPBOX - DRAWING

+
+

Styling