diff --git a/.env.local b/.env.local index 018676da7..53122566b 100644 --- a/.env.local +++ b/.env.local @@ -17,29 +17,30 @@ ######################### -#DB_HOST=10.10.0.70 -#DB_USER=root -#DB_PASSWORD="root#$" -#DB_NAME=talas_v5 -#DB_PORT=3306 - - -######################### - -#NEXT_PUBLIC_BASE_URL="http://10.10.0.70/talas5/devices/" -#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" -#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" -######################### - -DB_HOST=192.168.10.167 +DB_HOST=10.10.0.70 DB_USER=root DB_PASSWORD="root#$" DB_NAME=talas_v5 DB_PORT=3306 + + +######################### + +NEXT_PUBLIC_BASE_URL="http://10.10.0.70/talas5/devices/" +NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" +NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" +#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" +NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" +######################### + +#DB_HOST=192.168.10.167 +#DB_USER=root +#DB_PASSWORD="root#$" +#DB_NAME=talas_v5 +#DB_PORT=3306 ######################### #URLs für den Client (clientseitig) -NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/" -NEXT_PUBLIC_SERVER_URL="http://192.168.10.167" -NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167" -NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" +#NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/" +#NEXT_PUBLIC_SERVER_URL="http://192.168.10.167" +#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167" +#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" diff --git a/utils/mapFeatures.js b/utils/mapFeatures.js index 28cd225ce..dfc10e5d2 100644 --- a/utils/mapFeatures.js +++ b/utils/mapFeatures.js @@ -9,6 +9,7 @@ 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) => { @@ -130,6 +131,40 @@ 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 = []; @@ -264,12 +299,23 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }).addTo(map); polyline.on("mouseover", (e) => { - polyline.setStyle({ weight: 10 }); + polyline.setStyle({ weight: 15 }); + hideContextMenuItemByIndex(map, 0); + hideContextMenuItemByIndex(map, 1); + }); + + polyline.on("mousedown", (e) => { + polyline.setStyle({ weight: 15 }); + }); + + polyline.on("mouseup", (e) => { + polyline.setStyle({ weight: 15 }); }); polyline.on("mouseout", (e) => { 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", { @@ -281,5 +327,35 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, 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 + } + } +};