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>
+	);
+};