feat(docs): apply Renewal useViewport hook to Viewport docs

lunit-io · Jan 3, 2023 · 92ff2fd · 92ff2fd
1 parent 2654854
commit 92ff2fd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/apps/insight-viewer-docs/containers/Viewport/Image1.tsx b/apps/insight-viewer-docs/containers/Viewport/Image1.tsx
@@ -1,19 +1,25 @@
-import { useEffect, useCallback } from 'react'
+import { useRef, useEffect, useCallback } from 'react'
 import { Box, Stack, Switch, Button } from '@chakra-ui/react'
-import InsightViewer, { useImage, useViewport, Viewport } from '@lunit/insight-viewer'
+import InsightViewer, { useImage, Viewport } from '@lunit/insight-viewer'
+import { useViewport } from '@lunit/insight-viewer/viewport'
+
 import { IMAGES } from '@insight-viewer-library/fixtures'
 import { ViewerWrapper } from '../../components/Wrapper'
 import CustomProgress from '../../components/CustomProgress'
 import OverlayLayer from '../../components/OverlayLayer'
 import { INITIAL_VIEWPORT1 } from './const'
 
 export default function Image1(): JSX.Element {
+  const viewerRef = useRef<HTMLDivElement>(null)
+
   const { loadingState, image } = useImage({
     wadouri: IMAGES[0],
   })
   const { viewport, setViewport, resetViewport, initialized } = useViewport({
-    initialViewport: INITIAL_VIEWPORT1,
+    image,
+    element: viewerRef.current,
     options: { fitScale: false },
+    getInitialViewport: (prevViewport) => ({ ...prevViewport, ...INITIAL_VIEWPORT1 }),
   })
 
   const updateViewport = useCallback(
@@ -201,7 +207,13 @@ export default function Image1(): JSX.Element {
       </Stack>
       <Box data-cy-loaded={loadingState} data-cy-viewport={initialized}>
         <ViewerWrapper className="viewer1">
-          <InsightViewer image={image} viewport={viewport} onViewportChange={setViewport} Progress={CustomProgress}>
+          <InsightViewer
+            viewerRef={viewerRef}
+            image={image}
+            viewport={viewport}
+            onViewportChange={setViewport}
+            Progress={CustomProgress}
+          >
             <OverlayLayer viewport={viewport} />
           </InsightViewer>
         </ViewerWrapper>

diff --git a/apps/insight-viewer-docs/containers/Viewport/Image2.tsx b/apps/insight-viewer-docs/containers/Viewport/Image2.tsx
@@ -1,18 +1,25 @@
-import { useEffect, useCallback } from 'react'
+import { useRef, useEffect, useCallback } from 'react'
 import { Box, Stack, Button } from '@chakra-ui/react'
-import InsightViewer, { useImage, useViewport, Viewport } from '@lunit/insight-viewer'
+import InsightViewer, { useImage, Viewport } from '@lunit/insight-viewer'
+import { useViewport } from '@lunit/insight-viewer/viewport'
 import { IMAGES } from '@insight-viewer-library/fixtures'
 import { ViewerWrapper } from '../../components/Wrapper'
 import CustomProgress from '../../components/CustomProgress'
 import OverlayLayer from '../../components/OverlayLayer'
 import { INITIAL_VIEWPORT2 } from './const'
 
-export default function Image1(): JSX.Element {
+export default function Image2(): JSX.Element {
+  const viewerRef = useRef<HTMLDivElement>(null)
+
   const { image } = useImage({
     wadouri: IMAGES[11],
   })
-  const { viewport, setViewport, resetViewport } = useViewport({ initialViewport: INITIAL_VIEWPORT2 })
-
+  const { viewport, setViewport, resetViewport } = useViewport({
+    image,
+    element: viewerRef.current,
+    options: { fitScale: false },
+    getInitialViewport: (prevViewport) => ({ ...prevViewport, ...INITIAL_VIEWPORT2 }),
+  })
   const updateViewport = useCallback(
     (key: keyof Viewport, value: unknown) => {
       setViewport((prev: Viewport) => ({
@@ -101,7 +108,13 @@ export default function Image1(): JSX.Element {
       </Stack>
       <Box>
         <ViewerWrapper className="viewer2">
-          <InsightViewer image={image} viewport={viewport} onViewportChange={setViewport} Progress={CustomProgress}>
+          <InsightViewer
+            viewerRef={viewerRef}
+            image={image}
+            viewport={viewport}
+            onViewportChange={setViewport}
+            Progress={CustomProgress}
+          >
             <OverlayLayer viewport={viewport} />
           </InsightViewer>
         </ViewerWrapper>