nodeMap/utils/setupPolylines.js

// utils/setupPolylines.js
import { findClosestPoints } from "./geometryUtils";
import { redrawPolyline } from "./mapUtils";
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";

// Funktion zum Deaktivieren der Polyline-Ereignisse
export function disablePolylineEvents(polylines) {
  polylines.forEach((polyline) => {
    polyline.off("mouseover");
    polyline.off("mouseout");
  });
}

// Funktion zum Aktivieren der Polyline-Ereignisse
export function enablePolylineEvents(polylines, lineColors) {
  polylines.forEach((polyline) => {
    polyline.on("mouseover", (e) => {
      polyline.setStyle({ weight: 14 });
      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
      localStorage.setItem("lastElementType", "polyline");
      localStorage.setItem("polylineLink", link);
    });

    polyline.on("mouseout", (e) => {
      polyline.setStyle({ weight: 3 });
    });
  });
}

export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker) => {
  const markers = [];
  const polylines = [];

  // Loop über die Linienpositionen
  linePositions.forEach((lineData, lineIndex) => {
    const lineMarkers = [];

    // Loop über die Koordinaten der Linie und Erstellung der Marker
    lineData.coordinates.forEach((coord, index) => {
      let icon = circleIcon;
      if (index === 0) {
        icon = startIcon;
      } else if (index === lineData.coordinates.length - 1) {
        icon = endIcon;
      }

      const marker = L.marker(coord, {
        icon: icon,
        draggable: true,
        contextmenu: true, // Ermögliche das Kontextmenü für Marker
      }).addTo(map);

      // Logik, um Marker zu verschieben und Polyline neu zu zeichnen
      marker.on("dragend", () => {
        const newCoords = marker.getLatLng();
        setNewCoords(newCoords);
        const newCoordinates = [...lineData.coordinates];
        newCoordinates[index] = [newCoords.lat, newCoords.lng];

        const updatedPolyline = L.polyline(newCoordinates, {
          color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
        }).addTo(map);

        updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
          permanent: false,
          direction: "auto",
        });

        updatedPolyline.on("mouseover", () => {
          updatedPolyline.setStyle({ weight: 14 });
          updatedPolyline.bringToFront();
        });

        updatedPolyline.on("mouseout", () => {
          updatedPolyline.setStyle({ weight: 3 });
        });

        // Alte Polyline entfernen und die neue setzen
        polylines[lineIndex].remove();
        polylines[lineIndex] = updatedPolyline;
        lineData.coordinates = newCoordinates;

        // Koordinaten aktualisieren
        const requestData = {
          idModul: lineData.idModul,
          idLD: lineData.idLD,
          newCoordinates,
        };

        fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(requestData),
        })
          .then((response) => {
            if (!response.ok) {
              return response.json().then((data) => {
                throw new Error(data.error || "Unbekannter Fehler");
              });
            }
            return response.json();
          })
          .then((data) => {
            console.log("Koordinaten erfolgreich aktualisiert:", data);
          })
          .catch((error) => {
            console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
          });
      });

      // Marker in die Liste einfügen
      lineMarkers.push(marker);
    });

    // Polyline hinzufügen
    const polyline = L.polyline(lineData.coordinates, {
      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
      weight: 3,
      contextmenu: true, // Ermögliche das Kontextmenü für Polylines
    }).addTo(map);

    // Tooltip für die Polyline hinzufügen
    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
      permanent: false,
      direction: "auto",
    });

    // Hover-Ereignisse für Polylines
    polyline.on("mouseover", (e) => {
      polyline.setStyle({ weight: 14 });
      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
      console.log("Link der Linie:", link);
      localStorage.setItem("lastElementType", "polyline");
      localStorage.setItem("polylineLink", link);
    });

    polyline.on("mouseout", (e) => {
      polyline.setStyle({ weight: 3 });
    });

    // Polyline und Marker in ihre jeweiligen Listen einfügen
    polylines.push(polyline);
    markers.push(...lineMarkers);
  });

  // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
  window.polylines = polylines;
  window.lineColors = lineColors;

  return { markers, polylines };
};