feat(viewer): add viewerRef prop to InsightViewer

libs/insight-viewer/src/Viewer/index.tsx

@@ -16,6 +16,7 @@ export function InsightViewer({
   interaction,
   onViewportChange,
   children,
+  viewerRef,
 }: WithChildren<ViewerProp>): JSX.Element {
   const elRef = useRef<HTMLDivElement>(null)
   const viewportRef = useRef<Partial<Viewport>>(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 (
     <ViewerWrapper ref={elRef} Progress={Progress} onViewportChange={onViewportChange} imageEnabled={!!image}>
       <OverlayContextProvider image={image} element={elRef.current} imageEnabled={!!image} viewport={viewport}>

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<HTMLDivElement | null>
 }