From 049bbc57819951e99352dbf72a88c097f7c1c558 Mon Sep 17 00:00:00 2001 From: Tomas Richtar Date: Mon, 7 Jul 2025 17:30:15 +0200 Subject: [PATCH] Arrow delete --- Drawing.js | 262 ++++++++++++++++++++++++++--------------------------- index.html | 2 + 2 files changed, 130 insertions(+), 134 deletions(-) diff --git a/Drawing.js b/Drawing.js index 7d129b0..0cc7c57 100644 --- a/Drawing.js +++ b/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' }); + }); }); \ No newline at end of file diff --git a/index.html b/index.html index dfe9928..89acccf 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,7 @@ MAPBOX - DRAWING

+