From a43fbff4f846a33e8a83a2194f8eb218c55b1419 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 11 Sep 2024 10:35:38 +0200 Subject: [PATCH] contexmenu handle in MapComponent wegen error contextmenu nicht vorhanden --- components/MapComponent.js | 14 ++++++++++++++ hooks/useLineData.js | 26 ------------------------- utils/initializeMap.js | 39 +++++++++++++++++++++++++------------- 3 files changed, 40 insertions(+), 39 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 1e46307ec..f9d35753f 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -655,6 +655,20 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Setze die Karteninstanz in den Recoil-Atom } }, [map]); + //-------------------------------------------- + // contextmenü Error "Contextmenu ist nicht vorhanden" + useEffect(() => { + if (map) { + // Überprüfe, ob die Karte und das Contextmenu existieren + if (map.contextmenu) { + console.log("Contextmenu ist vorhanden"); + // Hier kannst du deine Logik für das Contextmenu hinzufügen + map.contextmenu.hide(); // Beispiel: Contextmenu verstecken + } else { + console.warn("Contextmenu ist nicht vorhanden"); + } + } + }, [map]); return ( <> diff --git a/hooks/useLineData.js b/hooks/useLineData.js index 1140e7c47..1856d1716 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -2,38 +2,12 @@ import { useEffect, useState } from "react"; import { SERVER_URL } from "../config/urls"; import { useDispatch, useSelector } from "react-redux"; -import { connectWebSocket, disconnectWebSocket } from "../redux/actions"; const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { const dispatch = useDispatch(); const messages = useSelector((state) => state.messages); const [lineColors, setLineColors] = useState({}); const [tooltipContents, setTooltipContents] = useState({}); - const [webSocketMessages, setWebSocketMessages] = useState([]); - - useEffect(() => { - const ws = new WebSocket("ws://localhost:3001"); // Verwende den externen WebSocket-Server - - ws.onopen = () => { - console.log("WebSocket-Verbindung hergestellt"); - // Testnachricht an den Server senden - ws.send(JSON.stringify({ type: "test", message: "Hallo vom Client" })); - }; - - ws.onmessage = (event) => { - const message = JSON.parse(event.data); - setWebSocketMessages((prev) => [...prev, message]); - console.log("WebSocket-Nachricht erhalten:", message); - }; - - ws.onclose = () => { - console.log("WebSocket-Verbindung geschlossen"); - }; - - return () => { - ws.close(); - }; - }, []); useEffect(() => { let isCancelled = false; // Flag to cancel ongoing operations if component unmounts diff --git a/utils/initializeMap.js b/utils/initializeMap.js index 4e4b561a4..582210a83 100644 --- a/utils/initializeMap.js +++ b/utils/initializeMap.js @@ -5,9 +5,9 @@ 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 { openInNewTab } from "./openInNewTab.js"; // Korrigiert +import { openInNewTab } from "./openInNewTab.js"; -export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { +export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => { if (mapRef.current) { const initMap = L.map(mapRef.current, { center: [53.111111, 8.4625], @@ -25,20 +25,25 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems const link = localStorage.getItem("polylineLink"); const clickedElement = e.relatedTarget; - // Überprüfe, ob der Kontextklick auf eine Polyline oder einen Marker erfolgt ist - if (link) { - const newTab = window.open(link, "_blank"); - if (newTab) { - // Wenn der Tab geöffnet wird, lösche die `localStorage`-Einträge - localStorage.removeItem("polylineLink"); - localStorage.removeItem("lastElementType"); + // Überprüfe, ob Karte und contextmenu existieren + if (initMap && initMap.contextmenu) { + // Verarbeite Kontextmenü-Callback + if (link) { + const newTab = window.open(link, "_blank"); + if (newTab) { + // Lösche Einträge im localStorage + localStorage.removeItem("polylineLink"); + localStorage.removeItem("lastElementType"); + } else { + console.error("Fehler: Das neue Tab konnte nicht geöffnet werden."); + } + } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) { + openInNewTab(e, clickedElement); } else { - console.error("Fehler: Das neue Tab konnte nicht geöffnet werden."); + console.error("Kein gültiges Ziel für den Kontextmenüeintrag"); } - } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) { - openInNewTab(e, clickedElement); // Verwende openInNewTab für beide Fälle } else { - console.error("Kein gültiges Ziel für den Kontextmenüeintrag"); + console.error("Karte oder Kontextmenü nicht verfügbar."); } }, }, @@ -46,15 +51,23 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems ], }); + // Füge die Tile-Layer hinzu L.tileLayer(urls.ONLINE_TILE_LAYER, { attribution: '© OpenStreetMap contributors', }).addTo(initMap); + // Initialisiere OverlappingMarkerSpiderfier const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, { nearbyDistance: 20, }); + // Setze die Map und OMS in den State setMap(initMap); setOms(overlappingMarkerSpiderfier); + + // Wenn Rechte geladen sind und es noch nicht hinzugefügt wurde, füge das Kontextmenü hinzu + if (hasRights && !setMenuItemAdded) { + addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled); + } } };