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

Arrow delete

Browse Source
This commit is contained in:
Tomas Richtar 2025-07-07 17:30:15 +02:00
parent ef4dd49d74
commit 049bbc5781
2 changed files with 130 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
Drawing.js
View File

@ -22,8 +22,7 @@ const map = new mapboxgl.Map({
const draw = new MapboxDraw({ const draw = new MapboxDraw({
displayControlsDefault: false, displayControlsDefault: false,
controls: { controls: {
line_string: true, line_string: true
trash: true
}, },
defaultMode: 'draw_line_string', defaultMode: 'draw_line_string',
styles: [ styles: [
@ -94,16 +93,8 @@ const draw = new MapboxDraw({
map.addControl(draw, 'top-left'); map.addControl(draw, 'top-left');
map.on('draw.create', handleDraw); map.on('draw.create', handleDraw);
map.on('draw.delete', () => {
draw.deleteAll();
clearAllArrowLayers();
clearAllFrontlineLayers();
hideArrowEditor();
hideFrontlineEditor();
document.getElementById('calculated-area').innerHTML = '';
});
map.on('draw.update', handleDraw);
map.on('click', (e) => { map.on('click', (e) => {
const arrowFeatures = map.queryRenderedFeatures(e.point, { const arrowFeatures = map.queryRenderedFeatures(e.point, {
layers: map.getStyle().layers layers: map.getStyle().layers
@ -121,7 +112,6 @@ map.on('click', (e) => {
const params = arrowParamsMap.get(featureId); const params = arrowParamsMap.get(featureId);
if (params) { if (params) {
showArrowEditor(params); showArrowEditor(params);
hideFrontlineEditor();
} }
draw.changeMode('direct_select', { featureId: featureId }); draw.changeMode('direct_select', { featureId: featureId });
@ -129,37 +119,35 @@ map.on('click', (e) => {
return; return;
} }
// Pokud to není arrow, zkus frontline
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);
hideArrowEditor();
}
draw.changeMode('direct_select', { featureId: featureId });
}
return;
}
hideArrowEditor(); hideArrowEditor();
hideFrontlineEditor();
}); });
map.dragPan.enable(); map.dragPan.enable();
function MyDelete()
{
if (!currentFeature) return;
const id = currentFeature.id;
draw.delete(id);
//ARROW
const arrowLayerId = `arrow-${id}`;
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
arrowParamsMap.delete(id);
//Frontline
const frontlineLayerId = `frontline-${id}`;
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
frontlineParamsMap.delete(id);
hideArrowEditor();
hideFrontlineEditor();
document.getElementById('calculated-area').innerHTML = '';
}
function handleDraw(e) { function handleDraw(e) {
const data = draw.getAll(); const data = draw.getAll();
@ -198,6 +186,7 @@ function handleDraw(e) {
{ widthArrow: params.widthArrow, lengthArrow: params.lengthArrow } { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
); );
console.log('Draw');
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`); drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
} else if (currentDrawStyle === 'frontline') { } else if (currentDrawStyle === 'frontline') {
@ -289,17 +278,17 @@ function drawFrontlineOnMap(frontlineGeoJSON, id) {
} }
function clearAllArrowLayers() { function clearAllArrowLayers() {
const layers = map.getStyle().layers; const allLayerIds = map.getStyle().layers.map(l => l.id);
if (!layers) return;
layers.forEach(layer => { allLayerIds.forEach(id => {
if (layer.id.startsWith('arrow-')) { if (id.startsWith('arrow-')) {
if (map.getLayer(layer.id)) map.removeLayer(layer.id); if (map.getLayer(id)) map.removeLayer(id);
if (map.getSource(layer.id)) map.removeSource(layer.id); if (map.getSource(id)) map.removeSource(id);
} }
}); });
} }
function clearAllFrontlineLayers() { function clearAllFrontlineLayers() {
const layers = map.getStyle().layers; const layers = map.getStyle().layers;
if (!layers) return; if (!layers) return;
@ -360,111 +349,116 @@ function hideFrontlineEditor() {
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.getElementById('applyArrowChanges').addEventListener('click', () => {
console.log("arrowFeatures");
console.log(arrowFeatures);
if (!currentFeature) return;
console.log("Test");
const coords = currentFeature.geometry.coordinates;
const id = currentFeature.id;
const splineStep = parseFloat(document.getElementById('splineStep').value); document.getElementById('removeArrow').addEventListener('click', () => {
const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
const range = parseFloat(document.getElementById('range').value); MyDelete();
const minValue = parseFloat(document.getElementById('minValue').value);
const widthArrow = parseFloat(document.getElementById('widthArrow').value);
const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
arrowParamsMap.set(id, {
splineStep,
offsetDistance,
calculation: ARROW_BODY_STYLE_LINEAR,
range,
minValue,
widthArrow,
lengthArrow
}); });
const arrowGeoJSON = getArrowPolygon({ document.getElementById('applyArrowChanges').addEventListener('click', () => {
points: coords,
splineStep, if (!currentFeature) return;
offsetDistance console.log("Test");
}, { const coords = currentFeature.geometry.coordinates;
calculation: ARROW_BODY_STYLE_LINEAR, const id = currentFeature.id;
range,
minValue const splineStep = parseFloat(document.getElementById('splineStep').value);
}, { const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
widthArrow, const range = parseFloat(document.getElementById('range').value);
lengthArrow const minValue = parseFloat(document.getElementById('minValue').value);
const widthArrow = parseFloat(document.getElementById('widthArrow').value);
const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
arrowParamsMap.set(id, {
splineStep,
offsetDistance,
calculation: ARROW_BODY_STYLE_LINEAR,
range,
minValue,
widthArrow,
lengthArrow
});
const arrowGeoJSON = getArrowPolygon({
points: coords,
splineStep,
offsetDistance
}, {
calculation: ARROW_BODY_STYLE_LINEAR,
range,
minValue
}, {
widthArrow,
lengthArrow
});
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
}); });
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`); document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
}); if (!currentFeature) return;
document.getElementById('applyFrontlineChanges').addEventListener('click', () => { const coords = currentFeature.geometry.coordinates;
if (!currentFeature) return; const id = currentFeature.id;
const coords = currentFeature.geometry.coordinates; const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
const id = currentFeature.id; const spacing = parseFloat(document.getElementById('spacing').value);
const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
const style = document.getElementById('styleFrontline').value;
const splineStep = parseFloat(document.getElementById('splineStepFrontline').value); const length = parseFloat(document.getElementById('protrusionLength').value);
const spacing = parseFloat(document.getElementById('spacing').value); const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value); const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
const style = document.getElementById('styleFrontline').value; const gap = parseFloat(document.getElementById('protrusionGap').value);
const length = parseFloat(document.getElementById('protrusionLength').value); frontlineParamsMap.set(id, {
const startSize = parseFloat(document.getElementById('protrusionStartSize').value); splineStep,
const endSize = parseFloat(document.getElementById('protrusionEndSize').value); spacing,
const gap = parseFloat(document.getElementById('protrusionGap').value); offsetDistance,
style,
protrusion: {
length,
startSize,
endSize,
gap
}
});
frontlineParamsMap.set(id, { const frontlineData = {
splineStep, points: coords,
spacing, splineStep,
offsetDistance, spacing,
style, offsetDistance,
protrusion: { style
length, };
startSize,
endSize, const protrusionData = frontlineParamsMap.get(id).protrusion;
gap
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
let polygonToDraw = frontlineGeoJSON;
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
} }
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
}); });
const frontlineData = { const buttonsContainer = document.getElementById('drawStyleButtons');
points: coords, buttonsContainer.addEventListener('click', (event) => {
splineStep, if (event.target.tagName !== 'BUTTON') return;
spacing,
offsetDistance,
style
};
const protrusionData = frontlineParamsMap.get(id).protrusion; // Odeber aktivní třídu ze všech tlačítek
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); // Nastav aktivní třídu na kliknuté tlačítko
event.target.classList.add('active');
let polygonToDraw = frontlineGeoJSON; // Nastav styl podle data atributu
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) { currentDrawStyle = event.target.getAttribute('data-style');
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
}
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`); // Při změně stylu překreslíme aktuální kreslené prvky
});
console.log('handleDraw');
const buttonsContainer = document.getElementById('drawStyleButtons'); handleDraw({ type: 'draw.update' });
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
handleDraw({ type: 'draw.update' });
});
}); });

2
index.html
View File

@ -70,6 +70,7 @@ MAPBOX - DRAWING
<label>Width Arrow: <input id="widthArrow" type="number" step="1"></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> <label>Length Arrow: <input id="lengthArrow" type="number" step="1"></label><br>
<button id="applyArrowChanges">Apply Changes</button> <button id="applyArrowChanges">Apply Changes</button>
<button id="removeArrow">Remove Arrow</button>
</div> </div>
<div id="frontline-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;"> <div id="frontline-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
@ -90,6 +91,7 @@ MAPBOX - DRAWING
<label>End Size: <input id="protrusionEndSize" 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> <label>Gap: <input id="protrusionGap" type="number" step="100"></label><br>
<button id="applyFrontlineChanges">Apply Changes</button> <button id="applyFrontlineChanges">Apply Changes</button>
<button id="removeFrontline">Remove Arrow</button>
</div> </div>
<div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;"> <div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">