diff --git a/libs/insight-viewer/src/Viewer/index.tsx b/libs/insight-viewer/src/Viewer/index.tsx index 3db336b45..e342a7fa0 100644 --- a/libs/insight-viewer/src/Viewer/index.tsx +++ b/libs/insight-viewer/src/Viewer/index.tsx @@ -16,6 +16,7 @@ export function InsightViewer({ interaction, onViewportChange, children, + viewerRef, }: WithChildren): JSX.Element { const elRef = useRef(null) const viewportRef = useRef>(viewport ?? {}) // viewport props @@ -48,6 +49,14 @@ export function InsightViewer({ if (viewport) viewportRef.current = viewport }, [viewport]) + /** + * This useEffect is intended to update the viewerRef in an external app + * This is a useEffect that runs only once when it is first loaded. + */ + useEffect(() => { + if (elRef && viewerRef) viewerRef.current = elRef.current + }, [elRef, viewerRef]) + return ( diff --git a/libs/insight-viewer/src/Viewer/types.ts b/libs/insight-viewer/src/Viewer/types.ts index 2fd42edf4..7e6186e3c 100644 --- a/libs/insight-viewer/src/Viewer/types.ts +++ b/libs/insight-viewer/src/Viewer/types.ts @@ -4,6 +4,8 @@ import { ProgressComponent, Viewport, OnViewportChange } from '../types' import { SetFrame } from '../hooks/useMultipleImages/useFrame' import { Interaction } from '../hooks/useInteraction/types' +import type { MutableRefObject } from 'react' + export type Image = (CornerstoneImage & { _imageSeriesKey?: string; data: DataSet }) | undefined export type ImageWithoutKey = CornerstoneImage & { data: DataSet } @@ -15,4 +17,5 @@ export type ViewerProp = { onViewportChange?: OnViewportChange onFrameChange?: SetFrame interaction?: Interaction + viewerRef?: MutableRefObject }