28 lines
829 B
TypeScript
28 lines
829 B
TypeScript
import { useEffect, useState } from "react";
|
|
import useImage from "use-image";
|
|
|
|
import { useDataURL } from "../contexts/AssetsContext";
|
|
|
|
import { mapSources as defaultMapSources } from "../maps";
|
|
|
|
import { Map } from "../types/Map";
|
|
|
|
function useMapImage(
|
|
map: Map | null
|
|
): [HTMLImageElement | undefined, "loaded" | "loading" | "failed"] {
|
|
const mapURL = useDataURL(map, defaultMapSources);
|
|
const [mapImage, mapImageStatus] = useImage(mapURL || "");
|
|
|
|
// Create a map source that only updates when the image is fully loaded
|
|
const [loadedMapImage, setLoadedMapImage] = useState<HTMLImageElement>();
|
|
useEffect(() => {
|
|
if (mapImageStatus === "loaded" && mapImage) {
|
|
setLoadedMapImage(mapImage);
|
|
}
|
|
}, [mapImage, mapImageStatus]);
|
|
|
|
return [loadedMapImage, mapImageStatus];
|
|
}
|
|
|
|
export default useMapImage;
|