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

feat: Marker-Cleanup zur Vermeidung von Memory Leaks implementiert

Browse Source 
- cleanupMarkers() Utility in /utils/common/cleanupMarkers.js erstellt
- Marker-Cleanup in MapComponent.js vor createAndSetDevices() integriert
- createAndSetDevices.js von Cleanup-Verantwortung befreit (reine Erzeugung)
- setupPOIs.js erweitert um cleanupMarkers() vor Layer-Neuerstellung
- poiUtils.js und markerUtils.js angepasst: cleanupMarkers() ersetzt .remove()
- Memory Leaks durch verwaiste Tooltips, Events und Marker behoben
- Grundlage für wiederverwendbare Marker-Cleanup-Logik für POIs, Geräte, Linien geschaffen
This commit is contained in:
ISA
2025-06-06 10:21:56 +02:00
parent ec31b36b3d
commit f7f7122620
10 changed files with 160 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
utils/setupPOIs.js
View File

@@ -3,6 +3,7 @@ import { parsePoint } from "./geometryUtils";
import { handleEditPoi } from "./poiUtils";
import { updateLocationInDatabaseService } from "../services/database/updateLocationInDatabaseService";
import { setSelectedPoi, clearSelectedPoi } from "../redux/slices/database/pois/selectedPoiSlice";
import { cleanupMarkers } from "@/utils/common/cleanupMarkers";
export const setupPOIs = async (
map,
@@ -28,13 +29,17 @@ export const setupPOIs = async (
// ✅ Mapping vorbereiten: idPoi → icon path
const iconMap = new Map();
poiData.forEach((item) => {
poiData.forEach(item => {
if (item.idPoi && item.path) {
iconMap.set(item.idPoi, item.path);
}
});
if (map && poiLayerRef.current) {
const existingMarkers = poiLayerRef.current?.getLayers?.();
if (existingMarkers?.length) {
cleanupMarkers(existingMarkers);
}
map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
@@ -42,11 +47,13 @@ export const setupPOIs = async (
try {
const { latitude, longitude } = parsePoint(poi.position);
const poiTypName = poiTypMap.get(poi.idPoiTyp) || "Unbekannt";
const canDrag = userRights ? userRights.some((r) => r.IdRight === 56) : false;
const canDrag = userRights ? userRights.some(r => r.IdRight === 56) : false;
// ✅ Icon korrekt über idPoi auflösen
const iconPath = iconMap.get(poi.idPoi);
const iconUrl = iconPath ? `/img/icons/pois/${iconPath}` : "/img/icons/pois/default-icon.png";
const iconUrl = iconPath
? `/img/icons/pois/${iconPath}`
: "/img/icons/pois/default-icon.png";
const marker = L.marker([latitude, longitude], {
icon: L.icon({
@@ -72,7 +79,15 @@ export const setupPOIs = async (
{
text: "POI Bearbeiten",
icon: "/img/poi-edit.png",
callback: () => handleEditPoi(marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast),
callback: () =>
handleEditPoi(
marker,
userRights,
setCurrentPoiData,
setShowPoiUpdateModal,
fetchPoiData,
toast
),
},
],
});
@@ -80,12 +95,12 @@ export const setupPOIs = async (
marker.bindTooltip(
`
<div class="bg-white text-gray-800 text-sm rounded-xl px-4 py-2 w-56">
<div class="font-semibold text-blue-500 mb-1">${poi.description || "Unbekannt"}</div>
<div class="text-gray-600 text-sm">Gerät: ${deviceName || "unbekannt"}</div>
<div class="text-gray-600 text-sm">Typ: ${poiTypName}</div>
</div>
`,
<div class="bg-white text-gray-800 text-sm rounded-xl px-4 py-2 w-56">
<div class="font-semibold text-blue-500 mb-1">${poi.description || "Unbekannt"}</div>
<div class="text-gray-600 text-sm">Gerät: ${deviceName || "unbekannt"}</div>
<div class="text-gray-600 text-sm">Typ: ${poiTypName}</div>
</div>
`,
{
direction: "top",
offset: [0, -10],
@@ -105,7 +120,7 @@ export const setupPOIs = async (
//this.closePopup();
});
marker.on("dragend", (e) => {
marker.on("dragend", e => {
if (canDrag) {
const newLat = e.target.getLatLng().lat;
const newLng = e.target.getLatLng().lng;