Files
nodeMap/components/useMapContextMenu.js
2024-12-30 12:19:30 +01:00

173 lines
5.2 KiB
JavaScript

import { toast } from "react-toastify";
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Utility-Funktionen
const zoomInCallback = (e, map) => {
zoomIn(e, map);
};
const zoomOutCallback = (map) => {
zoomOut(map);
};
const centerHereCallback = (e, map) => {
centerHere(e, map);
};
// Hilfsfunktion zur Umwandlung in das DMS-Format
const toDMS = (decimal, isLat) => {
const direction = decimal >= 0 ? (isLat ? "N" : "E") : isLat ? "S" : "W";
const absDecimal = Math.abs(decimal);
const degrees = Math.floor(absDecimal);
const minutesDecimal = (absDecimal - degrees) * 60;
const minutes = Math.floor(minutesDecimal);
const seconds = ((minutesDecimal - minutes) * 60).toFixed(1);
return `${degrees}°${minutes}'${seconds}"${direction}`;
};
// Funktion zum Anzeigen und Kopieren der Koordinaten
const showCoordinates = (e) => {
const latDMS = toDMS(e.latlng.lat, true);
const lngDMS = toDMS(e.latlng.lng, false);
const coordinates = `${latDMS} ${lngDMS}`;
// Überprüfen, ob das Clipboard-API unterstützt wird
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard
.writeText(coordinates)
.then(() => {
toast.success("Koordinaten wurden kopiert: " + coordinates, {
position: "top-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
})
.catch((err) => {
toast.error("Fehler beim Kopieren der Koordinaten!", {
position: "top-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
console.error("Fehler beim Kopieren: ", err);
});
} else {
// Fallback für ältere Browser
const textArea = document.createElement("textarea");
textArea.value = coordinates;
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand("copy");
toast.success("Koordinaten wurden kopiert: " + coordinates, {
position: "top-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
} catch (err) {
toast.error("Fehler beim Kopieren der Koordinaten!", {
position: "top-center",
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
console.error("Fehler beim Kopieren: ", err);
}
document.body.removeChild(textArea);
}
};
// Kontextmenü Callback für "POI hinzufügen"
const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => {
const editMode = localStorage.getItem("editMode") === "true";
hasRights = editMode ? hasRights : undefined;
if (hasRights) {
setPopupCoordinates(event.latlng);
setShowPopup(true);
} else {
toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
position: "top-center",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}
};
export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates) => {
// Überprüfe den Bearbeitungsmodus in localStorage
const editMode = localStorage.getItem("editMode") === "true";
hasRights = editMode ? hasRights : undefined;
if (!menuItemAdded && map && map.contextmenu) {
// Event-Listener für Rechtsklick
map.on("contextmenu", (e) => {
// Entferne alle vorherigen dynamischen Einträge
map.contextmenu.removeAllItems();
// Koordinaten dynamisch anzeigen
const latDMS = toDMS(e.latlng.lat, true);
const lngDMS = toDMS(e.latlng.lng, false);
const coordinates = `${latDMS} ${lngDMS}`;
map.contextmenu.addItem({
text: coordinates,
icon: "img/not_listed_location.png",
callback: () => showCoordinates(e),
});
map.contextmenu.addItem({ separator: true });
// Zoom-In
map.contextmenu.addItem({
text: "Reinzoomen",
icon: "img/zoom_in.png",
callback: (e) => zoomInCallback(e, map),
});
// Zoom-Out
map.contextmenu.addItem({
text: "Rauszoomen",
icon: "img/zoom_out.png",
callback: () => zoomOutCallback(map),
});
// Hier zentrieren
map.contextmenu.addItem({
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: (e) => centerHereCallback(e, map),
});
// POI hinzufügen (wenn Bearbeitungsmodus aktiviert ist)
if (editMode) {
map.contextmenu.addItem({ separator: true });
map.contextmenu.addItem({
text: "POI hinzufügen",
icon: "img/add_station.png",
className: "background-red",
callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates),
});
}
});
setMenuItemAdded(true);
}
};