diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js index ed275ee99..6c51d5d5f 100644 --- a/components/mainComponent/MapComponent.js +++ b/components/mainComponent/MapComponent.js @@ -79,10 +79,15 @@ import ShowAddStationPopup from "../AddPOIModal.js"; import { useInitGisStationsStatic } from "../mainComponent/hooks/useInitGisStationsStatic"; import { closeAddPoiModal } from "../../redux/slices/addPoiOnPolylineSlice.js"; import AddPOIOnPolyline from "../AddPOIOnPolyline"; +import { closePolylineContextMenu } from "../../redux/slices/polylineContextMenuSlice"; +import { forceCloseContextMenu } from "../../redux/slices/polylineContextMenuSlice"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); + const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen); + const contextMenuState = useSelector((state) => state.polylineContextMenu); + const polylinePosition = contextMenuState.position ? L.latLng(contextMenuState.position.lat, contextMenuState.position.lng) : null; const currentPoi = useSelector(selectCurrentPoi); //const setCurrentPoi = useSetRecoilState(currentPoiState); const polylineVisible = useSelector(selectPolylineVisible); @@ -876,6 +881,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { console.log("🔥 Automatischer Klick-Event ausgelöst, um Spiderfy zu aktualisieren."); map.fire("click"); } + if (isPolylineContextMenuOpen) { + dispatch(closePolylineContextMenu()); // Schließe das Kontextmenü, bevor das nächste Update passiert + } + if (map) { + console.log("🔥 nochmal klick."); + map.fire("click"); + } }, 20000); // Aufräumen bei Komponentenentladung diff --git a/config/appVersion.js b/config/appVersion.js index 850178464..ff1a498b1 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.41"; +export const APP_VERSION = "1.1.42"; diff --git a/redux/slices/polylineContextMenuSlice.js b/redux/slices/polylineContextMenuSlice.js new file mode 100644 index 000000000..cc3dfea53 --- /dev/null +++ b/redux/slices/polylineContextMenuSlice.js @@ -0,0 +1,32 @@ +// redux/slices/polylineContextMenuSlice.js +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + isOpen: false, + position: null, // Serialisierbarer Wert { lat, lng } + forceClose: false, // Neuer State, um das Schließen zu erzwingen +}; + +const polylineContextMenuSlice = createSlice({ + name: "polylineContextMenu", + initialState, + reducers: { + openPolylineContextMenu: (state, action) => { + state.isOpen = true; + state.position = { lat: action.payload.position.lat, lng: action.payload.position.lng }; + state.forceClose = false; // Beim Öffnen zurücksetzen + }, + closePolylineContextMenu: (state) => { + state.isOpen = false; + state.position = null; + }, + forceCloseContextMenu: (state) => { + state.isOpen = false; + state.position = null; + state.forceClose = true; // Setzt Flagge, um Schließen zu signalisieren + }, + }, +}); + +export const { openPolylineContextMenu, closePolylineContextMenu, forceCloseContextMenu } = polylineContextMenuSlice.actions; +export default polylineContextMenuSlice.reducer; diff --git a/redux/store.js b/redux/store.js index 6958b1da9..03ffc2838 100644 --- a/redux/store.js +++ b/redux/store.js @@ -11,6 +11,7 @@ import gisSystemStaticReducer from "./slices/webService/gisSystemStaticSlice"; import gisStationsStaticReducer from "./slices/webService/gisStationsStaticSlice"; import poiTypesReducer from "./slices/db/poiTypesSlice"; import addPoiOnPolylineReducer from "./slices/addPoiOnPolylineSlice"; +import polylineContextMenuReducer from "./slices/polylineContextMenuSlice"; export const store = configureStore({ reducer: { @@ -25,5 +26,6 @@ export const store = configureStore({ gisStationsStatic: gisStationsStaticReducer, poiTypes: poiTypesReducer, addPoiOnPolyline: addPoiOnPolylineReducer, + polylineContextMenu: polylineContextMenuReducer, }, }); diff --git a/utils/setupPolylines.js b/utils/setupPolylines.js index e40b96f95..dc92b8f63 100644 --- a/utils/setupPolylines.js +++ b/utils/setupPolylines.js @@ -15,6 +15,7 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS 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) { @@ -51,39 +52,60 @@ export function enablePolylineEvents(polylines, lineColors) { // Funktion zum Schließen des Kontextmenüs und Entfernen der Markierung function closePolylineSelectionAndContextMenu(map) { try { - // Entferne alle markierten Polylinien + // Falls eine Polyline aktiv ist, entfernen if (window.selectedPolyline) { - window.selectedPolyline.setStyle({ weight: 3 }); // Originalstil wiederherstellen + window.selectedPolyline.setStyle({ weight: 3 }); window.selectedPolyline = null; } - // Überprüfe, ob map und map.contextmenu definiert sind - if (map && map.contextmenu) { - map.contextmenu.hide(); // Kontextmenü schließen + // Ü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ü ist nicht verfügbar."); + console.warn("Kontextmenü existiert nicht mehr oder wurde bereits entfernt."); } } catch (error) { console.error("Fehler beim Schließen des Kontextmenüs:", error); - window.location.reload(); } - // Countdown-Status zurücksetzen + // Lokale Speicherwerte zurücksetzen localStorage.removeItem("contextMenuCountdown"); localStorage.removeItem("contextMenuExpired"); } // Überprüft regelmäßig den Status in localStorage function monitorContextMenu(map) { - setInterval(() => { + function checkAndClose() { const isContextMenuExpired = localStorage.getItem("contextMenuExpired") === "true"; - if (isContextMenuExpired) { - closePolylineSelectionAndContextMenu(map); - localStorage.removeItem("contextMenuExpired"); // Flagge entfernen, um wiederverwendbar zu sein - } - }, 1000); // Alle 1 Sekunde überprüfen -} + 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(); + } + } +}); + +//-------------------------------------------- export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => { if (!polylineVisible) { console.warn("Polylines deaktiviert - keine Zeichnung"); @@ -292,7 +314,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, store.dispatch(openAddPoiOnPolylineModal(e.latlng)); }, }, - */ + */ { text: "Stützpunkt hinzufügen", icon: "/img/icons/gisLines/add-support-point.svg", @@ -404,15 +426,32 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents, 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"), 30); - if (countdown >= 28) { - closeMenu(); - } + // 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(() => { + store.dispatch(closePolylineContextMenu()); + if (map.contextmenu) { + map.contextmenu.hide(); + } + }, 17000); + }, 50); }); polylines.push(polyline);