From 96b2ee34d716631ca29ad42ab7df6345b0e5f828 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 28 Jun 2024 07:47:31 +0200
Subject: [PATCH] feat: [WIP] delete marker inside polyline

---
 components/MapComponent.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/components/MapComponent.js b/components/MapComponent.js
index ec6f6f8e7..1c75a6c6a 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -2306,10 +2306,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         } else if (index === lineData.coordinates.length - 1) {
           icon = endIcon; // End-Icon für den letzten Punkt
         }
-
         const marker = L.marker(coord, {
           icon: icon,
           draggable: true,
+          contextmenu: true,
+          contextmenuInheritItems: false,
+          contextmenuItems: [], // Starte mit einem leeren Menü
         }).addTo(map);
 
         marker.on("dragend", () => {
@@ -2374,6 +2376,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             });
         });
 
+        // Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist
+        marker.on("mouseover", function () {
+          this.options.contextmenuItems.push({
+            text: "Marker entfernen",
+            callback: () => removeMarker(marker, lineData),
+          });
+        });
+
+        // Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt
+        marker.on("mouseout", function () {
+          this.options.contextmenuItems.pop();
+        });
+
         lineMarkers.push(marker);
       });
 
@@ -2533,6 +2548,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }).addTo(map);
   }
 
+  //---------------------------------------------------------
+  //----------------- delete markers and polylines -------------------
+
+  function removeMarker(marker, lineData) {
+    const index = lineData.coordinates.findIndex((coord) =>
+      L.latLng(coord[0], coord[1]).equals(marker.getLatLng())
+    );
+    if (index !== -1) {
+      lineData.coordinates.splice(index, 1); // Entferne die Koordinaten des Markers
+      redrawPolyline(lineData, map); // Neuzeichnen der Polylinie
+      marker.remove(); // Entferne den Marker von der Karte
+      saveLineData(lineData); // Speichern der neuen Linienkoordinaten
+    }
+  }
+
   //---------------------------------------------------------
   //---------------------------------------------------------