Unable to extend with IIIF Layer about rlayers HOT 8 CLOSED

import IIIFInfo, { ImageInformationResponse } from 'ol/format/IIIFInfo'
import { Tile as LayerTile } from 'ol/layer'

import 'ol/ol.css'
import IIIF from 'ol/source/IIIF'
import React, { useEffect, useState } from 'react'
import { RContextType, RLayer, RMap } from 'rlayers'
import { RLayerRasterProps } from 'rlayers/layer/RLayerRaster'

export interface RLayerIIIFProps extends RLayerRasterProps {
    url?: string
    iiifManifest: string | ImageInformationResponse
}

class RLayerIIIF extends RLayer<RLayerIIIFProps> {
    ol: LayerTile<IIIF>
    source: IIIF

    constructor(
        props: Readonly<RLayerIIIFProps>,
        context: React.Context<RContextType>
    ) {
        super(props, context)
        this.createSource()
        this.ol = new LayerTile({ source: this.source })
        this.eventSources = [this.ol, this.source]
    }

    createSource(): void {
        const options = new IIIFInfo(
            this.props.iiifManifest
        ).getTileSourceOptions()
        if (options === undefined || options.version === undefined) {
            throw new Error('manifest is not valid IIIF configuration')
        }
        this.source = new IIIF({ ...options, zDirection: -1 })
        this.eventSources = [this.ol, this.source]
    }

    refresh(prevProps?: RLayerIIIFProps): void {
        super.refresh(prevProps)
        if (prevProps?.url !== this.props.url) this.createSource()
    }
}

export default function IiifTile(): JSX.Element {
    const url =
        'https://iiif.ub.uni-leipzig.de/iiif/j2k/0000/0107/0000010732/00000072.jpx/info.json'

    const [manifest, setManifest] = useState<
        string | ImageInformationResponse
    >()

    useEffect(() => {
        fetch(url)
            .then((response) => response.json())
            .then((imageInfo) => {
                setManifest(imageInfo)
            })
    }, [])

    if (manifest) {
        return (
            <RMap
                width={'100%'}
                height={'60vh'}
                initial={{ center: [0, 0], zoom: 1 }}
            >
                <RLayerIIIF iiifManifest={manifest} url={url} />
            </RMap>
        )
    }
    return <p>loading</p>
}

export interface RLayerIIIFProps extends RLayerRasterProps {
    iiif: IIIF
}

export interface IiifTIleProps {
    url: string
}

class RLayerIIIF extends RLayer<RLayerIIIFProps> {
    ol: LayerTile<IIIF>
    source: IIIF

    constructor(
        props: Readonly<RLayerIIIFProps>,
        context: React.Context<RContextType>
    ) {
        super(props, context)
        this.source = this.props.iiif
        this.ol = new LayerTile({ source: this.source })
        this.eventSources = [this.ol, this.source]
    }
}

export default function IiifTile({ url }: IiifTIleProps) {
    const [iiif, setIiif] = useState<IIIF>()
    const [error, setError] = useState<string>()

    useEffect(() => {
        fetch(url)
            .then((response) => response.json())
            .then((imageInfo) => {
                const options = new IIIFInfo(imageInfo).getTileSourceOptions()
                if (options === undefined || options.version === undefined) {
                    setError(
                        'Data seems to not be valid IIIF image information.'
                    )
                    return
                }
                setIiif(new IIIF({ ...options, zDirection: -1 }))
            })
    }, [url])

    if (error) return <p>error</p>
    if (iiif) {
        return (
            <RMap
                width={'100%'}
                height={'60vh'}
                initial={{
                    center: [0, 0],
                    zoom: 1,
                }}
                extent={iiif.getTileGrid()?.getExtent()}
            >
                <RLayerIIIF iiif={iiif} />
            </RMap>
        )
    }
    return <p>loading</p>
}