wip on react transition 6

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

@@ -38,29 +38,36 @@ function initializeTools(tools) {
   });
 }
 
-const scrollToIndex = cornerstoneTools.import('util/scrollToIndex');
-
-class CornerstoneViewport extends Component {
-  constructor(props) {
-    super(props);
-
-    const { displaySetInstanceUid, studyInstanceUid } = this.props.viewportData;
+function getCornerstoneStack(viewportData) {
+    const { displaySetInstanceUid, studyInstanceUid } = viewportData;
 
     // Create shortcut to displaySet
     const study = OHIF.viewer.Studies.findBy({ studyInstanceUid });
 
     const displaySet = study.displaySets.find(set => {
-      return set.displaySetInstanceUid === displaySetInstanceUid;
+        return set.displaySetInstanceUid === displaySetInstanceUid;
     });
 
     // Get stack from Stack Manager
     const stack = StackManager.findOrCreateStack(study, displaySet);
     stack.currentImageIdIndex = 0;
 
+    return stack
+}
+
+
+const scrollToIndex = cornerstoneTools.import('util/scrollToIndex');
+
+class CornerstoneViewport extends Component {
+  constructor(props) {
+    super(props);
+
+    const stack = getCornerstoneStack(this.props.viewportData)
+
     // TODO: Allow viewport as a prop
     this.state = {
       stack,
-      displaySetInstanceUid,
+      displaySetInstanceUid: this.props.viewportData.displaySetInstanceUid,
       imageId: stack.imageIds[0],
       viewportHeight: '100%',
       isLoading: false,//true,
@@ -138,7 +145,10 @@ class CornerstoneViewport extends Component {
             imageId={this.state.imageId}
             numImagesLoaded={this.state.numImagesLoaded}
           />
-          <ViewportOrientationMarkers/>
+          <ViewportOrientationMarkers
+              imageId={this.state.imageId}
+              viewport={this.state.viewport}
+          />
         </div>
         <div className='viewportInstructions'>
             Please drag a stack here to view images.
@@ -425,13 +435,12 @@ class CornerstoneViewport extends Component {
 
       // 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: currentImageIdIndex,
+          currentImageIdIndex,
           imageIds: stack.imageIds
         };
 
@@ -443,7 +452,7 @@ class CornerstoneViewport extends Component {
         currentStack.imageIds = stack.imageIds;
       }
 
-      const imageId = currentStack.imageIds[currentStack.currentImageIdIndex];
+      const imageId = currentStack.imageIds[currentImageIdIndex];
 
       this.setState({
           displaySetInstanceUid,
@@ -452,6 +461,7 @@ class CornerstoneViewport extends Component {
           imageId
       });
 
+      cornerstoneTools.stackPrefetch.disable(this.element);
       cornerstone.loadAndCacheImage(imageId).then(image => {
         try {
           cornerstone.getEnabledElement(this.element);
@@ -461,7 +471,6 @@ class CornerstoneViewport extends Component {
           return;
         }
 
-
         const viewport = cornerstone.getDefaultViewportForImage(this.element, image);
 
         // Workaround for Cornerstone issue #304
@@ -472,7 +481,6 @@ class CornerstoneViewport extends Component {
 
         cornerstone.displayImage(this.element, image, viewport);
 
-        cornerstoneTools.stackPrefetch.disable(this.element);
         cornerstoneTools.stackPrefetch.enable(this.element);
       });
     }

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

@@ -1,19 +1,83 @@
 import { Component } from 'react';
 import React from 'react';
-//import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import './ViewportOrientationMarkers.styl';
 
+/**
+ * Computes the orientation labels on a Cornerstone-enabled Viewport element
+ * when the viewport settings change (e.g. when a horizontal flip or a rotation occurs)
+ *
+ * @param imageId The Cornerstone ImageId
+ * @param viewport The current viewport
+ */
+export function getOrientationMarkers(imageId, viewport) {
+    const imagePlane = cornerstone.metaData.get('imagePlane', imageId);
+    if (!imagePlane || !imagePlane.rowCosines || !imagePlane.columnCosines) {
+        return;
+    }
+
+    const rowString = cornerstoneTools.orientation.getOrientationString(imagePlane.rowCosines);
+    const columnString = cornerstoneTools.orientation.getOrientationString(imagePlane.columnCosines);
+    const oppositeRowString = cornerstoneTools.orientation.invertOrientationString(rowString);
+    const oppositeColumnString = cornerstoneTools.orientation.invertOrientationString(columnString);
+
+    const markers = {
+        top: oppositeColumnString,
+        left: oppositeRowString
+    };
+
+    // If any vertical or horizontal flips are applied, change the orientation strings ahead of
+    // the rotation applications
+    if (viewport.vflip) {
+        markers.top = cornerstoneTools.orientation.invertOrientationString(markers.top);
+    }
+
+    if (viewport.hflip) {
+        markers.left = cornerstoneTools.orientation.invertOrientationString(markers.left);
+    }
+
+    // Swap the labels accordingly if the viewport has been rotated
+    // This could be done in a more complex way for intermediate rotation values (e.g. 45 degrees)
+    if (viewport.rotation === 90 || viewport.rotation === -270) {
+        return {
+            top: markers.left,
+            left: cornerstoneTools.orientation.invertOrientationString(markers.top)
+        };
+    } else if (viewport.rotation === -90 || viewport.rotation === 270) {
+        return {
+            top: cornerstoneTools.orientation.invertOrientationString(markers.left),
+            left: markers.top
+        };
+    } else if (viewport.rotation === 180 || viewport.rotation === -180) {
+        return {
+            top: cornerstoneTools.orientation.invertOrientationString(markers.top),
+            left: cornerstoneTools.orientation.invertOrientationString(markers.left)
+        };
+    }
+
+    return markers;
+}
+
 class ViewportOrientationMarkers extends Component {
     render() {
+        const { imageId, viewport } = this.props;
+        const markers = getOrientationMarkers(imageId, viewport);
         return (
-            <div className="viewportOrientationMarkers noselect">
-                <div className="topMid orientationMarker">
+            <div className="ViewportOrientationMarkers noselect">
+                <div className="top-mid orientation-marker">
+                    {markers.top}
                 </div>
-                <div className="leftMid orientationMarker">
+                <div className="left-mid orientation-marker">
+                    {markers.left}
                 </div>
             </div>
         );
     }
 };
 
+ViewportOrientationMarkers.propTypes = {
+    imageId: PropTypes.string.isRequired,
+    viewport: PropTypes.object.isRequired
+};
+
 export default ViewportOrientationMarkers;

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

@@ -1,18 +1,17 @@
-.viewportOrientationMarkers
+.ViewportOrientationMarkers
   pointer-events: none // Necessary for click-through to cornerstone element below
-  
+
   font-size: 15px
   color: rgb(204, 204, 204)
   line-height: 18px
 
-  .orientationMarker
+  .orientation-marker
     position: absolute
 
-  .topMid
+  .top-mid
     top: 5px
     left: 50%
-    
-  .leftMid
+
+  .left-mid
     top: 47%
     left: 5px
-