fix: Creating 2 commands to activate zoom tool and also to move between displaySets (#1446)

platform/viewer/public/config/default.js

@@ -58,12 +58,12 @@ window.config = {
     // firstImage
     // lastImage
     {
-      commandName: 'nextViewportDisplaySet',
+      commandName: 'previousViewportDisplaySet',
       label: 'Previous Series',
       keys: ['pagedown'],
     },
     {
-      commandName: 'previousViewportDisplaySet',
+      commandName: 'nextViewportDisplaySet',
       label: 'Next Series',
       keys: ['pageup'],
     },

platform/viewer/public/config/demo.js

@@ -48,12 +48,12 @@ window.config = {
     { commandName: 'nextImage', label: 'Next Image', keys: ['down'] },
     { commandName: 'previousImage', label: 'Previous Image', keys: ['up'] },
     {
-      commandName: 'nextViewportDisplaySet',
+      commandName: 'previousViewportDisplaySet',
       label: 'Previous Series',
       keys: ['pagedown'],
     },
     {
-      commandName: 'previousViewportDisplaySet',
+      commandName: 'nextViewportDisplaySet',
       label: 'Next Series',
       keys: ['pageup'],
     },

platform/viewer/public/config/netlify.js

@@ -53,12 +53,12 @@ window.config = {
     // firstImage
     // lastImage
     {
-      commandName: 'nextViewportDisplaySet',
+      commandName: 'previousViewportDisplaySet',
       label: 'Previous Series',
       keys: ['pagedown'],
     },
     {
-      commandName: 'previousViewportDisplaySet',
+      commandName: 'nextViewportDisplaySet',
       label: 'Next Series',
       keys: ['pageup'],
     },

platform/viewer/src/appExtensions/GenericViewerCommands/commandsModule.js

@@ -1,12 +1,8 @@
-import { redux } from "@ohif/core";
-import store from "./../../store";
-const { setViewportActive } = redux.actions;
+import { redux, utils } from '@ohif/core';
+import store from './../../store';
+const { setViewportActive, setActiveViewportSpecificData } = redux.actions;
 
 const actions = {
-  updateViewportDisplaySet: ({ direction }) => {
-    // TODO
-    // console.warn('updateDisplaySet: ', direction);
-  },
   updateActiveViewport: ({ viewports, direction }) => {
     const { viewportSpecificData, activeViewportIndex } = viewports;
     const maxIndex = Object.keys(viewportSpecificData).length - 1;
@@ -16,24 +12,63 @@ const actions = {
     newIndex = newIndex < 0 ? maxIndex : newIndex;
 
     store.dispatch(setViewportActive(newIndex));
-  }
+  },
+  updateViewportDisplaySet: ({ viewports, direction }) => {
+    const viewportSpecificData = { ...viewports.viewportSpecificData };
+    const activeViewport = viewportSpecificData[viewports.activeViewportIndex];
+    const studyMetadata = utils.studyMetadataManager.get(
+      activeViewport.studyInstanceUid
+    );
+
+    if (!studyMetadata) {
+      return;
+    }
+
+    const allDisplaySets = studyMetadata.getDisplaySets();
+    const currentDisplaySetIndex = allDisplaySets.findIndex(
+      displaySet =>
+        displaySet.displaySetInstanceUid ===
+        activeViewport.displaySetInstanceUid
+    );
+    if (currentDisplaySetIndex < 0) {
+      return;
+    }
+
+    const newDisplaySetIndex = currentDisplaySetIndex + direction;
+    const newDisplaySetData = allDisplaySets[newDisplaySetIndex];
+    if (!newDisplaySetData) {
+      return;
+    }
+
+    store.dispatch(setActiveViewportSpecificData(newDisplaySetData));
+  },
 };
 
 const definitions = {
   // Next/Previous active viewport
   incrementActiveViewport: {
     commandFn: actions.updateActiveViewport,
-    storeContexts: ["viewports"],
-    options: { direction: 1 }
+    storeContexts: ['viewports'],
+    options: { direction: 1 },
   },
   decrementActiveViewport: {
     commandFn: actions.updateActiveViewport,
-    storeContexts: ["viewports"],
-    options: { direction: -1 }
-  }
+    storeContexts: ['viewports'],
+    options: { direction: -1 },
+  },
+  nextViewportDisplaySet: {
+    commandFn: actions.updateViewportDisplaySet,
+    storeContexts: ['viewports'],
+    options: { direction: 1 },
+  },
+  previousViewportDisplaySet: {
+    commandFn: actions.updateViewportDisplaySet,
+    storeContexts: ['viewports'],
+    options: { direction: -1 },
+  },
 };
 
 export default {
   definitions,
-  defaultContext: "VIEWER"
+  defaultContext: 'VIEWER',
 };