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

WIP: polyline Slice visiblity

Browse Source
This commit is contained in:
ISA
2025-08-20 15:36:34 +02:00
parent ee5319a928
commit 44b29469b9
7 changed files with 26 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/devices/hooks/useDynamicDeviceLayers.js
View File

@@ -31,34 +31,26 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
GisSystemStatic.forEach(({ Name, IdSystem }) => {
const key = `system-${IdSystem}`;
// LayerGroup-Instanzierung und Bereinigung
// LayerGroup immer komplett neu erstellen, um doppelte Marker zu verhindern
if (layerRefs.current[key]) {
// Entferne alte LayerGroup von der Map, falls vorhanden
if (map.hasLayer(layerRefs.current[key])) {
map.removeLayer(layerRefs.current[key]);
}
layerRefs.current[key].clearLayers();
delete layerRefs.current[key];
}
// Neue oder wiederverwendete LayerGroup anlegen und zur Map hinzufügen
if (!layerRefs.current[key]) {
layerRefs.current[key] = new L.LayerGroup();
}
layerRefs.current[key] = new L.LayerGroup();
layerRefs.current[key].addTo(map);
// Debug-Ausgabe
/* console.log(
`[DeviceLayers] LayerGroup für ${key} auf Map hinzugefügt. Aktuelle LayerGroups:`,
Object.keys(layerRefs.current)
); */
createAndSetDevices(
IdSystem,
newMarkers => {
// Füge neue Marker der LayerGroup hinzu (nur Geräte-Marker)
if (layerRefs.current[key]) {
// Entferne alle Marker aus der LayerGroup, bevor neue hinzugefügt werden
layerRefs.current[key].clearLayers();
newMarkers.forEach(marker => {
// Nur LayerGroup verwenden, nicht direkt auf map
// Nur eindeutige Marker hinzufügen
const uniqueMarkers = Array.isArray(newMarkers) ? Array.from(new Set(newMarkers)) : [];
uniqueMarkers.forEach(marker => {
marker.addTo(layerRefs.current[key]);
});
// Debug: Anzahl Marker in LayerGroup
@@ -83,29 +75,20 @@ const useDynamicDeviceLayers = (map, GisSystemStatic, mapLayersVisibility, prior
if (!map) return;
const editMode = localStorage.getItem("editMode") === "true";
Object.entries(markerStates).forEach(([key, markers]) => {
const isVisible = mapLayersVisibility[key] ?? true; // undefined = true
markers.forEach(marker => {
const hasLayer = map.hasLayer(marker);
// Logik korrigiert:
// - Im editMode: alle Marker verstecken
// - Nicht im editMode: nur sichtbare Marker anzeigen (isVisible === true)
if (editMode || isVisible === false) {
// Marker verstecken
if (hasLayer) {
map.removeLayer(marker);
}
} else if (isVisible === true) {
// Marker anzeigen (nur wenn explizit true)
if (!hasLayer) {
marker.addTo(map);
}
Object.entries(layerRefs.current).forEach(([key, layerGroup]) => {
const isVisible = mapLayersVisibility[key] ?? true;
if (editMode || isVisible === false) {
if (map.hasLayer(layerGroup)) {
map.removeLayer(layerGroup);
}
});
} else if (isVisible === true) {
if (!map.hasLayer(layerGroup)) {
layerGroup.addTo(map);
}
}
});
// Overlapping-Check bleibt wie gehabt
const allMarkers = Object.values(markerStates).filter(Array.isArray).flat();
checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
}, [map, markerStates, mapLayersVisibility]);

36
components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
View File

@@ -40,40 +40,24 @@ function MapLayersControlPanel() {
const handlePolylineCheckboxChange = event => {
const checked = event.target.checked;
console.log("🖱️ Kabelstrecken checkbox clicked, new value:", checked);
// Beide localStorage-Variablen setzen für Kompatibilität
setKabelstreckenVisible(checked);
localStorage.setItem("kabelstreckenVisible", checked.toString());
localStorage.setItem("polylineVisible", checked.toString()); // Auch die alte Variable setzen
console.log("💾 Saved to localStorage as kabelstreckenVisible:", checked);
console.log("💾 Saved to localStorage as polylineVisible:", checked);
// Redux für andere Teile der App aktualisieren
localStorage.setItem("polylineVisible", checked.toString());
dispatch(setPolylineVisible(checked));
// Event auslösen, damit andere Komponenten über die Änderung informiert werden
setTimeout(() => {
const event = new Event("polylineVisibilityChanged");
window.dispatchEvent(event);
console.log("📢 Event 'polylineVisibilityChanged' dispatched");
}, 100);
// Wenn Kabelstrecken aktiviert wird, aktiviere automatisch auch TALAS (IdSystem 1)
// Wenn aktiviert, TALAS aktivieren
if (checked) {
const talasKey = "system-1"; // TALAS hat IdSystem 1
const talasKey = "system-1";
dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
// Kartenspezifischer localStorage-Key verwenden
const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId");
const mapStorageKey =
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
const updatedVisibility = { ...mapLayersVisibility, [talasKey]: true };
localStorage.setItem(mapStorageKey, JSON.stringify(updatedVisibility));
console.log("🔗 Kabelstrecken aktiviert → TALAS automatisch aktiviert");
}
};
@@ -221,35 +205,23 @@ function MapLayersControlPanel() {
const handleCheckboxChange = (key, event) => {
if (editMode) return;
const { checked } = event.target;
dispatch(setLayerVisibility({ layer: key, visibility: checked }));
// Kartenspezifischer localStorage-Key verwenden
const mapId = localStorage.getItem("currentMapId");
const userId = localStorage.getItem("currentUserId");
const mapStorageKey =
mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
localStorage.setItem(mapStorageKey, JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
// Wenn TALAS (system-1) deaktiviert wird, deaktiviere automatisch auch Kabelstrecken
// Wenn TALAS (system-1) deaktiviert wird, Kabelstrecken deaktivieren
if (key === "system-1" && !checked) {
console.log("🔗 TALAS deaktiviert → Kabelstrecken automatisch deaktiviert");
// Kabelstrecken deaktivieren
setKabelstreckenVisible(false);
localStorage.setItem("kabelstreckenVisible", "false");
localStorage.setItem("polylineVisible", "false");
dispatch(setPolylineVisible(false));
// Event für Kabelstrecken auslösen
setTimeout(() => {
const polylineEvent = new Event("polylineVisibilityChanged");
window.dispatchEvent(polylineEvent);
console.log("📢 Event 'polylineVisibilityChanged' dispatched (auto-deactivated)");
}, 50);
}
setTimeout(() => {
const event = new Event("visibilityChanged");
window.dispatchEvent(event);