Remove windowResize behavior, expose better options for reactResizeObserver

Author: dannyrb

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "date-fns": "^2.2.1",
+    "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2",
     "react-resize-detector": "^4.2.1"
   },

src/CornerstoneViewport/CornerstoneViewport.js

@@ -5,7 +5,6 @@ import ImageScrollbar from '../ImageScrollbar/ImageScrollbar.js';
 import ViewportOverlay from '../ViewportOverlay/ViewportOverlay.js';
 import LoadingIndicator from '../LoadingIndicator/LoadingIndicator.js';
 import ViewportOrientationMarkers from '../ViewportOrientationMarkers/ViewportOrientationMarkers.js';
-import windowResizeHandler from './windowResizeHandler.js';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import ReactResizeDetector from 'react-resize-detector/lib/index.js';
@@ -72,7 +71,9 @@ class CornerstoneViewport extends Component {
       PropTypes.element,
       PropTypes.func,
     ]),
-    resizeThrottleMs: PropTypes.number, // 0 to disable
+    enableResizeDetector: PropTypes.bool,
+    resizeRefreshRateMs: PropTypes.number,
+    resizeRefreshMode: PropTypes.oneOf(['throttle', 'debounce']),
     //
     style: PropTypes.object,
     className: PropTypes.string,
@@ -92,7 +93,9 @@ class CornerstoneViewport extends Component {
     isOverlayVisible: true,
     loadIndicatorDelay: 45,
     loadingIndicatorComponent: LoadingIndicator,
-    resizeThrottleMs: 200,
+    enableResizeDetector: true,
+    resizeRefreshRateMs: 200,
+    resizeRefreshMode: 'debounce',
     tools: [],
     onNewImageDebounceTime: 0,
   };
@@ -141,7 +144,6 @@ class CornerstoneViewport extends Component {
       isStackPrefetchEnabled,
       cornerstoneOptions,
       imageIds,
-      resizeThrottleMs,
       isPlaying,
       frameRate,
     } = this.props;
@@ -159,10 +161,6 @@ class CornerstoneViewport extends Component {
     this._bindInternalElementEventListeners();
     this._bindExternalEventListeners('element');
 
-    if (resizeThrottleMs) {
-      windowResizeHandler.enable(this.element, resizeThrottleMs);
-    }
-
     // Only after `uuid` is set for enabledElement
     this._setupLoadHandlers();
 
@@ -315,16 +313,14 @@ class CornerstoneViewport extends Component {
     this._bindInternalElementEventListeners(clear);
     this._bindExternalEventListeners('cornerstone', clear);
     this._bindExternalEventListeners('element', clear);
-
     this._setupLoadHandlers(clear);
+
     if (this.props.isStackPrefetchEnabled) {
       _enableStackPrefetching(this.element, clear);
     }
+
     cornerstoneTools.clearToolState(this.element, 'stackPrefetch');
     cornerstoneTools.stopClip(this.element);
-    if (this.props.resizeThrottleMs) {
-      windowResizeHandler.disable(this.element);
-    }
     cornerstone.disable(this.element);
   }
 
@@ -740,14 +736,16 @@ class CornerstoneViewport extends Component {
         style={this.props.style}
         className={classNames('viewport-wrapper', this.props.className)}
       >
-        <ReactResizeDetector
-          handleWidth
-          handleHeight
-          skipOnMount={true}
-          refreshMode={'throttle'}
-          refreshRate={this.props.resizeThrottleMs}
-          onResize={this.onResize}
-        />
+        {this.props.enableResizeDetector && (
+          <ReactResizeDetector
+            handleWidth
+            handleHeight
+            skipOnMount={true}
+            refreshMode={this.props.resizeRefreshMode}
+            refreshRate={this.props.resizeRefreshRateMs}
+            onResize={this.onResize}
+          />
+        )}
         <div
           className="viewport-element"
           onContextMenu={e => e.preventDefault()}