@ohif/extension-dicom-microscopy: Add resize call when the container has resized (0.0.9)

extensions/ohif-dicom-microscopy-extension/package.json

@@ -19,9 +19,10 @@
     "lint": "eslint -c .eslintrc --fix src && prettier --single-quote --write src/**/*.{js,jsx,json,css}"
   },
   "peerDependencies": {
+    "ohif-core": "^0.6.0",
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0",
-    "ohif-core": "^0.6.0"
+    "react-resize-detector": "^4.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -81,6 +82,7 @@
   "dependencies": {
     "@babel/runtime": "^7.2.0",
     "classnames": "^2.2.6",
-    "dicom-microscopy-viewer": "^0.4.3"
+    "dicom-microscopy-viewer": "0.5.0",
+    "lodash.debounce": "^4.0.8"
   }
 }

extensions/ohif-dicom-microscopy-extension/rollup.config.js

@@ -10,6 +10,7 @@ import builtins from 'rollup-plugin-node-builtins';
 
 const globals = {
   react: 'React',
+  'react-resize-detector': 'ReactResizeDetector',
   'react-dom': 'ReactDOM',
   'ohif-core': 'OHIF'
 };
@@ -52,6 +53,15 @@ export default {
         ],
         '.yalc/dicom-microscopy-viewer/build/dicom-microscopy-viewer.js': [
           'api'
+        ],
+        'node_modules/react-resize-detector/node_modules/prop-types/index.js': [
+          'bool',
+          'number',
+          'string',
+          'shape',
+          'func',
+          'any',
+          'node'
         ]
       }
     })

extensions/ohif-dicom-microscopy-extension/src/DicomMicroscopyViewport.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-
+import ReactResizeDetector from 'react-resize-detector';
 import { api } from 'dicom-microscopy-viewer';
+import debounce from 'lodash.debounce';
 
 const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
 
@@ -9,10 +10,16 @@ class DicomMicroscopyViewport extends Component {
     error: null,
   };
 
+  viewer = null;
+
   constructor(props) {
     super(props);
 
     this.container = React.createRef();
+
+    this.debouncedResize = debounce(() => {
+      if (this.viewer) this.viewer.resize();
+    }, 100);
   }
 
   // install the microscopy renderer into the web page.
@@ -52,17 +59,18 @@ class DicomMicroscopyViewport extends Component {
       .then(metadata => {
         metadata = metadata.filter(m => m);
 
-        const viewer = new microscopyViewer({
+        this.viewer = new microscopyViewer({
           client: dicomWebClient,
           metadata,
+          retrieveRendered: false
         });
 
-        viewer.render({ container, retrieveRendered: true });
+        this.viewer.render({ container });
       });
   }
 
   componentDidMount() {
-    const { studies, displaySet } = this.props.viewportData;
+    const { displaySet } = this.props.viewportData;
 
     this.installOpenLayersRenderer(this.container.current, displaySet);
   }
@@ -71,6 +79,13 @@ class DicomMicroscopyViewport extends Component {
     const style = { width: '100%', height: '100%' };
     return (
       <div className={'DicomMicroscopyViewer'} style={style}>
+        {ReactResizeDetector && (
+          <ReactResizeDetector
+            handleWidth
+            handleHeight
+            onResize={this.onWindowResize}
+          />
+        )}
         {this.state.error ? (
           <h2>{JSON.stringify(this.state.error)}</h2>
         ) : (
@@ -79,6 +94,10 @@ class DicomMicroscopyViewport extends Component {
       </div>
     );
   }
+
+  onWindowResize = () => {
+    this.debouncedResize();
+  };
 }
 
 export default DicomMicroscopyViewport;

extensions/ohif-dicom-microscopy-extension/yarn.lock

@@ -1617,10 +1617,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-dicom-microscopy-viewer@^0.4.3:
+dicom-microscopy-viewer@0.5.0:
-  version "0.4.3"
+  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.4.3.tgz#defaa821026765bcd109b97258742df72a9b92bb"
+  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.5.0.tgz#e4f74261337d8a78d51490af0d17edc63997e619"
-  integrity sha512-PjT3qH0hv6dKOQzXFIHw4w/d8QCbiUOJOGZHvAkkRvnjeNRP7/ri8vbFvcSev+nYxKskNb1Tn0xd1+dsDpPGNw==
+  integrity sha512-r3BPLBvexv9v/Rr/FBTgXgp7orIFKLWW5uYM6IsYpz36ttU84Edk7Z2GAyk6887QNsfEMLzYV+5ik6HRrMg0cA==
   dependencies:
     dicomweb-client "^0.4.2"
     ol "^5.3.0"
@@ -3199,6 +3199,11 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -3238,6 +3243,7 @@ longest-streak@^2.0.1:
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"