feat(docs): apply renewal useViewport hook to Reset viewport docs

lunit-io · Jan 2, 2023 · 002a3f0 · 002a3f0
1 parent bfc1552
commit 002a3f0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 24 deletions.
diff --git a/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image1.tsx b/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image1.tsx
@@ -1,6 +1,7 @@
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { Box, Stack, Switch, Button, Text } 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 useImageSelect from '../../../components/ImageSelect/useImageSelect'
 import { ViewerWrapper } from '../../../components/Wrapper'
 import CustomProgress from '../../../components/CustomProgress'
@@ -13,11 +14,16 @@ const INITIAL_VIEWPORT = {
 }
 
 export default function Image1(): JSX.Element {
+  const viewerRef = useRef<HTMLDivElement>(null)
   const { ImageSelect, selected } = useImageSelect()
   const { loadingState, image } = useImage({
     wadouri: selected,
   })
-  const { viewport, setViewport, resetViewport, initialized } = useViewport({ initialViewport: INITIAL_VIEWPORT })
+  const { viewport, setViewport, resetViewport, initialized } = useViewport({
+    image,
+    element: viewerRef.current,
+    getInitialViewport: (prevViewport) => ({ ...prevViewport, ...INITIAL_VIEWPORT }),
+  })
 
   const updateViewport = useCallback(
     (key: keyof Viewport, value: unknown) => {
@@ -167,7 +173,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
+            image={image}
+            viewerRef={viewerRef}
+            viewport={viewport}
+            onViewportChange={setViewport}
+            Progress={CustomProgress}
+          >
             <OverlayLayer viewport={viewport} />
           </InsightViewer>
         </ViewerWrapper>

diff --git a/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image2.tsx b/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image2.tsx
@@ -1,32 +1,31 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { Box, Stack, Switch, Button, Text } 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 useImageSelect from '../../../components/ImageSelect/useImageSelect'
 import { ViewerWrapper } from '../../../components/Wrapper'
 import CustomProgress from '../../../components/CustomProgress'
 import OverlayLayer from '../../../components/OverlayLayer'
 
 const INITIAL_VIEWPORT = {
   scale: 0.5,
-  windowWidth: 90,
+  windowWidth: 100,
   windowCenter: 32,
 }
 
 export default function Image2(): JSX.Element {
-  const { ImageSelect, selected } = useImageSelect()
-  const { viewport, setViewport, resetViewport, initialized } = useViewport({ initialViewport: INITIAL_VIEWPORT })
+  const viewerRef = useRef<HTMLDivElement>(null)
+
   const currentViewportRef = useRef<Viewport>()
-  const handleImageLoaded = () => {
-    if (!currentViewportRef?.current) {
-      currentViewportRef.current = viewport
-      return
-    }
-    setViewport(currentViewportRef.current)
-  }
 
-  const { loadingState, image } = useImage({
-    wadouri: selected,
-    onImageLoaded: handleImageLoaded,
+  const { ImageSelect, selected } = useImageSelect()
+  const { loadingState, image } = useImage({ wadouri: selected })
+
+  const { viewport, initialized, setViewport, resetViewport } = useViewport({
+    image,
+    element: viewerRef.current,
+    options: { fitScale: false },
+    getInitialViewport: (prevViewport) => ({ ...prevViewport, ...(currentViewportRef.current ?? INITIAL_VIEWPORT) }),
   })
 
   const updateViewport = useCallback(
@@ -40,10 +39,21 @@ export default function Image2(): JSX.Element {
   )
 
   useEffect(() => {
-    if (currentViewportRef.current) {
-      currentViewportRef.current = viewport
-    }
-  }, [selected])
+    /**
+     * If viewport is the initial value, viewportRef does not initialize.
+     * If you later update the viewport, use the value to assign
+     * it to Ref and use it to obtain the initial viewport value.
+     */
+    if (!initialized) return
+
+    currentViewportRef.current = viewport
+  }, [initialized, viewport])
+
+  const resetViewportAndCurrentViewportRef = () => {
+    currentViewportRef.current = undefined
+
+    resetViewport()
+  }
 
   return (
     <Box>
@@ -92,7 +102,7 @@ export default function Image2(): JSX.Element {
                 />
               </Box>
             </Box>
-            <Button colorScheme="blue" onClick={resetViewport} className="reset">
+            <Button colorScheme="blue" onClick={resetViewportAndCurrentViewportRef} className="reset">
               Reset
             </Button>
           </Stack>
@@ -183,7 +193,13 @@ export default function Image2(): 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>