From 4e8169a6795330c477ca5ff0034ea37f51a9428e Mon Sep 17 00:00:00 2001 From: Tomas Richtar Date: Thu, 10 Jul 2025 19:26:58 +0200 Subject: [PATCH] Map controlls - Click --- Drawing.js | 321 +++++++++++++++++++++++++---------------------------- 1 file changed, 149 insertions(+), 172 deletions(-) diff --git a/Drawing.js b/Drawing.js index 5c46643..c978a5c 100644 --- a/Drawing.js +++ b/Drawing.js @@ -6,7 +6,6 @@ import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline. const ARROW = "arrow"; const FRONTLINE = "frontline"; -let mouseMoveListener = null; let currentFeature = null; let currentDrawStyle = ARROW; @@ -22,6 +21,7 @@ const map = new mapboxgl.Map({ zoom: 5 }); +// Drawing visuals const draw = new MapboxDraw({ displayControlsDefault: false, controls: { @@ -29,7 +29,7 @@ const draw = new MapboxDraw({ }, defaultMode: 'draw_line_string', styles: [ - // Aktivní linka - úplně průhledná + // Main drawing line { id: 'gl-draw-line', type: 'line', @@ -39,11 +39,11 @@ const draw = new MapboxDraw({ 'line-join': 'round' }, paint: { - 'line-color': '#00ff00', // zelená + 'line-color': 'rgb(0, 255, 0)', 'line-width': 4 } }, - // Neaktivní linka - taky průhledná + // This makes the nonstop visible line invisible { id: 'gl-draw-line-inactive', type: 'line', @@ -53,107 +53,184 @@ const draw = new MapboxDraw({ 'line-join': 'round' }, paint: { - 'line-color': 'rgba(0,0,0,0)', + 'line-color': 'rgba(0, 0, 0, 0)', 'line-width': 2 } }, - // Body (vertexy) - průhledné, pokud chceš + // Selected point { id: 'gl-draw-polygon-and-line-vertex-active', type: 'circle', filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'true']], paint: { 'circle-radius': 6, - 'circle-color': '#00ff00' // zelená + 'circle-color': 'rgb(255, 255, 0)' } }, + // Main points { id: 'gl-draw-polygon-and-line-vertex-inactive', type: 'circle', filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'false']], paint: { 'circle-radius': 4, - 'circle-color': '#00aa00' // tmavší zelená + 'circle-color': 'rgb(0, 255, 0)' } }, - - // midpointy - musí být viditelné, aby fungovalo kliknutí a přidávání vertexů + // Midpoints { id: 'gl-draw-polygon-midpoint', type: 'circle', filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']], - paint: { 'circle-radius': 4, 'circle-color': '#fbb03b' } // žlutá - }, - { - id: 'gl-draw-polygon-midpoint-active', - type: 'circle', - filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint'], ['==', 'active', 'true']], - paint: { 'circle-radius': 6, 'circle-color': '#fbb03b' } + paint: { + 'circle-radius': 4, + 'circle-color': 'rgb(0, 255, 174)' + } } ] }); - - +// Map controlls 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 + "-")) - .map(l => l.id) - }); - if (arrowFeatures.length > 0) { - const arrowFeature = arrowFeatures[0]; - const featureId = arrowFeature.layer.id.replace(ARROW + "-", ''); - - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === featureId); - - if (currentFeature) { - const params = arrowParamsMap.get(featureId); - if (params) { - showArrowEditor(params); - } - - draw.changeMode('direct_select', { featureId: featureId }); - } - 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(); +map.on('click', (e) => { hideArrowEditor(); + hideFrontlineEditor(); + handleClick(e, ARROW, arrowParamsMap, showArrowEditor); + handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor); }); -map.dragPan.enable(); +function DrawArrow(coordinates, polygonId) +{ + if (!arrowParamsMap.has(polygonId)) { + arrowParamsMap.set(polygonId, { + splineStep: 20, + offsetDistance: 12000, + calculation: ARROW_BODY_STYLE_LINEAR, + range: 1, + minValue: 0.1, + widthArrow: 5, + lengthArrow: 8 + }); + } + + const params = arrowParamsMap.get(polygonId); + + const arrowGeoJSON = getArrowPolygon( + { points: coordinates, splineStep: params.splineStep, offsetDistance: params.offsetDistance }, + { calculation: params.calculation, range: params.range, minValue: params.minValue }, + { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow } + ); + + const arrowLayerId = ARROW + "-" + polygonId; + if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); + if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); + drawArrowOnMap(arrowGeoJSON, ARROW + "-" + polygonId); + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.polygonId === polygonId); + +} + +function DrawFrontline(coordinates, polygonId){ + if (!frontlineParamsMap.has(polygonId)) { + frontlineParamsMap.set(polygonId, { + splineStep: 0.08, + offsetDistance: 10000, + style: LEFT_SIDE, + protrusion: { + length: 15000, + startSize: 5000, + endSize: 500, + gap: 15000 + } + }); + } + + const params = frontlineParamsMap.get(polygonId); + + const frontlineData = { + points: coordinates, + splineStep: params.splineStep, + offsetDistance: params.offsetDistance, + style: params.style + }; + + const protrusionData = params.protrusion; + + const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); + + 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; + + const frontlineLayerId = FRONTLINE + "-" + polygonId; + if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); + if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); + + drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + polygonId); + drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (polygonId+1)); + + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.polygonId === polygonId); + + return; + } + + const frontlineLayerId = FRONTLINE + "-" + polygonId; + if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); + if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); + drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + polygonId); + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.polygonId === polygonId); + +} + +function handleDraw(e) { + const feature = e.features[0]; + const coords = feature.geometry.coordinates; + const id = feature.id; + + + + if (currentDrawStyle === ARROW) { + DrawArrow(coords, id); + } else if (currentDrawStyle === FRONTLINE) { + DrawFrontline(coords, id); + } +} + +function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFunction) { + + console.log("currentFeature" + currentFeature); + const features = map.queryRenderedFeatures(click.point, { + layers: map.getStyle().layers + .filter(l => l.id.startsWith(prefix + "-")) + .map(l => l.id) + }); + + if (features.length === 0) return; + + const feature = features[0]; + const featureId = feature.layer.id.replace(prefix + "-", ''); + + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.id === featureId); + + console.log("currentFeature" + currentFeature); + if (currentFeature) { + const params = paramsMap.get(featureId); + if (params) { + showEditorFunction(params); + } + draw.changeMode('direct_select', { featureId: featureId }); + } +} function MyDelete(polygonType) { @@ -199,107 +276,7 @@ function MyDelete(polygonType) hideFrontlineEditor(); } -function handleDraw(e) { - const feature = e.features[0]; - if (feature.geometry.type !== 'LineString') return; - - const coords = feature.geometry.coordinates; - const id = feature.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 params = arrowParamsMap.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 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 = frontlineParamsMap.get(id); - - const frontlineData = { - points: coords, - splineStep: params.splineStep, - 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; - 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); - - drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id); - drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1)); - - const allFeatures = draw.getAll().features; - currentFeature = allFeatures.find(f => f.id === id); - - return; - } - - 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) { map.addSource(id, {