├── .babelrc
├── .circleci
└── config.yml
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── .vscode
├── extensions.json
└── settings.json
├── .webpack
├── webpack.config.js
└── webpack.dev.js
├── LICENSE
├── README.md
├── babel.config.js
├── examples
├── App.js
├── ExamplePageBasic.js
├── ExamplePageCustomOverlay.js
├── ExamplePageEscapeHatch.js
├── ExamplePageGrid.js
├── index.css
├── index.html
├── index.js
└── initCornerstone.js
├── netlify.toml
├── package-lock.json
├── package.json
├── public
├── index.html
├── initCornerstone.js
├── manifest.json
└── script-tag-index.html
├── rollup.config.js
└── src
├── CornerstoneViewport
├── CornerstoneViewport.css
└── CornerstoneViewport.js
├── ImageScrollbar
├── ImageScrollbar.css
└── ImageScrollbar.js
├── LoadingIndicator
├── LoadingIndicator.css
└── LoadingIndicator.js
├── ViewportOrientationMarkers
├── ViewportOrientationMarkers.css
└── ViewportOrientationMarkers.js
├── ViewportOverlay
├── ViewportOverlay.css
└── ViewportOverlay.js
├── helpers
├── areStringArraysEqual.js
├── formatDA.js
├── formatNumberPrecision.js
├── formatPN.js
├── formatTM.js
├── index.js
└── isValidNumber.js
├── index.js
├── metadataProvider.js
└── test.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/preset-env", {
4 | "targets": {
5 | "ie": "11"
6 | },
7 | }],
8 | "@babel/preset-react"
9 | ],
10 | "plugins": [
11 | "@babel/plugin-proposal-class-properties"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | # Use the latest 2.1 version of CircleCI pipeline processing engine, see https://circleci.com/docs/2.0/configuration-reference/
2 | version: 2.1
3 |
4 | defaults: &defaults
5 | working_directory: ~/repo
6 | # https://circleci.com/docs/2.0/circleci-images/#language-image-variants
7 | docker:
8 | - image: cimg/node:16.8.0
9 | environment:
10 | TERM: xterm # Enable colors in term
11 |
12 | jobs:
13 | CHECKOUT:
14 | <<: *defaults
15 | steps:
16 | - checkout
17 | - restore_cache:
18 | name: Restore Package Cache
19 | keys:
20 | - packages-v1-{{ .Branch }}-{{ checksum "package.json" }}
21 | - packages-v1-{{ .Branch }}-
22 | - packages-v1-
23 | - run: npm ci
24 | - save_cache:
25 | name: Save Package Cache
26 | paths:
27 | - ~/repo/node_modules
28 | key: packages-v1-{{ .Branch }}-{{ checksum "package.json" }}
29 | - persist_to_workspace:
30 | root: ~/repo
31 | paths: .
32 |
33 | BUILD_AND_TEST:
34 | <<: *defaults
35 | steps:
36 | - attach_workspace:
37 | at: ~/repo
38 | - run: npm run build
39 | # No tests yet :(
40 | # https://circleci.com/docs/2.0/collect-test-data/#karma
41 | # - store_test_results:
42 | # path: reports/junit
43 | # - store_artifacts:
44 | # path: reports/junit
45 | - persist_to_workspace:
46 | root: ~/repo
47 | paths: .
48 |
49 | NPM_PUBLISH:
50 | <<: *defaults
51 | steps:
52 | - attach_workspace:
53 | at: ~/repo
54 | - run:
55 | name: Avoid hosts unknown for github
56 | command:
57 | mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking
58 | no\n" > ~/.ssh/config
59 | - run:
60 | name: Publish using Semantic Release
61 | command: npx semantic-release
62 |
63 | workflows:
64 | version: 2
65 |
66 | # PULL REQUEST
67 | PULL_REQUEST:
68 | jobs:
69 | - CHECKOUT:
70 | filters:
71 | branches:
72 | ignore:
73 | - master
74 | - feature/*
75 | - hotfix/*
76 | - BUILD_AND_TEST:
77 | requires:
78 | - CHECKOUT
79 |
80 | # MERGE TO MASTER
81 | TEST_AND_RELEASE:
82 | jobs:
83 | - CHECKOUT:
84 | filters:
85 | branches:
86 | only: master
87 | - BUILD_AND_TEST:
88 | requires:
89 | - CHECKOUT
90 | - NPM_PUBLISH:
91 | requires:
92 | - BUILD_AND_TEST
93 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | *.css
2 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "react-app",
4 | "eslint:recommended",
5 | "plugin:react/recommended",
6 | "plugin:prettier/recommended"
7 | ],
8 | "parser": "babel-eslint",
9 | "env": {
10 | "jest": true
11 | },
12 | "settings": {
13 | "react": {
14 | "version": "detect"
15 | }
16 | },
17 | "globals": {
18 | "context": true,
19 | "assert": true
20 | },
21 | "rules": {
22 | "no-console": "warn",
23 | "no-undef": "warn",
24 | "no-unused-vars": "warn",
25 | "prettier/prettier": [
26 | "error",
27 | {
28 | "endOfLine": "auto"
29 | }
30 | ],
31 | // React
32 | // https://github.com/yannickcr/eslint-plugin-react#recommended
33 | "react/sort-comp": "warn"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
3 |
4 | # dependencies
5 | node_modules
6 |
7 | # builds
8 | build
9 | dist
10 | .rpt2_cache
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | .idea
24 | .yalc
25 | yalc.lock
26 | yarn.lock
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "printWidth": 80,
4 | "proseWrap": "always",
5 | "tabWidth": 2,
6 | "semi": true,
7 | "singleQuote": true
8 | }
9 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
3 | }
4 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.rulers": [80, 120],
3 |
4 | // ===
5 | // Spacing
6 | // ===
7 |
8 | "editor.insertSpaces": true,
9 | "editor.tabSize": 2,
10 | "editor.trimAutoWhitespace": true,
11 | "files.trimTrailingWhitespace": true,
12 | "files.insertFinalNewline": true,
13 | "files.trimFinalNewlines": true,
14 |
15 | // ===
16 | // Event Triggers
17 | // ===
18 |
19 | "editor.formatOnSave": true,
20 | "eslint.autoFixOnSave": true,
21 | "eslint.run": "onSave",
22 | "eslint.validate": [
23 | { "language": "javascript", "autoFix": true },
24 | { "language": "javascriptreact", "autoFix": true }
25 | ],
26 | "prettier.disableLanguages": [],
27 | "workbench.colorCustomizations": {},
28 | "editor.codeActionsOnSave": {
29 | "source.fixAll.eslint": true
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/.webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const autoprefixer = require('autoprefixer');
4 | // Plugins
5 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
6 | .BundleAnalyzerPlugin;
7 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
8 | const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core
9 | .rules;
10 |
11 | const ENTRY_VTK_EXT = path.join(__dirname, './../src/index.js');
12 | const SRC_PATH = path.join(__dirname, './../src');
13 | const OUT_PATH = path.join(__dirname, './../dist');
14 |
15 | /**
16 | * `argv` are options from the CLI. They will override our config here if set.
17 | * `-d` - Development shorthand, sets `debug`, `devtool`, and `mode`
18 | * `-p` - Production shorthand, sets `minimize`, `NODE_ENV`, and `mode`
19 | */
20 | module.exports = (env, argv) => {
21 | const isProdBuild = argv.mode !== 'development';
22 | const outputFilename = isProdBuild ? '[name].umd.min.js' : '[name].umd.js';
23 |
24 | return {
25 | entry: {
26 | vtkViewport: ENTRY_VTK_EXT,
27 | },
28 | devtool: 'source-map',
29 | output: {
30 | path: OUT_PATH,
31 | filename: outputFilename,
32 | library: 'VTKViewport',
33 | libraryTarget: 'umd',
34 | globalObject: 'this',
35 | },
36 | module: {
37 | rules: [
38 | {
39 | test: /\.(js|jsx)$/,
40 | exclude: /node_modules/,
41 | use: ['babel-loader'],
42 | },
43 | {
44 | test: /\.css$/,
45 | exclude: /\.module\.css$/,
46 | use: [
47 | 'style-loader',
48 | 'css-loader',
49 | {
50 | loader: 'postcss-loader',
51 | options: {
52 | plugins: () => [autoprefixer('last 2 version', 'ie >= 10')],
53 | },
54 | },
55 | ],
56 | },
57 | ].concat(vtkRules),
58 | },
59 | resolve: {
60 | modules: [path.resolve(__dirname, './../node_modules'), SRC_PATH],
61 | },
62 | externals: [
63 | // Used to build/load metadata
64 | {
65 | 'cornerstone-core': {
66 | commonjs: 'cornerstone-core',
67 | commonjs2: 'cornerstone-core',
68 | amd: 'cornerstone-core',
69 | root: 'cornerstone',
70 | },
71 | // Vector 3 use
72 | 'cornerstone-math': {
73 | commonjs: 'cornerstone-math',
74 | commonjs2: 'cornerstone-math',
75 | amd: 'cornerstone-math',
76 | root: 'cornerstoneMath',
77 | },
78 | //
79 | react: 'react',
80 | // https://webpack.js.org/guides/author-libraries/#external-limitations
81 | 'vtk.js/Sources': {
82 | commonjs: 'vtk.js',
83 | commonjs2: 'vtk.js',
84 | amd: 'vtk.js',
85 | root: 'vtk.js',
86 | },
87 | },
88 | ],
89 | node: {
90 | // https://github.com/webpack-contrib/style-loader/issues/200
91 | Buffer: false,
92 | },
93 | plugins: [
94 | // Uncomment to generate bundle analyzer
95 | new BundleAnalyzerPlugin(),
96 | // Show build progress
97 | new webpack.ProgressPlugin(),
98 | // Clear dist between builds
99 | // new CleanWebpackPlugin(),
100 | ],
101 | };
102 | };
103 |
--------------------------------------------------------------------------------
/.webpack/webpack.dev.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | // Plugins
4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
5 | const PUBLIC_URL = process.env.PUBLIC_URL || '/';
6 | const ENTRY_VIEWPORT = path.join(__dirname, './../src/index.js');
7 | const ENTRY_EXAMPLES = path.join(__dirname, './../examples/index.js');
8 | const SRC_PATH = path.join(__dirname, './../src');
9 | const OUT_PATH = path.join(__dirname, './../dist');
10 |
11 | module.exports = {
12 | entry: {
13 | examples: ENTRY_EXAMPLES,
14 | },
15 | mode: 'development',
16 | devtool: 'eval',
17 | output: {
18 | path: OUT_PATH,
19 | filename: '[name].bundle.[hash].js',
20 | library: 'cornerstoneViewport',
21 | libraryTarget: 'umd',
22 | globalObject: 'this',
23 | clean: true
24 | },
25 | module: {
26 | rules: [
27 | {
28 | test: /\.(js|jsx)$/,
29 | exclude: /node_modules/,
30 | use: ['babel-loader'],
31 | },
32 | {
33 | test: /\.css$/,
34 | exclude: /\.module\.css$/,
35 | use: ['style-loader', 'css-loader'],
36 | },
37 | ],
38 | },
39 | resolve: {
40 | modules: [path.resolve(__dirname, './../node_modules'), SRC_PATH],
41 | alias: {
42 | '@cornerstone-viewport': ENTRY_VIEWPORT,
43 | },
44 | fallback: { fs: false, path: false },
45 | },
46 | plugins: [
47 | // Show build progress
48 | new webpack.ProgressPlugin(),
49 | new webpack.DefinePlugin({
50 | 'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL || '/'),
51 | }),
52 | // Uncomment to generate bundle analyzer
53 | // new BundleAnalyzerPlugin(),
54 | // Generate `index.html` with injected build assets
55 | new HtmlWebpackPlugin({
56 | filename: 'index.html',
57 | template: path.resolve(__dirname, '..', 'examples', 'index.html'),
58 | templateParameters: {
59 | PUBLIC_URL: PUBLIC_URL,
60 | },
61 | }),
62 | ],
63 | // Fix for `cornerstone-wado-image-loader` fs dep
64 | devServer: {
65 | hot: true,
66 | open: true,
67 | port: 3000,
68 | historyApiFallback: {
69 | disableDotRule: true,
70 | },
71 | },
72 | };
73 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Open Health Imaging Foundation
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Deprecated] Use Cornerstone3D Instead https://cornerstonejs.org/
2 |
3 | # react-cornerstone-viewport
4 |
5 | > Cornerstone medical image viewport component for React
6 |
7 | [](https://www.npmjs.com/package/react-cornerstone-viewport)
8 |
9 | Documentation and Examples: [https://react.cornerstonejs.org/](https://react.cornerstonejs.org/)
10 |
11 | ## Install
12 |
13 | ```bash
14 | ## NPM
15 | npm install --save react-cornerstone-viewport
16 |
17 | ## Yarn
18 | yarn add react-cornerstone-viewport
19 | ```
20 |
21 | ## Usage
22 |
23 | ```jsx
24 | import React, { Component } from 'react'
25 |
26 | import CornerstoneViewport from 'react-cornerstone-viewport'
27 |
28 | class Example extends Component {
29 | render () {
30 | return (
31 |
20 | {text}
21 |
22 | );
23 | }
24 |
25 | /**
26 | *
27 | *
28 | * @param {*} { title, url, text, screenshotUrl }
29 | * @returns
30 | */
31 | function ExampleEntry({ title, url, text, screenshotUrl }) {
32 | return (
33 |
34 |
35 |
37 |
{text}
38 |
39 |
92 |
93 |
Cornerstone Viewport
94 |
95 |
96 |
97 |
98 | This is a set of re-usable components for displaying data with{' '}
99 |
105 |
106 |
107 |
108 |
Examples
109 | {exampleComponents}
110 |
111 |
112 |
113 |
Configuring Cornerstone
114 |
115 | All of these examples assume that the cornerstone family of
116 | libraries have been imported and configured prior to use. Here is
117 | brief example of what that may look like in ES6:
118 |
119 |
124 | {`import dicomParser from 'dicom-parser';
125 | import cornerstone from 'cornerstone-core';
126 | import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
127 | import cornerstoneMath from 'cornerstone-math';
128 | import cornerstoneTools from 'cornerstone-tools';
129 | import Hammer from 'hammerjs';
130 |
131 | export default function initCornerstone() {
132 |
133 | // Cornerstone Tools
134 | cornerstoneTools.external.cornerstone = cornerstone;
135 | cornerstoneTools.external.Hammer = Hammer;
136 | cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
137 | cornerstoneTools.init();
138 |
139 | // Image Loader
140 | cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
141 | cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
142 | cornerstoneWADOImageLoader.webWorkerManager.initialize({
143 | maxWebWorkers: navigator.hardwareConcurrency || 1,
144 | startWebWorkersOnDemand: true,
145 | taskConfiguration: {
146 | decodeTask: {
147 | initializeCodecsOnStartup: false,
148 | usePDFJS: false,
149 | strict: false,
150 | },
151 | },
152 | });
153 | }`}
154 |
155 |
156 |
157 |
170 |
171 |
173 | {props.children}
174 |
175 | );
176 | }
177 |
178 | function AppRouter() {
179 | const basic = () => Example({ children:
187 |
188 |
195 |
196 | );
197 | }
198 |
199 | export default class App extends Component {
200 | render() {
201 | return
43 |
Basic Demo
44 |
45 |
51 |
52 |
Source / Usage
53 |
54 |
59 | {`state = {
60 | tools: [
61 | // Mouse
62 | {
63 | name: 'Wwwc',
64 | mode: 'active',
65 | modeOptions: { mouseButtonMask: 1 },
66 | },
67 | {
68 | name: 'Zoom',
69 | mode: 'active',
70 | modeOptions: { mouseButtonMask: 2 },
71 | },
72 | {
73 | name: 'Pan',
74 | mode: 'active',
75 | modeOptions: { mouseButtonMask: 4 },
76 | },
77 | // Scroll
78 | { name: 'StackScrollMouseWheel', mode: 'active' },
79 | // Touch
80 | { name: 'PanMultiTouch', mode: 'active' },
81 | { name: 'ZoomTouchPinch', mode: 'active' },
82 | { name: 'StackScrollMultiTouch', mode: 'active' },
83 | ],
84 | imageIds: [
85 | 'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.11.dcm',
86 | 'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm',
87 | ],
88 | };
89 |
90 | {/* RENDER */}
91 |
97 |
98 |
31 | 🎉🎉🎉
32 | {Object.keys(this.props).map(key => {
33 | const val = this.props[key];
34 | return (
35 |
36 | {key} : {val}
37 |
38 | );
39 | })}
40 | 🎉🎉🎉
41 |
70 |
Custom Overlay
71 |
72 | The most important thing to note here are the props received by the
73 | Custom Overlay component.
74 |
75 |
76 |
93 |
94 |
Source / Usage
95 |
96 |
101 | {`class CustomOverlay extends Component {
102 | static propTypes = {
103 | scale: PropTypes.number.isRequired,
104 | windowWidth: PropTypes.number.isRequired,
105 | windowCenter: PropTypes.number.isRequired,
106 | imageId: PropTypes.string.isRequired,
107 | imageIndex: PropTypes.number.isRequired,
108 | stackSize: PropTypes.number.isRequired,
109 | };
110 |
111 | render() {
112 | return (
113 |
123 | 🎉🎉🎉
124 | {Object.keys(this.props).map(key => {
125 | const val = this.props[key];
126 | return (
127 |
128 | {key} : {val}
129 |
130 | );
131 | })}
132 | 🎉🎉🎉
133 |
178 |
179 |
17 |
Escape Hatch
18 |
19 | {
32 | const cornerstoneElement = elementEnabledEvt.detail.element;
33 |
34 | // Save this for later
35 | this.setState({
36 | cornerstoneElement,
37 | });
38 |
39 | // Wait for image to render, then invert it
40 | cornerstoneElement.addEventListener(
41 | 'cornerstoneimagerendered',
42 | imageRenderedEvent => {
43 | const viewport = imageRenderedEvent.detail.viewport;
44 | const invertedViewport = Object.assign({}, viewport, {
45 | invert: true,
46 | });
47 |
48 | cornerstone.setViewport(cornerstoneElement, invertedViewport);
49 | }
50 | );
51 | }}
52 | style={{ minWidth: '100%', height: '512px', flex: '1' }}
53 | />
54 |
55 |
56 |
Source / Usage
57 |
58 | The onElementEnabled event allows us to capture the point in time our
59 | element is enabled, and a reference to the element that was enabled.
60 | The bulk of the Cornerstone and CornerstoneTools APIs use the element
61 | as an identifier in API calls -- having access to it opens the door
62 | for more advanced/custom usage.
63 |
64 |
65 | Most notably, you can forego using the "tools" and "activeTool" props
66 | and instead manage things by hand. This can be particularly useful if
67 | you are leveraging Cornerstone Tool's{' '}
68 |
69 | globalToolSyncEnabled
70 | {' '}
71 | configuration property to manage and synchronize viewport tool
72 | modes/bindings.
73 |
74 |
75 |
76 |
81 | {` {
94 | const cornerstoneElement = elementEnabledEvt.detail.element;
95 |
96 | // Save this for later
97 | this.setState({
98 | cornerstoneElement,
99 | });
100 |
101 | // Wait for image to render, then invert it
102 | cornerstoneElement.addEventListener(
103 | 'cornerstoneimagerendered',
104 | imageRenderedEvent => {
105 | const viewport = imageRenderedEvent.detail.viewport;
106 | const invertedViewport = Object.assign({}, viewport, {
107 | invert: true,
108 | });
109 |
110 | cornerstone.setViewport(cornerstoneElement, invertedViewport);
111 | }
112 | );
113 | }}
114 | style={{ minWidth: '100%', height: '512px', flex: '1' }}
115 | />`}
116 |
117 |
118 |
69 |
Grid Demo
70 |
71 | {this.state.viewports.map(vp => (
72 | {
83 | this.setState({
84 | activeViewportIndex: vp,
85 | });
86 | }}
87 | />
88 | ))}
89 |
90 |
91 | {/* FORM */}
92 |
Misc. Props
93 |
94 | Note, when we change the active stack, we also need to update the
95 | imageIdIndex prop to a value that falls within the new stack's range
96 | of possible indexes.
97 |
98 |
200 |
201 | {/* CODE SNIPPET */}
202 |
Source / Usage
203 |
204 |
209 | {`state = {
210 | activeViewportIndex: 0,
211 | viewports: [0, 1, 2, 3],
212 | tools: [
213 | // Mouse
214 | {
215 | name: 'Wwwc',
216 | mode: 'active',
217 | modeOptions: { mouseButtonMask: 1 },
218 | },
219 | {
220 | name: 'Zoom',
221 | mode: 'active',
222 | modeOptions: { mouseButtonMask: 2 },
223 | },
224 | {
225 | name: 'Pan',
226 | mode: 'active',
227 | modeOptions: { mouseButtonMask: 4 },
228 | },
229 | 'Length',
230 | 'Angle',
231 | 'Bidirectional',
232 | 'FreehandRoi',
233 | 'Eraser',
234 | // Scroll
235 | { name: 'StackScrollMouseWheel', mode: 'active' },
236 | // Touch
237 | { name: 'PanMultiTouch', mode: 'active' },
238 | { name: 'ZoomTouchPinch', mode: 'active' },
239 | { name: 'StackScrollMultiTouch', mode: 'active' },
240 | ],
241 | imageIds: [
242 | 'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.9.dcm',
243 | 'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.10.dcm',
244 | 'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.11.dcm',
245 | ],
246 | // FORM
247 | activeTool: 'Wwwc',
248 | imageIdIndex: 0,
249 | isPlaying: false,
250 | frameRate: 22,
251 | };
252 |
253 | {/* RENDER */}
254 |
255 | {this.state.viewports.map(viewportIndex => (
256 | {
267 | this.setState({
268 | activeViewportIndex: viewportIndex,
269 | });
270 | }}
271 | />
272 | ))}
273 |
`}
274 |
275 |
276 |
Cornerstone Viewport
14 |
15 |
16 |
26 | You need to enable JavaScript to run this app.
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/examples/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import './index.css';
5 | import App from './App';
6 | import initCornerstone from './initCornerstone.js';
7 |
8 | //
9 | initCornerstone();
10 | ReactDOM.render(react-cornerstone-viewport
14 |
15 |
16 |
26 | You need to enable JavaScript to run this app.
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/public/initCornerstone.js:
--------------------------------------------------------------------------------
1 | cornerstoneTools.external.cornerstone = cornerstone;
2 | cornerstoneTools.external.Hammer = Hammer;
3 | cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
4 |
5 | cornerstoneTools.init();
6 |
7 | const config = {
8 | maxWebWorkers: navigator.hardwareConcurrency || 1,
9 | startWebWorkersOnDemand: true,
10 | webWorkerTaskPaths: [],
11 | taskConfiguration: {
12 | decodeTask: {
13 | loadCodecsOnStartup: true,
14 | initializeCodecsOnStartup: false,
15 | strict: false
16 | }
17 | }
18 | };
19 |
20 | cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
21 |
22 | cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
23 | cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
24 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "react-cornerstone-viewport",
3 | "name": "react-cornerstone-viewport",
4 | "start_url": "./index.html",
5 | "display": "standalone",
6 | "theme_color": "#000000",
7 | "background_color": "#ffffff"
8 | }
9 |
--------------------------------------------------------------------------------
/public/script-tag-index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-viewerbase
11 |
12 |
13 |
19 | You need to enable JavaScript to run this app.
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
48 |
49 |
50 |
51 |
52 |
53 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import babel from 'rollup-plugin-babel';
2 | import commonjs from 'rollup-plugin-commonjs';
3 | import external from 'rollup-plugin-peer-deps-external';
4 | import postcss from 'rollup-plugin-postcss';
5 | import resolve from 'rollup-plugin-node-resolve';
6 | import url from 'rollup-plugin-url';
7 | import svgr from '@svgr/rollup';
8 |
9 | import pkg from './package.json';
10 |
11 | const globals = {
12 | react: 'React',
13 | 'react-dom': 'ReactDOM',
14 | 'cornerstone-core': 'cornerstone',
15 | 'cornerstone-math': 'cornerstoneMath',
16 | 'cornerstone-tools': 'cornerstoneTools',
17 | 'cornerstone-wado-image-loader': 'cornerstoneWADOImageLoader',
18 | 'dicom-parser': 'dicomParser',
19 | hammerjs: 'Hammer',
20 | };
21 |
22 | export default {
23 | input: 'src/index.js',
24 | output: [
25 | {
26 | file: pkg.main,
27 | format: 'cjs',
28 | sourcemap: true,
29 | globals,
30 | },
31 | {
32 | file: pkg.browser,
33 | format: 'umd',
34 | name: 'react-cornerstone-viewport',
35 | sourcemap: true,
36 | globals,
37 | },
38 | {
39 | file: pkg.module,
40 | format: 'es',
41 | sourcemap: true,
42 | globals,
43 | },
44 | ],
45 | plugins: [
46 | external(),
47 | postcss({
48 | modules: false,
49 | }),
50 | url(),
51 | svgr(),
52 | babel({
53 | exclude: 'node_modules/**',
54 | plugins: ['@babel/transform-runtime'],
55 | runtimeHelpers: true,
56 | }),
57 | resolve(),
58 | commonjs(),
59 | ],
60 | };
61 |
--------------------------------------------------------------------------------
/src/CornerstoneViewport/CornerstoneViewport.css:
--------------------------------------------------------------------------------
1 | .viewport-wrapper {
2 | width: 100%;
3 | height: 100%; /* MUST have `height` to prevent resize infinite loop */
4 | position: relative;
5 | }
6 |
7 | .viewport-element {
8 | width: 100%;
9 | height: 100%;
10 | position: relative;
11 | background-color: black;
12 |
13 | /* Prevent the blue outline in Chrome when a viewport is selected */
14 | outline: 0 !important;
15 |
16 | /* Prevents the entire page from getting larger
17 | when the magnify tool is near the sides/corners of the page */
18 | overflow: hidden;
19 | }
20 |
--------------------------------------------------------------------------------
/src/CornerstoneViewport/CornerstoneViewport.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import ImageScrollbar from '../ImageScrollbar/ImageScrollbar.js';
5 | import ViewportOverlay from '../ViewportOverlay/ViewportOverlay.js';
6 | import LoadingIndicator from '../LoadingIndicator/LoadingIndicator.js';
7 | import ViewportOrientationMarkers from '../ViewportOrientationMarkers/ViewportOrientationMarkers.js';
8 | import cornerstone from 'cornerstone-core';
9 | import cornerstoneTools from 'cornerstone-tools';
10 | import ReactResizeDetector from 'react-resize-detector';
11 | import debounce from 'lodash.debounce';
12 |
13 | // Util
14 | import areStringArraysEqual from './../helpers/areStringArraysEqual.js';
15 |
16 | import './CornerstoneViewport.css';
17 |
18 | const addToBeginning = true;
19 | const priority = -5;
20 | const requestType = 'interaction';
21 |
22 | const scrollToIndex = cornerstoneTools.importInternal('util/scrollToIndex');
23 | const { loadHandlerManager } = cornerstoneTools;
24 |
25 | class CornerstoneViewport extends Component {
26 | static propTypes = {
27 | imageIds: PropTypes.arrayOf(PropTypes.string).isRequired,
28 | imageIdIndex: PropTypes.number,
29 | // Controlled
30 | activeTool: PropTypes.string,
31 | tools: PropTypes.arrayOf(
32 | PropTypes.oneOfType([
33 | // String
34 | PropTypes.string,
35 | // Object
36 | PropTypes.shape({
37 | name: PropTypes.string, // Tool Name
38 | toolClass: PropTypes.func, // Custom (ToolClass)
39 | props: PropTypes.Object, // Props to Pass to `addTool`
40 | mode: PropTypes.string, // Initial mode, if one other than default
41 | modeOptions: PropTypes.Object, // { mouseButtonMask: [int] }
42 | }),
43 | ])
44 | ),
45 | // Optional
46 | // isActive ?? classname -> active
47 | children: PropTypes.node,
48 | cornerstoneOptions: PropTypes.object, // cornerstone.enable options
49 | isStackPrefetchEnabled: PropTypes.bool, // should prefetch?
50 | // CINE
51 | isPlaying: PropTypes.bool,
52 | frameRate: PropTypes.number, // Between 1 and ?
53 | //
54 | initialViewport: PropTypes.object,
55 | setViewportActive: PropTypes.func, // Called when viewport should be set to active?
56 | onNewImage: PropTypes.func,
57 | onNewImageDebounced: PropTypes.func,
58 | onNewImageDebounceTime: PropTypes.number,
59 | viewportOverlayComponent: PropTypes.oneOfType([
60 | PropTypes.string,
61 | PropTypes.func,
62 | ]),
63 | // Cornerstone Events
64 | onElementEnabled: PropTypes.func, // Escape hatch
65 | eventListeners: PropTypes.arrayOf(
66 | PropTypes.shape({
67 | target: PropTypes.oneOf(['element', 'cornerstone']).isRequired,
68 | eventName: PropTypes.string.isRequired,
69 | handler: PropTypes.func.isRequired,
70 | })
71 | ),
72 | startLoadHandler: PropTypes.func,
73 | endLoadHandler: PropTypes.func,
74 | loadIndicatorDelay: PropTypes.number,
75 | loadingIndicatorComponent: PropTypes.oneOfType([
76 | PropTypes.element,
77 | PropTypes.func,
78 | ]),
79 | /** false to enable automatic viewport resizing */
80 | enableResizeDetector: PropTypes.bool,
81 | /** rate at witch to apply resize mode's logic */
82 | resizeRefreshRateMs: PropTypes.number,
83 | /** whether resize refresh behavior is exhibited as throttle or debounce */
84 | resizeRefreshMode: PropTypes.oneOf(['throttle', 'debounce']),
85 | //
86 | style: PropTypes.object,
87 | className: PropTypes.string,
88 | isOverlayVisible: PropTypes.bool,
89 | orientationMarkers: PropTypes.arrayOf(PropTypes.string),
90 | };
91 |
92 | static defaultProps = {
93 | // Watch
94 | imageIdIndex: 0,
95 | isPlaying: false,
96 | cineFrameRate: 24,
97 | viewportOverlayComponent: ViewportOverlay,
98 | imageIds: ['no-id://'],
99 | initialViewport: {},
100 | // Init
101 | cornerstoneOptions: {},
102 | isStackPrefetchEnabled: false,
103 | isOverlayVisible: true,
104 | loadIndicatorDelay: 45,
105 | loadingIndicatorComponent: LoadingIndicator,
106 | enableResizeDetector: true,
107 | resizeRefreshRateMs: 200,
108 | resizeRefreshMode: 'debounce',
109 | tools: [],
110 | onNewImageDebounceTime: 0,
111 | orientationMarkers: ['top', 'left'],
112 | };
113 |
114 | constructor(props) {
115 | super(props);
116 |
117 | const imageIdIndex = props.imageIdIndex;
118 | const imageId = props.imageIds[imageIdIndex];
119 | const isOverlayVisible = props.isOverlayVisible;
120 |
121 | this.state = {
122 | // Used for metadata lookup (imagePlane, orientation markers)
123 | // We can probs grab this once and hold on to? (updated on newImage)
124 | imageId,
125 | imageIdIndex, // Maybe
126 | imageProgress: 0,
127 | isLoading: true,
128 | error: null,
129 | // Overlay
130 | scale: undefined,
131 | windowWidth: undefined,
132 | windowCenter: undefined,
133 | isOverlayVisible,
134 | // Orientation Markers
135 | rotationDegrees: undefined,
136 | isFlippedVertically: undefined,
137 | isFlippedHorizontally: undefined,
138 | };
139 |
140 | this._validateExternalEventsListeners();
141 |
142 | // TODO: Deep Copy? How does that work w/ handlers?
143 | // Save a copy. Props could change before `willUnmount`
144 | this.startLoadHandler = this.props.startLoadHandler;
145 | this.endLoadHandler = this.props.endLoadHandler;
146 | this.loadHandlerTimeout = undefined; // "Loading..." timer
147 |
148 | this.numImagesLoaded = 0;
149 | }
150 |
151 | // ~~ LIFECYCLE
152 | async componentDidMount() {
153 | const {
154 | tools,
155 | isStackPrefetchEnabled,
156 | cornerstoneOptions,
157 | imageIds,
158 | isPlaying,
159 | frameRate,
160 | initialViewport,
161 | } = this.props;
162 | const { imageIdIndex } = this.state;
163 | const imageId = imageIds[imageIdIndex];
164 |
165 | // ~~ EVENTS: CORNERSTONE
166 | this._handleOnElementEnabledEvent();
167 | this._bindInternalCornerstoneEventListeners();
168 | this._bindExternalEventListeners('cornerstone');
169 |
170 | cornerstone.enable(this.element, cornerstoneOptions);
171 |
172 | // ~~ EVENTS: ELEMENT
173 | this._bindInternalElementEventListeners();
174 | this._bindExternalEventListeners('element');
175 |
176 | // Only after `uuid` is set for enabledElement
177 | this._setupLoadHandlers();
178 |
179 | try {
180 | // Setup "Stack State"
181 | cornerstoneTools.clearToolState(this.element, 'stack');
182 | cornerstoneTools.addStackStateManager(this.element, [
183 | 'stack',
184 | 'playClip',
185 | 'referenceLines',
186 | ]);
187 | cornerstoneTools.addToolState(this.element, 'stack', {
188 | imageIds: [...imageIds],
189 | currentImageIdIndex: imageIdIndex,
190 | });
191 |
192 | // Load first image in stack
193 | const options = {
194 | addToBeginning,
195 | priority,
196 | };
197 |
198 | const requestFn = (imageId, options) => {
199 | return cornerstone.loadAndCacheImage(imageId, options).then((image) => {
200 | cornerstone.displayImage(this.element, image, initialViewport);
201 | });
202 | };
203 |
204 | // 1. Load the image using the ImageLoadingPool
205 | cornerstone.imageLoadPoolManager.addRequest(
206 | requestFn.bind(this, imageId, options),
207 | requestType,
208 | {
209 | imageId,
210 | },
211 | priority,
212 | addToBeginning
213 | );
214 |
215 | if (isStackPrefetchEnabled) {
216 | cornerstoneTools.stackPrefetch.enable(this.element);
217 | }
218 |
219 | if (isPlaying) {
220 | const validFrameRate = Math.max(frameRate, 1);
221 | cornerstoneTools.playClip(this.element, validFrameRate);
222 | }
223 |
224 | _addAndConfigureInitialToolsForElement(tools, this.element);
225 | _trySetActiveTool(this.element, this.props.activeTool);
226 | this.setState({ isLoading: false });
227 | } catch (error) {
228 | this.setState({ error, isLoading: false });
229 | }
230 | }
231 |
232 | async componentDidUpdate(prevProps, prevState) {
233 | // ~~ STACK/IMAGE
234 | const {
235 | imageIds: stack,
236 | imageIdIndex: imageIndex,
237 | isStackPrefetchEnabled,
238 | initialViewport,
239 | } = this.props;
240 | const {
241 | imageIds: prevStack,
242 | imageIdIndex: prevImageIndex,
243 | isStackPrefetchEnabled: prevIsStackPrefetchEnabled,
244 | } = prevProps;
245 | const hasStackChanged = !areStringArraysEqual(prevStack, stack);
246 | const hasImageIndexChanged =
247 | imageIndex != null && imageIndex !== prevImageIndex;
248 | let updatedState = {};
249 |
250 | if (hasStackChanged) {
251 | // update stack toolstate
252 | cornerstoneTools.clearToolState(this.element, 'stack');
253 | cornerstoneTools.addToolState(this.element, 'stack', {
254 | imageIds: [...stack],
255 | currentImageIdIndex: imageIndex || 0,
256 | });
257 |
258 | // New stack; reset counter
259 | updatedState['numImagesLoaded'] = 0;
260 | updatedState['error'] = null; // Reset error on new stack
261 |
262 | try {
263 | // load + display image
264 | const imageId = stack[imageIndex || 0];
265 | cornerstoneTools.stopClip(this.element);
266 | const requestFn = (imageId, options) => {
267 | return cornerstone
268 | .loadAndCacheImage(imageId, options)
269 | .then((image) => {
270 | cornerstone.displayImage(this.element, image, initialViewport);
271 | cornerstone.reset(this.element);
272 | });
273 | };
274 |
275 | cornerstone.imageLoadPoolManager.addRequest(
276 | requestFn.bind(this, imageId, { addToBeginning, priority }),
277 | requestType,
278 | {
279 | imageId,
280 | },
281 | priority,
282 | addToBeginning
283 | );
284 | } catch (err) {
285 | // :wave:
286 | // What if user kills component before `displayImage`?
287 | }
288 | } else if (!hasStackChanged && hasImageIndexChanged) {
289 | scrollToIndex(this.element, imageIndex);
290 | }
291 |
292 | const shouldStopStartStackPrefetch =
293 | (isStackPrefetchEnabled && hasStackChanged) ||
294 | (!prevIsStackPrefetchEnabled && isStackPrefetchEnabled === true);
295 |
296 | // Need to stop/start to pickup stack changes in prefetcher
297 | if (shouldStopStartStackPrefetch) {
298 | cornerstoneTools.stackPrefetch.enable(this.element);
299 | }
300 |
301 | // ~~ ACTIVE TOOL
302 | const { activeTool } = this.props;
303 | const { activeTool: prevActiveTool } = prevProps;
304 | const hasActiveToolChanges = activeTool !== prevActiveTool;
305 |
306 | if (hasActiveToolChanges) {
307 | _trySetActiveTool(this.element, activeTool);
308 | }
309 |
310 | // ~~ CINE
311 | const { frameRate, isPlaying, isOverlayVisible } = this.props;
312 | const {
313 | frameRate: prevFrameRate,
314 | isPlaying: prevIsPlaying,
315 | isOverlayVisible: prevIsOverlayVisible,
316 | } = prevProps;
317 | const validFrameRate = Math.max(frameRate, 1);
318 | const shouldStart =
319 | (isPlaying !== prevIsPlaying && isPlaying) ||
320 | (isPlaying && hasStackChanged);
321 | const shouldPause = isPlaying !== prevIsPlaying && !isPlaying;
322 | const hasFrameRateChanged = isPlaying && frameRate !== prevFrameRate;
323 |
324 | if (shouldStart || hasFrameRateChanged) {
325 | cornerstoneTools.playClip(this.element, validFrameRate);
326 | } else if (shouldPause) {
327 | cornerstoneTools.stopClip(this.element);
328 | }
329 |
330 | // ~~ OVERLAY
331 | if (isOverlayVisible !== prevIsOverlayVisible)
332 | updatedState.isOverlayVisible = isOverlayVisible;
333 |
334 | // ~~ STATE: Update aggregated state changes
335 | if (Object.keys(updatedState).length > 0) {
336 | this.setState(updatedState);
337 | }
338 |
339 | this._validateExternalEventsListeners();
340 | }
341 |
342 | /**
343 | * Tear down any listeners/handlers, and stop any asynchronous/queued operations
344 | * that could fire after Unmount and cause errors.
345 | *
346 | * @memberof CornerstoneViewport
347 | * @returns {undefined}
348 | */
349 | componentWillUnmount() {
350 | const clear = true;
351 |
352 | this._handleOnElementEnabledEvent(clear);
353 | this._bindInternalCornerstoneEventListeners(clear);
354 | this._bindInternalElementEventListeners(clear);
355 | this._bindExternalEventListeners('cornerstone', clear);
356 | this._bindExternalEventListeners('element', clear);
357 | this._setupLoadHandlers(clear);
358 |
359 | if (this.props.isStackPrefetchEnabled) {
360 | cornerstoneTools.stackPrefetch.disable(this.element);
361 | }
362 |
363 | cornerstoneTools.clearToolState(this.element, 'stackPrefetch');
364 | cornerstoneTools.stopClip(this.element);
365 | cornerstone.disable(this.element);
366 | }
367 |
368 | /**
369 | * @returns Component
370 | * @memberof CornerstoneViewport
371 | */
372 | getLoadingIndicator() {
373 | const { loadingIndicatorComponent: Component } = this.props;
374 | const { error, imageProgress } = this.state;
375 |
376 | return
776 | {this.props.enableResizeDetector && this.element != null && (
777 |
786 | )}
787 |
e.preventDefault()}
790 | onMouseDown={(e) => e.preventDefault()}
791 | ref={(input) => {
792 | this.element = input;
793 | }}
794 | >
795 | {displayLoadingIndicator && this.getLoadingIndicator()}
796 | {/* This classname is important in that it tells `cornerstone` to not
797 | * create a new canvas element when we "enable" the `viewport-element`
798 | */}
799 |
803 |
809 | {this.props.children}
810 |
23 | {this.props.error ? (
24 |
25 |
26 |
Error Loading Image
27 |
An error has occurred.
28 |
{this.props.error.message}
29 |
30 |
33 |
34 |
35 | {pc < 100 ? 'Loading...' : 'Loaded -'}
36 |
38 | {pc === 100 &&
Processing...
}
39 |
40 |
43 | );
44 | }
45 | }
46 |
47 | export default LoadingIndicator;
48 |
--------------------------------------------------------------------------------
/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css:
--------------------------------------------------------------------------------
1 | .ViewportOrientationMarkers {
2 | --marker-width: 100px;
3 | --marker-height: 100px;
4 | --scrollbar-width: 20px;
5 | pointer-events: none;
6 | font-size: 15px;
7 | color: #ccc;
8 | line-height: 18px;
9 | }
10 | .ViewportOrientationMarkers .orientation-marker {
11 | position: absolute;
12 | }
13 | .ViewportOrientationMarkers .top-mid {
14 | top: 5px;
15 | left: 50%;
16 | }
17 | .ViewportOrientationMarkers .left-mid {
18 | top: 47%;
19 | left: 5px;
20 | }
21 | .ViewportOrientationMarkers .right-mid {
22 | top: 47%;
23 | left: calc(100% - var(--marker-width) - var(--scrollbar-width));
24 | }
25 | .ViewportOrientationMarkers .bottom-mid {
26 | top: calc(100% - var(--marker-height) - 5px);
27 | left: 47%;
28 | }
29 | .ViewportOrientationMarkers .right-mid .orientation-marker-value {
30 | display: flex;
31 | justify-content: flex-end;
32 | min-width: var(--marker-width);
33 | }
34 | .ViewportOrientationMarkers .bottom-mid .orientation-marker-value {
35 | display: flex;
36 | justify-content: flex-start;
37 | min-height: var(--marker-height);
38 | flex-direction: column-reverse;
39 | }
40 |
--------------------------------------------------------------------------------
/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 | import cornerstoneTools from 'cornerstone-tools';
5 | import './ViewportOrientationMarkers.css';
6 |
7 | /**
8 | *
9 | * Computes the orientation labels on a Cornerstone-enabled Viewport element
10 | * when the viewport settings change (e.g. when a horizontal flip or a rotation occurs)
11 | *
12 | * @param {*} rowCosines
13 | * @param {*} columnCosines
14 | * @param {*} rotationDegrees
15 | * @param {*} isFlippedVertically
16 | * @param {*} isFlippedHorizontally
17 | * @returns
18 | */
19 | function getOrientationMarkers(
20 | rowCosines,
21 | columnCosines,
22 | rotationDegrees,
23 | isFlippedVertically,
24 | isFlippedHorizontally
25 | ) {
26 | const {
27 | getOrientationString,
28 | invertOrientationString,
29 | } = cornerstoneTools.orientation;
30 | const rowString = getOrientationString(rowCosines);
31 | const columnString = getOrientationString(columnCosines);
32 | const oppositeRowString = invertOrientationString(rowString);
33 | const oppositeColumnString = invertOrientationString(columnString);
34 |
35 | const markers = {
36 | top: oppositeColumnString,
37 | left: oppositeRowString,
38 | right: rowString,
39 | bottom: columnString,
40 | };
41 |
42 | // If any vertical or horizontal flips are applied, change the orientation strings ahead of
43 | // the rotation applications
44 | if (isFlippedVertically) {
45 | markers.top = invertOrientationString(markers.top);
46 | markers.bottom = invertOrientationString(markers.bottom);
47 | }
48 |
49 | if (isFlippedHorizontally) {
50 | markers.left = invertOrientationString(markers.left);
51 | markers.right = invertOrientationString(markers.right);
52 | }
53 |
54 | // Swap the labels accordingly if the viewport has been rotated
55 | // This could be done in a more complex way for intermediate rotation values (e.g. 45 degrees)
56 | if (rotationDegrees === 90 || rotationDegrees === -270) {
57 | return {
58 | top: markers.left,
59 | left: invertOrientationString(markers.top),
60 | right: invertOrientationString(markers.bottom),
61 | bottom: markers.right, // left
62 | };
63 | } else if (rotationDegrees === -90 || rotationDegrees === 270) {
64 | return {
65 | top: invertOrientationString(markers.left),
66 | left: markers.top,
67 | bottom: markers.left,
68 | right: markers.bottom,
69 | };
70 | } else if (rotationDegrees === 180 || rotationDegrees === -180) {
71 | return {
72 | top: invertOrientationString(markers.top),
73 | left: invertOrientationString(markers.left),
74 | bottom: invertOrientationString(markers.bottom),
75 | right: invertOrientationString(markers.right),
76 | };
77 | }
78 |
79 | return markers;
80 | }
81 |
82 | class ViewportOrientationMarkers extends PureComponent {
83 | static propTypes = {
84 | rowCosines: PropTypes.array.isRequired,
85 | columnCosines: PropTypes.array.isRequired,
86 | rotationDegrees: PropTypes.number.isRequired,
87 | isFlippedVertically: PropTypes.bool.isRequired,
88 | isFlippedHorizontally: PropTypes.bool.isRequired,
89 | orientationMarkers: PropTypes.arrayOf(PropTypes.string),
90 | };
91 |
92 | static defaultProps = {
93 | orientationMarkers: ['top', 'left'],
94 | };
95 |
96 | render() {
97 | const {
98 | rowCosines,
99 | columnCosines,
100 | rotationDegrees,
101 | isFlippedVertically,
102 | isFlippedHorizontally,
103 | orientationMarkers,
104 | } = this.props;
105 |
106 | if (!rowCosines || !columnCosines) {
107 | return '';
108 | }
109 |
110 | const markers = getOrientationMarkers(
111 | rowCosines,
112 | columnCosines,
113 | rotationDegrees,
114 | isFlippedVertically,
115 | isFlippedHorizontally
116 | );
117 |
118 | const getMarkers = orientationMarkers =>
119 | orientationMarkers.map((m, index) => (
120 |
126 | ));
127 |
128 | return (
129 |
130 | {getMarkers(orientationMarkers)}
131 |
132 | );
133 | }
134 | }
135 |
136 | export default ViewportOrientationMarkers;
137 |
--------------------------------------------------------------------------------
/src/ViewportOverlay/ViewportOverlay.css:
--------------------------------------------------------------------------------
1 | .imageViewerViewport.empty ~ .ViewportOverlay {
2 | display: none;
3 | }
4 | .ViewportOverlay {
5 | color: #9ccef9;
6 | }
7 | .ViewportOverlay .overlay-element {
8 | position: absolute;
9 | font-weight: 400;
10 | text-shadow: 1px 1px #000;
11 | pointer-events: none;
12 | }
13 | .ViewportOverlay .top-left {
14 | top: 20px;
15 | left: 20px;
16 | }
17 | .ViewportOverlay .top-center {
18 | top: 20px;
19 | padding-top: 20px;
20 | width: 100%;
21 | text-align: center;
22 | }
23 | .ViewportOverlay .top-right {
24 | top: 20px;
25 | right: 20px;
26 | text-align: right;
27 | }
28 | .ViewportOverlay .bottom-left {
29 | bottom: 20px;
30 | left: 20px;
31 | }
32 | .ViewportOverlay .bottom-right {
33 | bottom: 20px;
34 | right: 20px;
35 | text-align: right;
36 | }
37 | .ViewportOverlay.controlsVisible .topright,
38 | .ViewportOverlay.controlsVisible .bottomright {
39 | right: calc(20px + 19px);
40 | }
41 | .ViewportOverlay svg {
42 | color: #9ccef9;
43 | fill: #9ccef9;
44 | stroke: #9ccef9;
45 | background-color: transparent;
46 | margin: 2px;
47 | width: 18px;
48 | height: 18px;
49 | }
50 |
--------------------------------------------------------------------------------
/src/ViewportOverlay/ViewportOverlay.js:
--------------------------------------------------------------------------------
1 | import { PureComponent } from 'react';
2 | import React from 'react';
3 | import PropTypes from 'prop-types';
4 | import cornerstone from 'cornerstone-core';
5 | import dicomParser from 'dicom-parser';
6 | import { helpers } from '../helpers/index.js';
7 | import './ViewportOverlay.css';
8 |
9 | const {
10 | formatPN,
11 | formatDA,
12 | formatNumberPrecision,
13 | formatTM,
14 | isValidNumber,
15 | } = helpers;
16 |
17 | function getCompression(imageId) {
18 | const generalImageModule =
19 | cornerstone.metaData.get('generalImageModule', imageId) || {};
20 | const {
21 | lossyImageCompression,
22 | lossyImageCompressionRatio,
23 | lossyImageCompressionMethod,
24 | } = generalImageModule;
25 |
26 | if (lossyImageCompression === '01' && lossyImageCompressionRatio !== '') {
27 | const compressionMethod = lossyImageCompressionMethod || 'Lossy: ';
28 | const compressionRatio = formatNumberPrecision(
29 | lossyImageCompressionRatio,
30 | 2
31 | );
32 | return compressionMethod + compressionRatio + ' : 1';
33 | }
34 |
35 | return 'Lossless / Uncompressed';
36 | }
37 |
38 | class ViewportOverlay extends PureComponent {
39 | static propTypes = {
40 | scale: PropTypes.number.isRequired,
41 | windowWidth: PropTypes.oneOfType([
42 | PropTypes.number.isRequired,
43 | PropTypes.string.isRequired,
44 | ]),
45 | windowCenter: PropTypes.oneOfType([
46 | PropTypes.number.isRequired,
47 | PropTypes.string.isRequired,
48 | ]),
49 | imageId: PropTypes.string.isRequired,
50 | imageIndex: PropTypes.number.isRequired,
51 | stackSize: PropTypes.number.isRequired,
52 | };
53 |
54 | render() {
55 | const { imageId, scale, windowWidth, windowCenter } = this.props;
56 |
57 | if (!imageId) {
58 | return null;
59 | }
60 |
61 | const zoomPercentage = formatNumberPrecision(scale * 100, 0);
62 | const seriesMetadata =
63 | cornerstone.metaData.get('generalSeriesModule', imageId) || {};
64 | const imagePlaneModule =
65 | cornerstone.metaData.get('imagePlaneModule', imageId) || {};
66 | const { rows, columns, sliceThickness, sliceLocation } = imagePlaneModule;
67 | const { seriesNumber, seriesDescription } = seriesMetadata;
68 |
69 | const generalStudyModule =
70 | cornerstone.metaData.get('generalStudyModule', imageId) || {};
71 | const { studyDate, studyTime, studyDescription } = generalStudyModule;
72 |
73 | const patientModule =
74 | cornerstone.metaData.get('patientModule', imageId) || {};
75 | const { patientId, patientName } = patientModule;
76 |
77 | const generalImageModule =
78 | cornerstone.metaData.get('generalImageModule', imageId) || {};
79 | const { instanceNumber } = generalImageModule;
80 |
81 | const cineModule = cornerstone.metaData.get('cineModule', imageId) || {};
82 | const { frameTime } = cineModule;
83 |
84 | const frameRate = formatNumberPrecision(1000 / frameTime, 1);
85 | const compression = getCompression(imageId);
86 | const wwwc = `W: ${
87 | windowWidth.toFixed ? windowWidth.toFixed(0) : windowWidth
88 | } L: ${windowWidth.toFixed ? windowCenter.toFixed(0) : windowCenter}`;
89 | const imageDimensions = `${columns} x ${rows}`;
90 |
91 | const { imageIndex, stackSize } = this.props;
92 |
93 | const normal = (
94 |
95 |
96 |
{formatPN(patientName)}
97 |
{patientId}
98 |
100 |
{studyDescription}
101 |
102 | {formatDA(studyDate)} {formatTM(studyTime)}
103 |
104 |
106 |
Zoom: {zoomPercentage}%
107 |
{wwwc}
108 |
{compression}
109 |
111 |
{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}
112 |
113 | {stackSize > 1
114 | ? `Img: ${instanceNumber} ${imageIndex}/${stackSize}`
115 | : ''}
116 |
117 |
118 | {frameRate >= 0 ? `${formatNumberPrecision(frameRate, 2)} FPS` : ''}
119 |
{imageDimensions}
120 |
121 | {isValidNumber(sliceLocation)
122 | ? `Loc: ${formatNumberPrecision(sliceLocation, 2)} mm `
123 | : ''}
124 | {sliceThickness
125 | ? `Thick: ${formatNumberPrecision(sliceThickness, 2)} mm`
126 | : ''}
127 |
128 |
{seriesDescription}
129 |
130 |
132 | );
133 |
134 | return {normal}
;
135 | }
136 | }
137 |
138 | export default ViewportOverlay;
139 |
--------------------------------------------------------------------------------
/src/helpers/areStringArraysEqual.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Compare equality of two string arrays.
3 | *
4 | * @param {string[]} [arr1] - String array #1
5 | * @param {string[]} [arr2] - String array #2
6 | * @returns {boolean}
7 | */
8 | export default function areStringArraysEqual(arr1, arr2) {
9 | if (arr1 === arr2) return true; // Identity
10 | if (!arr1 || !arr2) return false; // One is undef/null
11 | if (arr1.length !== arr2.length) return false; // Diff length
12 |
13 | for (let i = 0; i < arr1.length; i++) {
14 | if (arr1[i] !== arr2[i]) return false;
15 | }
16 |
17 | return true;
18 | }
19 |
--------------------------------------------------------------------------------
/src/helpers/formatDA.js:
--------------------------------------------------------------------------------
1 | import { parse, format } from 'date-fns';
2 |
3 | export default function formatDA(date, strFormat = 'MMM d, yyyy') {
4 | if (!date) {
5 | return;
6 | }
7 |
8 | // Goal: 'Apr 5, 1999'
9 | try {
10 | const parsedDateTime = parse(date, 'yyyyMMdd', new Date());
11 | const formattedDateTime = format(parsedDateTime, strFormat);
12 |
13 | return formattedDateTime;
14 | } catch (err) {
15 | // swallow?
16 | }
17 |
18 | return;
19 | }
20 |
--------------------------------------------------------------------------------
/src/helpers/formatNumberPrecision.js:
--------------------------------------------------------------------------------
1 | export default function formatNumberPrecision(number, precision) {
2 | if (number !== null) {
3 | return parseFloat(number).toFixed(precision);
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/helpers/formatPN.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Formats a patient name for display purposes
3 | */
4 | export default function formatPN(name) {
5 | if (!name) {
6 | return;
7 | }
8 |
9 | // Convert the first ^ to a ', '. String.replace() only affects
10 | // the first appearance of the character.
11 | const commaBetweenFirstAndLast = name.replace('^', ', ');
12 |
13 | // Replace any remaining '^' characters with spaces
14 | const cleaned = commaBetweenFirstAndLast.replace(/\^/g, ' ');
15 |
16 | // Trim any extraneous whitespace
17 | return cleaned.trim();
18 | }
19 |
--------------------------------------------------------------------------------
/src/helpers/formatTM.js:
--------------------------------------------------------------------------------
1 | import { parse, format } from 'date-fns';
2 |
3 | export default function formatTM(time, strFormat = 'HH:mm:ss') {
4 | if (!time) {
5 | return;
6 | }
7 |
8 | // DICOM Time is stored as HHmmss.SSS, where:
9 | // HH 24 hour time:
10 | // m mm 0..59 Minutes
11 | // s ss 0..59 Seconds
12 | // S SS SSS 0..999 Fractional seconds
13 | //
14 | // Goal: '24:12:12'
15 | try {
16 | const inputFormat = 'HHmmss.SSS';
17 | const strTime = time.toString().substring(0, inputFormat.length);
18 | const parsedDateTime = parse(strTime, inputFormat.substring(0,strTime.length), new Date(0));
19 | const formattedDateTime = format(parsedDateTime, strFormat);
20 |
21 | return formattedDateTime;
22 | } catch (err) {
23 | // swallow?
24 | }
25 |
26 | return;
27 | }
28 |
--------------------------------------------------------------------------------
/src/helpers/index.js:
--------------------------------------------------------------------------------
1 | import formatPN from './formatPN';
2 | import formatDA from './formatDA';
3 | import formatTM from './formatTM';
4 | import formatNumberPrecision from './formatNumberPrecision';
5 | import isValidNumber from './isValidNumber';
6 |
7 | const helpers = {
8 | formatPN,
9 | formatDA,
10 | formatTM,
11 | formatNumberPrecision,
12 | isValidNumber,
13 | };
14 |
15 | export { helpers };
16 |
--------------------------------------------------------------------------------
/src/helpers/isValidNumber.js:
--------------------------------------------------------------------------------
1 | export default function isValidNumber(value) {
2 | return typeof value === 'number' && !isNaN(value);
3 | }
4 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import './metadataProvider.js';
2 | import CornerstoneViewport from './CornerstoneViewport/CornerstoneViewport.js';
3 | import ViewportOverlay from './ViewportOverlay/ViewportOverlay';
4 |
5 | export { ViewportOverlay };
6 |
7 | export default CornerstoneViewport;
8 |
--------------------------------------------------------------------------------
/src/metadataProvider.js:
--------------------------------------------------------------------------------
1 | import cornerstone from 'cornerstone-core';
2 | import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
3 | import dicomParser from 'dicom-parser';
4 |
5 | const { getNumberValue, getValue } = cornerstoneWADOImageLoader.wadors.metaData;
6 |
7 | function wadoRsMetaDataProvider(type, imageId) {
8 | const metaData = cornerstoneWADOImageLoader.wadors.metaDataManager.get(
9 | imageId
10 | );
11 |
12 | if (!metaData) {
13 | return;
14 | }
15 |
16 | if (
17 | metaData[type] !== undefined &&
18 | metaData[type].Value !== undefined &&
19 | metaData[type].Value.length
20 | ) {
21 | return metaData[type].Value[0];
22 | }
23 |
24 | const typeCleaned = type.replace('x', '');
25 | if (
26 | metaData[typeCleaned] !== undefined &&
27 | metaData[typeCleaned].Value !== undefined &&
28 | metaData[typeCleaned].Value.length
29 | ) {
30 | return metaData[typeCleaned].Value[0];
31 | }
32 |
33 | if (type === 'generalImageModule') {
34 | return {
35 | sopInstanceUid: getValue(metaData['00080018']),
36 | instanceNumber: getNumberValue(metaData['00200013']),
37 | lossyImageCompression: getValue(metaData['00282110']),
38 | lossyImageCompressionRatio: getValue(metaData['00282112']),
39 | lossyImageCompressionMethod: getValue(metaData['00282114']),
40 | };
41 | }
42 |
43 | if (type === 'patientModule') {
44 | return {
45 | patientName: getValue(metaData['00100010']),
46 | patientId: getValue(metaData['00100020']),
47 | patientSex: getValue(metaData['00100040']),
48 | patientBirthDate: getValue(metaData['00100030']),
49 | };
50 | }
51 |
52 | if (type === 'spacingBetweenSlices') {
53 | return getValue(metaData['00180088']);
54 | }
55 |
56 | if (type === 'generalStudyModule') {
57 | return {
58 | studyDescription: getValue(metaData['00081030']),
59 | studyDate: getValue(metaData['00080020']),
60 | studyTime: getValue(metaData['00080030']),
61 | accessionNumber: getValue(metaData['00080050']),
62 | };
63 | }
64 |
65 | if (type === 'cineModule') {
66 | return {
67 | frameTime: getNumberValue(metaData['00181063']),
68 | };
69 | }
70 | }
71 |
72 | cornerstone.metaData.addProvider(wadoRsMetaDataProvider);
73 |
74 | function wadoUriMetaDataProvider(type, imageId) {
75 | const {
76 | parseImageId,
77 | dataSetCacheManager,
78 | } = cornerstoneWADOImageLoader.wadouri;
79 | const parsedImageId = parseImageId(imageId);
80 | const dataSet = dataSetCacheManager.get(parsedImageId.url);
81 |
82 | if (!dataSet) {
83 | return;
84 | }
85 |
86 | if (type === 'generalImageModule') {
87 | return {
88 | sopInstanceUid: dataSet.string('x00080018'),
89 | instanceNumber: dataSet.intString('x00200013'),
90 | lossyImageCompression: dataSet.string('x00282110'),
91 | lossyImageCompressionRatio: dataSet.string('x00282112'),
92 | lossyImageCompressionMethod: dataSet.string('x00282114'),
93 | };
94 | }
95 |
96 | if (type === 'patientModule') {
97 | return {
98 | patientName: dataSet.string('x00100010'),
99 | patientId: dataSet.string('x00100020'),
100 | };
101 | }
102 |
103 | if (type === 'generalStudyModule') {
104 | return {
105 | studyDescription: dataSet.string('x00081030'),
106 | studyDate: dataSet.string('x00080020'),
107 | studyTime: dataSet.string('x00080030'),
108 | };
109 | }
110 |
111 | if (type === 'cineModule') {
112 | return {
113 | frameTime: dataSet.floatString('x00181063'),
114 | };
115 | }
116 |
117 | if (dataSet.elements[type] !== undefined) {
118 | const element = dataSet.elements[type];
119 | if (!element.vr) {
120 | return;
121 | }
122 |
123 | return dicomParser.explicitElementToString(dataSet, element);
124 | }
125 | }
126 |
127 | cornerstone.metaData.addProvider(wadoUriMetaDataProvider);
128 |
--------------------------------------------------------------------------------
/src/test.js:
--------------------------------------------------------------------------------
1 | import CornerstoneViewport from './CornerstoneViewport/CornerstoneViewport.js';
2 |
3 | describe('CornerstoneViewport', () => {
4 | it('is truthy', () => {
5 | expect(CornerstoneViewport).toBeTruthy();
6 | });
7 | });
8 |
--------------------------------------------------------------------------------