diff --git a/src/components/Viewer/ImageViewer/OSD.tsx b/src/components/Viewer/ImageViewer/OSD.tsx index 04c98455..a667ace7 100644 --- a/src/components/Viewer/ImageViewer/OSD.tsx +++ b/src/components/Viewer/ImageViewer/OSD.tsx @@ -21,13 +21,12 @@ interface OSDProps { const OSD: React.FC = ({ uri, hasPlaceholder, imageType }) => { const [osdUri, setOsdUri] = useState(); + const [osdInstance, setOsdInstance] = useState(); const viewerState: ViewerContextStore = useViewerState(); const { configOptions } = viewerState; - const instance = uuidv4(); - const config: Options = { - id: `openseadragon-viewport-${instance}`, + id: `openseadragon-viewport-${osdInstance}`, loadTilesWithAjax: true, fullPageButton: "fullPage", homeButton: "reset", @@ -41,7 +40,7 @@ const OSD: React.FC = ({ uri, hasPlaceholder, imageType }) => { showRotationControl: true, showZoomControl: true, navigatorBorderColor: "transparent", - navigatorId: `openseadragon-navigator-${instance}`, + navigatorId: `openseadragon-navigator-${osdInstance}`, gestureSettingsMouse: { clickToZoom: true, dblClickToZoom: true, @@ -53,7 +52,10 @@ const OSD: React.FC = ({ uri, hasPlaceholder, imageType }) => { }; useEffect(() => { - if (uri !== osdUri) setOsdUri(uri); + if (uri !== osdUri) { + setOsdUri(uri); + setOsdInstance(uuidv4()); + } }, [osdUri, uri]); useEffect(() => { @@ -80,6 +82,8 @@ const OSD: React.FC = ({ uri, hasPlaceholder, imageType }) => { } }, [osdUri]); + if (!osdInstance) return null; + return ( = ({ uri, hasPlaceholder, imageType }) => { }} > - - + + ); };