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

Error fixes

Browse Source
This commit is contained in:
Tomas Richtar 2025-07-10 17:30:52 +02:00
parent 7157c2502a
commit 9fadc3681a
2 changed files with 50 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
Drawing.js
View File

@ -3,9 +3,12 @@ import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_E
import { getFrontline } from "athena-utils/shape/Frontline.js"; import { getFrontline } from "athena-utils/shape/Frontline.js";
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js"; import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
const ARROW = "arrow";
const FRONTLINE = "frontline";
let mouseMoveListener = null; let mouseMoveListener = null;
let currentFeature = null; let currentFeature = null;
let currentDrawStyle = 'arrow'; let currentDrawStyle = ARROW;
const arrowParamsMap = new Map(); const arrowParamsMap = new Map();
const frontlineParamsMap = new Map(); const frontlineParamsMap = new Map();
@ -100,12 +103,12 @@ map.on('click', (e) => {
// Hledání šipek // Hledání šipek
const arrowFeatures = map.queryRenderedFeatures(e.point, { const arrowFeatures = map.queryRenderedFeatures(e.point, {
layers: map.getStyle().layers layers: map.getStyle().layers
.filter(l => l.id.startsWith('arrow-')) .filter(l => l.id.startsWith(ARROW + "-"))
.map(l => l.id) .map(l => l.id)
}); });
if (arrowFeatures.length > 0) { if (arrowFeatures.length > 0) {
const arrowFeature = arrowFeatures[0]; const arrowFeature = arrowFeatures[0];
const featureId = arrowFeature.layer.id.replace('arrow-', ''); const featureId = arrowFeature.layer.id.replace(ARROW + "-", '');
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === featureId); currentFeature = allFeatures.find(f => f.id === featureId);
@ -152,7 +155,7 @@ map.on('click', (e) => {
map.dragPan.enable(); map.dragPan.enable();
function MyDelete() function MyDelete(polygonType)
{ {
if (!currentFeature) return; if (!currentFeature) return;
@ -160,39 +163,40 @@ function MyDelete()
draw.delete(id); draw.delete(id);
//ARROW //ARROW
const arrowLayerId = `arrow-${id}`; if(polygonType == ARROW){
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); const arrowLayerId = polygonType + "-" + id;
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
arrowParamsMap.delete(id);
//Frontline
const frontlineLayerId = `frontline-${id}`;
arrowParamsMap.delete(id);
}
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES //Frontline
if(polygonType == FRONTLINE){
const frontlineLayerId = polygonType + "-" + 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 = polygonType + "-" + (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();
return;
}
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(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);
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(); hideArrowEditor();
hideFrontlineEditor(); hideFrontlineEditor();
document.getElementById('calculated-area').innerHTML = '';
} }
function handleDraw(e) { function handleDraw(e) {
@ -203,7 +207,7 @@ function handleDraw(e) {
const coords = feature.geometry.coordinates; const coords = feature.geometry.coordinates;
const id = feature.id; const id = feature.id;
if (currentDrawStyle === 'arrow') { if (currentDrawStyle === ARROW) {
if (!arrowParamsMap.has(id)) { if (!arrowParamsMap.has(id)) {
arrowParamsMap.set(id, { arrowParamsMap.set(id, {
splineStep: 20, splineStep: 20,
@ -224,14 +228,14 @@ function handleDraw(e) {
{ widthArrow: params.widthArrow, lengthArrow: params.lengthArrow } { widthArrow: params.widthArrow, lengthArrow: params.lengthArrow }
); );
const arrowLayerId = `arrow-${id}`; const arrowLayerId = ARROW + "-" + id;
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`); drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id); currentFeature = allFeatures.find(f => f.id === id);
} else if (currentDrawStyle === 'frontline') { } else if (currentDrawStyle === FRONTLINE) {
if (!frontlineParamsMap.has(id)) { if (!frontlineParamsMap.has(id)) {
frontlineParamsMap.set(id, { frontlineParamsMap.set(id, {
splineStep: 0.08, splineStep: 0.08,
@ -274,12 +278,12 @@ function handleDraw(e) {
console.log("polygonToDrawLeft", polygonToDrawLeft); console.log("polygonToDrawLeft", polygonToDrawLeft);
console.log("polygonToDrawRight", polygonToDrawRight); console.log("polygonToDrawRight", polygonToDrawRight);
const frontlineLayerId = `frontline-${id}`; const frontlineLayerId = FRONTLINE + "-" + id;
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`); drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`); drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id); currentFeature = allFeatures.find(f => f.id === id);
@ -287,10 +291,10 @@ function handleDraw(e) {
return; return;
} }
const frontlineLayerId = `frontline-${id}`; const frontlineLayerId = FRONTLINE + "-" + id;
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`); drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id); currentFeature = allFeatures.find(f => f.id === id);
@ -335,30 +339,6 @@ function drawFrontlineOnMap(frontlineGeoJSON, id) {
}); });
} }
function clearAllArrowLayers() {
const allLayerIds = map.getStyle().layers.map(l => l.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;
layers.forEach(layer => {
if (layer.id.startsWith('frontline-')) {
if (map.getLayer(layer.id)) map.removeLayer(layer.id);
if (map.getSource(layer.id)) map.removeSource(layer.id);
}
});
}
function showArrowEditor(params) { function showArrowEditor(params) {
const popup = document.getElementById('arrow-editor'); const popup = document.getElementById('arrow-editor');
popup.style.display = 'block'; popup.style.display = 'block';
@ -409,12 +389,12 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById('removeArrow').addEventListener('click', () => { document.getElementById('removeArrow').addEventListener('click', () => {
MyDelete(); MyDelete(ARROW);
}); });
document.getElementById('removeFrontline').addEventListener('click', () => { document.getElementById('removeFrontline').addEventListener('click', () => {
MyDelete(); MyDelete(FRONTLINE);
}); });
document.getElementById('applyArrowChanges').addEventListener('click', () => { document.getElementById('applyArrowChanges').addEventListener('click', () => {
@ -455,11 +435,11 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
//ARROW //ARROW
const arrowLayerId = `arrow-${id}`; const arrowLayerId = ARROW + "-" + id;
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
drawArrowOnMap(arrowGeoJSON, `arrow-${id}`); drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id); currentFeature = allFeatures.find(f => f.id === id);
@ -520,14 +500,14 @@ document.addEventListener('DOMContentLoaded', () => {
console.log("polygonToDrawLeft", polygonToDrawLeft); console.log("polygonToDrawLeft", polygonToDrawLeft);
console.log("polygonToDrawRight", polygonToDrawRight); console.log("polygonToDrawRight", polygonToDrawRight);
const frontlineLayerId = `frontline-${id}`; const frontlineLayerId = FRONTLINE + "-" + id;
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
console.log(frontlineLayerId); console.log(frontlineLayerId);
console.log(`frontline-${id+1}`); console.log(FRONTLINE + "-" + (id+1));
drawFrontlineOnMap(polygonToDrawLeft, `frontline-${id}`); drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
drawFrontlineOnMap(polygonToDrawRight, `frontline-${id+1}`); drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id); currentFeature = allFeatures.find(f => f.id === id);
@ -537,13 +517,13 @@ document.addEventListener('DOMContentLoaded', () => {
//if (last was both destroy id+1) TODO //if (last was both destroy id+1) TODO
console.log("Test2"); console.log("Test2");
const frontlineLayerId = `frontline-${id}`; const frontlineLayerId = FRONTLINE + "-" + id;
if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1); if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);
if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1); if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
drawFrontlineOnMap(polygonToDraw, `frontline-${id}`); drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id); currentFeature = allFeatures.find(f => f.id === id);
@ -568,5 +548,4 @@ document.addEventListener('DOMContentLoaded', () => {
btn.style.color = isSelected ? '#fff' : '#000'; btn.style.color = isSelected ? '#fff' : '#000';
}); });
} }
}); });

7
index.html
View File

@ -98,13 +98,6 @@ MAPBOX - DRAWING
<button data-style="arrow">Arrow</button> <button data-style="arrow">Arrow</button>
<!-- další styly můžeš přidat sem --> <!-- další styly můžeš přidat sem -->
</div> </div>
<!-- Box pro výpis -->
<div class="calculation-box">
<p>Click the map to draw a polygon.</p>
<div id="calculated-area"></div>
</div>
<!-- Hlavní JS --> <!-- Hlavní JS -->
<script type="module" src="Drawing.js"></script> <script type="module" src="Drawing.js"></script>
</body> </body>