Commands running on at least first viewport

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}
       </>

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: {

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',
     },
   },

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',
     },
   },