diff --git a/extensions/measurement-tracking/src/getViewportModule.js b/extensions/measurement-tracking/src/getViewportModule.js
index b494f418b..65203872e 100644
--- a/extensions/measurement-tracking/src/getViewportModule.js
+++ b/extensions/measurement-tracking/src/getViewportModule.js
@@ -12,8 +12,19 @@ const OHIFCornerstoneViewport = props => {
);
};
-function getViewportModule({ commandsManager }) {
- return [{ name: 'cornerstone-tracked', component: OHIFCornerstoneViewport }];
+function getViewportModule({ servicesManager }) {
+ const ExtendedOHIFCornerstoneSRViewport = props => {
+ const { ToolBarService } = servicesManager.services;
+
+ return (
+
+ );
+ };
+
+ return [{ name: 'cornerstone-tracked', component: ExtendedOHIFCornerstoneSRViewport }];
}
export default getViewportModule;
diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
index 3665fd819..45dcf23ac 100644
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
+++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
@@ -12,6 +12,8 @@ import {
} from '@ohif/ui';
import { useTrackedMeasurements } from './../getContextModule';
+import ViewportOverlay from './ViewportOverlay';
+
const { formatDate } = utils;
// TODO -> Get this list from the list of tracked measurements.
@@ -38,6 +40,7 @@ function TrackedCornerstoneViewport({
dataSource,
displaySet,
viewportIndex,
+ ToolBarService
}) {
const [trackedMeasurements] = useTrackedMeasurements();
const [{ activeViewportIndex, viewports }] = useViewportGrid();
@@ -280,7 +283,15 @@ function TrackedCornerstoneViewport({
isStackPrefetchEnabled={true} // todo
isPlaying={false}
frameRate={24}
- isOverlayVisible={false}
+ isOverlayVisible={true}
+ viewportOverlayComponent={props => {
+ return (
+
+ );
+ }}
/>
{viewportDialogState.viewportIndex === viewportIndex && (
diff --git a/extensions/measurement-tracking/src/viewports/ViewportOverlay.js b/extensions/measurement-tracking/src/viewports/ViewportOverlay.js
new file mode 100644
index 000000000..b042743cf
--- /dev/null
+++ b/extensions/measurement-tracking/src/viewports/ViewportOverlay.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cornerstone from 'cornerstone-core';
+import classnames from 'classnames';
+
+const ViewportOverlay = ({
+ imageId,
+ scale,
+ windowWidth,
+ windowCenter,
+ imageIndex,
+ stackSize,
+ activeTools
+}) => {
+ const topLeft = 'top-viewport left-viewport';
+ const topRight = 'top-viewport right-viewport-scrollbar';
+ const bottomRight = 'bottom-viewport right-viewport-scrollbar';
+ const bottomLeft = 'bottom-viewport left-viewport';
+ const overlay = 'absolute pointer-events-none';
+
+ const isZoomActive = activeTools.includes('Zoom');
+ const isWwwcActive = activeTools.includes('Wwwc');
+
+ if (!imageId) {
+ return null;
+ }
+
+ const generalImageModule = cornerstone.metaData.get('generalImageModule', imageId) || {};
+ const { instanceNumber } = generalImageModule;
+
+ return (
+
+
+ {isZoomActive && (
+
+ Zoom:
+ {scale.toFixed(2)}x
+
+ )}
+ {isWwwcActive && (
+
+ W:
+ {windowWidth.toFixed(0)}
+ L:
+ {windowCenter.toFixed(0)}
+
+ )}
+
+
+ {stackSize > 1 && (
+
+ I:
+
+ {`${instanceNumber}/${stackSize}`}
+
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+ViewportOverlay.propTypes = {
+ scale: PropTypes.number.isRequired,
+ windowWidth: PropTypes.number.isRequired,
+ windowCenter: PropTypes.number.isRequired,
+ imageId: PropTypes.string.isRequired,
+ imageIndex: PropTypes.number.isRequired,
+ stackSize: PropTypes.number.isRequired,
+ activeTools: PropTypes.arrayOf(PropTypes.string)
+};
+
+ViewportOverlay.defaultProps = {
+ activeTools: []
+};
+
+export default ViewportOverlay;
diff --git a/platform/core/src/services/ToolBarService/ToolBarService.js b/platform/core/src/services/ToolBarService/ToolBarService.js
index 2cabbe54d..a9f7d34b4 100644
--- a/platform/core/src/services/ToolBarService/ToolBarService.js
+++ b/platform/core/src/services/ToolBarService/ToolBarService.js
@@ -27,6 +27,15 @@ export default class ToolBarService {
return this.buttons;
}
+ getActiveTools() {
+ return Object.keys(this.buttons).filter(key => {
+ const button = this.buttons[key];
+ if (button && button.props && button.props.isActive) {
+ return button;
+ }
+ });
+ }
+
setButtons(buttons) {
this.buttons = buttons;
this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index 3e32e4955..b01fd7e1a 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -328,6 +328,8 @@ module.exports = {
'0': '0',
auto: 'auto',
full: '100%',
+ viewport: '0.5rem',
+ 'viewport-scrollbar': '1.3rem'
},
letterSpacing: {
tighter: '-0.05em',