Add support for SET_LAYOUT action on viewportGrid reducer

extensions/default/src/getCommandsModule.js

@@ -3,7 +3,6 @@
 import React from 'react';
 import { useViewportGrid } from '@ohif/ui';
 
-
 function getCommandsModule({ servicesManager }) {
   const { UIDialogService } = servicesManager.services;
 
@@ -11,7 +10,9 @@ function getCommandsModule ({ servicesManager }) {
     toggleLayoutSelectionDialog: {
       commandFn: () => {
         if (!UIDialogService) {
-          window.alert('Unable to show dialog; no UI Dialog Service available.');
+          window.alert(
+            'Unable to show dialog; no UI Dialog Service available.'
+          );
           return;
         }
 
@@ -27,13 +28,12 @@ function getCommandsModule ({ servicesManager }) {
           showOverlay: true,
           content: Test,
         });
-
       },
       storeContexts: [],
       options: {},
       context: 'VIEWER',
     },
-  }
+  };
 
   return {
     definitions,
@@ -47,19 +47,22 @@ function Test() {
     dispatch,
   ] = useViewportGrid();
 
-  return <div
+  return (
+    <div
       onClick={() => {
-      dispatch({ type: '', payload: {
+        dispatch({
+          type: 'SET_LAYOUT',
+          payload: {
             numCols: 2,
             numRows: 2,
-        activeViewportIndex: 0,
+          },
-        viewports: [],
+        });
-      }})
       }}
       style={{ color: 'white' }}
     >
       Hello World!
     </div>
+  );
 }
 
 export default getCommandsModule;

extensions/measurement-tracking/src/getCommandsModule.js

@@ -10,7 +10,9 @@ function getCommandsModule({ servicesManager }) {
     toggleLayoutSelectionDialog: {
       commandFn: () => {
         if (!UIDialogService) {
-          window.alert('Unable to show dialog; no UI Dialog Service available.');
+          window.alert(
+            'Unable to show dialog; no UI Dialog Service available.'
+          );
           return;
         }
 
@@ -26,13 +28,12 @@ function getCommandsModule({ servicesManager }) {
           showOverlay: true,
           content: Test,
         });
-
       },
       storeContexts: [],
       options: {},
       context: 'VIEWER',
     },
-  }
+  };
 
   return {
     definitions,
@@ -46,19 +47,22 @@ function Test() {
     dispatch,
   ] = useViewportGrid();
 
-  return <div
+  return (
+    <div
       onClick={() => {
-      dispatch({ type: '', payload: {
+        dispatch({
+          type: 'SET_LAYOUT',
+          payload: {
             numCols: 2,
             numRows: 2,
-        activeViewportIndex: 0,
+          },
-        viewports: [],
+        });
-      }})
       }}
       style={{ color: 'white' }}
     >
       Hello World!
     </div>
+  );
 }
 
 export default getCommandsModule;

platform/viewer/src/App.jsx

@@ -64,13 +64,33 @@ function App({ config, defaultExtensions }) {
     switch (action.type) {
       case 'SET_ACTIVE_VIEWPORT_INDEX':
         return { ...state, ...{ activeViewportIndex: action.payload } };
-      case 'SET_DISPLAYSET_FOR_VIEWPORT':
+      case 'SET_DISPLAYSET_FOR_VIEWPORT': {
         const { viewportIndex, displaySetInstanceUID } = action.payload;
         const viewports = state.viewports.slice();
 
         viewports[viewportIndex] = { displaySetInstanceUID };
 
         return { ...state, ...{ viewports } };
+      }
+      case 'SET_LAYOUT': {
+        const { numCols, numRows } = action.payload;
+        const numPanes = numCols * numRows;
+        const viewports = state.viewports.slice();
+        const activeViewportIndex =
+          state.activeViewportIndex >= numPanes ? 0 : state.activeViewportIndex;
+
+        while (viewports.length < numPanes) {
+          viewports.push({});
+        }
+        while (viewports.length > numPanes) {
+          viewports.pop();
+        }
+
+        return {
+          ...state,
+          ...{ activeViewportIndex, numCols, numRows, viewports },
+        };
+      }
       default:
         return action.payload;
     }