From 7157c2502ac2411c6953c2832f7912f2a7d615f2 Mon Sep 17 00:00:00 2001 From: Tomas Richtar Date: Thu, 10 Jul 2025 06:15:00 +0200 Subject: [PATCH] Frontline --- Drawing.js | 278 +++++++++++++++++++++++++++++++++++++---------------- index.html | 11 +-- 2 files changed, 198 insertions(+), 91 deletions(-) diff --git a/Drawing.js b/Drawing.js index 0cc7c57..7b8d491 100644 --- a/Drawing.js +++ b/Drawing.js @@ -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,105 +168,136 @@ 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); - + hideArrowEditor(); hideFrontlineEditor(); document.getElementById('calculated-area').innerHTML = ''; } 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 = ''; + const coords = feature.geometry.coordinates; + const id = feature.id; - data.features.forEach((line, index) => { - if (line.geometry.type !== 'LineString') return; + if (currentDrawStyle === 'arrow') { + if (!arrowParamsMap.has(id)) { + arrowParamsMap.set(id, { + splineStep: 20, + offsetDistance: 12000, + calculation: ARROW_BODY_STYLE_LINEAR, + range: 1, + minValue: 0.1, + widthArrow: 5, + lengthArrow: 8 + }); + } - const coords = line.geometry.coordinates; - const id = line.id || `line-${index}`; + const params = arrowParamsMap.get(id); - if (currentDrawStyle === 'arrow') { - if (!arrowParamsMap.has(id)) { - arrowParamsMap.set(id, { - splineStep: 20, - offsetDistance: 12000, - calculation: ARROW_BODY_STYLE_LINEAR, - range: 1, - minValue: 0.1, - widthArrow: 5, - lengthArrow: 8 - }); + const arrowGeoJSON = getArrowPolygon( + { points: coords, splineStep: params.splineStep, offsetDistance: params.offsetDistance }, + { calculation: params.calculation, range: params.range, minValue: params.minValue }, + { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow } + ); + + 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: 0.08, + offsetDistance: 10000, + style: LEFT_SIDE, + protrusion: { + length: 15000, + startSize: 5000, + endSize: 500, + gap: 15000 } + }); + } - const params = arrowParamsMap.get(id); + const params = frontlineParamsMap.get(id); - const arrowGeoJSON = getArrowPolygon( - { points: coords, splineStep: params.splineStep, offsetDistance: params.offsetDistance }, - { calculation: params.calculation, range: params.range, minValue: params.minValue }, - { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow } - ); + const frontlineData = { + points: coords, + splineStep: params.splineStep, + offsetDistance: params.offsetDistance, + style: params.style + }; - console.log('Draw'); - drawArrowOnMap(arrowGeoJSON, `arrow-${id}`); + const protrusionData = params.protrusion; - } else if (currentDrawStyle === 'frontline') { - if (!frontlineParamsMap.has(id)) { - frontlineParamsMap.set(id, { - splineStep: 20, - spacing: 500, - offsetDistance: 12000, - style: LEFT_SIDE, - protrusion: { - length: 2000, - startSize: 5000, - endSize: 5000, - gap: 10000 - } - }); - } + console.log("Create"); + console.log(frontlineData); + console.log(protrusionData); + const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); - const params = frontlineParamsMap.get(id); + let polygonToDraw = frontlineGeoJSON; + if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) { + polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly; + } - const frontlineData = { - points: coords, - splineStep: params.splineStep, - spacing: params.spacing, - offsetDistance: params.offsetDistance, - style: params.style - }; + if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){ + let polygonToDrawLeft = frontlineGeoJSON.leftPoly; + let polygonToDrawRight = frontlineGeoJSON.rightPoly; - const protrusionData = params.protrusion; + 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); - const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); + drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`); + drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`); + + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.id === id); - let polygonToDraw = frontlineGeoJSON; - if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) { - polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly; - } + return; + } - drawFrontlineOnMap(polygonToDraw, `frontline-${id}`); - } - }); - } 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'; + }); + } + }); \ No newline at end of file diff --git a/index.html b/index.html index 89acccf..d5192f8 100644 --- a/index.html +++ b/index.html @@ -76,13 +76,12 @@ MAPBOX - DRAWING
- +