feat(docs): apply modified useViewport parameter type to docs

lunit-io · Oct 25, 2022 · fe0ad2b · fe0ad2b
1 parent c9c753c
commit fe0ad2b
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 25 deletions.
diff --git a/apps/insight-viewer-docs/containers/Interaction/Custom.tsx b/apps/insight-viewer-docs/containers/Interaction/Custom.tsx
@@ -34,7 +34,7 @@ export default function App(): JSX.Element {
     setViewport,
     resetViewport,
   } = useViewport({
-    scale: 1,
+    initialViewport: { scale: 1 },
   })
 
   const customPan: Drag = ({ viewport, delta }) => {

diff --git a/apps/insight-viewer-docs/containers/Interaction/Image1.tsx b/apps/insight-viewer-docs/containers/Interaction/Image1.tsx
@@ -7,6 +7,8 @@ import InsightViewer, {
   useFrame,
   Interaction,
   Wheel,
+  BasicViewport,
+  ViewportOptions,
 } from '@lunit/insight-viewer'
 import { IMAGES } from '@insight-viewer-library/fixtures'
 import CodeBlock from '../../components/CodeBlock'
@@ -24,8 +26,17 @@ const MAX_FRAME = IMAGES.length - 1
 const MIN_SCALE = 0.178
 const MAX_SCALE = 3
 
+interface ViewportSetting {
+  initialViewport?: Partial<BasicViewport>
+  options: ViewportOptions
+}
+
 export default function App(): JSX.Element {
-  const [isActiveInitialViewport, setIsActiveInitialViewport] = useState<boolean>(false)
+  const [viewportSetting, setViewportSetting] = useState<ViewportSetting>({
+    initialViewport: undefined,
+    options: { fitScale: false },
+  })
+
   const { loadingStates, images } = useMultipleImages({
     wadouri: IMAGES,
   })
@@ -34,41 +45,49 @@ export default function App(): JSX.Element {
     max: images.length - 1,
   })
   const { interaction, setInteraction } = useInteraction()
-  const { viewport, setViewport, resetViewport } = useViewport(isActiveInitialViewport ? { scale: 0.5 } : undefined)
-
-  function handleChange(type: string) {
-    return (value: string) => {
-      setInteraction((prev: Interaction) => ({
-        ...prev,
-        [type]: value === 'none' ? undefined : value,
-      }))
-    }
-  }
+  const { viewport, setViewport, resetViewport } = useViewport(viewportSetting)
 
   const handleFrame: Wheel = (_, deltaY) => {
     if (deltaY !== 0) setFrame((prev) => Math.min(Math.max(prev + (deltaY > 0 ? 1 : -1), MIN_FRAME), MAX_FRAME))
   }
 
   const handleScale: Wheel = (_, deltaY) => {
-    if (deltaY !== 0)
+    if (deltaY !== 0) {
       setViewport((prev) => ({
         ...prev,
         scale: Math.min(Math.max(prev.scale + (deltaY > 0 ? 0.25 : -0.25), MIN_SCALE), MAX_SCALE),
       }))
+    }
   }
 
   const handler = {
     frame: handleFrame,
     scale: handleScale,
   }
 
-  function handleWheel(value: string) {
+  const handleActiveFitScaleSwitchChange = (isChecked: boolean) => {
+    setViewportSetting((prevSetting) => ({ ...prevSetting, options: { fitScale: isChecked } }))
+  }
+
+  const handleActiveInitialViewportSwitchChange = (isChecked: boolean) => {
+    setViewportSetting((prevSetting) => ({ ...prevSetting, initialViewport: isChecked ? { scale: 0.5 } : undefined }))
+  }
+
+  const handleChange = (type: string) => {
+    return (value: string) => {
+      setInteraction((prev: Interaction) => ({
+        ...prev,
+        [type]: value === 'none' ? undefined : value,
+      }))
+    }
+  }
+
+  const handleWheel = (value: string) => {
     setInteraction((prev: Interaction) => ({
       ...prev,
       mouseWheel: value === 'none' ? undefined : handler[value as keyof typeof handler],
     }))
   }
-
   return (
     <Box data-cy-loaded={loadingStates[frame]}>
       <Stack direction="row" spacing="80px" align="flex-start">
@@ -78,9 +97,17 @@ export default function App(): JSX.Element {
           <Box>
             active initial viewport (scale 0.5){' '}
             <Switch
-              onChange={(e) => setIsActiveInitialViewport(e.target.checked)}
+              onChange={(e) => handleActiveInitialViewportSwitchChange(e.target.checked)}
               className="toggle-initial-viewport"
-              isChecked={isActiveInitialViewport}
+              isChecked={!!viewportSetting.initialViewport}
+            />
+          </Box>
+          <Box>
+            active fit scale{' '}
+            <Switch
+              onChange={(e) => handleActiveFitScaleSwitchChange(e.target.checked)}
+              className="toggle-fit-scale"
+              isChecked={viewportSetting.options.fitScale}
             />
           </Box>
           <Box mb={6}>

diff --git a/apps/insight-viewer-docs/containers/Viewport/Code.ts b/apps/insight-viewer-docs/containers/Viewport/Code.ts
@@ -15,9 +15,11 @@ export default function App() {
     imageId: IMAGE_ID,
   })
   const { viewport, setViewport, resetViewport } = useViewport({
-    scale: 0.5,
-    windowWidth: 90,
-    windowCenter: 32,
+    initalViewport: {
+      scale: 0.5,
+      windowWidth: 90,
+      windowCenter: 32,
+    }
   })
 
   function updateViewport() {

diff --git a/apps/insight-viewer-docs/containers/Viewport/Image1.tsx b/apps/insight-viewer-docs/containers/Viewport/Image1.tsx
@@ -11,7 +11,7 @@ export default function Image1(): JSX.Element {
   const { loadingState, image } = useImage({
     wadouri: IMAGES[0],
   })
-  const { viewport, setViewport, resetViewport, initialized } = useViewport(INITIAL_VIEWPORT1)
+  const { viewport, setViewport, resetViewport, initialized } = useViewport({ initialViewport: INITIAL_VIEWPORT1 })
 
   const updateViewport = useCallback(
     (key: keyof Viewport, value: unknown) => {

diff --git a/apps/insight-viewer-docs/containers/Viewport/Image2.tsx b/apps/insight-viewer-docs/containers/Viewport/Image2.tsx
@@ -11,7 +11,7 @@ export default function Image1(): JSX.Element {
   const { image } = useImage({
     wadouri: IMAGES[11],
   })
-  const { viewport, setViewport, resetViewport } = useViewport(INITIAL_VIEWPORT2)
+  const { viewport, setViewport, resetViewport } = useViewport({ initialViewport: INITIAL_VIEWPORT2 })
 
   const updateViewport = useCallback(
     (key: keyof Viewport, value: unknown) => {

diff --git a/apps/insight-viewer-docs/containers/ViewportReset/MultiFrame/Images.tsx b/apps/insight-viewer-docs/containers/ViewportReset/MultiFrame/Images.tsx
@@ -14,7 +14,7 @@ const INITIAL_VIEWPORT = {
 
 export default function Images(): JSX.Element {
   const { CaseSelect, selected } = useCaseSelect()
-  const { viewport, setViewport, resetViewport } = useViewport(INITIAL_VIEWPORT)
+  const { viewport, setViewport, resetViewport } = useViewport({ initialViewport: INITIAL_VIEWPORT })
 
   const { loadingStates, images } = useMultipleImages({
     wadouri: selected,

diff --git a/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image1.tsx b/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image1.tsx
@@ -17,7 +17,7 @@ export default function Image1(): JSX.Element {
   const { loadingState, image } = useImage({
     wadouri: selected,
   })
-  const { viewport, setViewport, resetViewport, initialized } = useViewport(INITIAL_VIEWPORT)
+  const { viewport, setViewport, resetViewport, initialized } = useViewport({ initialViewport: INITIAL_VIEWPORT })
 
   const updateViewport = useCallback(
     (key: keyof Viewport, value: unknown) => {

diff --git a/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image2.tsx b/apps/insight-viewer-docs/containers/ViewportReset/SingleFrame/Image2.tsx
@@ -14,7 +14,7 @@ const INITIAL_VIEWPORT = {
 
 export default function Image2(): JSX.Element {
   const { ImageSelect, selected } = useImageSelect()
-  const { viewport, setViewport, resetViewport, initialized } = useViewport(INITIAL_VIEWPORT)
+  const { viewport, setViewport, resetViewport, initialized } = useViewport({ initialViewport: INITIAL_VIEWPORT })
   const currentViewportRef = useRef<Viewport>()
   const handleImageLoaded = () => {
     if (!currentViewportRef?.current) {