From 465aa6d848ff5d3eeda4e481b75be8ddb2512649 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 13 Sep 2024 14:44:10 +0200 Subject: [PATCH] fix: TypeError: Cannot read properties of null (reading 'contextmenu') MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Korrigiert TypeError, der auftrat, wenn versucht wurde, auf `contextmenu` zuzugreifen, während es null war. - Implementiert präzise Zeitmessung mithilfe von `Date.now()`, um das Schließen des Kontextmenüs nach genau 17 Sekunden sicherzustellen. - Verbessert Benutzererfahrung durch zuverlässigere und stabilere Menüverwaltung. --- hooks/useLineData.js | 8 --- utils/setupPolylines.js | 105 ++++++++++++++++++++++++++++++++++------ 2 files changed, 91 insertions(+), 22 deletions(-) diff --git a/hooks/useLineData.js b/hooks/useLineData.js index 3798f3fbe..2f1bdc172 100644 --- a/hooks/useLineData.js +++ b/hooks/useLineData.js @@ -103,15 +103,7 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => { } }; - const scheduleNextFetch = () => { - if (!isCancelled) { - fetchData(); - setTimeout(scheduleNextFetch, 20000); - } - }; - fetchData(); - scheduleNextFetch(); return () => { isCancelled = true; diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index 050b5711d..a6bdcb16e 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -204,25 +204,70 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", weight: 3, contextmenu: true, + contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren contextmenuItems: [], }).addTo(map); // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist if (editMode) { - polyline.options.contextmenuItems.push({ - text: "Stützpunkt hinzufügen", - icon: "/img/icons/gisLines/add-support-point.svg", - callback: (e) => { - if (tempMarker) { - tempMarker.remove(); - } - const newPoint = e.latlng; - const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map); - insertNewPOI(closestPoints, newPoint, lineData, map); - redrawPolyline(lineData, lineColors, tooltipContents, map); - window.location.reload(); + polyline.options.contextmenuItems.push( + { + text: "Station öffnen (Tab)", + icon: "/img/screen_new.png", + callback: (e) => { + const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; + window.open(link, "_blank"); + }, }, - }); + { separator: true }, + + { + text: "Koordinaten anzeigen", + icon: "/img/not_listed_location.png", + callback: (e) => { + alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)); + }, + }, + { separator: true }, + { + text: "Reinzoomen", + icon: "/img/zoom_in.png", + callback: (e) => map.zoomIn(), + }, + { + text: "Rauszoomen", + icon: "/img/zoom_out.png", + callback: (e) => map.zoomOut(), + }, + { + text: "Hier zentrieren", + icon: "/img/center_focus.png", + callback: (e) => map.panTo(e.latlng), + }, + { separator: true }, + { + text: "POI hinzufügen", + icon: "/img/add_station.png", + callback: (e) => { + // Hier kannst du die Logik für das Hinzufügen eines POIs implementieren + alert("POI hinzufügen an: " + e.latlng); + }, + }, + { + text: "Stützpunkt hinzufügen", + icon: "/img/icons/gisLines/add-support-point.svg", + callback: (e) => { + if (tempMarker) { + tempMarker.remove(); + } + const newPoint = e.latlng; + const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map); + insertNewPOI(closestPoints, newPoint, lineData, map); + redrawPolyline(lineData, lineColors, tooltipContents, map); + window.location.reload(); + }, + } + ); } // Hier wird der Tooltip hinzugefügt @@ -232,6 +277,24 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, }); polyline.on("mouseover", (e) => { + const startTime = Date.now(); // Startzeit erfassen + localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage + + // Starte einen Intervall-Timer, um die Differenz zu berechnen + const countdownInterval = setInterval(() => { + const currentTime = Date.now(); + const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden + + // Speichern der abgelaufenen Zeit in localStorage + localStorage.setItem("contextMenuCountdown", elapsedTime); + + // Wenn die Zeit 17 Sekunden erreicht, schließe das Menü + if (elapsedTime >= 17) { + clearInterval(countdownInterval); + const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü + contextMenu.hide(); // Kontextmenü schließen + } + }, 1000); // Jede Sekunde //console.log("Mouseover on polyline", lineData); polyline.setStyle({ weight: 14 }); const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; @@ -243,14 +306,28 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, polyline.on("mouseout", (e) => { // console.log("Mouseout from polyline", lineData); polyline.setStyle({ weight: 3 }); + // Setze den Countdown auf 0, wenn mouseout ausgelöst wird + localStorage.setItem("contextMenuCountdown", 0); }); // Speichere den Link bei einem Rechtsklick (Kontextmenü) - polyline.on("contextmenu", (e) => { + /* + polyline.on("contextmenu", (e) => { const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; console.log("Link der Linie (via Rechtsklick):", link); localStorage.setItem("lastElementType", "polyline"); localStorage.setItem("polylineLink", link); }); + */ + // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden + polyline.on("contextmenu", function (e) { + const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü + const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs + + const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 10); + if (countdown >= 17) { + closeMenu(); + } + }); polylines.push(polyline); markers.push(...lineMarkers);