Splitted code for conflicting label to SmartPopup
This commit is contained in:
PxlLoewe
153
apps/dispatch/app/_components/SmartPopup.tsx
Normal file
153
apps/dispatch/app/_components/SmartPopup.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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 otherMarkers = document.querySelectorAll(".aircraft-collision");
|
||||
// get markers and check if they are overlapping
|
||||
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]);
|
||||
const handleConflict = () => {
|
||||
const newAnchor = useConflict(aircraft.id, "marker");
|
||||
setAnchor(newAnchor);
|
||||
};
|
||||
|
||||
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}"
|
||||
id="aircraft-marker-${aircraft.id}"
|
||||
data-id="${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
|
||||
className={cn(
|
||||
"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>
|
||||
<AircraftPopupContent aircraft={aircraft} />
|
||||
</SmartPopup>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export const AircraftMarker = (props: any) => {
|
||||
const { openAircraftMarker, setOpenAircraftMarker } = useMapStore(
|
||||
(state) => state,
|
||||
);
|
||||
|
||||
export const AircraftLayer = () => {
|
||||
const aircrafts = useAircraftsStore((state) => state.aircrafts);
|
||||
const map = useMap();
|
||||
|
||||
return aircrafts.map((aircraft) => (
|
||||
<AircraftLabel key={aircraft.id} aircraft={aircraft} />
|
||||
));
|
||||
// IDEA: Add Marker to Map Layer / LayerGroup
|
||||
return (
|
||||
<>
|
||||
{aircrafts.map((aircraft) => {
|
||||
return <AircraftMarker key={aircraft.id} aircraft={aircraft} />;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user