Recoil Statefpr polylines and Devices in process

components/MapComponent.js

@@ -9,7 +9,6 @@ import {
   urls,
   OverlappingMarkerSpiderfier,
   DataSheet,
-  useRecoilState,
   useRecoilValue,
   useSetRecoilState,
   gisStationsStaticDistrictState,
@@ -66,7 +65,13 @@ import {
   useLayerVisibility,
   useLineData,
 } from "./imports.js";
+import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
+//import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
 import { useMapComponentState } from "../hooks/useMapComponentState";
+import { useRecoilState } from "recoil";
+import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
+import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
+
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const { deviceName, setDeviceName } = useMapComponentState();
   const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
@@ -343,6 +348,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
+  //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig);
+
   useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS");
   useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI");
   useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem");

hooks/useCreateAndSetDevices.js

@@ -0,0 +1,15 @@
+// /hooks/useCreateAndSetDevices.js
+import { useEffect } from "react";
+import { useRecoilState } from "recoil";
+import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
+import { createAndSetDevices } from "../utils/createAndSetDevices";
+
+const useCreateAndSetDevices = (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
+  const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState);
+
+  useEffect(() => {
+    createAndSetDevices(systemId, setMarkersFunction, GisSystemStatic, priorityConfig, setPolylineEventsDisabled);
+  }, [systemId, setMarkersFunction, GisSystemStatic, priorityConfig, setPolylineEventsDisabled]);
+};
+
+export default useCreateAndSetDevices;

store/atoms/polylineEventsDisabledState.js

@@ -0,0 +1,7 @@
+// /store/atoms/polylineEventsDisabledState.js
+import { atom } from "recoil";
+
+export const polylineEventsDisabledState = atom({
+  key: "polylineEventsDisabledState",
+  default: false,
+});

utils/createAndSetDevices.js

@@ -5,6 +5,7 @@ import "leaflet.smooth_marker_bouncing";
 import { toast } from "react-toastify";
 import * as config from "../config/config.js";
 import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
+import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand
 
 // Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
 const determinePriority = (iconPath, priorityConfig) => {
@@ -53,14 +54,29 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
         });
 
         // Verwende das `contextmenu`-Ereignis für den Rechtsklick
-        marker.on("contextmenu", function (event) {
+        /*     marker.on("contextmenu", function (event) {
           if (event && event.preventDefault) {
             event.preventDefault(); // Verhindert das Standard-Kontextmenü
           }
           disablePolylineEvents(window.polylines);
           this.openPopup();
         });
+ */
+        marker.on("contextmenu", function (event) {
+          if (event && event.preventDefault) {
+            event.preventDefault(); // Verhindert das Standard-Kontextmenü
+          }
+          //setPolylineEventsDisabled(true);
+          disablePolylineEvents(window.polylines);
+          this.openPopup();
+        });
 
+        document.addEventListener("mouseout", function (event) {
+          if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
+            //setPolylineEventsDisabled(false);
+            enablePolylineEvents(window.polylines, window.lineColors);
+          }
+        });
         marker.on("mouseout", function () {
           this.closePopup();
         });