From 4ec357bec4cf3ca9789ca12528028ac5b138e11e Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Wed, 17 Jun 2020 08:50:11 -0400
Subject: [PATCH] Commands running on at least first viewport

---
 .../src/OHIFCornerstoneViewport.js            |  9 +++++++
 extensions/cornerstone/src/commandsModule.js  | 25 +++++++++++--------
 modes/example/src/toolbarButtons.js           |  8 +++---
 modes/longitudinal/src/toolbarButtons.js      |  8 +++---
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/extensions/cornerstone/src/OHIFCornerstoneViewport.js b/extensions/cornerstone/src/OHIFCornerstoneViewport.js
index cade68ce1..e4e1a9485 100644
--- a/extensions/cornerstone/src/OHIFCornerstoneViewport.js
+++ b/extensions/cornerstone/src/OHIFCornerstoneViewport.js
@@ -7,6 +7,7 @@ import cornerstone from 'cornerstone-core';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 
+import { setEnabledElement } from './state';
 
 // const {
 //   onAdded,
@@ -220,6 +221,14 @@ class OHIFCornerstoneViewport extends Component {
           isStackPrefetchEnabled={true} // todo
           isPlaying={false}
           frameRate={24}
+          // TODO: How do we share/track this?
+          // For example, Tracked Extension also wraps this component
+          // Could use window? Doesn't have to be reactive
+          // Need to expose viewportGrid as a "UI Service"
+          onElementEnabled={evt => {
+            const enabledElement = evt.detail.element;
+            setEnabledElement(viewportIndex, enabledElement);
+          }}
         />
         {childrenWithProps}
       </>
diff --git a/extensions/cornerstone/src/commandsModule.js b/extensions/cornerstone/src/commandsModule.js
index 891e90f8f..a1d799b86 100644
--- a/extensions/cornerstone/src/commandsModule.js
+++ b/extensions/cornerstone/src/commandsModule.js
@@ -24,8 +24,9 @@ const commandsModule = ({ servicesManager }) => {
         cornerstone.setViewport(enabledElement, viewport);
       }
     },
-    flipViewportHorizontal: ({ viewports }) => {
-      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+    flipViewportHorizontal: () => {
+      const activeViewportIndex = 0;
+      const enabledElement = getEnabledElement(activeViewportIndex);
 
       if (enabledElement) {
         let viewport = cornerstone.getViewport(enabledElement);
@@ -56,15 +57,17 @@ const commandsModule = ({ servicesManager }) => {
         }
       }
     },
-    resetViewport: ({ viewports }) => {
-      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+    resetViewport: () => {
+      const activeViewportIndex = 0;
+      const enabledElement = getEnabledElement(activeViewportIndex);
 
       if (enabledElement) {
         cornerstone.reset(enabledElement);
       }
     },
-    invertViewport: ({ viewports }) => {
-      const enabledElement = getEnabledElement(viewports.activeViewportIndex);
+    invertViewport: () => {
+      const activeViewportIndex = 0;
+      const enabledElement = getEnabledElement(activeViewportIndex);
 
       if (enabledElement) {
         let viewport = cornerstone.getViewport(enabledElement);
@@ -149,7 +152,7 @@ const commandsModule = ({ servicesManager }) => {
       return enabledElement;
     },
     showDownloadViewportModal: () => {
-      const activeViewportIndex = 1; // viewports.activeViewportIndex;
+      const activeViewportIndex = 0; // viewports.activeViewportIndex;
       const { UIModalService } = servicesManager.services;
       if (UIModalService) {
         UIModalService.show({
@@ -328,7 +331,7 @@ const commandsModule = ({ servicesManager }) => {
     },
     rotateViewportCW: {
       commandFn: actions.rotateViewport,
-      storeContexts: ['viewports'],
+      storeContexts: [],
       options: { rotation: 90 },
     },
     rotateViewportCCW: {
@@ -338,7 +341,7 @@ const commandsModule = ({ servicesManager }) => {
     },
     invertViewport: {
       commandFn: actions.invertViewport,
-      storeContexts: ['viewports'],
+      storeContexts: [],
       options: {},
     },
     flipViewportVertical: {
@@ -348,7 +351,7 @@ const commandsModule = ({ servicesManager }) => {
     },
     flipViewportHorizontal: {
       commandFn: actions.flipViewportHorizontal,
-      storeContexts: ['viewports'],
+      storeContexts: [],
       options: {},
     },
     scaleUpViewport: {
@@ -368,7 +371,7 @@ const commandsModule = ({ servicesManager }) => {
     },
     resetViewport: {
       commandFn: actions.resetViewport,
-      storeContexts: ['viewports'],
+      storeContexts: [],
       options: {},
     },
     clearAnnotations: {
diff --git a/modes/example/src/toolbarButtons.js b/modes/example/src/toolbarButtons.js
index 4d1db386c..3f4db8160 100644
--- a/modes/example/src/toolbarButtons.js
+++ b/modes/example/src/toolbarButtons.js
@@ -74,7 +74,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Reset View',
-      commandName: '',
+      commandName: 'resetViewport',
       type: 'primary',
     },
   },
@@ -84,7 +84,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Rotate Right',
-      commandName: '',
+      commandName: 'rotateViewportCW',
       type: 'primary',
     },
   },
@@ -94,7 +94,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Flip Horizontally',
-      commandName: '',
+      commandName: 'flipViewportHorizontal',
       type: 'primary',
     },
   },
@@ -134,7 +134,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Invert',
-      commandName: '',
+      commandName: 'invertViewport',
       type: 'primary',
     },
   },
diff --git a/modes/longitudinal/src/toolbarButtons.js b/modes/longitudinal/src/toolbarButtons.js
index 4d1db386c..3f4db8160 100644
--- a/modes/longitudinal/src/toolbarButtons.js
+++ b/modes/longitudinal/src/toolbarButtons.js
@@ -74,7 +74,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Reset View',
-      commandName: '',
+      commandName: 'resetViewport',
       type: 'primary',
     },
   },
@@ -84,7 +84,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Rotate Right',
-      commandName: '',
+      commandName: 'rotateViewportCW',
       type: 'primary',
     },
   },
@@ -94,7 +94,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Flip Horizontally',
-      commandName: '',
+      commandName: 'flipViewportHorizontal',
       type: 'primary',
     },
   },
@@ -134,7 +134,7 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Invert',
-      commandName: '',
+      commandName: 'invertViewport',
       type: 'primary',
     },
   },