feat: Custom loader (#46)

* Custom loader prop, evt listener fix, example updated.

* Proptypes updated.

Author: amrita-syn

examples/App.js

@@ -63,10 +63,10 @@ function Index() {
       text: 'How to render multiple viewports and track the "active viewport".',
     },
     {
-      title: 'Custom Overlay Component',
+      title: 'Custom Overlay and Loader Component',
       url: '/custom-overlay',
       text:
-        'Provide an alternative React Component to use in place of the built in overlay-text component.',
+        'Provide an alternative React Component to use in place of the built in overlay-text and loading indicator components.',
     },
     {
       title: 'Escape Hatch',

examples/ExamplePageCustomOverlay.js

@@ -43,6 +43,26 @@ class CustomOverlay extends Component {
   }
 }
 
+class CustomLoader extends Component {
+  render() {
+    return (
+      <div
+        className="lds-ripple"
+        style={{
+          position: 'absolute',
+          top: '47%',
+          left: '47%',
+          width: '100%',
+          height: '100%',
+          color: 'white',
+        }}
+      >
+        <div />
+        <div />
+      </div>
+    );
+  }
+}
 class ExamplePageCustomOverlay extends Component {
   render() {
     return (
@@ -66,6 +86,7 @@ class ExamplePageCustomOverlay extends Component {
               'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm',
             ]}
             viewportOverlayComponent={CustomOverlay}
+            loadingIndicatorComponent={CustomLoader}
             style={{ minWidth: '100%', height: '512px', flex: '1' }}
           />
         </div>
@@ -114,6 +135,28 @@ class ExamplePageCustomOverlay extends Component {
   }
 }
 
+class CustomLoader extends Component {
+  render() {
+    return (
+      <div
+        className="lds-ripple"
+        style={{
+          position: 'absolute',
+          top: '47%',
+          left: '47%',
+          width: '100%',
+          height: '100%',
+          color: 'white',
+        }}
+      >
+        <div></div>
+        <div></div>
+      </div>
+    );
+  }
+}
+
+
 {/* RENDER */}
 <CornerstoneViewport
 tools={[
@@ -128,6 +171,7 @@ imageIds={[
   'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm',
 ]}
 viewportOverlayComponent={CustomOverlay}
+loadingIndicatorComponent={CustomLoader}
 style={{ minWidth: '100%', height: '512px', flex: '1' }}
 />`}
           </SyntaxHighlighter>

examples/index.css

@@ -5,15 +5,16 @@
 html {
   box-sizing: border-box;
 }
+
 *,
 *:before,
 *:after {
   box-sizing: inherit;
 }
 
 body {
-  margin: 0;
-  padding: 0;
+  margin     : 0;
+  padding    : 0;
   font-family: sans-serif;
 }
 
@@ -24,3 +25,41 @@ body {
 .viewport-wrapper.active {
   border: 2px solid dodgerblue;
 }
+
+/* Custom Loader with animation */
+.lds-ripple {
+  display : inline-block;
+  position: relative;
+  width   : 64px;
+  height  : 64px;
+}
+
+.lds-ripple div {
+  position     : absolute;
+  border       : 4px solid blue;
+  opacity      : 1;
+  border-radius: 50%;
+  animation    : lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+  0% {
+    top    : 28px;
+    left   : 28px;
+    width  : 0;
+    height : 0;
+    opacity: 1;
+  }
+
+  100% {
+    top    : -1px;
+    left   : -1px;
+    width  : 58px;
+    height : 58px;
+    opacity: 0;
+  }
+}

src/CornerstoneViewport/CornerstoneViewport.js

@@ -19,21 +19,6 @@ const scrollToIndex = cornerstoneTools.importInternal('util/scrollToIndex');
 const { loadHandlerManager } = cornerstoneTools;
 
 class CornerstoneViewport extends Component {
-  static defaultProps = {
-    // Watch
-    imageIdIndex: 0,
-    isPlaying: false,
-    cineFrameRate: 24,
-    viewportOverlayComponent: ViewportOverlay,
-    imageIds: ['no-id://'],
-    // Init
-    cornerstoneOptions: {},
-    isStackPrefetchEnabled: false,
-    loadIndicatorDelay: 45,
-    resizeThrottleMs: 200,
-    tools: [],
-  };
-
   static propTypes = {
     imageIds: PropTypes.arrayOf(PropTypes.string).isRequired,
     imageIdIndex: PropTypes.number,
@@ -79,13 +64,33 @@ class CornerstoneViewport extends Component {
     startLoadHandler: PropTypes.func,
     endLoadHandler: PropTypes.func,
     loadIndicatorDelay: PropTypes.number,
+    loadingIndicatorComponent: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.func,
+    ]),
     resizeThrottleMs: PropTypes.number, // 0 to disable
     //
     style: PropTypes.object,
     className: PropTypes.string,
     isOverlayVisible: PropTypes.bool,
   };
 
+  static defaultProps = {
+    // Watch
+    imageIdIndex: 0,
+    isPlaying: false,
+    cineFrameRate: 24,
+    viewportOverlayComponent: ViewportOverlay,
+    imageIds: ['no-id://'],
+    // Init
+    cornerstoneOptions: {},
+    isStackPrefetchEnabled: false,
+    loadIndicatorDelay: 45,
+    loadingIndicatorComponent: LoadingIndicator,
+    resizeThrottleMs: 200,
+    tools: [],
+  };
+
   constructor(props) {
     super(props);
 
@@ -97,6 +102,7 @@ class CornerstoneViewport extends Component {
       // We can probs grab this once and hold on to? (updated on newImage)
       imageId,
       imageIdIndex, // Maybe
+      imageProgress: 0,
       isLoading: true,
       numImagesLoaded: 0,
       error: null,
@@ -172,7 +178,6 @@ class CornerstoneViewport extends Component {
       _trySetActiveTool(this.element, this.props.activeTool);
       this.setState({ isLoading: false });
     } catch (error) {
-      console.error(error);
       this.setState({ error, isLoading: false });
     }
   }
@@ -299,6 +304,17 @@ class CornerstoneViewport extends Component {
     cornerstone.disable(this.element);
   }
 
+  /**
+   * @returns Component
+   * @memberof CornerstoneViewport
+   */
+  getLoadingIndicator() {
+    const { loadingIndicatorComponent: Component } = this.props;
+    const { error, imageProgress } = this.state;
+
+    return <Component error={error} percentComplete={imageProgress} />;
+  }
+
   /**
    *
    *
@@ -388,9 +404,14 @@ class CornerstoneViewport extends Component {
       this.onNewImage
     );
 
-    // Update our "Images Loaded" count.
-    // Better than nothing?
-    this.element[addOrRemoveEventListener](
+    // Update image load progress
+    cornerstone.events[addOrRemoveEventListener](
+      'cornerstoneimageloadprogress',
+      this.onImageProgress
+    );
+
+    // Update number of images loaded
+    cornerstone.events[addOrRemoveEventListener](
       cornerstone.EVENTS.IMAGE_LOADED,
       this.onImageLoaded
     );
@@ -581,6 +602,12 @@ class CornerstoneViewport extends Component {
     });
   };
 
+  onImageProgress = e => {
+    this.setState({
+      imageProgress: e.detail.percentComplete,
+    });
+  };
+
   imageSliderOnInputCallback = value => {
     this.setViewportActive();
 
@@ -624,9 +651,7 @@ class CornerstoneViewport extends Component {
             this.element = input;
           }}
         >
-          {displayLoadingIndicator && (
-            <LoadingIndicator error={this.state.error} />
-          )}
+          {displayLoadingIndicator && this.getLoadingIndicator()}
           {/* This classname is important in that it tells `cornerstone` to not
            * create a new canvas element when we "enable" the `viewport-element`
            */}

src/LoadingIndicator/LoadingIndicator.css

@@ -1,21 +1,26 @@
 .imageViewerLoadingIndicator {
   color: #91b9cd;
 }
+
 .faded {
   opacity: 0.5;
 }
+
 .imageViewerErrorLoadingIndicator {
   color: #e29e4a;
 }
+
 .imageViewerErrorLoadingIndicator p,
 .imageViewerErrorLoadingIndicator h4 {
   padding: 4px 0;
   text-align: center;
   word-wrap: break-word;
 }
+
 .imageViewerErrorLoadingIndicator p {
   font-size: 11pt;
 }
+
 .loadingIndicator {
   background-color: rgba(0, 0, 0, 0.75);
   font-size: 18px;
@@ -27,8 +32,8 @@
   width: 100%;
   z-index: 1;
 }
+
 .loadingIndicator .indicatorContents {
-  font-size: 30px;
   font-weight: 300;
   position: absolute;
   text-align: center;

src/LoadingIndicator/LoadingIndicator.js

@@ -15,10 +15,8 @@ class LoadingIndicator extends PureComponent {
   };
 
   render() {
-    let percComplete;
-    if (this.props.percentComplete && this.props.percentComplete !== 100) {
-      percComplete = `${this.props.percentComplete}%`;
-    }
+    const pc = this.props.percentComplete;
+    const percComplete = `${pc}%`;
 
     return (
       <React.Fragment>
@@ -33,10 +31,12 @@ class LoadingIndicator extends PureComponent {
         ) : (
           <div className="imageViewerLoadingIndicator loadingIndicator">
             <div className="indicatorContents">
-              <p>
-                Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw" />{' '}
+              <h2>
+                {pc < 100 ? 'Loading...' : 'Loaded -'}
+                <i className="fa fa-spin fa-circle-o-notch fa-fw" />{' '}
                 {percComplete}
-              </p>
+              </h2>
+              {pc === 100 && <p>Processing...</p>}
             </div>
           </div>
         )}