wip on react transition 5

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

@@ -126,8 +126,6 @@ class CornerstoneViewport extends Component {
           className="CornerstoneViewport viewportElement"
           onContextMenu={this.onContextMenu}
           tabIndex='0'
-          unselectable='on'
-          onSelectStart='return false;'
           ref={input => {
             this.element = input;
           }}
@@ -203,9 +201,9 @@ class CornerstoneViewport extends Component {
   onImageRendered() {
     const viewport = cornerstone.getViewport(this.element);
 
-    this.setState({
+    /*this.setState({
       viewport
-    });
+    });*/
   }
 
   onNewImage() {
@@ -416,30 +414,45 @@ class CornerstoneViewport extends Component {
     if (
       this.state.displaySetInstanceUid !== this.props.viewportData.displaySetInstanceUid
     ) {
-      this.setState({
+      const { displaySetInstanceUid, studyInstanceUid, currentImageIdIndex } = this.props.viewportData;
-        displaySetInstanceUid: this.props.viewportData.displaySetInstanceUid
+
+      // 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);
+
       const stackData = cornerstoneTools.getToolState(this.element, 'stack');
       let currentStack = stackData && stackData.data[0];
 
       if (!currentStack) {
         currentStack = {
-          currentImageIdIndex: this.state.stack.currentImageIdIndex,
+          currentImageIdIndex: currentImageIdIndex,
-          imageIds: this.state.stack.imageIds
+          imageIds: stack.imageIds
         };
 
         cornerstoneTools.addStackStateManager(this.element, ['stack']);
         cornerstoneTools.addToolState(this.element, 'stack', currentStack);
       } else {
         // TODO: we should make something like setToolState by an ID
-        currentStack.currentImageIdIndex = this.state.stack.currentImageIdIndex;
+        currentStack.currentImageIdIndex = currentImageIdIndex;
-        currentStack.imageIds = this.state.stack.imageIds;
+        currentStack.imageIds = stack.imageIds;
       }
 
       const imageId = currentStack.imageIds[currentStack.currentImageIdIndex];
 
-      /*cornerstone.loadAndCacheImage(imageId).then(image => {
+      this.setState({
+          displaySetInstanceUid,
+          studyInstanceUid,
+          stack,
+          imageId
+      });
+
+      cornerstone.loadAndCacheImage(imageId).then(image => {
         try {
           cornerstone.getEnabledElement(this.element);
         } catch (error) {
@@ -448,11 +461,20 @@ class CornerstoneViewport extends Component {
           return;
         }
 
-        cornerstone.displayImage(this.element, image);
+
+        const viewport = cornerstone.getDefaultViewportForImage(this.element, image);
+
+        // Workaround for Cornerstone issue #304
+        viewport.displayedArea.brhc = {
+          x: image.width,
+          y: image.height
+        }
+
+        cornerstone.displayImage(this.element, image, viewport);
 
         cornerstoneTools.stackPrefetch.disable(this.element);
         cornerstoneTools.stackPrefetch.enable(this.element);
-      });*/
+      });
     }
 
     if (this.props.activeTool !== prevProps.activeTool) {
@@ -465,7 +487,8 @@ class CornerstoneViewport extends Component {
       });
     }
 
-    this.debouncedResize();
+    // TODO: Check this, causes infinite loop
+    //this.debouncedResize();
   }
 
   setActiveTool = activeTool => {

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

@@ -6,10 +6,10 @@ import './ViewportOrientationMarkers.styl';
 class ViewportOrientationMarkers extends Component {
     render() {
         return (
-            <div class="viewportOrientationMarkers noselect">
+            <div className="viewportOrientationMarkers noselect">
-                <div class="topMid orientationMarker">
+                <div className="topMid orientationMarker">
                 </div>
-                <div class="leftMid orientationMarker">
+                <div className="leftMid orientationMarker">
                 </div>
             </div>
         );

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

@@ -196,64 +196,38 @@ export class LayoutManager {
      */
     rerenderViewportWithNewDisplaySet(viewportIndex, viewportData) {
         // Clone the data to prevent changing the original object
-        const data = _.clone(viewportData);
+        const updatedViewportData = _.clone(viewportData);
 
         OHIF.log.info(`LayoutManager rerenderViewportWithNewDisplaySet: ${viewportIndex}`);
 
-        // The parent container is identified because it is later removed from the DOM
-        const container = $('.viewportContainer').get(viewportIndex);
-
         // Record the current viewportIndex so this can be passed into the re-rendering call
-        data.viewportIndex = viewportIndex;
+        updatedViewportData.viewportIndex = viewportIndex;
 
         // If we have been provided with a plugin to use, use it.
         // Otherwise, use whichever plugin is currently in use in this viewport.
-        const plugin = data.plugin || this.viewportData[viewportIndex].plugin;
+        const plugin = updatedViewportData.plugin || this.viewportData[viewportIndex].plugin;
-        const pluginData = data.pluginData || this.viewportData[viewportIndex].pluginData;
+        const pluginData = updatedViewportData.pluginData || this.viewportData[viewportIndex].pluginData;
 
         // Update the dictionary of loaded displaySet for the specified viewport
         this.viewportData[viewportIndex] = {
             viewportIndex,
-            displaySetInstanceUid: data.displaySetInstanceUid,
+            displaySetInstanceUid: updatedViewportData.displaySetInstanceUid,
-            seriesInstanceUid: data.seriesInstanceUid,
+            seriesInstanceUid: updatedViewportData.seriesInstanceUid,
-            studyInstanceUid: data.studyInstanceUid,
+            studyInstanceUid: updatedViewportData.studyInstanceUid,
-            renderedCallback: data.renderedCallback,
+            renderedCallback: updatedViewportData.renderedCallback,
-            currentImageIdIndex: data.currentImageIdIndex || 0,
+            currentImageIdIndex: updatedViewportData.currentImageIdIndex || 0,
             plugin,
             pluginData,
+            ...this.layoutProps
         };
 
-        const newViewportContainer = document.createElement('div');
+        const component = viewerComponents.GridLayout;
+        const data = {
+            viewportData: this.viewportData,
+            ...this.layoutProps
+        };
 
-        // Render and insert the template
+        this.setContents(component, data)
-        if (plugin === PLUGIN_CORNERSTONE) {
-            // Remove the hover styling
-            const element = $(container).find('.imageViewerViewport');
-
-            element.find('canvas').not('.magnifyTool').removeClass('faded');
-
-            // Remove the whole template, add in the new one
-            const viewportContainer = element.parents('.removable');
-
-            newViewportContainer.className = 'removable';
-
-            // Remove the parent element of the template
-            // This is a workaround since otherwise Blaze UI onDestroyed doesn't fire
-            viewportContainer.remove();
-
-            container.appendChild(newViewportContainer);
-
-            Blaze.renderWithData(Template.imageViewerViewport, data, newViewportContainer);
-
-
-        } else {
-            newViewportContainer.className = `viewport-plugin-${plugin}`;
-            newViewportContainer.style.width = '100%';
-            newViewportContainer.style.height = '100%';
-
-            container.innerHTML = '';
-            container.appendChild(newViewportContainer);
-        }
 
         this.updateSession();
     }