Use a top-level context to track OSD viewers in the workspace instead…

… of the OSDReferences global.

src/components/AppProviders.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
@@ -14,6 +14,7 @@ import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import createI18nInstance from '../i18n';
 import FullScreenContext from '../contexts/FullScreenContext';
+import OpenSeadragonWorkspaceReferencesContext from '../contexts/OpenSeadragonWorkspaceReferencesContext';
 
 /**
  * Allow applications to opt-out of (or provide their own) drag and drop context
@@ -117,19 +118,23 @@ export function AppProviders({
   theme, translations,
   dndManager = undefined,
 }) {
+  const osdReferences = useRef({});
+
   return (
     <FullScreenShim>
-      <StoreAwareI18nextProvider language={language} translations={translations}>
-        <StyledEngineProvider injectFirst>
-          <CacheProvider value={theme.direction === 'rtl' ? cacheRtl : cacheDefault}>
-            <ThemeProvider theme={createTheme((theme))}>
-              <MaybeDndProvider dndManager={dndManager}>
-                {children}
-              </MaybeDndProvider>
-            </ThemeProvider>
-          </CacheProvider>
-        </StyledEngineProvider>
-      </StoreAwareI18nextProvider>
+      <OpenSeadragonWorkspaceReferencesContext.Provider value={osdReferences}>
+        <StoreAwareI18nextProvider language={language} translations={translations}>
+          <StyledEngineProvider injectFirst>
+            <CacheProvider value={theme.direction === 'rtl' ? cacheRtl : cacheDefault}>
+              <ThemeProvider theme={createTheme((theme))}>
+                <MaybeDndProvider dndManager={dndManager}>
+                  {children}
+                </MaybeDndProvider>
+              </ThemeProvider>
+            </CacheProvider>
+          </StyledEngineProvider>
+        </StoreAwareI18nextProvider>
+      </OpenSeadragonWorkspaceReferencesContext.Provider>
     </FullScreenShim>
   );
 }

src/components/OpenSeadragonViewer.js

@@ -1,5 +1,5 @@
 import {
-  useRef, Children, cloneElement, useCallback, useState, useEffect,
+  useRef, Children, cloneElement, useCallback, useState, useEffect, useContext,
 } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -12,6 +12,7 @@ import { PluginHook } from './PluginHook';
 import { OSDReferences } from '../plugins/OSDReferences';
 import OpenSeadragonComponent from './OpenSeadragonComponent';
 import TileSource from './OpenSeadragonTileSource';
+import OpenSeadragonWorkspaceReferencesContext from '../contexts/OpenSeadragonWorkspaceReferencesContext';
 
 const StyledSection = styled('section')({
   cursor: 'grab',
@@ -28,6 +29,7 @@ export function OpenSeadragonViewer({
   drawAnnotations = false, infoResponses = [], canvasWorld, nonTiledImages = [], updateViewport,
 }) {
   const apiRef = useRef();
+  const workspaceReferencesContext = useContext(OpenSeadragonWorkspaceReferencesContext);
   const [viewer, setViewer] = useState(null);
   const onViewportChange = useCallback(({
     flip, rotation, x, y, zoom,
@@ -53,10 +55,12 @@ export function OpenSeadragonViewer({
   useEffect(() => {
     OSDReferences.set(windowId, apiRef);
   }, [apiRef, windowId]);
-
+  
   useEffect(() => {
     apiRef.current = viewer;
-  }, [apiRef, viewer]);
+
+    workspaceReferencesContext.current[windowId] = apiRef;
+  }, [apiRef, windowId, viewer, workspaceReferencesContext]);
 
   const enhancedChildren = Children.map(children, child => (
     cloneElement(

src/contexts/OpenSeadragonWorkspaceReferencesContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const OpenSeadragonWorkspaceReferencesContext = createContext({ current: {} });
+
+export default OpenSeadragonWorkspaceReferencesContext;