diff --git a/utils/initializeMap.js b/utils/initializeMap.js index 36a78342f..1d2054785 100644 --- a/utils/initializeMap.js +++ b/utils/initializeMap.js @@ -5,9 +5,7 @@ import "leaflet/dist/leaflet.css"; import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; import * as urls from "../config/urls.js"; import * as layers from "../config/layers.js"; -import { addContextMenuToMarker } from "./addContextMenuToMarker.js"; -import { openInNewTab } from "./openInNewTab.js"; -import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js"; +import { openInNewTab } from "./openInNewTab.js"; // Korrigiert export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { if (mapRef.current) { @@ -24,10 +22,13 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems text: "Station öffnen (Tab)", icon: "/img/screen_new.png", callback: (e) => { - const clickedMarker = e.relatedTarget; - if (clickedMarker) { - // Verwende die Funktion zum Öffnen in einem neuen Tab - openInNewTab(e, clickedMarker); + const clickedElement = e.relatedTarget; + + // Überprüfe, ob der Kontextklick auf eine Polyline oder einen Marker erfolgt ist + if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) { + openInNewTab(e, clickedElement); // Verwende openInNewTab für beide Fälle + } else { + console.error("Kein gültiges Ziel für den Kontextmenüeintrag"); } }, }, diff --git a/utils/openInNewTab.js b/utils/openInNewTab.js index 47e7add0c..86f43f50a 100644 --- a/utils/openInNewTab.js +++ b/utils/openInNewTab.js @@ -1,4 +1,4 @@ -// /utils/openInNewTab.js +// utils/openInNewTab.js export function openInNewTab(e, target) { const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL; @@ -8,9 +8,8 @@ export function openInNewTab(e, target) { if (target instanceof L.Marker && target.options.link) { // Verwende den Link, der im Marker gespeichert ist link = `${BASE_URL}${target.options.link}`; - //link = target.options.link; } else if (target instanceof L.Polyline) { - // Polyline-Logik bleibt unverändert + // Polyline-Logik const idLD = target.options.idLD; if (idLD) { link = `${BASE_URL}cpl.aspx?id=${idLD}`; diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index ff23a2998..57d4fefd2 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -1,14 +1,9 @@ // utils/setupPolylines.js import { findClosestPoints } from "./geometryUtils"; -import handlePoiSelect from "./handlePoiSelect"; -import { updateLocationInDatabase } from "../services/apiService"; -import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils"; -import { parsePoint } from "./geometryUtils"; +import { redrawPolyline } from "./mapUtils"; import circleIcon from "../components/gisPolylines/icons/CircleIcon"; import startIcon from "../components/gisPolylines/icons/StartIcon"; import endIcon from "../components/gisPolylines/icons/EndIcon"; -import { redrawPolyline } from "./mapUtils"; -import { openInNewTab } from "./openInNewTab"; // Funktion zum Deaktivieren der Polyline-Ereignisse export function disablePolylineEvents(polylines) { @@ -22,7 +17,6 @@ export function disablePolylineEvents(polylines) { export function enablePolylineEvents(polylines, lineColors) { polylines.forEach((polyline) => { polyline.on("mouseover", (e) => { - //console.log("Mouseover on polyline", polyline.options); polyline.setStyle({ weight: 14 }); const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`; localStorage.setItem("lastElementType", "polyline"); @@ -30,19 +24,20 @@ export function enablePolylineEvents(polylines, lineColors) { }); polyline.on("mouseout", (e) => { - //console.log("Mouseout from polyline", polyline.options); polyline.setStyle({ weight: 3 }); }); }); } -export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => { +export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker) => { const markers = []; const polylines = []; + // Loop über die Linienpositionen linePositions.forEach((lineData, lineIndex) => { const lineMarkers = []; + // Loop über die Koordinaten der Linie und Erstellung der Marker lineData.coordinates.forEach((coord, index) => { let icon = circleIcon; if (index === 0) { @@ -54,11 +49,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, const marker = L.marker(coord, { icon: icon, draggable: true, - contextmenu: true, - contextmenuInheritItems: false, - contextmenuItems: [], + contextmenu: true, // Ermögliche das Kontextmenü für Marker }).addTo(map); + // Logik, um Marker zu verschieben und Polyline neu zu zeichnen marker.on("dragend", () => { const newCoords = marker.getLatLng(); setNewCoords(newCoords); @@ -75,7 +69,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }); updatedPolyline.on("mouseover", () => { - updatedPolyline.setStyle({ weight: 20 }); + updatedPolyline.setStyle({ weight: 14 }); updatedPolyline.bringToFront(); }); @@ -83,10 +77,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, updatedPolyline.setStyle({ weight: 3 }); }); + // Alte Polyline entfernen und die neue setzen polylines[lineIndex].remove(); polylines[lineIndex] = updatedPolyline; lineData.coordinates = newCoordinates; + // Koordinaten aktualisieren const requestData = { idModul: lineData.idModul, idLD: lineData.idLD, @@ -116,75 +112,37 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }); }); - marker.on("mouseover", function () { - this.bindContextMenu({ - contextmenuItems: [ - { - text: "Stützpunkt entfernen", - icon: "/img/icons/gisLines/remove-support-point.svg", - callback: () => { - const newCoords = marker.getLatLng(); - const newCoordinates = [...lineData.coordinates]; - newCoordinates[index] = [newCoords.lat, newCoords.lng]; - - removePOI(marker, lineData, currentZoom, currentCenter); - polylines[lineIndex].remove(); - lineData.coordinates = newCoordinates; - }, - }, - ], - }); - }); - - marker.on("mouseout", function () { - this.unbindContextMenu(); - }); - + // Marker in die Liste einfügen lineMarkers.push(marker); }); + // Polyline hinzufügen const polyline = L.polyline(lineData.coordinates, { color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", weight: 3, - contextmenu: true, - contextmenuItems: [ - { - text: "Stützpunkt hinzufügen", - icon: "/img/icons/gisLines/add-support-point.svg", - callback: (e) => { - if (tempMarker) { - tempMarker.remove(); - } - const newPoint = e.latlng; - const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map); - insertNewPOI(closestPoints, newPoint, lineData, map); - redrawPolyline(lineData, lineColors, tooltipContents, map); - window.location.reload(); - }, - }, - ], + contextmenu: true, // Ermögliche das Kontextmenü für Polylines }).addTo(map); - // Hier wird der Tooltip hinzugefügt + // Tooltip für die Polyline hinzufügen polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { permanent: false, direction: "auto", }); + // Hover-Ereignisse für Polylines polyline.on("mouseover", (e) => { - //console.log("Mouseover on polyline", lineData); polyline.setStyle({ weight: 14 }); - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`; console.log("Link der Linie:", link); localStorage.setItem("lastElementType", "polyline"); localStorage.setItem("polylineLink", link); }); polyline.on("mouseout", (e) => { - // console.log("Mouseout from polyline", lineData); polyline.setStyle({ weight: 3 }); }); + // Polyline und Marker in ihre jeweiligen Listen einfügen polylines.push(polyline); markers.push(...lineMarkers); });