From 9e2ed50e796576c4a9ac783b24f0d213fd74941f Mon Sep 17 00:00:00 2001
From: igoroctaviano <igoroctaviano@gmail.com>
Date: Mon, 29 Jun 2020 18:02:18 -0300
Subject: [PATCH 1/2] add new overlay

---
 .../src/getViewportModule.js                  | 15 +++-
 .../viewports/TrackedCornerstoneViewport.js   | 14 +++-
 .../src/viewports/ViewportOverlay.js          | 81 +++++++++++++++++++
 .../services/ToolBarService/ToolBarService.js |  9 +++
 platform/ui/tailwind.config.js                |  2 +
 5 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 extensions/measurement-tracking/src/viewports/ViewportOverlay.js

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 (
+      <OHIFCornerstoneViewport
+        ToolBarService={ToolBarService}
+        {...props}
+      />
+    );
+  };
+
+  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 38e0938dd..df728c814 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,8 @@ function TrackedCornerstoneViewport({
   dataSource,
   displaySet,
   viewportIndex,
+  servicesManager,
+  ToolBarService
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
   const [{ activeViewportIndex, viewports }] = useViewportGrid();
@@ -268,7 +272,15 @@ function TrackedCornerstoneViewport({
           isStackPrefetchEnabled={true} // todo
           isPlaying={false}
           frameRate={24}
-          isOverlayVisible={false}
+          isOverlayVisible={true}
+          viewportOverlayComponent={props => {
+            return (
+              <ViewportOverlay
+                {...props}
+                activeTools={ToolBarService.getActiveTools()}
+              />
+            );
+          }}
         />
         <div className="absolute w-full">
           {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 (
+    <div className="text-primary-light">
+      <div className={classnames(overlay, topLeft)}>
+        {isZoomActive && (
+          <div className="flex flex-row">
+            <span className="mr-1">Zoom:</span>
+            <span className="font-thin">{scale.toFixed(2)}x</span>
+          </div>
+        )}
+        {isWwwcActive && (
+          <div className="flex flex-row">
+            <span className="mr-1">W:</span>
+            <span className="font-thin ml-1 mr-2">{windowWidth.toFixed(0)}</span>
+            <span className="mr-1">L:</span>
+            <span className="font-thin ml-1">{windowCenter.toFixed(0)}</span>
+          </div>
+        )}
+      </div>
+      <div className={classnames(overlay, topRight)}>
+        {stackSize > 1 && (
+          <div className="flex flex-row">
+            <span className="mr-1">I:</span>
+            <span className="font-thin">
+              {`${instanceNumber}/${stackSize}`}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className={classnames(overlay, bottomRight)}>
+      </div>
+      <div className={classnames(overlay, bottomLeft)}>
+      </div>
+    </div>
+  );
+};
+
+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',

From 364f2db1dc5e9177b6ba33974be5f57d5723c412 Mon Sep 17 00:00:00 2001
From: igoroctaviano <igoroctaviano@gmail.com>
Date: Tue, 30 Jun 2020 09:29:52 -0300
Subject: [PATCH 2/2] Remove servicesmanager

---
 .../src/viewports/TrackedCornerstoneViewport.js                  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
index df728c814..f5579226a 100644
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
+++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js
@@ -40,7 +40,6 @@ function TrackedCornerstoneViewport({
   dataSource,
   displaySet,
   viewportIndex,
-  servicesManager,
   ToolBarService
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();