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

cleanup: veraltete datei für Layers gelöscht

Browse Source
This commit is contained in:
ISA
2025-06-04 07:52:12 +02:00
parent 5cf84fb14e
commit 66afc1cee7
10 changed files with 57 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
hooks/layers/useDrawLines.js
View File

@@ -1,40 +0,0 @@
// /hooks/layers/useDrawLines.js
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchGisLinesThunk } from "../../redux/thunks/database/polylines/fetchGisLinesThunk";
import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSlice";
const useDrawLines = (setLinePositions) => {
const dispatch = useDispatch();
const gisLines = useSelector(selectGisLines);
// Daten laden (nur einmal)
useEffect(() => {
dispatch(fetchGisLinesThunk());
}, [dispatch]);
// Linien aus GIS-Daten berechnen
useEffect(() => {
if (!Array.isArray(gisLines)) return;
try {
const newLinePositions = gisLines.map((item) => {
if (item.points && Array.isArray(item.points)) {
return {
coordinates: item.points.map((point) => [point.x, point.y]),
idModul: item.idModul,
idLD: item.idLD,
};
} else {
throw new Error("Points missing or not an array");
}
});
setLinePositions(newLinePositions);
} catch (err) {
console.error("❌ Fehler beim Zeichnen der Linien:", err.message);
}
}, [gisLines, setLinePositions]);
};
export default useDrawLines;

39
hooks/layers/useMessstellenMarkersLayer.js
View File

@@ -1,39 +0,0 @@
/* // /hooks/layers/useMessstellenMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";
const useMessstellenMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
const [messstellenMarkers, setMessstellenMarkers] = useState([]);
useEffect(() => {
if (GisSystemStatic && GisSystemStatic.length && map) {
createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen
}
}, [GisSystemStatic, map, priorityConfig]);
useEffect(() => {
if (map && messstellenMarkers.length) {
messstellenMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
// Popup on mouseover and mouseout
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
}
}, [map, messstellenMarkers, oms]);
return messstellenMarkers;
};
export default useMessstellenMarkersLayer;
*/

16
hooks/layers/useAreaMarkersLayer.js → hooks/useAreaMarkersLayer.js
View File

@@ -3,7 +3,7 @@ import { useEffect, useState, useRef } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { useDispatch } from "react-redux";
import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";
import { updateAreaThunk } from "@/redux/thunks/database/area/updateAreaThunk";
const customIcon = new L.Icon({
iconUrl: "/img/bereich.png",
@@ -23,12 +23,12 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
if (!map || areaMarkers.length === 0) return;
const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
const areAllLayersInvisible = Object.values(mapLayersVisibility).every((v) => !v);
const areAllLayersInvisible = Object.values(mapLayersVisibility).every(v => !v);
if (areAllLayersInvisible === prevVisibility.current) return;
prevVisibility.current = areAllLayersInvisible;
areaMarkers.forEach((marker) => {
areaMarkers.forEach(marker => {
if (areAllLayersInvisible) {
marker.addTo(map);
if (oms) oms.addMarker(marker);
@@ -41,7 +41,7 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
useEffect(() => {
updateMarkersVisibility();
const handleStorageChange = (event) => {
const handleStorageChange = event => {
if (event.key === "mapLayersVisibility") {
updateMarkersVisibility();
}
@@ -64,7 +64,7 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
const data = await response.json();
const markers = data.map((item) => {
const markers = data.map(item => {
const marker = L.marker([item.x, item.y], {
icon: customIcon,
draggable: true,
@@ -80,7 +80,7 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
}
);
marker.on("dragend", async (e) => {
marker.on("dragend", async e => {
const { lat, lng } = e.target.getLatLng();
try {
await dispatch(
@@ -112,12 +112,12 @@ const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
useEffect(() => {
if (map) {
areaMarkers.forEach((marker) => marker.addTo(map));
areaMarkers.forEach(marker => marker.addTo(map));
}
return () => {
if (map) {
areaMarkers.forEach((marker) => map.removeLayer(marker));
areaMarkers.forEach(marker => map.removeLayer(marker));
}
};
}, [map, areaMarkers]);

22
hooks/useCreateAndSetDevices.js
View File

@@ -1,22 +0,0 @@
// /hooks/useCreateAndSetDevices.js
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { createAndSetDevices } from "../utils/devices/createAndSetDevices";
import { selectGisStationsMeasurements } from "../redux/slices/webservice/gisStationsMeasurementsSlice";
const useCreateAndSetDevices = (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
const polylineEventsDisabled = useSelector((state) => state.polylineEventsDisabled.disabled);
const measurements = useSelector(selectGisStationsMeasurements); // ✅ NEU
useEffect(() => {
createAndSetDevices(
systemId,
setMarkersFunction,
GisSystemStatic,
priorityConfig,
measurements // ✅ NEU
);
}, [systemId, setMarkersFunction, GisSystemStatic, priorityConfig, polylineEventsDisabled, measurements]);
};
export default useCreateAndSetDevices;

6
hooks/layers/useDynamicDeviceLayers.js → hooks/useDynamicDeviceLayers.js
View File

@@ -1,9 +1,9 @@
// /hooks/layers/useDynamicDeviceLayers.js
import { useEffect, useRef, useState } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../../utils/devices/createAndSetDevices";
import { checkOverlappingMarkers } from "../../utils/mapUtils";
import plusRoundIcon from "../../components/icons/devices/overlapping/PlusRoundIcon";
import { createAndSetDevices } from "../utils/devices/createAndSetDevices";
import { checkOverlappingMarkers } from "../utils/mapUtils";
import plusRoundIcon from "../components/icons/devices/overlapping/PlusRoundIcon";
/**
* Dynamisch GIS-System-Marker erstellen & Sichtbarkeit steuern.

47
hooks/useDynamicMarkerLayers.js
View File

@@ -1,47 +0,0 @@
import { useEffect, useRef } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
import { checkOverlappingMarkers } from "../utils/markerUtils";
import { plusRoundIcon } from "../components/PlusRoundIcon.js";
export const useDynamicMarkerLayers = (
map,
GisSystemStatic,
mapLayersVisibility,
priorityConfig,
setMarkerStates // Funktion wie setMarkers(z.B. map.setMarkers(prev => ({...prev, [systemName]: markers})))
) => {
const layerRefs = useRef({}); // dynamisch pro systemName
useEffect(() => {
if (!map || !Array.isArray(GisSystemStatic?.Systems)) return;
GisSystemStatic.Systems.forEach(system => {
const { id, System_Name } = system;
if (!layerRefs.current[System_Name]) {
layerRefs.current[System_Name] = new L.LayerGroup().addTo(map);
}
// Sichtbarkeit prüfen
const isVisible = mapLayersVisibility?.[System_Name] ?? false;
const layer = layerRefs.current[System_Name];
layer.clearLayers();
createAndSetDevices(
id,
markers => {
setMarkerStates(prev => ({ ...prev, [System_Name]: markers }));
if (isVisible) {
markers.forEach(marker => layer.addLayer(marker));
}
checkOverlappingMarkers(map, markers, plusRoundIcon);
},
GisSystemStatic,
priorityConfig
);
});
}, [map, GisSystemStatic, mapLayersVisibility, priorityConfig]);
};

26
hooks/useMarkerLayers.js
View File

@@ -1,26 +0,0 @@
// /hooks/useMarkerLayers.js
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { selectMapLayersState } from "../redux/slices/mapLayersSlice";
const useMarkerLayers = (map, markers, layerType) => {
const mapLayersVisibility = useSelector(selectMapLayersState);
useEffect(() => {
if (!map || !markers) return;
const toggleLayer = (isVisible) => {
markers.forEach((marker) => {
if (isVisible) {
marker.addTo(map);
} else {
map.removeLayer(marker);
}
});
};
toggleLayer(mapLayersVisibility[layerType]);
}, [map, markers, mapLayersVisibility, layerType]);
};
export default useMarkerLayers;

70
hooks/usePolylineTooltipLayer.js
View File

@@ -1,70 +0,0 @@
// hooks/usePolylineTooltipLayer.js
import { useEffect } from "react";
import L from "leaflet";
import { setupPolylines } from "../utils/polylines/setupPolylines";
//Tooltip an mouse position anzeigen für die Linien
export const usePolylineTooltipLayer = (map, markers, polylines, setMarkers, setPolylines, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible, newPoint, newCoords) => {
useEffect(() => {
if (!map) return;
// Entferne alte Marker und Polylinien
markers.forEach((marker) => marker.remove());
polylines.forEach((polyline) => polyline.remove());
// Setze neue Marker und Polylinien mit den aktuellen Daten
const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
map,
linePositions,
lineColors,
tooltipContents,
setNewCoords,
tempMarker,
polylineVisible // polylineVisible wird jetzt korrekt übergeben
);
newPolylines.forEach((polyline, index) => {
const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt";
polyline.bindTooltip(tooltipContent, {
permanent: false,
direction: "auto",
sticky: true,
offset: [20, 0],
pane: "tooltipPane",
});
polyline.on("mouseover", (e) => {
const tooltip = polyline.getTooltip();
if (tooltip) {
const mousePos = e.containerPoint;
const mapSize = map.getSize();
let direction = "right";
if (mousePos.x > mapSize.x - 100) {
direction = "left";
} else if (mousePos.x < 100) {
direction = "right";
}
if (mousePos.y > mapSize.y - 100) {
direction = "top";
} else if (mousePos.y < 100) {
direction = "bottom";
}
tooltip.options.direction = direction;
polyline.openTooltip(e.latlng);
}
});
polyline.on("mouseout", () => {
polyline.closeTooltip();
});
});
setMarkers(newMarkers);
setPolylines(newPolylines);
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
};