From 478ff1d7d585a6d915cad879db9a463bd149d879 Mon Sep 17 00:00:00 2001 From: Tomas Richtar Date: Fri, 11 Jul 2025 10:34:10 +0200 Subject: [PATCH] All function fixed --- Drawing.js | 456 +++++++++++++++++++++++++---------------------------- 1 file changed, 218 insertions(+), 238 deletions(-) diff --git a/Drawing.js b/Drawing.js index 4de9d76..38c77de 100644 --- a/Drawing.js +++ b/Drawing.js @@ -185,7 +185,7 @@ function DrawArrow(coordinates, polygonId) { } ); - updatePolygonOnMap(ARROW, polygonId, drawArrowOnMap, arrowGeoJSON); + updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON); } function DrawFrontline(coordinates, polygonId) { @@ -213,14 +213,14 @@ function DrawFrontline(coordinates, polygonId) { // Both sides if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){ - updatePolygonOnMap(FRONTLINE, polygonId, drawFrontlineOnMap, polygonToDraw); + updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw); let additionalPolygonToDraw = frontlineGeoJSON.rightPoly; - drawFrontlineOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1)); + drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1)); return; } - updatePolygonOnMap(FRONTLINE, polygonId, drawFrontlineOnMap, polygonToDraw); + updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw); } function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) { @@ -235,297 +235,277 @@ function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) { currentFeature = allFeatures.find(f => f.polygonId === polygonId); } +function drawOnMap(frontlineGeoJSON, id) { + if (map.getLayer(id)) map.removeLayer(id); + if (map.getSource(id)) map.removeSource(id); -function drawArrowOnMap(geojson, id) { -    map.addSource(id, { -        type: 'geojson', -        data: geojson -    }); + map.addSource(id, { + type: 'geojson', + data: frontlineGeoJSON + }); -    map.addLayer({ -        id: id, -        type: 'fill', -        source: id, -        paint: { -            'fill-color': '#ff0000', -            'fill-opacity': 0.5 -        } -    }); + map.addLayer({ + id: id, + type: 'fill', + source: id, + paint: { + 'fill-color': '#ff6600', + 'fill-opacity': 0.6, + 'fill-outline-color': '#cc3300' + } + }); } -function drawFrontlineOnMap(frontlineGeoJSON, id) { -    if (map.getLayer(id)) map.removeLayer(id); -    if (map.getSource(id)) map.removeSource(id); - -    map.addSource(id, { -        type: 'geojson', -        data: frontlineGeoJSON -    }); - -    map.addLayer({ -        id: id, -        type: 'fill', -        source: id, -        paint: { -            'fill-color': '#ff6600', -            'fill-opacity': 0.6, -            'fill-outline-color': '#cc3300' -        } -    }); -} - -function MyDelete(polygonType) +function handleDelete(polygonType) { -    if (!currentFeature) return; -    -    const id = currentFeature.id; + if (!currentFeature) return; +     + const id = currentFeature.id; -    draw.delete(id); -    //ARROW -    if(polygonType == ARROW){ -        const arrowLayerId = polygonType + "-" + id; -        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); -        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); + draw.delete(id); -        arrowParamsMap.delete(id); -    } -    -    //Frontline -    if(polygonType == FRONTLINE){ -        const frontlineLayerId = polygonType + "-" + id; + //ARROW + if(polygonType == ARROW){ + const arrowLayerId = polygonType + "-" + id; + DeleteFromMap(arrowLayerId, id); + } -        if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES + //Frontline + if(polygonType == FRONTLINE){ + const frontlineLayerId = polygonType + "-" + id; -            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 (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES + const frontlineLayerIdB = polygonType + "-" + (id+1); -        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); -        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); -        frontlineParamsMap.delete(id); -    } -    -    hideArrowEditor(); -    hideFrontlineEditor(); + DeleteFromMap(frontlineLayerId, id); + DeleteFromMap(frontlineLayerIdB, id+1); + hideArrowEditor(); + hideFrontlineEditor(); + return; + } + + DeleteFromMap(frontlineLayerId, id); + } +     + hideArrowEditor(); + hideFrontlineEditor(); } +function DeleteFromMap(layerId, FeatureId){ + if (map.getLayer(layerId)) map.removeLayer(layerId); + if (map.getSource(layerId)) map.removeSource(layerId); + + arrowParamsMap.delete(FeatureId); +} function showArrowEditor(params) { -    const popup = document.getElementById('arrow-editor'); -    popup.style.display = 'block'; + const popup = document.getElementById('arrow-editor'); + popup.style.display = 'block'; -    popup.style.left = '10px'; -    popup.style.top = '70px'; + popup.style.left = '10px'; + popup.style.top = '70px'; -    document.getElementById('splineStep').value = params.splineStep; -    document.getElementById('offsetDistance').value = params.offsetDistance; -    document.getElementById('range').value = params.range; -    document.getElementById('minValue').value = params.minValue; -    document.getElementById('widthArrow').value = params.widthArrow; -    document.getElementById('lengthArrow').value = params.lengthArrow; + document.getElementById('splineStep').value = params.splineStep; + document.getElementById('offsetDistance').value = params.offsetDistance; + document.getElementById('range').value = params.range; + document.getElementById('minValue').value = params.minValue; + document.getElementById('widthArrow').value = params.widthArrow; + document.getElementById('lengthArrow').value = params.lengthArrow; } function hideArrowEditor() { -    const popup = document.getElementById('arrow-editor'); -    popup.style.display = 'none'; -    currentFeature = null; + const popup = document.getElementById('arrow-editor'); + popup.style.display = 'none'; + currentFeature = null; } function showFrontlineEditor(params) { -    const popup = document.getElementById('frontline-editor'); -    popup.style.display = 'block'; + const popup = document.getElementById('frontline-editor'); + popup.style.display = 'block'; -    popup.style.left = '10px'; -    popup.style.top = '70px'; + popup.style.left = '10px'; + popup.style.top = '70px'; -    document.getElementById('splineStepFrontline').value = params.splineStep; -    document.getElementById('offsetDistanceFrontline').value = params.offsetDistance; -    document.getElementById('styleFrontline').value = params.style; + document.getElementById('splineStepFrontline').value = params.splineStep; + document.getElementById('offsetDistanceFrontline').value = params.offsetDistance; + document.getElementById('styleFrontline').value = params.style; -    document.getElementById('protrusionLength').value = params.protrusion.length; -    document.getElementById('protrusionStartSize').value = params.protrusion.startSize; -    document.getElementById('protrusionEndSize').value = params.protrusion.endSize; -    document.getElementById('protrusionGap').value = params.protrusion.gap; + document.getElementById('protrusionLength').value = params.protrusion.length; + document.getElementById('protrusionStartSize').value = params.protrusion.startSize; + document.getElementById('protrusionEndSize').value = params.protrusion.endSize; + document.getElementById('protrusionGap').value = params.protrusion.gap; } function hideFrontlineEditor() { -    const popup = document.getElementById('frontline-editor'); -    popup.style.display = 'none'; -    currentFeature = null; + const popup = document.getElementById('frontline-editor'); + popup.style.display = 'none'; + currentFeature = null; +} + +function updateButtonStyles() { + const buttonsContainer = document.getElementById('drawStyleButtons'); + 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'; + }); } document.addEventListener('DOMContentLoaded', () => { -    document.getElementById('removeArrow').addEventListener('click', () => { -        -        MyDelete(ARROW); -    }); + document.getElementById('removeArrow').addEventListener('click', () => { +     +     handleDelete(ARROW); + }); -    document.getElementById('removeFrontline').addEventListener('click', () => { -        -        MyDelete(FRONTLINE); -    }); + document.getElementById('removeFrontline').addEventListener('click', () => { +     +     handleDelete(FRONTLINE); + }); -    document.getElementById('applyArrowChanges').addEventListener('click', () => { -        -        if (!currentFeature) return; -        console.log("Test"); -        const coords = currentFeature.geometry.coordinates; -        const id = currentFeature.id; + 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); +     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 -        }); +     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 -        }); +     const arrowGeoJSON = getArrowPolygon({ +         points: coords, +         splineStep, +         offsetDistance +     }, { +         calculation: ARROW_BODY_STYLE_LINEAR, +         range, +         minValue +     }, { +         widthArrow, +         lengthArrow +     }); -        //ARROW -        const arrowLayerId = ARROW + "-" + id; -        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); -        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); +     //ARROW +     const arrowLayerId = ARROW + "-" + id; +     if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId); +     if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId); -        drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id); +     drawOnMap(arrowGeoJSON, ARROW + "-" + id); -        const allFeatures = draw.getAll().features; -        currentFeature = allFeatures.find(f => f.id === id); -    }); +     const allFeatures = draw.getAll().features; +     currentFeature = allFeatures.find(f => f.id === 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 offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value); -        const style = parseInt(document.getElementById('styleFrontline').value); + const splineStep = parseFloat(document.getElementById('splineStepFrontline').value); + const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value); + const style = parseInt(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, -            offsetDistance, -            style, -            protrusion: { -                length, -                startSize, -                endSize, -                gap -            } -        }); + frontlineParamsMap.set(id, { + splineStep, + offsetDistance, + style, + protrusion: { + length, + startSize, + endSize, + gap + } + }); -        const frontlineData = { -            points: coords, -            splineStep, -            offsetDistance, -            style -        }; + const frontlineData = { + points: coords, + splineStep, + offsetDistance, + style + }; -        const protrusionData = frontlineParamsMap.get(id).protrusion; + const protrusionData = frontlineParamsMap.get(id).protrusion; -        console.log("Update"); -        console.log(frontlineData); -        console.log(protrusionData); + console.log("Update"); + console.log(frontlineData); + console.log(protrusionData); -        const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); + const frontlineGeoJSON = getFrontline(frontlineData, protrusionData); -        console.log("frontlineGeoJSON", frontlineGeoJSON); -        let polygonToDraw = frontlineGeoJSON; + 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; + 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("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); + console.log(frontlineLayerId); + console.log(FRONTLINE + "-" + (id+1)); + drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id); + drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1)); + + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.id === id); -            return; -        } + 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); + //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); -    }); + drawOnMap(polygonToDraw, FRONTLINE + "-" + id); -    const buttonsContainer = document.getElementById('drawStyleButtons'); -    buttonsContainer.addEventListener('click', (event) => { -        if (event.target.tagName !== 'BUTTON') return; + const allFeatures = draw.getAll().features; + currentFeature = allFeatures.find(f => f.id === id); + }); -        Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active')); - -        event.target.classList.add('active'); - -        currentDrawStyle = event.target.getAttribute('data-style'); -        updateButtonStyles(); -    }); -    updateButtonStyles(); + const buttonsContainer = document.getElementById('drawStyleButtons'); + buttonsContainer.addEventListener('click', (event) => { + if (event.target.tagName !== 'BUTTON') return; + + Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active')); + + event.target.classList.add('active'); + + currentDrawStyle = event.target.getAttribute('data-style'); + updateButtonStyles(); + }); + updateButtonStyles(); }); -function updateButtonStyles() { -    const buttonsContainer = document.getElementById('drawStyleButtons'); -    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