fix(loadHandler): Use element-specific load handlers (#23)

Author: biharck

example/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "cornerstone-core": "2.2.8",
     "cornerstone-math": "0.1.8",
-    "cornerstone-tools": "3.1.0",
+    "cornerstone-tools": "3.16.0",
     "cornerstone-wado-image-loader": "2.2.3",
     "dicom-parser": "1.8.3",
     "hammerjs": "^2.0.8",

package.json

@@ -27,7 +27,7 @@
   "peerDependencies": {
     "cornerstone-core": "^2.2.8",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^3.1.0",
+    "cornerstone-tools": "^3.16.0",
     "cornerstone-wado-image-loader": "^2.2.3",
     "dicom-parser": "^1.8.3",
     "hammerjs": "^2.0.8",

src/CornerstoneViewport/CornerstoneViewport.js

@@ -14,6 +14,7 @@ import './CornerstoneViewport.css';
 const EVENT_RESIZE = 'resize';
 
 const scrollToIndex = cornerstoneTools.import('util/scrollToIndex');
+const { loadHandlerManager } = cornerstoneTools;
 
 function setToolsPassive(cornerstoneTools, tools) {
   tools.forEach(tool => {
@@ -73,7 +74,7 @@ class CornerstoneViewport extends Component {
       { name: 'Wwwc', mouseButtonMasks: [1] },
       { name: 'Bidirectional', mouseButtonMasks: [1] },
       { name: 'Length', mouseButtonMasks: [1] },
-	    { name: 'FreehandMouse', mouseButtonMasks: [1] },
+      { name: 'FreehandMouse', mouseButtonMasks: [1] },
       { name: 'Angle', mouseButtonMasks: [1] },
       { name: 'StackScroll', mouseButtonMasks: [1] },
       { name: 'Brush', mouseButtonMasks: [1] },
@@ -120,6 +121,7 @@ class CornerstoneViewport extends Component {
     // TODO: Allow viewport as a prop
     const viewportDataStack = props.viewportData.stack;
     const stack = Object.assign({}, viewportDataStack);
+
     this.state = {
       stack,
       displaySetInstanceUid: props.viewportData.displaySetInstanceUid,
@@ -131,10 +133,6 @@ class CornerstoneViewport extends Component {
       viewport: cornerstone.getDefaultViewport(null, undefined)
     };
 
-    const { loadHandlerManager } = cornerstoneTools;
-    loadHandlerManager.setStartLoadHandler(this.startLoadingHandler);
-    loadHandlerManager.setEndLoadHandler(this.doneLoadingHandler);
-
     this.debouncedResize = debounce(() => {
       try {
         cornerstone.getEnabledElement(this.element);
@@ -412,6 +410,12 @@ class CornerstoneViewport extends Component {
     );
     cornerstone.enable(element, this.props.cornerstoneOptions);
 
+    loadHandlerManager.setStartLoadHandler(
+      this.startLoadingHandler,
+      this.element
+    );
+    loadHandlerManager.setEndLoadHandler(this.doneLoadingHandler, this.element);
+
     // Handle the case where the imageId isn't loaded correctly and the
     // imagePromise returns undefined
     // To test, uncomment the next line
@@ -814,7 +818,6 @@ class CornerstoneViewport extends Component {
 
   doneLoadingHandler = () => {
     clearTimeout(this.loadHandlerTimeout);
-
     this.setState({
       isLoading: false
     });