Is it possible to pass a custom OSD viewer instance to OpenSeadragonAnnotator?

[marlo-longley]

Hi all and thank you for all the contributions to this great tool and active codebase!

I would love to use Annotorious and the OpenSeadragonAnnotator with an existing React project that implements OpenSeadragon already.

So, these are the imports described in the documentation to get started:

import {
  Annotorious,
  OpenSeadragonAnnotator,
  **OpenSeadragonViewer**
} from '@annotorious/react';

We would not use the imported OpenSeadragonViewer, rather we would pass our existing viewer to Annotorious. Our React code would do something like:

return (
     <Annotorious>
        <OpenSeadragonAnnotator>
            <MyOSDViewer />
        </OpenSeadragonAnnotator>
     </Annotorious>
);

But I know this is not so simple due to the needed Context. I did not understand a way to access the Context externally and set a different viewer. Thank you for any examples or insight.

Edit: I found this as a possible reference, but it is the old version of Annotorious:
https://github.com/rsimon/mirador-annotorious/blob/bb6b44debb76571994ace69937176535190edede/src/AnnotoriousPlugin.jsx#L12

[rsimon]

Thanks for the kind feedback!

I don't have formal support this scenario - yet. But I agree it would be a good addition to the <OpenSeadragonViewer> component to allow passing an existing viewer instance through a prop.

But as long as that's not yet possible: I think it would be fairly straightforward to build your own workaround. You're exactly on the right path. The only key step is to pass the viewer instance into the context. Here's what the default <OpenSeadragonViewer> does:
https://github.com/annotorious/annotorious/blob/main/packages/annotorious-react/src/openseadragon/OpenSeadragonViewer.tsx

In your <MyOSDViewer> component, you'd have to do something like this:

• Import the OpenSeadragonAnnotatorContext
• Put your viewer into the context, using the setViewer function.

// ...
const MyOSDViewer = (props: { viewer: OpenSeadragon.Viewer }) => {

  const { setViewer } = useContext(OpenSeadragonAnnotatorContext);

  // ...

  useEffect(() => {
    setViewer(props.viewer);
  }, [props.viewer]);

  return null;
}

Everything else should just work... fingers crossed ;-)

[marlo-longley]

Thanks @rsimon!

Yes, maybe you can point me, because I was trying this:
import { OpenSeadragonAnnotatorContext } from '@annotorious/react';

and getting the error:
node_modules/@annotorious/react/dist/annotorious-react.es.js does not export 'OpenSeadragonAnnotatorContext'

I think you export a way to access the viewer but not set it, and you don't export the Context? I only see useViewer exported.

annotorious/packages/annotorious-react/src/openseadragon/index.ts

Line 3 in ac632bf

useViewer

Are you saying I would need to go into the source myself in order to access this component? Thank you for clarifying and sorry if I am missing something.

[rsimon]

Ah - indeed. I forgot that the context isn't currently exported... I can add that export with the next release. (I may deprecated it again though, once I've added support for a viewerInstance prop to the <OpenSeadragonViewer>.) But, in short:

• Yes, there's a useViewer hook to consume the viewer from the context
• There is no hook to set the viewer (that has to happen via the context directly)
• I'll export the context with the next release (hopefully some time next week).

[marlo-longley]

Thank you @rsimon -- it would be awesome if you exported the context! I will check back next week for that. I appreciate it. I am also happy to help contribute if that would be helpful to you.

Once I have something working I will definitely share our project back with you. We are looking at a way to use Annotorious with Mirador (which is why I was looking at your old mirador-annotorious repo).

[rsimon]

That's great, thanks - looking forward to hearing more about your project.

Plus: I'd love to see Annotorious used in Mirador! The mirador-annotorious repo probably won't be of too much help, TBH. Because I never really got to the crucial part - which is to connect Annotorious to Mirador's annotation state management. But I'd love to help out if I can.

[rsimon]

P.S.: FWIW, I already made the export change. This will go live with the next update, v3.0.12.

[marlo-longley]

Thank you so much for this fast work! I will keep you posted on the project and look out for this update. :)