feat: Add bottom/right orientation markers (#120)

Author: igoroctaviano

src/CornerstoneViewport/CornerstoneViewport.js

@@ -81,6 +81,7 @@ class CornerstoneViewport extends Component {
     style: PropTypes.object,
     className: PropTypes.string,
     isOverlayVisible: PropTypes.bool,
+    orientationMarkers: PropTypes.arrayOf(PropTypes.string),
   };
 
   static defaultProps = {
@@ -101,6 +102,7 @@ class CornerstoneViewport extends Component {
     resizeRefreshMode: 'debounce',
     tools: [],
     onNewImageDebounceTime: 0,
+    orientationMarkers: ['top', 'left'],
   };
 
   constructor(props) {
@@ -375,7 +377,7 @@ class CornerstoneViewport extends Component {
    * @memberof CornerstoneViewport
    */
   getOrientationMarkersOverlay() {
-    const { imageIds } = this.props;
+    const { imageIds, orientationMarkers } = this.props;
     const {
       imageIdIndex,
       rotationDegrees,
@@ -403,6 +405,7 @@ class CornerstoneViewport extends Component {
         rotationDegrees={rotationDegrees}
         isFlippedVertically={isFlippedVertically}
         isFlippedHorizontally={isFlippedHorizontally}
+        orientationMarkers={orientationMarkers}
       />
     );
   }

src/ViewportOrientationMarkers/ViewportOrientationMarkers.css

@@ -15,3 +15,13 @@
   top: 47%;
   left: 5px;
 }
+
+.ViewportOrientationMarkers .right-mid {
+  top: 47%;
+  left: 97%;
+}
+
+.ViewportOrientationMarkers .bottom-mid {
+  top: 97%;
+  left: 47%;
+}

src/ViewportOrientationMarkers/ViewportOrientationMarkers.js

@@ -35,16 +35,20 @@ function getOrientationMarkers(
   const markers = {
     top: oppositeColumnString,
     left: oppositeRowString,
+    right: rowString,
+    bottom: columnString,
   };
 
   // If any vertical or horizontal flips are applied, change the orientation strings ahead of
   // the rotation applications
   if (isFlippedVertically) {
     markers.top = invertOrientationString(markers.top);
+    markers.bottom = invertOrientationString(markers.bottom);
   }
 
   if (isFlippedHorizontally) {
     markers.left = invertOrientationString(markers.left);
+    markers.right = invertOrientationString(markers.right);
   }
 
   // Swap the labels accordingly if the viewport has been rotated
@@ -53,16 +57,22 @@ function getOrientationMarkers(
     return {
       top: markers.left,
       left: invertOrientationString(markers.top),
+      right: invertOrientationString(markers.bottom),
+      bottom: markers.right, // left
     };
   } else if (rotationDegrees === -90 || rotationDegrees === 270) {
     return {
       top: invertOrientationString(markers.left),
       left: markers.top,
+      bottom: markers.left,
+      right: markers.bottom,
     };
   } else if (rotationDegrees === 180 || rotationDegrees === -180) {
     return {
       top: invertOrientationString(markers.top),
       left: invertOrientationString(markers.left),
+      bottom: invertOrientationString(markers.bottom),
+      right: invertOrientationString(markers.right),
     };
   }
 
@@ -76,6 +86,11 @@ class ViewportOrientationMarkers extends PureComponent {
     rotationDegrees: PropTypes.number.isRequired,
     isFlippedVertically: PropTypes.bool.isRequired,
     isFlippedHorizontally: PropTypes.bool.isRequired,
+    orientationMarkers: PropTypes.arrayOf(PropTypes.string),
+  };
+
+  static defaultProps = {
+    orientationMarkers: ['top', 'left'],
   };
 
   render() {
@@ -85,6 +100,7 @@ class ViewportOrientationMarkers extends PureComponent {
       rotationDegrees,
       isFlippedVertically,
       isFlippedHorizontally,
+      orientationMarkers,
     } = this.props;
 
     if (!rowCosines || !columnCosines) {
@@ -99,10 +115,19 @@ class ViewportOrientationMarkers extends PureComponent {
       isFlippedHorizontally
     );
 
+    const getMarkers = orientationMarkers =>
+      orientationMarkers.map((m, index) => (
+        <div
+          className={`${m}-mid orientation-marker`}
+          key={`${m}-mid orientation-marker`}
+        >
+          {markers[m]}
+        </div>
+      ));
+
     return (
       <div className="ViewportOrientationMarkers noselect">
-        <div className="top-mid orientation-marker">{markers.top}</div>
-        <div className="left-mid orientation-marker">{markers.left}</div>
+        {getMarkers(orientationMarkers)}
       </div>
     );
   }