nodeMap/utils/setupPolylines.js

// utils/setupPolylines.js
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/apiService";
import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
import { parsePoint } from "./geometryUtils";
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
import { redrawPolyline } from "./mapUtils";
import { openInNewTab } from "./contextMenuUtils";

// 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) => {
      console.log("Mouseover on polyline", polyline.options);
      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) => {
      console.log("Mouseout from polyline", polyline.options);
      polyline.setStyle({ weight: 3 });
    });
  });
}

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

  linePositions.forEach((lineData, lineIndex) => {
    const lineMarkers = [];

    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,
        contextmenuInheritItems: false,
        contextmenuItems: [],
      }).addTo(map);

      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: 20 });
          updatedPolyline.bringToFront();
        });

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

        polylines[lineIndex].remove();
        polylines[lineIndex] = updatedPolyline;
        lineData.coordinates = newCoordinates;

        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.on("mouseover", function () {
        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];

                removeMarker(marker, lineData, currentZoom, currentCenter);
                polylines[lineIndex].remove();
                lineData.coordinates = newCoordinates;
              },
            },
          ],
        });
      });

      marker.on("mouseout", function () {
        this.unbindContextMenu();
      });

      lineMarkers.push(marker);
    });

    const polyline = L.polyline(lineData.coordinates, {
      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
      weight: 3,
      contextmenu: true,
      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);
            insertNewMarker(closestPoints, newPoint, lineData, map);
            redrawPolyline(lineData, lineColors, tooltipContents, map);
            window.location.reload();
          },
        },
      ],
    }).addTo(map);

    // Hier wird der Tooltip hinzugefügt
    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
      permanent: false,
      direction: "auto",
    });

    polyline.on("mouseover", (e) => {
      console.log("Mouseover on polyline", lineData);
      polyline.setStyle({ weight: 14 });
      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
      localStorage.setItem("lastElementType", "polyline");
      localStorage.setItem("polylineLink", link);
    });

    polyline.on("mouseout", (e) => {
      console.log("Mouseout from polyline", lineData);
      polyline.setStyle({ weight: 3 });
    });

    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 };
};