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

Frontline

Browse Source
This commit is contained in:
Tomas Richtar 2025-07-10 06:15:00 +02:00
parent 049bbc5781
commit 7157c2502a
2 changed files with 198 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
Drawing.js
View File

@ -95,7 +95,9 @@ const draw = new MapboxDraw({
map.addControl(draw, 'top-left');
map.on('draw.create', handleDraw);
map.on('draw.update', handleDraw);
map.on('click', (e) => {
// Hledání šipek
const arrowFeatures = map.queryRenderedFeatures(e.point, {
layers: map.getStyle().layers
.filter(l => l.id.startsWith('arrow-'))
@ -116,12 +118,38 @@ map.on('click', (e) => {
draw.changeMode('direct_select', { featureId: featureId });
}
return;
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();
});
map.dragPan.enable();
function MyDelete()
@ -140,6 +168,24 @@ function MyDelete()
//Frontline
const frontlineLayerId = `frontline-${id}`;
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
const frontlineLayerIdB = `frontline-${id+1}`;
if (map.getLayer(frontlineLayerIdB)) map.removeLayer(frontlineLayerIdB);
if (map.getSource(frontlineLayerIdB)) map.removeSource(frontlineLayerIdB);
frontlineParamsMap.delete(id);
frontlineParamsMap.delete(id+1);
hideArrowEditor();
hideFrontlineEditor();
document.getElementById('calculated-area').innerHTML = '';
return;
}
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
frontlineParamsMap.delete(id);
@ -150,20 +196,12 @@ function MyDelete()
}
function handleDraw(e) {
const data = draw.getAll();
const answer = document.getElementById('calculated-area');
const feature = e.features[0];
clearAllArrowLayers();
clearAllFrontlineLayers();
if (feature.geometry.type !== 'LineString') return;
if (data.features.length > 0) {
answer.innerHTML = '';
data.features.forEach((line, index) => {
if (line.geometry.type !== 'LineString') return;
const coords = line.geometry.coordinates;
const id = line.id || `line-${index}`;
const coords = feature.geometry.coordinates;
const id = feature.id;
if (currentDrawStyle === 'arrow') {
if (!arrowParamsMap.has(id)) {
@ -186,21 +224,24 @@ function handleDraw(e) {
{ widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
);
console.log('Draw');
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: 20,
spacing: 500,
offsetDistance: 12000,
splineStep: 0.08,
offsetDistance: 10000,
style: LEFT_SIDE,
protrusion: {
length: 2000,
length: 15000,
startSize: 5000,
endSize: 5000,
gap: 10000
endSize: 500,
gap: 15000
}
});
}
@ -210,13 +251,15 @@ function handleDraw(e) {
const frontlineData = {
points: coords,
splineStep: params.splineStep,
spacing: params.spacing,
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;
@ -224,21 +267,37 @@ function handleDraw(e) {
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
}
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
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;
}
});
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete')
alert('Klikni na mapu pro kreslení čáry.');
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) {
if (map.getLayer(id)) map.removeLayer(id);
if (map.getSource(id)) map.removeSource(id);
map.addSource(id, {
type: 'geojson',
data: geojson
@ -253,7 +312,6 @@ function drawArrowOnMap(geojson, id) {
'fill-opacity': 0.5
}
});
console.log('HERE');
}
function drawFrontlineOnMap(frontlineGeoJSON, id) {
@ -332,7 +390,6 @@ function showFrontlineEditor(params) {
popup.style.top = '70px';
document.getElementById('splineStepFrontline').value = params.splineStep;
document.getElementById('spacing').value = params.spacing;
document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
document.getElementById('styleFrontline').value = params.style;
@ -355,6 +412,11 @@ document.addEventListener('DOMContentLoaded', () => {
MyDelete();
});
document.getElementById('removeFrontline').addEventListener('click', () => {
MyDelete();
});
document.getElementById('applyArrowChanges').addEventListener('click', () => {
if (!currentFeature) return;
@ -391,7 +453,16 @@ document.addEventListener('DOMContentLoaded', () => {
widthArrow,
lengthArrow
});
//ARROW
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);
});
document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
@ -401,9 +472,8 @@ document.addEventListener('DOMContentLoaded', () => {
const id = currentFeature.id;
const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
const spacing = parseFloat(document.getElementById('spacing').value);
const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
const style = document.getElementById('styleFrontline').value;
const style = parseInt(document.getElementById('styleFrontline').value);
const length = parseFloat(document.getElementById('protrusionLength').value);
const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
@ -412,7 +482,6 @@ document.addEventListener('DOMContentLoaded', () => {
frontlineParamsMap.set(id, {
splineStep,
spacing,
offsetDistance,
style,
protrusion: {
@ -426,39 +495,78 @@ document.addEventListener('DOMContentLoaded', () => {
const frontlineData = {
points: coords,
splineStep,
spacing,
offsetDistance,
style
};
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) {
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);
console.log(frontlineLayerId);
console.log(`frontline-${id+1}`);
drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`);
drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);
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);
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);
});
const buttonsContainer = document.getElementById('drawStyleButtons');
buttonsContainer.addEventListener('click', (event) => {
if (event.target.tagName !== 'BUTTON') return;
// Odeber aktivní třídu ze všech tlačítek
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
// Nastav aktivní třídu na kliknuté tlačítko
event.target.classList.add('active');
// Nastav styl podle data atributu
currentDrawStyle = event.target.getAttribute('data-style');
// Při změně stylu překreslíme aktuální kreslené prvky
console.log('handleDraw');
handleDraw({ type: 'draw.update' });
updateButtonStyles();
});
updateButtonStyles();
function updateButtonStyles() {
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
btn.style.color = isSelected ? '#fff' : '#000';
});
}
});

11
index.html
View File

@ -76,13 +76,12 @@ MAPBOX - DRAWING
<div id="frontline-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
<h3>Frontline Editor</h3>
<label>Spline Step: <input id="splineStepFrontline" type="number" step="1"></label><br>
<label>Spacing: <input id="spacing" type="number" step="100"></label><br>
<label>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
<label>Style:
<select id="styleFrontline">
<option value="leftSide">Left Side</option>
<option value="rightSide">Right Side</option>
<option value="bothSides">Both Sides</option>
<option value=1>Left Side</option>
<option value=2>Right Side</option>
<option value=3>Both Sides</option>
</select>
</label><br>
<h4>Protrusion</h4>
@ -91,11 +90,11 @@ MAPBOX - DRAWING
<label>End Size: <input id="protrusionEndSize" type="number" step="100"></label><br>
<label>Gap: <input id="protrusionGap" type="number" step="100"></label><br>
<button id="applyFrontlineChanges">Apply Changes</button>
<button id="removeFrontline">Remove Arrow</button>
<button id="removeFrontline">Remove Frontline</button>
</div>
<div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
<button data-style="frontline" class="active">Frontline</button>
<button data-style="frontline">Frontline</button>
<button data-style="arrow">Arrow</button>
<!-- další styly můžeš přidat sem -->
</div>