fix: GMA Tooltip Kontextmenü schließen wenn versucht neu aufzurufen

2024-12-16 13:49:43 +01:00
parent 1abe72f209
commit a00e322cbb
4 changed files with 54 additions and 101 deletions
--- a/config/appVersion.js
+++ b/config/appVersion.js
@@ -1,5 +1,2 @@
 // /config/appVersion
-// Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
 export const APP_VERSION = "1.0.16.0";
-//export const STANDARD_SIDE_MENU = true;
-//export const FULL_SIDE_MENU = false;
--- a/config/urls.js
+++ b/config/urls.js
@@ -10,7 +10,7 @@ if (typeof window !== "undefined") {

  BASE_URL = `${originWithoutPort}/api`; // Dynamische Basis-URL
  SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port
-  PROXY_TARGET = `${originWithoutPort}:3000`; // Dynamisch für einen Proxy
+  PROXY_TARGET = `${originWithoutPort}:4000`; // Dynamisch für einen Proxy

  //OFFLINE_TILE_LAYER = "http://10.10.0.70:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
  //OFFLINE_TILE_LAYER = "http://10.10.0.70/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
--- a/hooks/layers/useGmaMarkersLayer.js
+++ b/hooks/layers/useGmaMarkersLayer.js
@@ -1,63 +1,44 @@
 import { useEffect } from "react";
-import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";

 const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
-  const zoomIn = (map, latlng) => {
-    if (!map) {
-      console.error("map is not defined in zoomIn");
-      return;
+  let currentMenu = null; // Variable für das aktuelle Kontextmenü
+
+  const closeContextMenu = () => {
+    if (currentMenu) {
+      currentMenu.remove();
+      currentMenu = null;
    }
+  };

+  const zoomIn = (map, latlng) => {
+    if (!map) return;
    const currentZoom = map.getZoom();
-
    if (currentZoom < 14) {
      map.flyTo(latlng, 14);
-      localStorage.setItem("mapZoom", 14);
-      localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
    }
  };

  const zoomOut = (map) => {
-    if (!map) {
-      console.error("map is not defined in zoomOut");
-      return;
-    }
-
-    const currentZoom = map.getZoom();
-
-    if (currentZoom > 7) {
-      const x = 51.41321407879154;
-      const y = 7.739617925303934;
-      const zoom = 7;
-
-      map.flyTo([x, y], zoom);
-      localStorage.setItem("mapZoom", zoom);
-      localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
-    }
+    if (!map) return;
+    map.flyTo([51.4132, 7.7396], 7);
  };

-  const centerHere = (e, map) => {
-    if (!map) {
-      console.error("map is not defined in centerHere");
-      return;
-    }
-    map.panTo(e.latlng);
-    localStorage.setItem("mapZoom", map.getZoom());
-    localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
+  const centerHere = (map, latlng) => {
+    if (!map) return;
+    map.panTo(latlng);
  };

  useEffect(() => {
    if (!map || !isVisible) return;

-    // Entferne alte Marker
    GMA.clearLayers();

    markers.forEach((marker) => {
-      const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);
+      const areaName = marker.options.areaName;
+
+      const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === areaName);

      let measurements = {};
-      let area_name = marker.options.areaName;
-
      relevantMeasurements.forEach((m) => {
        measurements[m.Na] = m.Val;
      });
@@ -67,41 +48,24 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
      const gt = measurements["GT"] || "-";
      const rlf = measurements["RLF"] || "-";

+      // Tooltip erstellen
      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> 
-            </div>
-            <div class="font-bold text-xxs text-blue-700">
-              <span>LT : ${lt} °C</span> 
-            </div>
-            <div class="font-bold text-xxs text-red-700">
-              <span>FBT : ${fbt} °C</span> 
-            </div>
-            <div class="font-bold text-xxs text-yellow-500">
-              <span>GT : ${gt} °C</span> 
-            </div>
-            <div class="font-bold text-xxs text-green-700">
-              <span>RLF : ${rlf} %</span> 
-            </div>
+            <div class="font-bold text-sm text-black"><span>${areaName}</span></div>
+            <div class="font-bold text-xxs text-blue-700"><span>LT: ${lt} °C</span></div>
+            <div class="font-bold text-xxs text-red-700"><span>FBT: ${fbt} °C</span></div>
+            <div class="font-bold text-xxs text-yellow-500"><span>GT: ${gt} °C</span></div>
+            <div class="font-bold text-xxs text-green-700"><span>RLF: ${rlf} %</span></div>
          </div>
        `,
-        {
-          permanent: true,
-          direction: "auto",
-          offset: [60, 0],
-          interactive: true,
-        }
+        { permanent: true, interactive: true }
      );

      let currentMouseLatLng = null;
-
      const mouseMoveHandler = (event) => {
        currentMouseLatLng = event.latlng;
      };
-
-      // Mousemove-Listener hinzufügen, um die aktuellen Koordinaten zu speichern
      map.on("mousemove", mouseMoveHandler);

      marker.on("tooltipopen", (e) => {
@@ -110,21 +74,16 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
        if (tooltipElement) {
          tooltipElement.addEventListener("contextmenu", (event) => {
            event.preventDefault();
-            console.log("Rechtsklick auf Tooltip erkannt");
+            closeContextMenu(); // Altes Menü schließen

-            // Kombiniere die Kontextmenü-Items
+            // Kontextmenü-Items definieren
            const combinedContextMenuItems = [
              {
                text: "Station öffnen (Tab)",
                icon: "/img/screen_new.png",
                callback: () => {
-                  if (marker.options.link) {
-                    const fullUrl = `${marker.options.link}`;
-                    window.open(fullUrl, "_blank");
-                    console.log("Link in neuem Tab geöffnet:", fullUrl);
-                  } else {
-                    console.error("Kein Link für Tooltip vorhanden.");
-                  }
+                  const fullUrl = marker.options.link || "http://example.com";
+                  window.open(fullUrl, "_blank");
                },
              },
              { separator: true },
@@ -133,39 +92,29 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
                icon: "/img/not_listed_location.png",
                callback: () => {
                  if (currentMouseLatLng) {
-                    alert(
-                      `Breitengrad: ${currentMouseLatLng.lat.toFixed(5)}\nLängengrad: ${currentMouseLatLng.lng.toFixed(5)}`
-                    );
-                  } else {
-                    console.error("Keine gültigen Koordinaten erkannt.");
+                    alert(`Breitengrad: ${currentMouseLatLng.lat.toFixed(5)}\nLängengrad: ${currentMouseLatLng.lng.toFixed(5)}`);
                  }
                },
              },
              { separator: true },
              {
                text: "Reinzoomen",
-                icon: "img/zoom_in.png",
-                callback: () => {
-                  const latlng = marker.getLatLng();
-                  zoomIn(map, latlng);
-                },
+                icon: "/img/zoom_in.png",
+                callback: () => zoomIn(map, marker.getLatLng()),
              },
              {
                text: "Rauszoomen",
-                icon: "img/zoom_out.png",
+                icon: "/img/zoom_out.png",
                callback: () => zoomOut(map),
              },
              {
                text: "Hier zentrieren",
-                icon: "img/center_focus.png",
-                callback: () => {
-                  const latlng = marker.getLatLng();
-                  centerHere({ latlng }, map);
-                },
+                icon: "/img/center_focus.png",
+                callback: () => centerHere(map, marker.getLatLng()),
              },
            ];

-            // Benutzerdefiniertes Kontextmenü anzeigen
+            // Menü erstellen und anzeigen
            const menu = document.createElement("div");
            menu.className = "custom-context-menu";
            menu.style.position = "absolute";
@@ -185,13 +134,12 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
                menuItem.style.display = "flex";
                menuItem.style.alignItems = "center";
                menuItem.style.cursor = "pointer";
+                menuItem.style.padding = "4px";

                if (item.icon) {
                  const icon = document.createElement("img");
                  icon.src = item.icon;
-                  icon.alt = "Icon";
                  icon.style.width = "16px";
-                  icon.style.height = "16px";
                  icon.style.marginRight = "8px";
                  menuItem.appendChild(icon);
                }
@@ -200,20 +148,23 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
                text.textContent = item.text;
                menuItem.appendChild(text);

-                menuItem.onclick = item.callback;
+                menuItem.onclick = () => {
+                  item.callback();
+                  closeContextMenu();
+                };
                menu.appendChild(menuItem);
              }
            });

            document.body.appendChild(menu);
+            currentMenu = menu;

-            const handleClickOutside = () => {
-              if (document.body.contains(menu)) {
-                document.body.removeChild(menu);
+            const handleClickOutside = (e) => {
+              if (menu && !menu.contains(e.target)) {
+                closeContextMenu();
                document.removeEventListener("click", handleClickOutside);
              }
            };
-
            document.addEventListener("click", handleClickOutside);
          });
        }
@@ -221,10 +172,9 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV

      marker.on("tooltipclose", () => {
        map.off("mousemove", mouseMoveHandler);
+        closeContextMenu();
      });

-      addContextMenuToMarker(marker);
-
      GMA.addLayer(marker);
      oms.addMarker(marker);
    });
@@ -234,8 +184,11 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
    return () => {
      GMA.clearLayers();
      map.removeLayer(GMA);
+      closeContextMenu();
    };
  }, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
+
+  return null;
 };

 export default useGmaMarkersLayer;
--- a/utils/initializeMap.js
+++ b/utils/initializeMap.js
@@ -1,4 +1,7 @@
 // utils/initializeMap.js
+// TODO: Add a comment
+//FIXME: Add a comment
+//BUG: Add a comment
 import L from "leaflet";
 import "leaflet-contextmenu";
 import "leaflet/dist/leaflet.css";
@@ -44,7 +47,7 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems

            try {
              if (clickedElement instanceof L.Marker || clickedElement?.options?.link) {
-                const link = clickedElement.options.link;
+                const link = "/talas5/devices/" + clickedElement.options.link;
                if (link) {
                  console.log("Opening link in a new tab:", link);
                  window.open(link, "_blank");