othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: basic viewport docs

Browse Source
This commit is contained in:
dannyrb 2019-12-09 01:02:02 -05:00
parent 58d2bf1d12
commit f6db7fade6
1 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
docs/latest/extensions/modules/viewport.md
View File

@ -1,19 +1,39 @@
# Module: Viewport # Module: Viewport
An extension can register a Viewport Module by providing a `getViewportModule()` An extension can register a Viewport Module by defining a `getViewportModule`
method that returns a React Component. The React component will receive the method that returns a React component. Currently, we use viewport components to
following props: add support for:
```js - 2D Medical Image Viewing (cornerstone ext.)
children: PropTypes.arrayOf(PropTypes.element) - Structured Reports as HTML (dicom html ext.)
studies: PropTypes.object, - Encapsulated PDFs as PDFs (dicom pdf ext.)
displaySet: PropTypes.object, - Whole Slide Microscopy Viewing (whole slide ext.)
viewportData: PropTypes.object, // { studies, displaySet } - etc.
viewportIndex: PropTypes.number,
children: PropTypes.node, The general pattern is, the [`sopClassHandlerModule`](#) helps us determine
customProps: PropTypes.object which Viewport Component a set of `sopClassUIDs` should default to. The Viewport
Component receives props containing a display set it should know how to render.
## Viewport Component Props
Each `ViewportComponent` will receive the following props:
```html
<viewportComponent
viewportData="{viewportData}"
viewportIndex="{viewportIndex}"
children="{[children]}"
/>
``` ```
| Property | Type | Description |
| --------------- | --------------- | --------------------------------- |
| `children` | React.element[] | |
| `viewportData` | object | `viewportSpecificData` (probably) |
| `viewportIndex` | number | |
### `@ohif/viewer`
Viewport components are managed by the `ViewportGrid` Component. Which Viewport Viewport components are managed by the `ViewportGrid` Component. Which Viewport
component is used depends on: component is used depends on:
@ -23,7 +43,4 @@ component is used depends on:
![Cornerstone Viewport](../../assets/img/extensions-viewport.png) ![Cornerstone Viewport](../../assets/img/extensions-viewport.png)
<center><i>An example of three Viewports</i></center> <center><i>An example of three cornerstone Viewports</i></center>
For a complete example implementation,
[check out the OHIFCornerstoneViewport](https://github.com/OHIF/Viewers/blob/master/extensions/cornerstone/src/OHIFCornerstoneViewport.js).