import { IAssetCache } from "gl-tiled" ; import { useMemo , useRef , useState } from "react" ; export interface ImageStore { getImage : ( url : string ) => HTMLImageElement | undefined ; assetCache : IAssetCache ; } export function useImageStore ( baseUrl ) { const imageResources = useRef < Map < string , HTMLImageElement > > ( new Map ( ) ) ; const [ assetCache , setAssetCache ] = useState < IAssetCache > ( { } ) ; return useMemo ( ( ) => { function loadImage ( url ) { const imgEl = document . createElement ( "img" ) ; imgEl . src = `${ baseUrl }/${ url }` ; imgEl . crossOrigin = "anonymous" ; imageResources . current . set ( url , imgEl ) ; imgEl . onload = ( ) => { const assetCache = { } ; for ( const [ url , image ] of imageResources . current . entries ( ) ) { if ( image . complete ) { assetCache [ url ] = image ; } } setAssetCache ( assetCache ) ; } ; } function getImage ( url ) { const image = imageResources . current . get ( url ) ; if ( ! image ) { loadImage ( url ) ; return undefined ; } if ( ! image . complete ) { return undefined ; } return image ; } return { getImage , assetCache } ; } , [ baseUrl , assetCache , imageResources ] ) ; }