tomas.richtar/StorymapperArrow
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Working prototype

Browse Source
This commit is contained in:
Tomas Richtar 2025-07-11 13:21:07 +02:00
parent 478ff1d7d5
commit 136cb264a6
2 changed files with 148 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
Drawing.js
View File

@ -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);

22
index.html
View File

@ -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>