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

Fixed Marker collision

Browse Source
This commit is contained in:
PxlLoewe
2025-04-29 13:57:48 -07:00
parent 8041c83d4d
commit 53e837cbc8
4 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/dispatch/app/_components/SmartPopup.tsx
View File

@@ -24,7 +24,7 @@ export const useSmartPopup = () => {
export const calculateAnchor = (
id: string,
mode: "popup" | "marker",
ignoreMarker?: boolean,
options?: { ignoreMarker?: boolean; ignoreCluster?: boolean },
) => {
const otherMarkers = document.querySelectorAll(".map-collision");
// get markers and check if they are overlapping
@@ -37,7 +37,8 @@ export const calculateAnchor = (
const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
if (mode === "popup" && marker.id === `marker-${id}`) return false;
if (ignoreMarker && marker.id.startsWith("marker")) return false;
if (options?.ignoreMarker && marker.id.startsWith("marker")) return false;
if (options?.ignoreCluster && marker.id.startsWith("cluster")) return false;
const rect1 = (marker as HTMLElement).getBoundingClientRect();
const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
@@ -76,12 +77,6 @@ export const calculateAnchor = (
centerOfOverlappingMarkers.x /= markersPosition.length;
centerOfOverlappingMarkers.y /= markersPosition.length;
if (id == "2") {
console.log("markersInCluser", marksersInCluster);
console.log("ownMarkerPosition", ownMarkerPosition);
console.log("centerOfOverlappingMarkers", centerOfOverlappingMarkers);
}
if (marksersInCluster.length > 1) {
if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
@@ -107,24 +102,25 @@ export interface SmartPopupRef {
}
export const SmartPopup = (
props: PopupProps & { ignoreMarker?: boolean } & RefAttributes<LPopup> & {
props: PopupProps & {
options?: { ignoreMarker?: boolean; ignoreCluster?: boolean };
} & RefAttributes<LPopup> & {
smartPopupRef?: Ref<SmartPopupRef>;
id: string;
wrapperClassName?: string;
},
) => {
const [showContent, setShowContent] = useState(false);
const { smartPopupRef, id, className, wrapperClassName, ignoreMarker } =
props;
const { smartPopupRef, id, className, wrapperClassName, options } = props;
const [anchor, setAnchor] = useState<
"topleft" | "topright" | "bottomleft" | "bottomright"
>("topleft");
const handleConflict = useCallback(() => {
const newAnchor = calculateAnchor(id, "popup", ignoreMarker);
const newAnchor = calculateAnchor(id, "popup", options);
setAnchor(newAnchor);
}, [id, ignoreMarker]);
}, [id, options]);
useImperativeHandle(smartPopupRef, () => ({
handleConflict,