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

fix: Duplizierte Kontextmenü-Einträge verhindert und Cleanup hinzugefügt

Browse Source 
- Kontextmenü wird jetzt nur einmal hinzugefügt, wenn es noch nicht existiert.
- Vor dem Hinzufügen wird geprüft, ob bereits Einträge existieren, um Duplikate zu vermeiden.
- Kontextmenü wird entfernt, wenn außerhalb geklickt wird, um Speicherlecks zu verhindern.
- Nutzung eines `Set()` für Menü-IDs, um doppelte Einträge sicher zu verhindern.
This commit is contained in:
ISA
2025-03-11 16:19:11 +01:00
parent b8e3385fff
commit 449d19a728
10 changed files with 279 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
utils/createAndSetDevices.js
View File

@@ -6,6 +6,8 @@ import * as config from "../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "./polylines/setupPolylines.js";
import { store } from "../redux/store";
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";
import { setSelectedDevice, clearSelectedDevice } from "../redux/slices/selectedDeviceSlice";
import { addContextMenuToMarker } from "./contextMenuUtils.js";
const determinePriority = (iconPath, priorityConfig) => {
for (let priority of priorityConfig) {
@@ -80,39 +82,98 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
areaName: station.Area_Name,
link: station.Link,
zIndexOffset: zIndexOffset,
deviceName: station.Device,
idDevice: station.IdLD, // ✅ Sicherstellen, dass `idDevice` existiert
});
marker.bindPopup(`
<div class="bg-white rounded-lg">
<span class="text-lg font-semibold text-gray-900"> ${station.LD_Name}</span>
<span class="text-md font-bold text-gray-800">${station.Device}</span><br>
<span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
<div class="mt-2">
${statusDistrictData.Statis.filter((status) => status.IdLD === station.IdLD)
.reverse()
.map(
(status) => `
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`
)
.join("")}
</div>
const popupContent = `
<div class="bg-white rounded-lg">
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
<span class="text-md font-bold text-gray-800">${station.Device}</span><br>
<span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
<div class="mt-2">
${statusDistrictData.Statis.filter((status) => status.IdLD === station.IdLD)
.reverse()
.map(
(status) => `
<div class="flex items-center my-1">
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
</div>
`);
`
)
.join("")}
</div>
</div>
`;
marker.bindPopup(popupContent);
marker.on("mouseover", () => marker.openPopup());
marker.on("mouseout", () => marker.closePopup());
marker.on("contextmenu", (event) => {
if (event.originalEvent?.preventDefault) {
event.originalEvent.preventDefault();
}
marker.openPopup();
// Redux: Gerät setzen
marker.on("mouseover", () => {
//console.log("✅ Gerät erkannt:", station);
store.dispatch(setSelectedDevice({ id: station.IdLD, name: station.Device, area: station.Area_Name }));
marker.openPopup(); // Bestehender Code bleibt erhalten
});
//-----------------------------------
//-----------------------------------
// Variable zum Speichern der hinzugefügten Menüeinträge
let contextMenuItemIds = new Set();
const addDeviceContextMenu = (map, marker) => {
if (map && map.contextmenu) {
// Vor dem Hinzufügen sicherstellen, dass vorherige Menüeinträge entfernt werden
if (contextMenuItemIds.size > 0) {
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
contextMenuItemIds.clear(); // Set zurücksetzen
}
// Menüeinträge hinzufügen
const editItem = map.contextmenu.addItem({
text: "Gerät bearbeiten",
icon: "img/edit.png",
callback: () => console.log(`Bearbeite Gerät: ${marker.options.deviceName}`),
});
const deleteItem = map.contextmenu.addItem({
text: "Gerät entfernen",
icon: "img/delete.png",
callback: () => console.log(`Entferne Gerät: ${marker.options.deviceName}`),
});
const separator = map.contextmenu.addItem({ separator: true });
const detailsItem = map.contextmenu.addItem({
text: "Details anzeigen",
icon: "img/details.png",
callback: () => console.log(`Details für Gerät: ${marker.options.deviceName}`),
});
// IDs speichern
contextMenuItemIds.add(editItem);
contextMenuItemIds.add(deleteItem);
contextMenuItemIds.add(separator);
contextMenuItemIds.add(detailsItem);
}
};
// `contextmenu`-Event für Marker
marker.on("contextmenu", (event) => {
event.originalEvent?.preventDefault();
marker.openPopup();
addDeviceContextMenu(map, marker);
});
// Menü entfernen, wenn außerhalb des Markers geklickt wird
map.on("click", () => {
if (map.contextmenu && contextMenuItemIds.size > 0) {
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
contextMenuItemIds.clear();
}
});
//-----------------------------------
//-----------------------------------
if (typeof marker.bounce === "function" && statis) {
marker.on("add", () => marker.bounce(3));
}