diff --git a/package-lock.json b/package-lock.json index 3b880fb..78ee954 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1961,16 +1961,6 @@ "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==", "dev": true }, - "@types/glob": { - "version": "7.1.4", - "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz", - "integrity": "sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==", - "dev": true, - "requires": { - "@types/minimatch": "*", - "@types/node": "*" - } - }, "@types/hast": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz", @@ -2007,12 +1997,6 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, - "@types/minimatch": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", - "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==", - "dev": true - }, "@types/minimist": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz", @@ -2445,21 +2429,6 @@ "is-string": "^1.0.5" } }, - "array-union": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", - "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", - "dev": true, - "requires": { - "array-uniq": "^1.0.1" - } - }, - "array-uniq": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", - "dev": true - }, "array.prototype.flat": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz", @@ -2918,15 +2887,6 @@ "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", "dev": true }, - "clean-webpack-plugin": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz", - "integrity": "sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==", - "dev": true, - "requires": { - "del": "^4.1.1" - } - }, "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", @@ -3408,9 +3368,9 @@ "dev": true }, "cornerstone-core": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/cornerstone-core/-/cornerstone-core-2.5.0.tgz", - "integrity": "sha512-mJzvRJh8J7d5FJutjaL9cT8ZNnmj6l5PHROsyktZq1ojh4vkXfHECQ2izIQu8nmtJ9A6SyQRj4v5Uxn7hijzKw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/cornerstone-core/-/cornerstone-core-2.6.0.tgz", + "integrity": "sha512-3sMy4Q2UZ9H4f2rYRAd3s4cntDutwSZQ3QlcYgsahoUxInb68MdmeLOKe8yyguwRT9LJ4CbgvOr2WsS8dOba4g==", "dev": true }, "cornerstone-math": { @@ -3420,9 +3380,9 @@ "dev": true }, "cornerstone-tools": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cornerstone-tools/-/cornerstone-tools-6.0.0.tgz", - "integrity": "sha512-VU4MrsO2NcQK6CUxuYFdiNvdWjF/NV/fs8jCePazYCoFDDKIYcUM9UmoYXAapFE2mon65p4u9wUAvuIuLeBQwA==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/cornerstone-tools/-/cornerstone-tools-6.0.1.tgz", + "integrity": "sha512-Sh1vqe4VBU8+nYjIgGE+K3f7L7WmX5h71uSoPzV5sItnsv5KTL8FRZeSy/rm0vi7fU8jtWlnLcOz4sfC1P4jCw==", "dev": true, "requires": { "@babel/runtime": "7.1.2", @@ -3430,22 +3390,22 @@ } }, "cornerstone-wado-image-loader": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-4.0.0.tgz", - "integrity": "sha512-rkmOi7MVf/21LZl3BQglmPrxsH5qby5fbZprShe8vvgAsm06juYBkm9CNZDIv7qoRhjLHBs4prIQXNaiGbdiUg==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/cornerstone-wado-image-loader/-/cornerstone-wado-image-loader-4.0.4.tgz", + "integrity": "sha512-AdroSRMPPEZLCOeXIrv2kQ0Bz+dr2BQbUR1QN0zOOlsaO2TQQBD+YdgXVqFs5XIAtZSs9+9fSCXlnGc71qLFlA==", "dev": true, "requires": { "@cornerstonejs/codec-charls": "^0.1.1", "@cornerstonejs/codec-libjpeg-turbo-8bit": "^0.0.7", "@cornerstonejs/codec-openjpeg": "^0.1.0", - "dicom-parser": "^1.8.8", + "dicom-parser": "^1.8.9", "pako": "^2.0.4" }, "dependencies": { - "pako": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz", - "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==", + "dicom-parser": { + "version": "1.8.9", + "resolved": "https://registry.npmjs.org/dicom-parser/-/dicom-parser-1.8.9.tgz", + "integrity": "sha512-OdLBIh460sy0aVeBZ/XSjbzEvXDS18XWxTdTinYmIHNi2jZfo6UuxscX4/VuYslduQ9LaeY6sdEXe9P9e6qlvA==", "dev": true } } @@ -3805,21 +3765,6 @@ "object-keys": "^1.0.12" } }, - "del": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz", - "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==", - "dev": true, - "requires": { - "@types/glob": "^7.1.1", - "globby": "^6.1.0", - "is-path-cwd": "^2.0.0", - "is-path-in-cwd": "^2.0.0", - "p-map": "^2.0.0", - "pify": "^4.0.1", - "rimraf": "^2.6.3" - } - }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -5508,27 +5453,6 @@ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "dev": true }, - "globby": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", - "dev": true, - "requires": { - "array-union": "^1.0.1", - "glob": "^7.0.3", - "object-assign": "^4.0.1", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" - }, - "dependencies": { - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true - } - } - }, "graceful-fs": { "version": "4.2.8", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz", @@ -6273,24 +6197,6 @@ "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==", "dev": true }, - "is-path-in-cwd": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz", - "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==", - "dev": true, - "requires": { - "is-path-inside": "^2.1.0" - } - }, - "is-path-inside": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz", - "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==", - "dev": true, - "requires": { - "path-is-inside": "^1.0.2" - } - }, "is-plain-obj": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", @@ -9988,6 +9894,12 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, + "pako": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz", + "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==", + "dev": true + }, "param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -10083,12 +9995,6 @@ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true }, - "path-is-inside": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", - "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=", - "dev": true - }, "path-key": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", @@ -10122,27 +10028,6 @@ "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", "dev": true }, - "pify": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", - "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", - "dev": true - }, - "pinkie": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", - "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", - "dev": true - }, - "pinkie-promise": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", - "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", - "dev": true, - "requires": { - "pinkie": "^2.0.0" - } - }, "pkg-conf": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/pkg-conf/-/pkg-conf-2.1.0.tgz", @@ -11533,15 +11418,6 @@ "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", "dev": true }, - "rimraf": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", - "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", - "dev": true, - "requires": { - "glob": "^7.1.3" - } - }, "rollup": { "version": "2.56.3", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.3.tgz", diff --git a/package.json b/package.json index b3cb04f..d650c2c 100644 --- a/package.json +++ b/package.json @@ -23,10 +23,10 @@ "prepublishOnly": "npm run build && npm run build:release" }, "peerDependencies": { - "cornerstone-core": "^2.5.0", + "cornerstone-core": "^2.6.0", "cornerstone-math": "^0.1.9", - "cornerstone-tools": "^6.0.0", - "cornerstone-wado-image-loader": "^4.0.0", + "cornerstone-tools": "^6.0.1", + "cornerstone-wado-image-loader": "^4.0.4", "dicom-parser": "^1.8.8", "hammerjs": "^2.0.8", "react": "^17.0.2", @@ -49,10 +49,10 @@ "babel-eslint": "10.1.0", "babel-loader": "^8.2.2", "commitizen": "4.2.x", - "cornerstone-core": "^2.5.0", + "cornerstone-core": "^2.6.0", "cornerstone-math": "^0.1.9", - "cornerstone-tools": "^6.0.0", - "cornerstone-wado-image-loader": "^4.0.0", + "cornerstone-tools": "^6.0.1", + "cornerstone-wado-image-loader": "^4.0.4", "cross-env": "^7.0.3", "css-loader": "^6.2.0", "dicom-parser": "^1.8.8", diff --git a/src/CornerstoneViewport/CornerstoneViewport.js b/src/CornerstoneViewport/CornerstoneViewport.js index 7ac003a..41af9d2 100644 --- a/src/CornerstoneViewport/CornerstoneViewport.js +++ b/src/CornerstoneViewport/CornerstoneViewport.js @@ -15,6 +15,10 @@ import areStringArraysEqual from './../helpers/areStringArraysEqual.js'; import './CornerstoneViewport.css'; +const addToBeginning = true; +const priority = -5; +const requestType = 'interaction'; + const scrollToIndex = cornerstoneTools.importInternal('util/scrollToIndex'); const { loadHandlerManager } = cornerstoneTools; @@ -186,11 +190,27 @@ class CornerstoneViewport extends Component { }); // Load first image in stack - const image = await cornerstone.loadAndCacheImage(imageId); - - // Display - - cornerstone.displayImage(this.element, image, initialViewport); + const options = { + addToBeginning, + priority, + }; + + const requestFn = (imageId, options) => { + return cornerstone.loadAndCacheImage(imageId, options).then((image) => { + cornerstone.displayImage(this.element, image, initialViewport); + }); + }; + + // 1. Load the image using the ImageLoadingPool + cornerstone.imageLoadPoolManager.addRequest( + requestFn.bind(this, imageId, options), + requestType, + { + imageId, + }, + priority, + addToBeginning + ); if (isStackPrefetchEnabled) { cornerstoneTools.stackPrefetch.enable(this.element); @@ -243,10 +263,24 @@ class CornerstoneViewport extends Component { // load + display image const imageId = stack[imageIndex || 0]; cornerstoneTools.stopClip(this.element); - const image = await cornerstone.loadAndCacheImage(imageId); - - cornerstone.displayImage(this.element, image, initialViewport); - cornerstone.reset(this.element); + const requestFn = (imageId, options) => { + return cornerstone + .loadAndCacheImage(imageId, options) + .then((image) => { + cornerstone.displayImage(this.element, image, initialViewport); + cornerstone.reset(this.element); + }); + }; + + cornerstone.imageLoadPoolManager.addRequest( + requestFn.bind(this, imageId, { addToBeginning, priority }), + requestType, + { + imageId, + }, + priority, + addToBeginning + ); } catch (err) { // :wave: // What if user kills component before `displayImage`? @@ -350,13 +384,8 @@ class CornerstoneViewport extends Component { */ getOverlay() { const { viewportOverlayComponent: Component, imageIds } = this.props; - const { - imageIdIndex, - scale, - windowWidth, - windowCenter, - isOverlayVisible, - } = this.state; + const { imageIdIndex, scale, windowWidth, windowCenter, isOverlayVisible } = + this.state; const imageId = imageIds[imageIdIndex]; return ( imageId && @@ -586,7 +615,7 @@ class CornerstoneViewport extends Component { * @returns {undefined} */ _handleOnElementEnabledEvent = (clear = false) => { - const handler = evt => { + const handler = (evt) => { const elementThatWasEnabled = evt.detail.element; if (elementThatWasEnabled === this.element) { // Pass Event @@ -633,7 +662,7 @@ class CornerstoneViewport extends Component { // We use this to "flip" `isLoading` to true, if our startLoading request // takes longer than our "loadIndicatorDelay" - const startLoadHandler = element => { + const startLoadHandler = (element) => { clearTimeout(this.loadHandlerTimeout); // Call user defined loadHandler @@ -669,7 +698,7 @@ class CornerstoneViewport extends Component { } // TODO: May need to throttle? - onImageRendered = event => { + onImageRendered = (event) => { const viewport = event.detail.viewport; this.setState({ @@ -697,9 +726,9 @@ class CornerstoneViewport extends Component { } }; - onNewImage = event => this.onNewImageHandler(event, this.props.onNewImage); + onNewImage = (event) => this.onNewImageHandler(event, this.props.onNewImage); - onNewImageDebounced = debounce(event => { + onNewImageDebounced = debounce((event) => { this.onNewImageHandler(event, this.props.onNewImageDebounced); }, this.props.onNewImageDebounceTime); @@ -709,13 +738,13 @@ class CornerstoneViewport extends Component { this.numImagesLoaded++; }; - onImageProgress = e => { + onImageProgress = (e) => { this.setState({ imageProgress: e.detail.percentComplete, }); }; - imageSliderOnInputCallback = value => { + imageSliderOnInputCallback = (value) => { this.setViewportActive(); scrollToIndex(this.element, value); @@ -757,9 +786,9 @@ class CornerstoneViewport extends Component { )}
e.preventDefault()} - onMouseDown={e => e.preventDefault()} - ref={input => { + onContextMenu={(e) => e.preventDefault()} + onMouseDown={(e) => e.preventDefault()} + ref={(input) => { this.element = input; }} > @@ -796,9 +825,9 @@ function _trySetActiveTool(element, activeToolName) { } const validTools = cornerstoneTools.store.state.tools.filter( - tool => tool.element === element + (tool) => tool.element === element ); - const validToolNames = validTools.map(tool => tool.name); + const validToolNames = validTools.map((tool) => tool.name); if (!validToolNames.includes(activeToolName)) { console.warn(