@lunit/insight-viewer2

cornerstone 등 OPT 기능을 구현하기 위한 여러 graphics layer를 구현한다.

Install

npm install @lunit/insight-viewer2

Sample Codes

https://lunit-io.github.io/opt-tool-frontend

Stories

__stories__/InsightViewer.stories.tsx

```tsx import { withOptTheme } from '@lunit/opt-theme'; import { storiesOf } from '@storybook/react'; import React from 'react'; import { InsightViewer } from '../components/InsightViewer'; import { useInsightViewerSync } from '../hooks/useInsightViewerSync'; import { CornerstoneSingleImage } from '../image/CornerstoneSingleImage'; import { CornerstoneImage } from '../image/types'; import { installWADOImageLoader, unloadWADOImage } from '../installWADO'; import { useController, withTestController } from './decorators/withTestController';

// cornerstoneWADOImageLoader 초기화 필요 installWADOImageLoader();

const resetTime: number = Date.now(); const image: CornerstoneImage = new CornerstoneSingleImage(wadouri:samples/series/CT000010.dcm, {unload: unloadWADOImage});

function Component() { const { width, height, control, wheel, invert, flip, } = useController();

const {updateCornerstoneRenderData} = useInsightViewerSync();

return ( <InsightViewer width={width} height={height} invert={invert} flip={flip} pan={control === 'pan'} adjust={control === 'adjust'} zoom={wheel === 'zoom'} resetTime={resetTime} image={image} updateCornerstoneRenderData={updateCornerstoneRenderData}/> ); }

storiesOf('insight-viewer2', module) .addDecorator(withOptTheme) .addDecorator(withTestController({ width: [600, 400, 1000], height: [700, 400, 1000], control: ['pan', ['none', 'pan', 'adjust']], wheel: ['zoom', ['none', 'zoom']], flip: false, invert: false, })) .add('', () => { return ; });

<h3>__stories__/MachineHeatmapViewer.stories.tsx</h3>
```tsx
// TODO

__stories__/SeriesImage.stories.tsx

```tsx import { withOptTheme } from '@lunit/opt-theme'; import { storiesOf } from '@storybook/react'; import React, { useState } from 'react'; import { InsightViewer } from '../components/InsightViewer'; import { InsightViewerContainer } from '../components/InsightViewerContainer'; import { useBulkImageScroll } from '../hooks/useBulkImageScroll'; import { useInsightViewerSync } from '../hooks/useInsightViewerSync'; import { CornerstoneSeriesImage } from '../image/CornerstoneSeriesImage'; import { CornerstoneBulkImage } from '../image/types'; import { installWADOImageLoader, unloadWADOImage } from '../installWADO'; import { withSeriesImageController } from './decorators/withSeriesImageController'; import { useController, withTestController } from './decorators/withTestController'; import series from './series.json'; import { ProgressViewer } from '../components/ProgressViewer';

installWADOImageLoader();

const resetTime: number = Date.now(); const image: CornerstoneBulkImage = new CornerstoneSeriesImage(series.map(p => wadouri:samples/series/${p}), {unload: unloadWADOImage});

function Component() { const [interactionElement, setInteractionElement] = useState<HTMLElement | null>(null);

const { width, height, control, wheel, invert, flip, } = useController();

const {updateCornerstoneRenderData} = useInsightViewerSync();

useBulkImageScroll({ image, element: interactionElement, enabled: wheel === 'scroll', });

return ( <InsightViewer width={width} height={height} invert={invert} flip={flip} pan={control === 'pan' && interactionElement} adjust={control === 'adjust' && interactionElement} zoom={wheel === 'zoom' && interactionElement} resetTime={resetTime} image={image} updateCornerstoneRenderData={updateCornerstoneRenderData}/> ); }

storiesOf('insight-viewer2', module) .addDecorator(withOptTheme) .addDecorator(withTestController({ width: [600, 400, 1000], height: [700, 400, 1000], control: ['pan', ['none', 'pan', 'adjust']], wheel: ['scroll', ['none', 'zoom', 'scroll']], flip: false, invert: false, })) .addDecorator(withSeriesImageController(image)) .add('Series Image', () => { return ; });

<h3>__stories__/UserContourDrawer.stories.tsx</h3>
```tsx
// TODO

__stories__/UserContourViewer.stories.tsx

```tsx // TODO ```

Tests