Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kabelstrecken einblenden und ausblenden

Browse Source
This commit is contained in:
ISA
2024-09-11 22:19:04 +02:00
parent 633886b466
commit f8a4b1f86b
5 changed files with 96 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/MapComponent.js
View File

@@ -74,8 +74,10 @@ import useCreateAndSetDevices from "../hooks/useCreateAndSetDevices";
import { useMapComponentState } from "../hooks/useMapComponentState";
import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState";
import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const polylineVisible = useRecoilValue(polylineLayerVisibleState);
const [editMode, setEditMode] = useState(false); // editMode Zustand
const { deviceName, setDeviceName } = useMapComponentState();
const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
@@ -509,7 +511,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
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);
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";
@@ -522,38 +532,31 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
pane: "tooltipPane",
});
// Mausbewegung tracken
polyline.on("mouseover", (e) => {
const tooltip = polyline.getTooltip();
if (tooltip) {
const mousePos = e.containerPoint; // Mausposition relativ zur Karte
const mapSize = map.getSize(); // Größe der Karte
const mousePos = e.containerPoint;
const mapSize = map.getSize();
// Berechne die Tooltip-Position, um sicherzustellen, dass sie innerhalb des sichtbaren Bereichs bleibt
let direction = "right"; // Standard-Richtung
let direction = "right";
if (mousePos.x > mapSize.x - 100) {
direction = "left"; // Bewege den Tooltip nach links, wenn der Mauszeiger nahe dem rechten Rand ist
direction = "left";
} else if (mousePos.x < 100) {
direction = "right"; // Bewege den Tooltip nach rechts, wenn der Mauszeiger nahe dem linken Rand ist
direction = "right";
}
if (mousePos.y > mapSize.y - 100) {
direction = "top"; // Bewege den Tooltip nach oben, wenn der Mauszeiger nahe dem unteren Rand ist
direction = "top";
} else if (mousePos.y < 100) {
direction = "bottom"; // Bewege den Tooltip nach unten, wenn der Mauszeiger nahe dem oberen Rand ist
direction = "bottom";
}
// Setze die neue Richtung und öffne den Tooltip
tooltip.options.direction = direction;
polyline.openTooltip(e.latlng);
}
});
/* polyline.on("mouseover", () => {
polyline.openTooltip();
}); */
polyline.on("mouseout", () => {
polyline.closeTooltip();
});
@@ -561,7 +564,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
setMarkers(newMarkers);
setPolylines(newPolylines);
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker]);
}, [map, linePositions, lineColors, tooltipContents, newPoint, newCoords, tempMarker, polylineVisible]);
//--------------------------------------------
@@ -674,6 +677,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
initializeContextMenu();
}, [map]);
//--------------------------------------------
return (
<>
<ToastContainer />