wip on react transition 2

Packages/ohif-viewerbase/client/components/index.js

@@ -1,6 +1,8 @@
 import viewer  from './viewer/index.js';
 
-export {
+const components = {
     viewer
 };
 
+export default components;
+

Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js

@@ -14,6 +14,7 @@ import './CornerstoneViewport.css';
 
 import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
+import {StackManager} from "../../lib/StackManager";
 
 const EVENT_RESIZE = 'resize';
 const loadIndicatorDelay = 45;
@@ -42,11 +43,22 @@ class CornerstoneViewport extends Component {
   constructor(props) {
     super(props);
 
-    const stack = props.viewportData.stack;
+    const { displaySetInstanceUid, studyInstanceUid } = this.props.viewportData;
+
+    // Create shortcut to displaySet
+    const study = OHIF.viewer.Studies.findBy({ studyInstanceUid });
+
+    const displaySet = study.displaySets.find(set => {
+      return set.displaySetInstanceUid === displaySetInstanceUid;
+    });
+
+    // Get stack from Stack Manager
+    const stack = StackManager.findOrCreateStack(study, displaySet);
 
     // TODO: Allow viewport as a prop
     this.state = {
       stack,
+      displaySetInstanceUid,
       imageId: stack.imageIds[0],
       viewportHeight: '100%',
       isLoading: true,
@@ -388,10 +400,10 @@ class CornerstoneViewport extends Component {
   componentDidUpdate(prevProps) {
     // TODO: Add a real object shallow comparison here?
     if (
-      this.state.stack.imageIds[0] !== this.props.viewportData.stack.imageIds[0]
+      this.state.displaySetInstanceUid !== this.props.viewportData.displaySetInstanceUid
     ) {
       this.setState({
-        stack: this.props.viewportData.stack
+        displaySetInstanceUid: this.props.viewportData.displaySetInstanceUid
       });
 
       const stackData = cornerstoneTools.getToolState(this.element, 'stack');
@@ -413,7 +425,7 @@ class CornerstoneViewport extends Component {
 
       const imageId = currentStack.imageIds[currentStack.currentImageIdIndex];
 
-      cornerstone.loadAndCacheImage(imageId).then(image => {
+      /*cornerstone.loadAndCacheImage(imageId).then(image => {
         try {
           cornerstone.getEnabledElement(this.element);
         } catch (error) {
@@ -426,7 +438,7 @@ class CornerstoneViewport extends Component {
 
         cornerstoneTools.stackPrefetch.disable(this.element);
         cornerstoneTools.stackPrefetch.enable(this.element);
-      });
+      });*/
     }
 
     if (this.props.activeTool !== prevProps.activeTool) {
@@ -438,54 +450,6 @@ class CornerstoneViewport extends Component {
         isTouchActive: true
       });
     }
-
-    if (this.props.currentLesion !== prevProps.currentLesion) {
-      const currentToolData = this.props.toolData[this.props.currentLesion - 1];
-      if (currentToolData) {
-        const { imageId } = currentToolData;
-        const toolState = cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
-        const toolData = toolState[imageId][currentToolData.toolType].data;
-
-        toolData.forEach(data => {
-          if (data._id === currentToolData._id) {
-            data.active = true;
-          } else {
-            data.active = false;
-          }
-        });
-
-        cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
-          toolState
-        );
-
-        if (this.state.imageId === imageId) {
-          cornerstone.setViewport(this.element, currentToolData.viewport);
-          cornerstone.updateImage(this.element);
-        } else {
-          cornerstone.loadAndCacheImage(imageId).then(image => {
-            try {
-              cornerstone.getEnabledElement(this.element);
-            } catch (error) {
-              // Handle cases where the user ends the session before the image is displayed.
-              console.error(error);
-              return;
-            }
-
-            cornerstone.displayImage(
-              this.element,
-              image,
-              currentToolData.viewport
-            );
-
-            this.setState({
-              imageId
-            });
-          });
-        }
-      } else {
-        cornerstone.updateImage(this.element);
-      }
-    }
   }
 
   setActiveTool = activeTool => {
@@ -636,9 +600,9 @@ class CornerstoneViewport extends Component {
 }
 
 CornerstoneViewport.propTypes = {
-  measurementsAddedOrRemoved: PropTypes.func.isRequired,
+  measurementsAddedOrRemoved: PropTypes.func,
-  measurementsChanged: PropTypes.func.isRequired,
+  measurementsChanged: PropTypes.func,
-  activeTool: PropTypes.string.isRequired,
+  activeTool: PropTypes.string,
   viewportData: PropTypes.object.isRequired
 };
 

Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js

@@ -74,40 +74,44 @@ class GridLayout extends Component {
             viewportData = viewportData.slice(0, numViewports);
         }
 
-        const viewports = viewportData.map((viewport, index) => {
+        const viewports = viewportData.map((data, index) => {
-            const className = `viewportContainer ${this.getClass(index)} ${getActiveClass(index)}`;
+            const className = `viewportContainer ${this.getClass(index)} ${this.getActiveClass(index)}`;
 
             const styles = {
                 height: `${height}%`,
                 width: `${width}%`,
             };
 
-            const cornerstoneViewport = (viewport) => (
+            const cornerstoneViewport = (data) => (
                 <div className="removable">
-                    <CornerstoneViewport/>
+                    <CornerstoneViewport viewportData={data}/>
                 </div>
             );
 
-            const pluginViewport = (viewport) => (
+            const pluginViewport = (data) => (
-                <div className={`viewport-plugin-${viewport.plugin}`} style="height:100%; width: 100%">
+                <div className={`viewport-plugin-${data.plugin}`} style="height:100%; width: 100%">
                 </div>
             );
 
             return (
-                <div className={className} style={styles}>
+                <div key={index} className={className} style={styles}>
-                {viewport.plugin === 'cornerstone' ?
+                {data.plugin === 'cornerstone' ?
-                    cornerstoneViewport(viewport) :
+                    cornerstoneViewport(data) :
-                    pluginViewport(viewport)
+                    pluginViewport(data)
                 }
                 {/*{>seriesQuickSwitch (clone this viewport=viewport viewportIndex=@index)}*/}
             </div>
             )
         })
 
+        const layoutClass = `layout-${rows}-${columns}`;
+
         return (
             <div id='imageViewerViewports'>
+                <div id='layoutManagerTarget' className={layoutClass}>
                 { viewports }
                 </div>
+            </div>
         )
     }
 }

Packages/ohif-viewerbase/client/components/viewer/LoadingIndicator/LoadingIndicator.js

@@ -89,7 +89,7 @@ class LoadingIndicator extends Component {
         return (<>
         <div className="imageViewerLoadingIndicator loadingIndicator">
             <div className="indicatorContents">
-            <p>Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw"></i> {{percComplete}}</p>
+            <p>Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw"></i> {percComplete}</p>
            </div>
         </div>
         <div className="imageViewerErrorLoadingIndicator loadingIndicator">
@@ -104,7 +104,7 @@ class LoadingIndicator extends Component {
 }
 
 LoadingIndicator.propTypes = {
-    percentComplete: PropTypes.number.isRequired
+    percentComplete: PropTypes.number
 };
 
 export default LoadingIndicator;

Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.js

@@ -59,9 +59,8 @@ class ViewerMain extends Component {
         Session.set('OHIFViewerMainRendered', Math.random());
     }
 
-    setContents(component, data) {
+    setContents(Component, props) {
-        const Comp = this.props.component;
+        const contents = (<Component {...props}/>);
-        const contents = (<Comp data={data}/>);
 
         this.setState({
             contents

Packages/ohif-viewerbase/client/components/viewer/index.js

@@ -6,7 +6,7 @@ import ImageScrollbar from './ImageScrollbar.js';
 import ToolContextMenu from './ToolContextMenu.js';
 import ViewportOverlay from './ViewportOverlay.js';
 
-export {
+const viewer = {
     ViewerMain,
     GridLayout,
     LoadingIndicator,
@@ -14,4 +14,7 @@ export {
     ImageScrollbar,
     ToolContextMenu,
     ViewportOverlay,
+    test: 'test2'
 };
+
+export default viewer;

Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js

@@ -8,7 +8,7 @@ import { $ } from 'meteor/jquery';
 
 import { OHIF } from 'meteor/ohif:core';
 
-import viewer from '../../components/viewer';
+import viewerComponents from '../../components/viewer/index.js';
 
 const PLUGIN_CORNERSTONE = 'cornerstone';
 
@@ -27,7 +27,7 @@ Meteor.startup(() => {
 export class LayoutManager {
     /**
      * Constructor: initializes a Layout Manager object.
-     * @param {DOM element}    parentNode DOM element representing the parent node, which wraps the Layout Manager content
+     * @param {Function}
      * @param {Array} studies  Array of studies objects that will be rendered in the Viewer. Each object will be rendered in a div.imageViewerViewport
      */
     constructor(setContents, studies) {
@@ -35,15 +35,13 @@ export class LayoutManager {
 
         this.setContents = setContents;
         this.observer = new Tracker.Dependency();
-        this.parentNode = parentNode;
         this.studies = studies;
         this.viewportData = [];
-        this.layoutTemplate = viewer.GridLayout;
+        this.layoutTemplate = viewerComponents.GridLayout;
         this.layoutProps = {
             rows: 1,
             columns: 1
         };
-        this.layoutClassName = this.getLayoutClass();
 
         this.isZoomed = false;
 
@@ -148,36 +146,6 @@ export class LayoutManager {
         }
     }
 
-    /**
-     * Returns the name of the class to be added to the parentNode
-     * @return {string} class name following the pattern layout-<rows>-<columns>. Ex: layout-1-1, layout-2-2
-     */
-    getLayoutClass() {
-        const { rows, columns } = this.layoutProps;
-        const layoutClass = `layout-${rows}-${columns}`;
-
-        return layoutClass;
-    }
-
-    /**
-     * Add a class to the parentNode based on the layout configuration.
-     * This function is helpful to style the layout of viewports.
-     * Besides that, each inner div.viewportContainer will have helpful classes
-     * as well. See viewer/components/gridLayout/ component in this ohif-viewerbase package.
-     */
-    updateLayoutClass() {
-        const newLayoutClass = this.getLayoutClass();
-
-        // If layout has changed, change its class
-        if (this.layoutClassName !== newLayoutClass) {
-            this.parentNode.classList.remove(this.layoutClassName);
-        }
-
-        this.layoutClassName = newLayoutClass;
-
-        this.parentNode.classList.add(newLayoutClass);
-    }
-
     /**
      * Updates the grid with the new layout props.
      * It iterates over all viewportData to render the studies
@@ -212,9 +180,7 @@ export class LayoutManager {
             data.viewportData.push(viewportDataAndLayoutProps);
         });
 
-        this.updateLayoutClass();
+        const component = viewerComponents.GridLayout;
-
-        const component = GridLayout;
         this.setContents(component, data)
 
         this.updateSession();
@@ -318,7 +284,7 @@ export class LayoutManager {
             columns: 1
         };
 
-        const component = GridLayout;
+        const component = viewerComponents.GridLayout;
         this.setContents(component, data)
 
         this.isZoomed = true;