Splitted code for conflicting label to SmartPopup

apps/dispatch/app/_components/SmartPopup.tsx

@@ -0,0 +1,153 @@
+import { cn } from "helpers/cn";
+import { RefAttributes, useEffect, useImperativeHandle } from "react";
+import { createContext, Ref, useContext, useState } from "react";
+import { Popup, PopupProps, useMap } from "react-leaflet";
+import { Popup as LPopup } from "leaflet";
+
+const PopupContext = createContext({
+	anchor: "topleft",
+});
+
+export const useSmartPopup = () => {
+	const context = useContext(PopupContext);
+	if (!context) {
+		throw new Error("usePopup must be used within a PopupProvider");
+	}
+	return context;
+};
+
+export const useConflict = (id: string, mode: "popup" | "marker") => {
+	const otherMarkers = document.querySelectorAll(".map-collision");
+	// get markers and check if they are overlapping
+	const ownMarker =
+		mode === "popup"
+			? document.querySelector(`#popup-${id}`)
+			: document.querySelector(`#marker-${id}`);
+
+	if (!otherMarkers || !ownMarker) return "topleft";
+
+	const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
+		if (mode === "popup" && marker.id === `marker-${id}`) return false;
+
+		const rect1 = (marker as HTMLElement).getBoundingClientRect();
+		const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
+
+		return !(
+			rect1.right < rect2.left ||
+			rect1.left > rect2.right ||
+			rect1.bottom < rect2.top ||
+			rect1.top > rect2.bottom
+		);
+	});
+
+	// get the center of all overlapping markers
+	const markersPosition = marksersInCluster.map((marker) => {
+		const rect = (marker as HTMLElement).getBoundingClientRect();
+		return {
+			x: rect.left + rect.width / 2,
+			y: rect.top + rect.height / 2,
+		};
+	});
+	const ownMarkerBounds = (ownMarker as HTMLElement).getBoundingClientRect();
+	const ownMarkerPosition = {
+		x: ownMarkerBounds.left + ownMarkerBounds.width / 2,
+		y: ownMarkerBounds.top + ownMarkerBounds.height / 2,
+	};
+
+	const centerOfOverlappingMarkers = markersPosition.reduce(
+		(acc, pos) => {
+			if (acc.x === 0 && acc.y === 0) return pos;
+			return {
+				x: (acc.x + pos.x) / 2,
+				y: (acc.y + pos.y) / 2,
+			};
+		},
+		{
+			x: 0,
+			y: 0,
+		},
+	);
+	if (marksersInCluster.length > 1) {
+		if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
+			if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
+				return "topright";
+			} else {
+				return "topleft";
+			}
+		} else {
+			if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
+				return "bottomright";
+			} else {
+				return "bottomleft";
+			}
+		}
+	} else {
+		// Default
+		return "topleft";
+	}
+};
+
+export interface SmartPopupRef {
+	handleConflict: () => void;
+}
+
+export const SmartPopup = (
+	props: PopupProps &
+		RefAttributes<LPopup> & {
+			smartPopupRef?: Ref<SmartPopupRef>;
+			id: string;
+			wrapperClassName?: string;
+		},
+) => {
+	const { smartPopupRef, id, className, wrapperClassName } = props;
+
+	const [anchor, setAnchor] = useState<
+		"topleft" | "topright" | "bottomleft" | "bottomright"
+	>("topleft");
+
+	const handleConflict = () => {
+		const newAnchor = useConflict(id, "popup");
+		setAnchor(newAnchor);
+	};
+
+	useImperativeHandle(smartPopupRef, () => ({
+		handleConflict,
+	}));
+
+	const map = useMap();
+
+	useEffect(() => {
+		setTimeout(handleConflict, 50);
+		map.on("zoom", handleConflict);
+
+		return () => {
+			map.off("zoom", handleConflict);
+		};
+	}, [map, anchor]);
+
+	return (
+		<Popup {...props} className={cn("relative", wrapperClassName)}>
+			<div
+				className={cn(
+					"pointer-events-auto bg-base-100 relative",
+					anchor.includes("right") && "-translate-x-full",
+					anchor.includes("bottom") && "-translate-y-full",
+					className,
+				)}
+			>
+				<div
+					data-id={id}
+					id={`popup-${id}`}
+					className={cn(
+						"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
+						anchor.includes("left") && "-translate-x-1/2",
+						anchor.includes("top") && "-translate-y-1/2",
+					)}
+				/>
+				<PopupContext.Provider value={{ anchor: anchor }}>
+					{props.children}
+				</PopupContext.Provider>
+			</div>
+		</Popup>
+	);
+};

apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx

@@ -5,6 +5,7 @@ import { useMapStore } from "_store/mapStore";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "helpers/cn";
 import { Cross, House, Minimize2, Route } from "lucide-react";
+import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
 
 export const FMS_STATUS_COLORS: { [key: string]: string } = {
 	"0": "rgb(126,0,5)",
@@ -32,7 +33,93 @@ export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = {
 	"9": "rgb(42,217,42)",
 };
 
-const AircraftLabel = ({ aircraft }: { aircraft: Aircraft }) => {
+const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
+	const setOpenAircraftMarker = useMapStore(
+		(state) => state.setOpenAircraftMarker,
+	);
+	const { anchor } = useSmartPopup();
+	return (
+		<>
+			<div
+				className="absolute p-1 z-99 top-0 right-0 transform -translate-y-full bg-base-100 cursor-pointer"
+				onClick={() => {
+					setOpenAircraftMarker({
+						open: [],
+						close: [aircraft.id],
+					});
+				}}
+			>
+				<Minimize2 className="text-white " size={15} />
+			</div>
+
+			<div
+				className={cn(
+					"absolute w-[calc(100%+2px)] h-4 z-99",
+					anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
+					anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
+				)}
+				style={{
+					borderLeft: anchor.includes("left")
+						? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
+						: "",
+					borderRight: anchor.includes("right")
+						? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
+						: "",
+					borderTop: anchor.includes("top")
+						? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
+						: "",
+					borderBottom: anchor.includes("bottom")
+						? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
+						: "",
+				}}
+			/>
+			<div>
+				<div
+					className="flex gap-[2px] text-white pb-0.5"
+					style={{
+						backgroundColor: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`,
+					}}
+				>
+					<div
+						className="p-2 flex justify-center items-center"
+						style={{
+							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
+						}}
+					>
+						<House className="text-sm " />
+					</div>
+					<div
+						className="p-2 flex justify-center items-center"
+						style={{
+							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
+						}}
+					>
+						<Route className="text-sm " />
+					</div>
+					<div
+						className="flex justify-center items-center text-2xl p-2"
+						style={{
+							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
+							color: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`,
+						}}
+					>
+						{aircraft.fmsStatus}
+					</div>
+					<div
+						className="p-2 flex-1 flex justify-center items-center"
+						style={{
+							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
+						}}
+					>
+						<span className="text-sm text-white">Einsatz 250411</span>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 	const aircrafts = useAircraftsStore((state) => state.aircrafts);
 	const map = useMap();
 	const markerRef = useRef<LMarker>(null);
@@ -67,94 +154,25 @@ const AircraftLabel = ({ aircraft }: { aircraft: Aircraft }) => {
 		"topleft" | "topright" | "bottomleft" | "bottomright"
 	>("topleft");
 
-	const handleLabelConflict = useCallback(() => {
+	const handleConflict = () => {
-		const otherMarkers = document.querySelectorAll(".aircraft-collision");
+		const newAnchor = useConflict(aircraft.id, "marker");
-		// get markers and check if they are overlapping
+		setAnchor(newAnchor);
-		const ownMarker = openAircraftMarker.includes(aircraft.id)
+	};
-			? document.querySelector(`#aircraft-popup-${aircraft.id}`)
-			: document.querySelector(`#aircraft-marker-${aircraft.id}`);
-
-		if (!otherMarkers || !ownMarker) return;
-
-		const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
-			if (
-				openAircraftMarker.includes(aircraft.id) &&
-				marker.id === `aircraft-marker-${aircraft.id}`
-			)
-				return false;
-
-			const rect1 = (marker as HTMLElement).getBoundingClientRect();
-			const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
-
-			return !(
-				rect1.right < rect2.left ||
-				rect1.left > rect2.right ||
-				rect1.bottom < rect2.top ||
-				rect1.top > rect2.bottom
-			);
-		});
-
-		// get the center of all overlapping markers
-		const markersPosition = marksersInCluster.map((marker) => {
-			const rect = (marker as HTMLElement).getBoundingClientRect();
-			return {
-				x: rect.left + rect.width / 2,
-				y: rect.top + rect.height / 2,
-			};
-		});
-		const ownMarkerBounds = (ownMarker as HTMLElement).getBoundingClientRect();
-		const ownMarkerPosition = {
-			x: ownMarkerBounds.left + ownMarkerBounds.width / 2,
-			y: ownMarkerBounds.top + ownMarkerBounds.height / 2,
-		};
-
-		const centerOfOverlappingMarkers = markersPosition.reduce(
-			(acc, pos) => {
-				if (acc.x === 0 && acc.y === 0) return pos;
-				return {
-					x: (acc.x + pos.x) / 2,
-					y: (acc.y + pos.y) / 2,
-				};
-			},
-			{
-				x: 0,
-				y: 0,
-			},
-		);
-		if (marksersInCluster.length > 1) {
-			if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
-				if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
-					setAnchor("topright");
-				} else {
-					setAnchor("topleft");
-				}
-			} else {
-				if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
-					setAnchor("bottomright");
-				} else {
-					setAnchor("bottomleft");
-				}
-			}
-		} else {
-			// Default
-			setAnchor("topleft");
-		}
-	}, [openAircraftMarker, aircraft.id]);
 
 	useEffect(() => {
-		handleLabelConflict();
+		handleConflict();
 	}, [aircrafts, openAircraftMarker]);
 
 	useEffect(() => {});
 
 	useEffect(() => {
 		setTimeout(() => {
-			handleLabelConflict();
+			handleConflict();
 		}, 100);
 
-		map.on("zoom", handleLabelConflict);
+		map.on("zoom", handleConflict);
 		return () => {
-			map.off("zoom", handleLabelConflict);
+			map.off("zoom", handleConflict);
 		};
 	}, [map, openAircraftMarker]);
 
@@ -194,10 +212,10 @@ const AircraftLabel = ({ aircraft }: { aircraft: Aircraft }) => {
 							${aircraft.bosName}
 						</span>
 						<div 
-							data-aircraft-id="${aircraft.id}"
+							data-id="${aircraft.id}"
-							id="aircraft-marker-${aircraft.id}" 
+							id="marker-${aircraft.id}" 
 							class="${cn(
-								"aircraft-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
+								"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
 								anchor.includes("left") && "-translate-x-1/2",
 								anchor.includes("top") && "-translate-y-1/2",
 							)}"
@@ -218,121 +236,32 @@ const AircraftLabel = ({ aircraft }: { aircraft: Aircraft }) => {
 				}
 			/>
 			{openAircraftMarker.includes(aircraft.id) && (
-				<Popup
+				<SmartPopup
+					id={aircraft.id}
 					ref={popupRef}
 					position={[aircraft.location.lat, aircraft.location.lon]}
 					autoClose={false}
 					closeOnClick={false}
 					autoPan={false}
-					className={cn("relative")}
+					wrapperClassName="relative"
+					className="w-[200px] h-[150px]"
 				>
-					<div
+					<AircraftPopupContent aircraft={aircraft} />
-						className={cn(
+				</SmartPopup>
-							"w-[200px] h-[150px] pointer-events-auto bg-base-100 relative",
-							anchor.includes("right") && "-translate-x-full",
-							anchor.includes("bottom") && "-translate-y-full",
-						)}
-					>
-						<div
-							data-aircraft-id={aircraft.id}
-							id={`aircraft-popup-${aircraft.id}`}
-							className={cn(
-								"aircraft-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
-								anchor.includes("left") && "-translate-x-1/2",
-								anchor.includes("top") && "-translate-y-1/2",
-							)}
-						/>
-						<div
-							className="absolute p-1 z-99 top-0 right-0 transform -translate-y-full bg-base-100 cursor-pointer"
-							onClick={() => {
-								setOpenAircraftMarker({
-									open: [],
-									close: [aircraft.id],
-								});
-							}}
-						>
-							<Minimize2 className="text-white " size={15} />
-						</div>
-
-						<div
-							className={cn(
-								"absolute w-[calc(100%+2px)] h-4 z-99",
-								anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
-								anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
-							)}
-							style={{
-								borderLeft: anchor.includes("left")
-									? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
-									: "",
-								borderRight: anchor.includes("right")
-									? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
-									: "",
-								borderTop: anchor.includes("top")
-									? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
-									: "",
-								borderBottom: anchor.includes("bottom")
-									? `3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
-									: "",
-							}}
-						/>
-						<div>
-							<div
-								className="flex gap-[2px] text-white pb-0.5"
-								style={{
-									backgroundColor: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`,
-								}}
-							>
-								<div
-									className="p-2 flex justify-center items-center"
-									style={{
-										backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
-									}}
-								>
-									<House className="text-sm " />
-								</div>
-								<div
-									className="p-2 flex justify-center items-center"
-									style={{
-										backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
-									}}
-								>
-									<Route className="text-sm " />
-								</div>
-								<div
-									className="flex justify-center items-center text-2xl p-2"
-									style={{
-										backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
-										color: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`,
-									}}
-								>
-									{aircraft.fmsStatus}
-								</div>
-								<div
-									className="p-2 flex-1 flex justify-center items-center"
-									style={{
-										backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
-									}}
-								>
-									<span className="text-sm text-white">Einsatz 250411</span>
-								</div>
-							</div>
-						</div>
-					</div>
-				</Popup>
 			)}
 		</Fragment>
 	);
 };
 
-export const AircraftMarker = (props: any) => {
+export const AircraftLayer = () => {
-	const { openAircraftMarker, setOpenAircraftMarker } = useMapStore(
-		(state) => state,
-	);
-
 	const aircrafts = useAircraftsStore((state) => state.aircrafts);
-	const map = useMap();
 
-	return aircrafts.map((aircraft) => (
+	// IDEA:  Add Marker to Map Layer / LayerGroup
-		<AircraftLabel key={aircraft.id} aircraft={aircraft} />
+	return (
-	));
+		<>
+			{aircrafts.map((aircraft) => {
+				return <AircraftMarker key={aircraft.id} aircraft={aircraft} />;
+			})}
+		</>
+	);
 };

apps/dispatch/app/dispatch/_components/map/Map.tsx

@@ -6,7 +6,7 @@ import { BaseMaps } from "dispatch/_components/map/BaseMaps";
 import { ContextMenu } from "dispatch/_components/map/ContextMenu";
 import { MissionMarkers } from "dispatch/_components/map/MissionMarkers";
 import { SearchElements } from "dispatch/_components/map/SearchElements";
-import { AircraftMarker } from "dispatch/_components/map/AircraftMarker";
+import { AircraftLayer } from "dispatch/_components/map/AircraftMarker";
 
 export default ({}) => {
 	const { map } = useMapStore();
@@ -17,7 +17,7 @@ export default ({}) => {
 			<SearchElements />
 			<ContextMenu />
 			<MissionMarkers />
-			<AircraftMarker />
+			<AircraftLayer />
 		</MapContainer>
 	);
 };