diff --git a/src/CornerstoneViewport/CornerstoneViewport.js b/src/CornerstoneViewport/CornerstoneViewport.js index 8fe17ea..d9f3bb9 100644 --- a/src/CornerstoneViewport/CornerstoneViewport.js +++ b/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} /> ); } diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css index 35d4025..474062b 100644 --- a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css +++ b/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%; +} diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js index 5103e51..d45adc9 100644 --- a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js +++ b/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) => ( +
+ {markers[m]} +
+ )); + return (
-
{markers.top}
-
{markers.left}
+ {getMarkers(orientationMarkers)}
); }