819639164a
- Migration von Recoil zu Redux abgeschlossen für Polyline-Interaktionsstatus - `MapComponent.js` verwendet jetzt Redux `useSelector` und `dispatch(setDisabled(...))` - `initializeMap.js` bekommt Callback-Funktion zur Steuerung des Redux-Status - Redux-Slice `polylineEventsDisabledSlice.js` mit Actions `setDisabled`, `toggleDisabled` integriert - Hinweis: `useCreateAndSetDevices.js` verwendet noch `useRecoilState`, muss refaktoriert werden
117 lines
3.7 KiB
JavaScript
117 lines
3.7 KiB
JavaScript
// utils/initializeMap.js
|
||
import L from "leaflet";
|
||
import "leaflet-contextmenu";
|
||
import "leaflet/dist/leaflet.css";
|
||
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
|
||
import { store } from "../redux/store";
|
||
import * as urls from "../config/urls.js";
|
||
import * as layers from "../config/layers.js";
|
||
|
||
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
|
||
if (!mapRef.current) {
|
||
console.error("❌ Fehler: mapRef.current ist nicht definiert.");
|
||
return;
|
||
}
|
||
|
||
if (mapRef.current._leaflet_id) {
|
||
console.log("⚠️ Karte bereits initialisiert");
|
||
return; // keine Neuanlage
|
||
}
|
||
|
||
// Leaflet-Karte erstellen
|
||
const initMap = L.map(mapRef.current, {
|
||
center: [53.111111, 8.4625],
|
||
zoom: 12,
|
||
minZoom: 5,
|
||
maxZoom: 15,
|
||
zoomControl: false,
|
||
dragging: true,
|
||
contextmenu: true, // ✅ Sicherstellen, dass Kontextmenü aktiviert ist
|
||
layers: [
|
||
layers.MAP_LAYERS.TALAS,
|
||
layers.MAP_LAYERS.ECI,
|
||
layers.MAP_LAYERS.GSMModem,
|
||
layers.MAP_LAYERS.CiscoRouter,
|
||
layers.MAP_LAYERS.WAGO,
|
||
layers.MAP_LAYERS.Siemens,
|
||
layers.MAP_LAYERS.OTDR,
|
||
layers.MAP_LAYERS.WDM,
|
||
layers.MAP_LAYERS.GMA,
|
||
layers.MAP_LAYERS.TALASICL,
|
||
layers.MAP_LAYERS.Sonstige,
|
||
layers.MAP_LAYERS.ULAF,
|
||
],
|
||
});
|
||
|
||
initMap.dragging.enable();
|
||
|
||
// 🌍 **🚀 Kontextmenü sicherstellen**
|
||
if (!initMap.contextmenu) {
|
||
console.error("❌ `contextmenu` ist nicht verfügbar.");
|
||
return;
|
||
}
|
||
|
||
// **Kontextmenü für Geräte aktualisieren**
|
||
initMap.on("contextmenu.show", (e) => {
|
||
const clickedElement = e.relatedTarget;
|
||
const selectedDevice = store.getState().selectedDevice; // Redux-Wert abrufen
|
||
|
||
if (!initMap.contextmenu || !initMap.contextmenu.items) {
|
||
console.error("❌ Fehler: `contextmenu` oder `items` ist nicht definiert.");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
initMap.contextmenu.removeAllItems(); // **Sicherstellen, dass vorherige Einträge entfernt werden**
|
||
} catch (error) {
|
||
console.error("❌ Fehler beim Entfernen der Menüelemente:", error);
|
||
}
|
||
|
||
if (!clickedElement) {
|
||
console.error("❌ Kein gültiges Ziel für das Kontextmenü.");
|
||
return;
|
||
}
|
||
|
||
// 🛑 Falls `selectedDevice === null`, kein "Station öffnen" anzeigen
|
||
if (!selectedDevice || !clickedElement.options?.idDevice) {
|
||
console.log("ℹ️ Kein Gerät ausgewählt – 'Station öffnen' wird nicht hinzugefügt.");
|
||
return;
|
||
}
|
||
|
||
// ✅ Falls `selectedDevice` gesetzt ist, "Station öffnen" anzeigen
|
||
console.log("✅ Gerät erkannt – 'Station öffnen' wird hinzugefügt.");
|
||
initMap.contextmenu.addItem({
|
||
text: "Station öffnen (Tab)",
|
||
icon: "/img/screen_new.png",
|
||
callback: () => {
|
||
const link = `http://${window.location.hostname}/talas5/devices/${selectedDevice.id}`;
|
||
if (link) {
|
||
console.log("🟢 Öffne Link in neuem Tab:", link);
|
||
window.open(link, "_blank");
|
||
} else {
|
||
console.error("❌ Kein Link in den Marker-Optionen gefunden.");
|
||
}
|
||
},
|
||
});
|
||
});
|
||
|
||
// Tile-Layer hinzufügen
|
||
L.tileLayer(urls.OFFLINE_TILE_LAYER, {
|
||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||
}).addTo(initMap);
|
||
|
||
// Initialisiere OverlappingMarkerSpiderfier
|
||
const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
|
||
nearbyDistance: 20,
|
||
});
|
||
|
||
// Setze die Map und OMS in den State
|
||
setMap(initMap);
|
||
setOms(overlappingMarkerSpiderfier);
|
||
|
||
// Falls Rechte geladen sind, füge das Kontextmenü hinzu
|
||
if (hasRights && !setMenuItemAdded) {
|
||
addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
|
||
}
|
||
};
|