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

contextmenu, manchmal geht manchmal nicht, Timing Problem

Browse Source
This commit is contained in:
Ismail Ali
2025-03-10 22:01:22 +01:00
parent 8ab1c53996
commit cc716eb4e7
15 changed files with 197 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
utils/createAndSetDevices.js
View File

@@ -3,7 +3,7 @@ import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify";
import * as config from "../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
import { disablePolylineEvents, enablePolylineEvents } from "./polylines/setupPolylines.js";
import { store } from "../redux/store";
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";

2
utils/poiUtils.js
View File

@@ -1,7 +1,7 @@
// /utils/poiUtils.js
import circleIcon from "../components/gisPolylines/icons/CircleIcon.js";
import { saveLineData } from "./mapUtils.js";
import { redrawPolyline } from "./redrawPolyline.js";
import { redrawPolyline } from "./polylines/redrawPolyline.js";
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify";

29
utils/polylines/contextMenu.js Normal file
View File

@@ -0,0 +1,29 @@
// /utils/polylines/contextMenu.js
export function closePolylineSelectionAndContextMenu(map) {
try {
if (window.selectedPolyline) {
window.selectedPolyline.setStyle({ weight: 3 });
window.selectedPolyline = null;
}
if (map?.contextmenu?.hide) {
map.contextmenu.hide();
}
} catch (error) {
console.error("Fehler beim Schließen des Kontextmenüs:", error);
}
localStorage.removeItem("contextMenuCountdown");
localStorage.removeItem("contextMenuExpired");
}
export function monitorContextMenu(map) {
function checkAndClose() {
if (localStorage.getItem("contextMenuExpired") === "true") {
closePolylineSelectionAndContextMenu(map);
localStorage.removeItem("contextMenuExpired");
}
setTimeout(checkAndClose, 1000);
}
checkAndClose();
}

19
utils/polylines/eventHandlers.js Normal file
View File

@@ -0,0 +1,19 @@
// /utils/polylines/eventHandlers.js
export function enablePolylineEvents(polylines, lineColors) {
if (!polylines || polylines.length === 0) {
console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
return;
}
polylines.forEach((polyline) => {
polyline.on("mouseover", () => polyline.setStyle({ weight: 14 }));
polyline.on("mouseout", () => polyline.setStyle({ weight: 3 }));
});
}
export function disablePolylineEvents(polylines) {
polylines.forEach((polyline) => {
polyline.off("mouseover");
polyline.off("mouseout");
});
}

21
utils/polylines/monitorContextMenu.js Normal file
View File

@@ -0,0 +1,21 @@
// utils/polylines/monitorContextMenu.js
import { closePolylineSelectionAndContextMenu } from "./contextMenu";
export function monitorContextMenu(map) {
function checkAndClose() {
const isContextMenuExpired = localStorage.getItem("contextMenuExpired") === "true";
if (isContextMenuExpired) {
if (map && map.contextmenu && typeof map.contextmenu.hide === "function") {
closePolylineSelectionAndContextMenu(map);
localStorage.removeItem("contextMenuExpired");
} else {
console.warn("Kontextmenü war nicht verfügbar und konnte nicht geschlossen werden.");
}
}
setTimeout(checkAndClose, 1000); // **Recursive Timeout statt Intervall**
}
checkAndClose();
}

17
utils/polylines/polylineSubscription.js Normal file
View File

@@ -0,0 +1,17 @@
// utils/polylines/polylineSubscription.js
import { store } from "../../redux/store";
import { closePolylineContextMenu } from "../../redux/slices/polylineContextMenuSlice";
export function subscribeToPolylineContextMenu() {
store.subscribe(() => {
const state = store.getState(); // Redux-Toolkit empfohlene Methode
if (state.polylineContextMenu.forceClose) {
console.log("🚀 Redux-Event erkannt - Kontextmenü wird geschlossen.");
store.dispatch(closePolylineContextMenu());
if (window.map && window.map.contextmenu) {
window.map.contextmenu.hide();
}
}
});
}

0
utils/redrawPolyline.js → utils/polylines/redrawPolyline.js
View File

199
utils/setupPolylines.js → utils/polylines/setupPolylines.js
View File

@@ -1,109 +1,24 @@
// utils/setupPolylines.js
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/api/updateLocationInDatabase";
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
import { parsePoint } from "./geometryUtils";
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
// utils/polylines/setupPolylines.js
import { findClosestPoints } from "../geometryUtils";
import handlePoiSelect from "../handlePoiSelect";
import { updateLocationInDatabase } from "../../services/api/updateLocationInDatabase";
import { handleEditPoi, insertNewPOI, removePOI } from "../poiUtils";
import { parsePoint } from "../geometryUtils";
import circleIcon from "../../components/gisPolylines/icons/CircleIcon";
import startIcon from "../../components/gisPolylines/icons/StartIcon";
import endIcon from "../../components/gisPolylines/icons/EndIcon";
import { redrawPolyline } from "./redrawPolyline";
import { openInNewTab } from "./openInNewTab";
import { openInNewTab } from "../openInNewTab";
import { toast } from "react-toastify";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice";
import { useRecoilValue } from "recoil";
import { store } from "../redux/store"; // Importiere den Store
import { openAddPoiOnPolylineModal } from "../redux/slices/addPoiOnPolylineSlice";
import { openPolylineContextMenu, closePolylineContextMenu } from "../redux/slices/polylineContextMenuSlice";
// Funktion zum Deaktivieren der Polyline-Ereignisse
export function disablePolylineEvents(polylines) {
polylines.forEach((polyline) => {
polyline.off("mouseover");
polyline.off("mouseout");
});
}
// Funktion zum Aktivieren der Polyline-Ereignisse
export function enablePolylineEvents(polylines, lineColors) {
// Überprüfe, ob polylines definiert ist und ob es Elemente enthält
if (!polylines || polylines.length === 0) {
//console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
return;
}
// Falls Polylinien vorhanden sind, wende die Events an
polylines.forEach((polyline) => {
polyline.on("mouseover", (e) => {
//console.log("Mouseover on polyline", polyline.options);
polyline.setStyle({ weight: 14 });
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
//localStorage.setItem("lastElementType", "polyline");
//localStorage.setItem("polylineLink", link);
});
polyline.on("mouseout", (e) => {
//console.log("Mouseout from polyline", polyline.options);
polyline.setStyle({ weight: 3 });
});
});
}
// Funktion zum Schließen des Kontextmenüs und Entfernen der Markierung
function closePolylineSelectionAndContextMenu(map) {
try {
// Falls eine Polyline aktiv ist, entfernen
if (window.selectedPolyline) {
window.selectedPolyline.setStyle({ weight: 3 });
window.selectedPolyline = null;
}
// Überprüfen, ob das Kontextmenü existiert, bevor es geschlossen wird
if (map && map.contextmenu && typeof map.contextmenu.hide === "function") {
map.contextmenu.hide(); // Menü schließen
} else {
console.warn("Kontextmenü existiert nicht mehr oder wurde bereits entfernt.");
}
} catch (error) {
console.error("Fehler beim Schließen des Kontextmenüs:", error);
}
// Lokale Speicherwerte zurücksetzen
localStorage.removeItem("contextMenuCountdown");
localStorage.removeItem("contextMenuExpired");
}
// Überprüft regelmäßig den Status in localStorage
function monitorContextMenu(map) {
function checkAndClose() {
const isContextMenuExpired = localStorage.getItem("contextMenuExpired") === "true";
if (isContextMenuExpired) {
if (map && map.contextmenu && typeof map.contextmenu.hide === "function") {
closePolylineSelectionAndContextMenu(map);
localStorage.removeItem("contextMenuExpired");
} else {
console.warn("Kontextmenü war nicht verfügbar und konnte nicht geschlossen werden.");
}
}
setTimeout(checkAndClose, 1000); // **Recursive Timeout statt Intervall**
}
checkAndClose();
}
//------------------------------------------
store.subscribe(() => {
const state = store.getState(); // Redux-Toolkit empfohlene Methode
if (state.polylineContextMenu.forceClose) {
console.log("🚀 Redux-Event erkannt - Kontextmenü wird geschlossen.");
store.dispatch(closePolylineContextMenu());
if (window.map && window.map.contextmenu) {
window.map.contextmenu.hide();
}
}
});
import { polylineLayerVisibleState } from "../../redux/slices/polylineLayerVisibleSlice";
import { store } from "../../redux/store"; // Importiere den Store
import { openAddPoiOnPolylineModal } from "../../redux/slices/addPoiOnPolylineSlice";
import { openPolylineContextMenu, closePolylineContextMenu } from "../../redux/slices/polylineContextMenuSlice";
import { enablePolylineEvents, disablePolylineEvents } from "./eventHandlers";
import { closePolylineSelectionAndContextMenu } from "./contextMenu";
import { monitorContextMenu } from "./monitorContextMenu";
import { subscribeToPolylineContextMenu } from "./polylineSubscription";
import { forceCloseContextMenu } from "../../redux/slices/polylineContextMenuSlice";
//--------------------------------------------
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
@@ -385,73 +300,37 @@ 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}`;
console.log("Link der Linie:", link);
//localStorage.setItem("lastElementType", "polyline");
//localStorage.setItem("polylineLink", link);
});
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) => {
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);
});
*/
console.log("🚀 Maus hat die Polyline verlassen - Warten auf Klick außerhalb des Menüs.");
// Event-Listener für Redux Store-Änderungen registrieren
// Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
polyline.on("contextmenu", (e) => {
store.dispatch(closePolylineContextMenu());
setTimeout(() => {
if (!map || !map.contextmenu) return;
store.dispatch(
openPolylineContextMenu({
position: { lat: e.latlng.lat, lng: e.latlng.lng },
polylineId: polyline.options.idLD,
})
);
// Schließen nach 17 Sekunden
setTimeout(() => {
document.addEventListener("click", function handleOutsideClick(event) {
if (!event.target.closest(".leaflet-contextmenu")) {
console.log("🛑 Klick außerhalb des Kontextmenüs erkannt - Schließe Menü.");
store.dispatch(closePolylineContextMenu());
if (map.contextmenu) {
map.contextmenu.hide();
store.dispatch(forceCloseContextMenu());
if (window.map?.contextmenu) {
window.map.contextmenu.hide();
}
}, 17000);
}, 50);
document.removeEventListener("click", handleOutsideClick);
}
});
});
polyline.on("contextmenu", (e) => {
store.dispatch(
openPolylineContextMenu({
position: { lat: e.latlng.lat, lng: e.latlng.lng },
polylineId: polyline.options.idLD,
})
);
});
polylines.push(polyline);

4
utils/setupPOIs.js
View File

@@ -7,9 +7,9 @@ import { parsePoint } from "./geometryUtils";
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
import { redrawPolyline } from "./redrawPolyline";
import { redrawPolyline } from "./polylines/redrawPolyline";
import { openInNewTab } from "../utils/openInNewTab";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktionen
import { disablePolylineEvents, enablePolylineEvents } from "./polylines/setupPolylines"; // Importiere die Funktionen
export const setupPOIs = async (
map,