diff --git a/utils/geometryUtils.js b/utils/geometryUtils.js index 35bfdd668..7e2b0d5c3 100644 --- a/utils/geometryUtils.js +++ b/utils/geometryUtils.js @@ -1,5 +1,22 @@ // utils/geometryUtils.js +/** + * Parses a point string in the format "POINT (longitude latitude)" and returns an object with latitude and longitude as numbers. + * @param {string} position - The position string in the format "POINT (longitude latitude)". + * @returns {{latitude: number, longitude: number}} An object containing the latitude and longitude as numbers. + */ +export const parsePoint = (position) => { + const [longitude, latitude] = position.slice(6, -1).split(" "); + return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; +}; + +/** + * Finds the closest points on a polyline to a new point. + * @param {Array} coordinates - The coordinates of the polyline. + * @param {Object} newPoint - The new point (with latitude and longitude). + * @param {Object} map - The map object. + * @returns {Array} The closest pair of points on the polyline. + */ export const findClosestPoints = (coordinates, newPoint, map) => { if (!map) { console.error("Map is not defined. Cannot find closest points."); diff --git a/utils/mapFeatures.js b/utils/mapFeatures.js index 859f2f8c0..89006586c 100644 --- a/utils/mapFeatures.js +++ b/utils/mapFeatures.js @@ -2,22 +2,15 @@ import { findClosestPoints } from "./geometryUtils"; import handlePoiSelect from "./handlePoiSelect"; import { updateLocationInDatabase } from "../services/apiService"; -import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; // Import removeMarker here +import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; +import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier import circleIcon from "../components/gisPolylines/icons/CircleIcon"; import startIcon from "../components/gisPolylines/icons/StartIcon"; import endIcon from "../components/gisPolylines/icons/EndIcon"; import { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons"; -import { redrawPolyline } from "./mapUtils"; // Import redrawPolyline here -import { openInNewTab } from "../utils/contextMenuUtils"; // Importiere die Funktion, wenn nicht schon vorhanden -import { useState } from "react"; -//---------------------------------- -// geometryUtils.js -export const parsePoint = (position) => { - const [longitude, latitude] = position.slice(6, -1).split(" "); - return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; -}; +import { redrawPolyline } from "./mapUtils"; +import { openInNewTab } from "../utils/contextMenuUtils"; -//---------------------------------- export const setupMarkers = async ( map, locations, @@ -48,8 +41,6 @@ export const setupMarkers = async ( const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi); const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png"; - //console.log("Setting up marker for location:", location); - const marker = L.marker([latitude, longitude], { icon: L.icon({ iconUrl: iconUrl, @@ -74,12 +65,12 @@ export const setupMarkers = async ( }); marker.bindPopup(` -
- ${location.description || "Unbekannt"}
- ${deviceName}
- ${poiTypName}
-
- `); +
+ ${location.description || "Unbekannt"}
+ ${deviceName}
+ ${poiTypName}
+
+ `); marker.on("mouseover", function () { handlePoiSelect( @@ -98,6 +89,8 @@ export const setupMarkers = async ( ); setCurrentPoi(location); this.openPopup(); + + localStorage.setItem("lastElementType", "marker"); }); marker.on("mouseout", function () { @@ -110,7 +103,7 @@ export const setupMarkers = async ( const newLng = e.target.getLatLng().lng; const markerId = e.target.options.id; updateLocationInDatabase(markerId, newLat, newLng).then(() => { - //onLocationUpdate(markerId, newLat, newLng); + // Optional: Update UI or state after dragging }); } else { console.error("Drag operation not allowed"); @@ -126,48 +119,14 @@ export const setupMarkers = async ( } } }; -//---------------------------------- export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => { const markers = []; const polylines = []; - let isMouseOverMenuItem = false; - - const checkMouseOverMenu = () => { - if (!isMouseOverMenuItem) { - //showContextMenuItemByIndex(map, 0); - //showContextMenuItemByIndex(map, 1); - closeContextMenu(); // Kontextmenü schließen, wenn die Maus nicht mehr darüber ist - } - }; - - const handleMouseOverMenuItem = () => { - isMouseOverMenuItem = true; - }; - - const handleMouseOutMenuItem = () => { - isMouseOverMenuItem = false; - setTimeout(checkMouseOverMenu, 500); // kleine Verzögerung, um sicherzustellen, dass es keine schnellen Bewegungen sind - }; - - const closeContextMenu = () => { - const contextMenuElement = document.querySelector(".leaflet-contextmenu"); - if (contextMenuElement) { - contextMenuElement.style.display = "none"; // Kontextmenü ausblenden - } - }; - - const handleOutsideClick = (event) => { - const contextMenuElement = document.querySelector(".leaflet-contextmenu"); - if (contextMenuElement && !contextMenuElement.contains(event.target)) { - closeContextMenu(); // Kontextmenü schließen, wenn der Klick außerhalb stattfindet - } - }; - - document.addEventListener("mousedown", handleOutsideClick); linePositions.forEach((lineData, lineIndex) => { const lineMarkers = []; + lineData.coordinates.forEach((coord, index) => { let icon = circleIcon; if (index === 0) { @@ -200,9 +159,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }); updatedPolyline.on("mouseover", () => { - updatedPolyline.setStyle({ weight: 10 }); + updatedPolyline.setStyle({ weight: 20 }); updatedPolyline.bringToFront(); }); + updatedPolyline.on("mouseout", () => { updatedPolyline.setStyle({ weight: 3 }); }); @@ -269,18 +229,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, const polyline = L.polyline(lineData.coordinates, { color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", + weight: 3, // Standard weight for better recognition contextmenu: true, contextmenuItems: [ - { - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: (e) => { - console.log("lineData idLD:", lineData.idLD); - const idLD = lineData.idLD; // Angenommen, die ID der Station ist in lineData vorhanden - const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${idLD}`; - window.open(link, "_blank"); // Öffne direkt den Link in einem neuen Tab - }, - }, { text: "Stützpunkt hinzufügen", icon: "/img/icons/gisLines/add-support-point.svg", @@ -299,63 +250,21 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }).addTo(map); polyline.on("mouseover", (e) => { - polyline.setStyle({ weight: 20 }); - //hideContextMenuItemByIndex(map, 0); - //hideContextMenuItemByIndex(map, 1); - }); - - polyline.on("mousedown", (e) => { - polyline.setStyle({ weight: 20 }); - }); - - polyline.on("mouseup", (e) => { - polyline.setStyle({ weight: 20 }); + console.log("Mouseover on polyline", lineData); + polyline.setStyle({ weight: 14 }); + const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`; + localStorage.setItem("lastElementType", "polyline"); + localStorage.setItem("polylineLink", link); }); polyline.on("mouseout", (e) => { + console.log("Mouseout from polyline", lineData); polyline.setStyle({ weight: 3 }); - polyline.setStyle({ color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000" }); - setTimeout(checkMouseOverMenu, 500); - }); - - polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { - permanent: false, - direction: "auto", }); polylines.push(polyline); markers.push(...lineMarkers); }); - // Add listeners to the context menu items - const contextMenuElement = document.querySelector(".leaflet-contextmenu"); // Assuming the context menu class is 'leaflet-contextmenu' - - if (contextMenuElement) { - contextMenuElement.addEventListener("mouseover", handleMouseOverMenuItem); - contextMenuElement.addEventListener("mouseout", handleMouseOutMenuItem); - } - return { markers, polylines }; }; - -// Funktion zum Ausblenden eines Kontextmenüelements nach Index -const hideContextMenuItemByIndex = (map, index) => { - const items = map.contextmenu._items; - if (index >= 0 && index < items.length) { - const itemElement = items[index].el; - if (itemElement) { - itemElement.style.display = "none"; // Verstecke das Element - } - } -}; - -// Funktion zum Einblenden eines Kontextmenüelements nach Index -const showContextMenuItemByIndex = (map, index) => { - const items = map.contextmenu._items; - if (index >= 0 && index < items.length) { - const itemElement = items[index].el; - if (itemElement) { - itemElement.style.display = ""; // Zeige das Element wieder an - } - } -}; diff --git a/utils/mapInitialization.js b/utils/mapInitialization.js index 47105a1d7..5ec1d6030 100644 --- a/utils/mapInitialization.js +++ b/utils/mapInitialization.js @@ -1,18 +1,15 @@ // /utils/mapInitialization.js import L from "leaflet"; -//import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; import "leaflet-contextmenu"; 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, openInNewTab } from "../utils/contextMenuUtils.js"; +import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils"; export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { const offlineTileLayer = urls.OFFLINE_TILE_LAYER; - //const offlineTileLayer = process.env.OFFLINE_TILE_LAYER; const onlineTileLayer = urls.ONLINE_TILE_LAYER; - //const onlineTileLayer = process.env.ONLINE_TILE_LAYER; const TALAS = layers.MAP_LAYERS.TALAS; const ECI = layers.MAP_LAYERS.ECI; const ULAF = layers.MAP_LAYERS.ULAF; @@ -40,8 +37,20 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems text: "Station öffnen (Tab)", icon: "/img/screen_new.png", callback: (e) => { - const clickedMarker = e.relatedTarget; - openInNewTab(e, clickedMarker); + const lastElementType = localStorage.getItem("lastElementType"); + + if (lastElementType === "polyline") { + const storedLink = localStorage.getItem("polylineLink"); + if (storedLink) { + console.log("Opening polyline link:", storedLink); + window.open(storedLink, "_blank"); + } + } else if (lastElementType === "marker") { + const clickedItem = e.relatedTarget; + if (clickedItem instanceof L.Marker) { + openInNewTab(e, clickedItem); + } + } }, }, "-",