From 9b7dbe2acfacd0fc80b4808171801ee3e40824a2 Mon Sep 17 00:00:00 2001 From: ISA Date: Sat, 21 Dec 2024 18:27:45 +0100 Subject: [PATCH] refactor: Polyline-Tooltip in usePolylineTooltipLayer Hook ausgelagert --- components/MapComponent.js | 63 -------------------------------- hooks/usePolylineTooltipLayer.js | 2 +- 2 files changed, 1 insertion(+), 64 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 45e8c3818..0dbaebf66 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -480,69 +480,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { fetchData(); }, []); //-------------------------------------------- - //Tooltip an mouse position anzeigen für die Linien -/* useEffect(() => { - if (!map) return; - - // Entferne alte Marker und Polylinien - markers.forEach((marker) => marker.remove()); - polylines.forEach((polyline) => polyline.remove()); - - // Setze neue Marker und Polylinien mit den aktuellen Daten - const { markers: newMarkers, polylines: newPolylines } = setupPolylines( - map, - linePositions, - lineColors, - tooltipContents, - setNewCoords, - tempMarker, - polylineVisible // polylineVisible wird jetzt korrekt übergeben - ); - - newPolylines.forEach((polyline, index) => { - const tooltipContent = tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] || "Standard-Tooltip-Inhalt"; - - polyline.bindTooltip(tooltipContent, { - permanent: false, - direction: "auto", - sticky: true, - offset: [20, 0], - pane: "tooltipPane", - }); - - polyline.on("mouseover", (e) => { - const tooltip = polyline.getTooltip(); - if (tooltip) { - const mousePos = e.containerPoint; - const mapSize = map.getSize(); - - let direction = "right"; - - if (mousePos.x > mapSize.x - 100) { - direction = "left"; - } else if (mousePos.x < 100) { - direction = "right"; - } - - if (mousePos.y > mapSize.y - 100) { - direction = "top"; - } else if (mousePos.y < 100) { - direction = "bottom"; - } - - tooltip.options.direction = direction; - polyline.openTooltip(e.latlng); - } - }); - - polyline.on("mouseout", () => { - polyline.closeTooltip(); - }); - }); - - setMarkers(newMarkers); - setPolylines(newPolylines); - }, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]); */ usePolylineTooltipLayer( map, diff --git a/hooks/usePolylineTooltipLayer.js b/hooks/usePolylineTooltipLayer.js index ea55f73e4..a0913a086 100644 --- a/hooks/usePolylineTooltipLayer.js +++ b/hooks/usePolylineTooltipLayer.js @@ -3,7 +3,7 @@ import { useEffect } from "react"; import L from "leaflet"; import { setupPolylines } from "../utils/setupPolylines"; - + //Tooltip an mouse position anzeigen für die Linien export const usePolylineTooltipLayer = ( map, markers,