Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

addEventListener Error Problem gelöst bei der Linien und die Klicks

Browse Source
This commit is contained in:
ISA
2024-08-15 12:10:01 +02:00
parent de6595d956
commit 18ad7cad7e
1 changed files with 12 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
utils/mapFeatures.js
View File

@@ -58,7 +58,7 @@ export const setupMarkers = async (
popupAnchor: [1, -34], popupAnchor: [1, -34],
}), }),
draggable: canDrag, draggable: canDrag,
id: location.idPoi, idLD: location.idLD, // Füge die idLD zum Marker hinzu
name: location.name, name: location.name,
description: location.description, description: location.description,
}).bindContextMenu({ }).bindContextMenu({
@@ -135,9 +135,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
const checkMouseOverMenu = () => { const checkMouseOverMenu = () => {
if (!isMouseOverMenuItem) { if (!isMouseOverMenuItem) {
showContextMenuItemByIndex(map, 0); //showContextMenuItemByIndex(map, 0);
showContextMenuItemByIndex(map, 1); //showContextMenuItemByIndex(map, 1);
closeContextMenu(); // Kontextmenü schließen, wenn die Maus nicht mehr darüber ist //closeContextMenu(); // Kontextmenü schließen, wenn die Maus nicht mehr darüber ist
} }
}; };
@@ -160,11 +160,11 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
const handleOutsideClick = (event) => { const handleOutsideClick = (event) => {
const contextMenuElement = document.querySelector(".leaflet-contextmenu"); const contextMenuElement = document.querySelector(".leaflet-contextmenu");
if (contextMenuElement && !contextMenuElement.contains(event.target)) { if (contextMenuElement && !contextMenuElement.contains(event.target)) {
closeContextMenu(); // Kontextmenü schließen, wenn der Klick außerhalb stattfindet //closeContextMenu(); // Kontextmenü schließen, wenn der Klick außerhalb stattfindet
} }
}; };
document.addEventListener("mousedown", handleOutsideClick); //document.addEventListener("mousedown", handleOutsideClick);
linePositions.forEach((lineData, lineIndex) => { linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = []; const lineMarkers = [];
@@ -270,17 +270,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
const polyline = L.polyline(lineData.coordinates, { const polyline = L.polyline(lineData.coordinates, {
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
contextmenu: true, contextmenu: true,
idLD: lineData.idLD, // Füge die idLD zur Polyline hinzu
idModul: lineData.idModul, // Füge die idModul zur Polyline hinzu
contextmenuItems: [ 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_SERVER_URL}/talas5/devices/cpl.aspx?id=${idLD}`;
window.open(link, "_blank"); // Öffne direkt den Link in einem neuen Tab
},
},
{ {
text: "Stützpunkt hinzufügen", text: "Stützpunkt hinzufügen",
icon: "/img/icons/gisLines/add-support-point.svg", icon: "/img/icons/gisLines/add-support-point.svg",
@@ -299,23 +291,21 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
}).addTo(map); }).addTo(map);
polyline.on("mouseover", (e) => { polyline.on("mouseover", (e) => {
polyline.setStyle({ weight: 20 }); polyline.setStyle({ weight: 15 });
hideContextMenuItemByIndex(map, 0);
hideContextMenuItemByIndex(map, 1);
}); });
polyline.on("mousedown", (e) => { polyline.on("mousedown", (e) => {
polyline.setStyle({ weight: 20 }); polyline.setStyle({ weight: 15 });
}); });
polyline.on("mouseup", (e) => { polyline.on("mouseup", (e) => {
polyline.setStyle({ weight: 20 }); polyline.setStyle({ weight: 15 });
}); });
polyline.on("mouseout", (e) => { polyline.on("mouseout", (e) => {
polyline.setStyle({ weight: 3 }); polyline.setStyle({ weight: 3 });
polyline.setStyle({ color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000" }); polyline.setStyle({ color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000" });
setTimeout(checkMouseOverMenu, 500); //setTimeout(checkMouseOverMenu, 500);
}); });
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
@@ -330,32 +320,5 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
// Add listeners to the context menu items // Add listeners to the context menu items
const contextMenuElement = document.querySelector(".leaflet-contextmenu"); // Assuming the context menu class is 'leaflet-contextmenu' 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 }; 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
}
}
};