2020-10-01 23:35:50 -04:00
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import useImage from "use-image";
|
|
|
|
|
2021-04-22 02:53:35 -04:00
|
|
|
import { useDataURL } from "../contexts/AssetsContext";
|
2020-10-01 23:35:50 -04:00
|
|
|
|
|
|
|
import { mapSources as defaultMapSources } from "../maps";
|
|
|
|
|
2021-07-16 02:58:14 -04:00
|
|
|
import { Map } from "../types/Map";
|
|
|
|
|
2021-07-16 07:39:45 -04:00
|
|
|
function useMapImage(
|
2021-07-17 03:25:41 -04:00
|
|
|
map: Map | null
|
2021-07-16 07:39:45 -04:00
|
|
|
): [HTMLImageElement | undefined, "loaded" | "loading" | "failed"] {
|
2021-04-22 02:53:35 -04:00
|
|
|
const mapURL = useDataURL(map, defaultMapSources);
|
2021-07-16 02:58:14 -04:00
|
|
|
const [mapImage, mapImageStatus] = useImage(mapURL || "");
|
2020-10-01 23:35:50 -04:00
|
|
|
|
|
|
|
// Create a map source that only updates when the image is fully loaded
|
2021-07-16 02:58:14 -04:00
|
|
|
const [loadedMapImage, setLoadedMapImage] = useState<HTMLImageElement>();
|
2020-10-01 23:35:50 -04:00
|
|
|
useEffect(() => {
|
2021-07-16 02:58:14 -04:00
|
|
|
if (mapImageStatus === "loaded" && mapImage) {
|
2021-04-22 02:53:35 -04:00
|
|
|
setLoadedMapImage(mapImage);
|
2020-10-01 23:35:50 -04:00
|
|
|
}
|
2021-04-22 02:53:35 -04:00
|
|
|
}, [mapImage, mapImageStatus]);
|
2020-10-01 23:35:50 -04:00
|
|
|
|
2021-04-22 02:53:35 -04:00
|
|
|
return [loadedMapImage, mapImageStatus];
|
2020-10-01 23:35:50 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
export default useMapImage;
|