diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js index 4278c70269..e9227da32e 100644 --- a/src/components/AppProviders.js +++ b/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 ( - - - - - - {children} - - - - - + + + + + + + {children} + + + + + + ); } diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js index ba4c99725a..ecf24044fe 100644 --- a/src/components/OpenSeadragonViewer.js +++ b/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( diff --git a/src/contexts/OpenSeadragonWorkspaceReferencesContext.js b/src/contexts/OpenSeadragonWorkspaceReferencesContext.js new file mode 100644 index 0000000000..043510f537 --- /dev/null +++ b/src/contexts/OpenSeadragonWorkspaceReferencesContext.js @@ -0,0 +1,5 @@ +import { createContext } from 'react'; + +const OpenSeadragonWorkspaceReferencesContext = createContext({ current: {} }); + +export default OpenSeadragonWorkspaceReferencesContext;