ohif-viewer/extensions/cornerstone
Alireza 5c8ee7f906
feat: OHIF-v3 UI Component Library (#2653)
* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems

* fix: storybook webpack config

* feat: add more stories

* feat: add more stories

* feat: add more stories

* feat: fix logo and babel runtime error

* feat: move to mdx docs for ui

* feat: enhanced mdx for header and styles

* feat: Add button usecases

* feat: Add buttonGroup docs

* feat: Add docs and use case to cine and contex menu

* feat: fix decorators

* feat: add header and dropdown docs

* feat: add Icon and input docs

* feat: add more docs

* feat: add more stories

* fix: feedback section

* feat: Add doc page

* feat: Add typography and color stories

* yarn lock

* add analytics to v3-ui

* new banner image

* new viewport component

* update review comments
2022-02-10 14:08:34 -05:00
..
.webpack fix: Add some code splitting for PWA build (#937) 2019-09-26 11:35:13 +02:00
src feat: Add theme/config-point capability and docs. (#2641) 2022-01-27 12:09:36 -05:00
babel.config.js Make thumbnails display 2020-05-18 23:21:41 +02:00
CHANGELOG.md chore(release): publish [skip ci] 2020-05-12 14:49:58 +00:00
jest.config.js feat: 🎸 MeasurementService (#1314) 2020-02-10 14:15:05 -05:00
LICENSE Chore/kill yalc with fire (#629) 2019-08-13 15:36:46 -04:00
package.json feat: OHIF-v3 UI Component Library (#2653) 2022-02-10 14:08:34 -05:00
README.md feat: Support for OpenID Connect (#2431) 2021-06-23 20:41:27 +02:00

@ohif/extension-cornerstone

npm (scoped)

This extension adds support for viewing and manipulating 2D medical images via a viewport. The underlying implementation wraps the cornerstonejs/react-cornerstone-viewport, and provides basic commands and toolbar buttons for common actions.

Index

Extension Id: cornerstone

Commands Module

This extensions includes the following Commands and Command Definitions. These can be registered with @ohif/core's CommandManager. After registering the commands, they can be bound to hotkeys using the HotkeysManager and listed in the UserPreferences modal.

You can read more about [Commands][docs-commands], [Hotkeys][docs-hotkeys], and the [UserPreferences Modal][docs-userprefs] in their respective locations in the OHIF Viewer's documentation.

Command Name Description Store Contexts
rotateViewportCW viewports
rotateViewportCCW viewports
invertViewport viewports
flipViewportVertical viewports
flipViewportHorizontal viewports
scaleUpViewport viewports
scaleDownViewport viewports
fitViewportToWindow viewports
resetViewport viewports
clearAnnotations TODO
next/previous Image TODO
first/last Image TODO
nextViewportDisplaySet
previousViewportDisplaySet
setToolActive Activates tool for primary button/touch

Toolbar Module

Our toolbar module contains definitions for:

  • StackScroll
  • Zoom
  • Wwwc
  • Pan
  • Length
  • Angle
  • Reset
  • Cine

All use the ACTIVE_VIEWPORT::CORNERSTONE context.

Viewport Module

Our Viewport wraps [cornerstonejs/react-cornerstone-viewport][react-viewport]. This module is the most prone to change as we hammer out our Viewport interface.

Tool Configuration

Tools can be configured through extension configuration using the tools key:

  ...
  cornerstoneExtensionConfig: {
    tools: {
      ArrowAnnotate: {
        configuration: {
          getTextCallback: (callback, eventDetails) => callback(prompt('Enter your custom annotation')),
        },
      },
    },
  },
  ...

Annotate Tools Configuration

We currently support one property for annotation tools.

Hide handles

This extension configuration allows you to toggle on/off handle rendering for all annotate tools:

  ...
  cornerstoneExtensionConfig: {
    hideHandles: true,
  },
  ...

## Resources

### Repositories

- [cornerstonejs/react-cornerstone-viewport][react-viewport]
- [cornerstonejs/cornerstoneTools][cornerstone-tools]
- [cornerstonejs/cornerstone][cornerstone]

<!--
  Links
  -->

<!-- prettier-ignore-start -->
[docs-commands]: https://www.com
[docs-hotkeys]: https://www.com
[docs-userprefs]: htt
[react-viewport]: https://github.com/cornerstonejs/react-cornerstone-viewport
[cornerstone-tools]: https://github.com/cornerstonejs/cornerstoneTools
[cornerstone]: https://github.com/cornerstonejs/cornerstone
<!-- prettier-ignore-end -->