Jetzt muss noch Links für polylines mit localStorage oder Recoil gelöst werden, alle Links für alle Geräte funktionieren gut

This commit is contained in:
ISA
2024-09-04 09:52:52 +02:00
parent 3c433b9003
commit eea9a3af4c
3 changed files with 26 additions and 68 deletions

View File

@@ -5,9 +5,7 @@ import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import * as urls from "../config/urls.js"; import * as urls from "../config/urls.js";
import * as layers from "../config/layers.js"; import * as layers from "../config/layers.js";
import { addContextMenuToMarker } from "./addContextMenuToMarker.js"; import { openInNewTab } from "./openInNewTab.js"; // Korrigiert
import { openInNewTab } from "./openInNewTab.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines.js";
export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => { export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
if (mapRef.current) { if (mapRef.current) {
@@ -24,10 +22,13 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
text: "Station öffnen (Tab)", text: "Station öffnen (Tab)",
icon: "/img/screen_new.png", icon: "/img/screen_new.png",
callback: (e) => { callback: (e) => {
const clickedMarker = e.relatedTarget; const clickedElement = e.relatedTarget;
if (clickedMarker) {
// Verwende die Funktion zum Öffnen in einem neuen Tab // Überprüfe, ob der Kontextklick auf eine Polyline oder einen Marker erfolgt ist
openInNewTab(e, clickedMarker); if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
openInNewTab(e, clickedElement); // Verwende openInNewTab für beide Fälle
} else {
console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
} }
}, },
}, },

View File

@@ -1,4 +1,4 @@
// /utils/openInNewTab.js // utils/openInNewTab.js
export function openInNewTab(e, target) { export function openInNewTab(e, target) {
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL; const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
@@ -8,9 +8,8 @@ export function openInNewTab(e, target) {
if (target instanceof L.Marker && target.options.link) { if (target instanceof L.Marker && target.options.link) {
// Verwende den Link, der im Marker gespeichert ist // Verwende den Link, der im Marker gespeichert ist
link = `${BASE_URL}${target.options.link}`; link = `${BASE_URL}${target.options.link}`;
//link = target.options.link;
} else if (target instanceof L.Polyline) { } else if (target instanceof L.Polyline) {
// Polyline-Logik bleibt unverändert // Polyline-Logik
const idLD = target.options.idLD; const idLD = target.options.idLD;
if (idLD) { if (idLD) {
link = `${BASE_URL}cpl.aspx?id=${idLD}`; link = `${BASE_URL}cpl.aspx?id=${idLD}`;

View File

@@ -1,14 +1,9 @@
// utils/setupPolylines.js // utils/setupPolylines.js
import { findClosestPoints } from "./geometryUtils"; import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect"; import { redrawPolyline } from "./mapUtils";
import { updateLocationInDatabase } from "../services/apiService";
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
import { parsePoint } from "./geometryUtils";
import circleIcon from "../components/gisPolylines/icons/CircleIcon"; import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon"; import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon"; import endIcon from "../components/gisPolylines/icons/EndIcon";
import { redrawPolyline } from "./mapUtils";
import { openInNewTab } from "./openInNewTab";
// Funktion zum Deaktivieren der Polyline-Ereignisse // Funktion zum Deaktivieren der Polyline-Ereignisse
export function disablePolylineEvents(polylines) { export function disablePolylineEvents(polylines) {
@@ -22,7 +17,6 @@ export function disablePolylineEvents(polylines) {
export function enablePolylineEvents(polylines, lineColors) { export function enablePolylineEvents(polylines, lineColors) {
polylines.forEach((polyline) => { polylines.forEach((polyline) => {
polyline.on("mouseover", (e) => { polyline.on("mouseover", (e) => {
//console.log("Mouseover on polyline", polyline.options);
polyline.setStyle({ weight: 14 }); polyline.setStyle({ weight: 14 });
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`; const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
localStorage.setItem("lastElementType", "polyline"); localStorage.setItem("lastElementType", "polyline");
@@ -30,19 +24,20 @@ export function enablePolylineEvents(polylines, lineColors) {
}); });
polyline.on("mouseout", (e) => { polyline.on("mouseout", (e) => {
//console.log("Mouseout from polyline", polyline.options);
polyline.setStyle({ weight: 3 }); polyline.setStyle({ weight: 3 });
}); });
}); });
} }
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => { export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker) => {
const markers = []; const markers = [];
const polylines = []; const polylines = [];
// Loop über die Linienpositionen
linePositions.forEach((lineData, lineIndex) => { linePositions.forEach((lineData, lineIndex) => {
const lineMarkers = []; const lineMarkers = [];
// Loop über die Koordinaten der Linie und Erstellung der Marker
lineData.coordinates.forEach((coord, index) => { lineData.coordinates.forEach((coord, index) => {
let icon = circleIcon; let icon = circleIcon;
if (index === 0) { if (index === 0) {
@@ -54,11 +49,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
const marker = L.marker(coord, { const marker = L.marker(coord, {
icon: icon, icon: icon,
draggable: true, draggable: true,
contextmenu: true, contextmenu: true, // Ermögliche das Kontextmenü für Marker
contextmenuInheritItems: false,
contextmenuItems: [],
}).addTo(map); }).addTo(map);
// Logik, um Marker zu verschieben und Polyline neu zu zeichnen
marker.on("dragend", () => { marker.on("dragend", () => {
const newCoords = marker.getLatLng(); const newCoords = marker.getLatLng();
setNewCoords(newCoords); setNewCoords(newCoords);
@@ -75,7 +69,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
}); });
updatedPolyline.on("mouseover", () => { updatedPolyline.on("mouseover", () => {
updatedPolyline.setStyle({ weight: 20 }); updatedPolyline.setStyle({ weight: 14 });
updatedPolyline.bringToFront(); updatedPolyline.bringToFront();
}); });
@@ -83,10 +77,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
updatedPolyline.setStyle({ weight: 3 }); updatedPolyline.setStyle({ weight: 3 });
}); });
// Alte Polyline entfernen und die neue setzen
polylines[lineIndex].remove(); polylines[lineIndex].remove();
polylines[lineIndex] = updatedPolyline; polylines[lineIndex] = updatedPolyline;
lineData.coordinates = newCoordinates; lineData.coordinates = newCoordinates;
// Koordinaten aktualisieren
const requestData = { const requestData = {
idModul: lineData.idModul, idModul: lineData.idModul,
idLD: lineData.idLD, idLD: lineData.idLD,
@@ -116,75 +112,37 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
}); });
}); });
marker.on("mouseover", function () { // Marker in die Liste einfügen
this.bindContextMenu({
contextmenuItems: [
{
text: "Stützpunkt entfernen",
icon: "/img/icons/gisLines/remove-support-point.svg",
callback: () => {
const newCoords = marker.getLatLng();
const newCoordinates = [...lineData.coordinates];
newCoordinates[index] = [newCoords.lat, newCoords.lng];
removePOI(marker, lineData, currentZoom, currentCenter);
polylines[lineIndex].remove();
lineData.coordinates = newCoordinates;
},
},
],
});
});
marker.on("mouseout", function () {
this.unbindContextMenu();
});
lineMarkers.push(marker); lineMarkers.push(marker);
}); });
// Polyline hinzufügen
const polyline = L.polyline(lineData.coordinates, { const polyline = L.polyline(lineData.coordinates, {
color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000", color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
weight: 3, weight: 3,
contextmenu: true, contextmenu: true, // Ermögliche das Kontextmenü für Polylines
contextmenuItems: [
{
text: "Stützpunkt hinzufügen",
icon: "/img/icons/gisLines/add-support-point.svg",
callback: (e) => {
if (tempMarker) {
tempMarker.remove();
}
const newPoint = e.latlng;
const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
insertNewPOI(closestPoints, newPoint, lineData, map);
redrawPolyline(lineData, lineColors, tooltipContents, map);
window.location.reload();
},
},
],
}).addTo(map); }).addTo(map);
// Hier wird der Tooltip hinzugefügt // Tooltip für die Polyline hinzufügen
polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", { polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
permanent: false, permanent: false,
direction: "auto", direction: "auto",
}); });
// Hover-Ereignisse für Polylines
polyline.on("mouseover", (e) => { polyline.on("mouseover", (e) => {
//console.log("Mouseover on polyline", lineData);
polyline.setStyle({ weight: 14 }); polyline.setStyle({ weight: 14 });
const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`; const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
console.log("Link der Linie:", link); console.log("Link der Linie:", link);
localStorage.setItem("lastElementType", "polyline"); localStorage.setItem("lastElementType", "polyline");
localStorage.setItem("polylineLink", link); localStorage.setItem("polylineLink", link);
}); });
polyline.on("mouseout", (e) => { polyline.on("mouseout", (e) => {
// console.log("Mouseout from polyline", lineData);
polyline.setStyle({ weight: 3 }); polyline.setStyle({ weight: 3 });
}); });
// Polyline und Marker in ihre jeweiligen Listen einfügen
polylines.push(polyline); polylines.push(polyline);
markers.push(...lineMarkers); markers.push(...lineMarkers);
}); });