Arrow delete
This commit is contained in:
parent
ef4dd49d74
commit
049bbc5781
262
Drawing.js
262
Drawing.js
@ -22,8 +22,7 @@ const map = new mapboxgl.Map({
|
||||
const draw = new MapboxDraw({
|
||||
displayControlsDefault: false,
|
||||
controls: {
|
||||
line_string: true,
|
||||
trash: true
|
||||
line_string: true
|
||||
},
|
||||
defaultMode: 'draw_line_string',
|
||||
styles: [
|
||||
@ -94,16 +93,8 @@ const draw = new MapboxDraw({
|
||||
|
||||
|
||||
map.addControl(draw, 'top-left');
|
||||
|
||||
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) => {
|
||||
const arrowFeatures = map.queryRenderedFeatures(e.point, {
|
||||
layers: map.getStyle().layers
|
||||
@ -121,7 +112,6 @@ map.on('click', (e) => {
|
||||
const params = arrowParamsMap.get(featureId);
|
||||
if (params) {
|
||||
showArrowEditor(params);
|
||||
hideFrontlineEditor();
|
||||
}
|
||||
|
||||
draw.changeMode('direct_select', { featureId: featureId });
|
||||
@ -129,37 +119,35 @@ map.on('click', (e) => {
|
||||
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();
|
||||
hideFrontlineEditor();
|
||||
});
|
||||
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) {
|
||||
const data = draw.getAll();
|
||||
@ -198,6 +186,7 @@ function handleDraw(e) {
|
||||
{ widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
|
||||
);
|
||||
|
||||
console.log('Draw');
|
||||
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`);
|
||||
|
||||
} else if (currentDrawStyle === 'frontline') {
|
||||
@ -289,17 +278,17 @@ function drawFrontlineOnMap(frontlineGeoJSON, id) {
|
||||
}
|
||||
|
||||
function clearAllArrowLayers() {
|
||||
const layers = map.getStyle().layers;
|
||||
if (!layers) return;
|
||||
const allLayerIds = map.getStyle().layers.map(l => l.id);
|
||||
|
||||
layers.forEach(layer => {
|
||||
if (layer.id.startsWith('arrow-')) {
|
||||
if (map.getLayer(layer.id)) map.removeLayer(layer.id);
|
||||
if (map.getSource(layer.id)) map.removeSource(layer.id);
|
||||
allLayerIds.forEach(id => {
|
||||
if (id.startsWith('arrow-')) {
|
||||
if (map.getLayer(id)) map.removeLayer(id);
|
||||
if (map.getSource(id)) map.removeSource(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function clearAllFrontlineLayers() {
|
||||
const layers = map.getStyle().layers;
|
||||
if (!layers) return;
|
||||
@ -360,111 +349,116 @@ function hideFrontlineEditor() {
|
||||
}
|
||||
|
||||
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);
|
||||
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);
|
||||
|
||||
arrowParamsMap.set(id, {
|
||||
splineStep,
|
||||
offsetDistance,
|
||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||
range,
|
||||
minValue,
|
||||
widthArrow,
|
||||
lengthArrow
|
||||
document.getElementById('removeArrow').addEventListener('click', () => {
|
||||
|
||||
MyDelete();
|
||||
});
|
||||
|
||||
const arrowGeoJSON = getArrowPolygon({
|
||||
points: coords,
|
||||
splineStep,
|
||||
offsetDistance
|
||||
}, {
|
||||
calculation: ARROW_BODY_STYLE_LINEAR,
|
||||
range,
|
||||
minValue
|
||||
}, {
|
||||
widthArrow,
|
||||
lengthArrow
|
||||
document.getElementById('applyArrowChanges').addEventListener('click', () => {
|
||||
|
||||
if (!currentFeature) return;
|
||||
console.log("Test");
|
||||
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);
|
||||
|
||||
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', () => {
|
||||
if (!currentFeature) return;
|
||||
const coords = currentFeature.geometry.coordinates;
|
||||
const id = currentFeature.id;
|
||||
|
||||
const coords = currentFeature.geometry.coordinates;
|
||||
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 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 length = parseFloat(document.getElementById('protrusionLength').value);
|
||||
const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
|
||||
const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
|
||||
const gap = parseFloat(document.getElementById('protrusionGap').value);
|
||||
|
||||
const length = parseFloat(document.getElementById('protrusionLength').value);
|
||||
const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
|
||||
const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
|
||||
const gap = parseFloat(document.getElementById('protrusionGap').value);
|
||||
frontlineParamsMap.set(id, {
|
||||
splineStep,
|
||||
spacing,
|
||||
offsetDistance,
|
||||
style,
|
||||
protrusion: {
|
||||
length,
|
||||
startSize,
|
||||
endSize,
|
||||
gap
|
||||
}
|
||||
});
|
||||
|
||||
frontlineParamsMap.set(id, {
|
||||
splineStep,
|
||||
spacing,
|
||||
offsetDistance,
|
||||
style,
|
||||
protrusion: {
|
||||
length,
|
||||
startSize,
|
||||
endSize,
|
||||
gap
|
||||
const frontlineData = {
|
||||
points: coords,
|
||||
splineStep,
|
||||
spacing,
|
||||
offsetDistance,
|
||||
style
|
||||
};
|
||||
|
||||
const protrusionData = frontlineParamsMap.get(id).protrusion;
|
||||
|
||||
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
|
||||
|
||||
let polygonToDraw = frontlineGeoJSON;
|
||||
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
|
||||
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
|
||||
}
|
||||
|
||||
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`);
|
||||
});
|
||||
|
||||
const frontlineData = {
|
||||
points: coords,
|
||||
splineStep,
|
||||
spacing,
|
||||
offsetDistance,
|
||||
style
|
||||
};
|
||||
const buttonsContainer = document.getElementById('drawStyleButtons');
|
||||
buttonsContainer.addEventListener('click', (event) => {
|
||||
if (event.target.tagName !== 'BUTTON') return;
|
||||
|
||||
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;
|
||||
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
|
||||
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
|
||||
}
|
||||
// Nastav styl podle data atributu
|
||||
currentDrawStyle = event.target.getAttribute('data-style');
|
||||
|
||||
drawFrontlineOnMap(polygonToDraw, `frontline-${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
|
||||
handleDraw({ type: 'draw.update' });
|
||||
});
|
||||
// Při změně stylu překreslíme aktuální kreslené prvky
|
||||
|
||||
console.log('handleDraw');
|
||||
handleDraw({ type: 'draw.update' });
|
||||
});
|
||||
});
|
||||
@ -70,6 +70,7 @@ MAPBOX - DRAWING
|
||||
<label>Width Arrow: <input id="widthArrow" 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="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;">
|
||||
@ -90,6 +91,7 @@ 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>
|
||||
</div>
|
||||
|
||||
<div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user