71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
// hooks/usePolylineTooltipLayer.js
|
|
import { useEffect } from "react";
|
|
import L from "leaflet";
|
|
import { setupPolylines } from "../utils/polylines/setupPolylines";
|
|
|
|
//Tooltip an mouse position anzeigen für die Linien
|
|
export const usePolylineTooltipLayer = (map, markers, polylines, setMarkers, setPolylines, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible, newPoint, newCoords) => {
|
|
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]);
|
|
};
|