2.12.11 • Public • Published


    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.


    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
    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] and is connected the redux store. 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')),

    Stack prefetch configuration

    Stack prefetch can be configured through extension configuration using the stackPrefetch key:

      cornerstoneExtensionConfig: {
        stackPrefetch: {
          enabled: true,
          maxImagesToPrefetch: Infinity,
          preserveExistingPool: false,
          maxSimultaneousRequests: 20,

    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]
    <!-- 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 -->




    npm i @ohif/extension-cornerstone

    DownloadsWeekly Downloads






    Unpacked Size

    4.93 MB

    Total Files


    Last publish


    • sedghi
    • zaidsafadi
    • swederik
    • andrebot
    • brunoalvesdefaria
    • chafey
    • lscoder
    • sandrasie
    • evren217
    • dannyrb
    • ohif-bot
    • jamesapetts