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

WIP: Station öffnen in Kontextmenü für Tooltip

Browse Source
This commit is contained in:
ISA
2024-12-12 08:59:05 +01:00
parent 567be1dfa4
commit e9ce6088b8
2 changed files with 84 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,8 +1,7 @@
// hooks/layers/useGmaMarkersLayer.js
import { useEffect } from "react";
import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
useEffect(() => {
if (!map || !isVisible) return;
@@ -10,10 +9,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
GMA.clearLayers();
markers.forEach((marker) => {
// Finde die Messungen, die zu diesem Marker gehören
const relevantMeasurements = GisStationsMeasurements.filter(
(m) => m.Area_Name === marker.options.areaName
);
const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);
let measurements = {};
let area_name = marker.options.areaName;
@@ -28,7 +24,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
const rlf = measurements["RLF"] || "-";
marker.bindTooltip(
`
`
<div class="p-0 rounded-lg bg-white bg-opacity-90 tooltip-content">
<div class="font-bold text-sm text-black">
<span>${area_name}</span>
@@ -40,7 +36,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
<span>FBT : ${fbt} °C</span>
</div>
<div class="font-bold text-xxs text-yellow-500">
<span>GT : ${gt}</span>
<span>GT : ${gt} °C</span>
</div>
<div class="font-bold text-xxs text-green-700">
<span>RLF : ${rlf} %</span>
@@ -55,41 +51,69 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
}
);
// Tooltip-Kontextmenü auf Marker-Kontextmenü verlinken
marker.on("tooltipopen", (e) => {
const tooltipElement = e.tooltip._contentNode;
if (tooltipElement) {
tooltipElement.addEventListener("contextmenu", (event) => {
event.preventDefault(); // Standard-Kontextmenü verhindern
event.preventDefault();
console.log("Rechtsklick auf Tooltip erkannt");
// Simuliere das Kontextmenü für den Marker
const simulatedEvent = {
latlng: marker.getLatLng(),
relatedTarget: marker,
originalEvent: event,
};
console.log("simulateEvent:",simulatedEvent )
// Erstelle ein benutzerdefiniertes Kontextmenü
const menu = document.createElement("div");
menu.className = "custom-context-menu";
menu.style.position = "absolute";
menu.style.left = `${event.clientX}px`;
menu.style.top = `${event.clientY}px`;
menu.style.backgroundColor = "#fff";
menu.style.border = "1px solid #ccc";
menu.style.padding = "8px";
menu.style.zIndex = "1000";
marker.fire("contextmenu", simulatedEvent);
// Menüeinträge hinzufügen
const openStation = document.createElement("div");
openStation.textContent = "Station öffnen (Tab)";
openStation.style.cursor = "pointer";
openStation.onclick = () => {
if (marker.options.link) {
window.open(marker.options.link, "_blank");
} else {
console.error("Kein Link für Tooltip vorhanden.");
}
document.body.removeChild(menu); // Menü entfernen
};
const showDetails = document.createElement("div");
showDetails.textContent = "Details anzeigen";
showDetails.style.cursor = "pointer";
showDetails.onclick = () => {
alert(`Details für ${area_name}`);
document.body.removeChild(menu); // Menü entfernen
};
// Menüeinträge zum Menü hinzufügen
menu.appendChild(openStation);
menu.appendChild(document.createElement("hr"));
menu.appendChild(showDetails);
// Menü zum DOM hinzufügen
document.body.appendChild(menu);
// Menü entfernen, wenn irgendwo anders geklickt wird
const handleClickOutside = () => {
if (document.body.contains(menu)) {
document.body.removeChild(menu);
document.removeEventListener("click", handleClickOutside);
}
};
document.addEventListener("click", handleClickOutside);
});
}
});
// Entferne Listener, wenn Tooltip geschlossen wird
/* marker.on("tooltipclose", (e) => {
const tooltipElement = e.tooltip._contentNode;
if (tooltipElement) {
tooltipElement.removeEventListener("contextmenu", () => {});
//console.log("Tooltip geschlossen");
}
}); */
// Kontextmenü für Marker hinzufügen
addContextMenuToMarker(marker);
// Füge den Marker zur Layer-Gruppe hinzu
GMA.addLayer(marker);
oms.addMarker(marker);
});
@@ -103,4 +127,4 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
}, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
};
export default useMarkersLayer;
export default useGmaMarkersLayer;