PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

completed Marker conflikt handler

Browse Source
This commit is contained in:
PxlLoewe
2025-04-11 13:27:53 -07:00
parent b5e5aff084
commit 280c1abfde
2 changed files with 27 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
apps/dispatch/app/(dispatch)/_components/map/AircraftMarker.tsx
View File

@@ -37,17 +37,14 @@ export const AircraftMarker = (props: any) => {
);
const aircrafts = useAircraftsStore((state) => state.aircrafts);
const map = useMap();
const [markersAdjusted, setMarkersAdjusted] = useState(false);
const getMarkerHTML = (
aircraft: Aircraft,
anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
) => {
return `<div
data-aircraft-id="${aircraft.id}"
id="aircraft-marker-${aircraft.id}"
class="${cn(
"aircraft-marker relative w-[140px] transform flex items-center gap-2 px-2 z-100",
" relative w-[140px] transform flex items-center gap-2 px-2 z-100",
anchor.includes("right") && "-translate-x-full",
anchor.includes("bottom") && "-translate-y-full",
)}"
@@ -55,18 +52,18 @@ export const AircraftMarker = (props: any) => {
background-color: ${FMS_STATUS_COLORS[aircraft.fmsStatus]};
${openAircraftMarker.includes(aircraft.id) ? "opacity: 0;" : ""}
">
<div
class="${cn(
"absolute w-4 h-4 z-99",
"absolute w-4 h-4 z-99",
anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
)}"
style="
${anchor.includes("left") ? `border-left: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};` : `border-right: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};`}
${anchor.includes("top") ? `border-top: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};` : `border-bottom: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};`}
">
</div>
"
></div>
<span
class="font-semibold text-xl"
style="color: ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};"
@@ -76,6 +73,15 @@ export const AircraftMarker = (props: any) => {
<span class="text-white text-[15px]">
${aircraft.bosName}
</span>
<div
data-aircraft-id="${aircraft.id}"
id="aircraft-marker-${aircraft.id}"
class="${cn(
"aircraft-marker absolute w-[200%] h-[200%] top-0 left-0 transform",
anchor.includes("left") && "-translate-x-1/2",
anchor.includes("top") && "-translate-y-1/2",
)}"
></div>
</div>`;
};
@@ -110,29 +116,7 @@ export const AircraftMarker = (props: any) => {
>("topleft");
useEffect(() => {
/* const testRef = setInterval(() => {
positionMarker();
}, 1000); */
const handleZoom = () => {
setAnchor("topleft");
setMarkersAdjusted(false);
};
map.on("zoom", handleZoom);
return () => {
map.off("zoom", handleZoom);
};
/* return () => {
clearInterval(testRef);
}; */
}, [map]);
useEffect(() => {
if (markersAdjusted) return;
for (let i = 0; i < 3; i++) {
console.log(`Iteration ${i}`);
const otherMarkers = document.querySelectorAll(".aircraft-marker");
// get markers and check if they are overlapping
const ownMarker = document.querySelector(
@@ -141,7 +125,7 @@ export const AircraftMarker = (props: any) => {
if (!otherMarkers || !ownMarker) return;
const overlappingMarkers = Array.from(otherMarkers).filter((marker) => {
const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
// if (marker.id === `aircraft-marker-${aircraft.id}`) return false;
const rect1 = (marker as HTMLElement).getBoundingClientRect();
const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
@@ -154,7 +138,7 @@ export const AircraftMarker = (props: any) => {
);
});
// get the center of all overlapping markers
const markersPosition = overlappingMarkers.map((marker) => {
const markersPosition = marksersInCluster.map((marker) => {
const rect = (marker as HTMLElement).getBoundingClientRect();
return {
x: rect.left + rect.width / 2,
@@ -182,13 +166,8 @@ export const AircraftMarker = (props: any) => {
y: 0,
},
);
console.log(
"overlapping markers",
centerOfOverlappingMarkers,
ownMarkerPosition,
);
if (overlappingMarkers.length >= 1) {
if (centerOfOverlappingMarkers.y > ownMarkerPosition.y) {
if (marksersInCluster.length > 1) {
if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
setAnchor("topright");
} else {
@@ -201,14 +180,17 @@ export const AircraftMarker = (props: any) => {
setAnchor("bottomleft");
}
}
} else {
// Default
setAnchor("topleft");
}
// TODO: Once markers are readjusted they dont overlap to these they did in the first iteration, but when all markers are adjusted they overlap whit ones they didnt in the first interation
}
setMarkersAdjusted(true);
}, [setAnchor, setMarkersAdjusted, aircraft.id, markersAdjusted]);
// EG. if 3 markers are overlapping and they are left and right
};
map.on("zoom", handleZoom);
return () => {
map.off("zoom", handleZoom);
};
}, [map]);
return (
<Fragment key={aircraft.id}>
<Marker