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