fix: runaway debounce (#37)

* Bump version and publish

* Catch-up to deployed

* Fixing runaway debounces?

Author: dannyrb

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cornerstone-viewport",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Cornerstone medical image viewport component for React",
   "author": "Cornerstone Contributors",
   "license": "MIT",

src/CornerstoneViewport/CornerstoneViewport.js

@@ -44,19 +44,27 @@ function initializeTools(cornerstoneTools, tools, element) {
   });
 }
 
-function layoutsEqual(a, b) {
-  if (
-    !a ||
-    !b ||
-    (!a.viewports && !b.viewports) ||
-    a.viewports.length !== b.viewports.length
-  ) {
-    return false;
+function areLayoutsEqual(a, b, viewportIndex = 0) {
+  const notEqual = false;
+  const viewportsExist =
+    a &&
+    b &&
+    a.viewports &&
+    b.viewports &&
+    a.viewports.length > 0 &&
+    b.viewports.length > 0;
+  const wasNotSetAndNowIs = (!a && b) || (!a.viewports && !b.viewports);
+  const hasNumViewportsChanged =
+    viewportsExist && a.viewports.length !== b.viewports.length;
+
+  if (wasNotSetAndNowIs || hasNumViewportsChanged) {
+    return notEqual;
   }
 
-  return a.viewports.every((aViewport, index) => {
-    return viewportsEqual(aViewport, b.viewports[index]);
-  });
+  const aViewport = a.viewports[viewportIndex];
+  const bViewport = b.viewports[viewportIndex];
+
+  return viewportsEqual(aViewport, bViewport);
 }
 
 function viewportsEqual(a, b) {
@@ -131,7 +139,8 @@ class CornerstoneViewport extends Component {
       PropTypes.string,
       PropTypes.func
     ]),
-    shouldFitToWindowOnResize: PropTypes.bool
+    shouldFitToWindowOnResize: PropTypes.bool,
+    viewportIndex: PropTypes.number
   };
 
   static loadIndicatorDelay = 45;
@@ -527,6 +536,15 @@ class CornerstoneViewport extends Component {
         this.setState({
           viewportHeight: `${this.element.clientHeight - 20}px`
         });
+
+        // Our `doneLoadingHandler` isn't firing for the initial image load
+        // Dropping this here, as the image should definitely be loaded at this point,
+        // and we can force the loading state off. TODO: investigate
+        setTimeout(() => {
+          this.setState({
+            isLoading: false
+          });
+        }, CornerstoneViewport.loadIndicatorDelay);
       },
       error => {
         console.error(error);
@@ -707,7 +725,10 @@ class CornerstoneViewport extends Component {
       });
     }
 
-    if (!layoutsEqual(this.props.layout, prevProps.layout)) {
+    if (
+      this.props.layout &&
+      !areLayoutsEqual(this.props.layout, prevProps.layout)
+    ) {
       this.debouncedResize();
     }