Hoist ViewportGrid context so UI Services can access/update it

extensions/default/src/getCommandsModule.js

@@ -0,0 +1,65 @@
+// SEE:
+// https://github.com/OHIF/Viewers/blob/b58aa4575ab72fe3f493cc5a4261b4f8256516ab/platform/viewer/src/appExtensions/MeasurementsPanel/index.js#L18-L49
+import React from 'react';
+import { useViewportGrid } from '@ohif/ui';
+
+
+function getCommandsModule ({ servicesManager }) {
+  const { UIDialogService } = servicesManager.services;
+
+  const definitions = {
+    toggleLayoutSelectionDialog: {
+      commandFn: () => {
+        if (!UIDialogService) {
+          window.alert('Unable to show dialog; no UI Dialog Service available.');
+          return;
+        }
+
+        // TODO: use SimpleDialog component
+        // TODO: update position on window resize
+        // TODO: Expand service API to check if dialog w/ ID is already open
+        // TODO: Import and call `useViewportGrid`
+        UIDialogService.dismiss({ id: 'layoutSelection' });
+        UIDialogService.create({
+          id: 'layoutSelection',
+          centralize: true,
+          isDraggable: false,
+          showOverlay: true,
+          content: Test,
+        });
+
+      },
+      storeContexts: [],
+      options: {},
+      context: 'VIEWER',
+    },
+  }
+
+  return {
+    definitions,
+    defaultContext: 'VIEWER',
+  };
+}
+
+function Test() {
+  const [
+    { numCols, numRows, activeViewportIndex, viewports },
+    dispatch,
+  ] = useViewportGrid();
+
+  return <div
+    onClick={() => {
+      dispatch({ type: '', payload: {
+        numCols: 3,
+        numRows: 3,
+        activeViewportIndex: 0,
+        viewports: [],
+      }})
+    }}
+    style={{ color: 'white' }}
+  >
+    Hello World!
+  </div>
+}
+
+export default getCommandsModule;

extensions/default/src/getToolbarModule.js

@@ -9,8 +9,8 @@ const definitions = [
     id: 'Layout',
     label: 'Layout',
     icon: 'tool-layout',
-    commandName: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'toggleLayoutSelectionDialog',
-    commandOptions: { toolName: 'Layout' }, // TODO
+    commandOptions: {  },
   },
 ];
 

extensions/default/src/index.js

@@ -1,3 +1,4 @@
+import getCommandsModule from './getCommandsModule.js';
 import getContextModule from './getContextModule.js';
 import getDataSourcesModule from './getDataSourcesModule.js';
 import getLayoutTemplateModule from './getLayoutTemplateModule.js';
@@ -11,6 +12,7 @@ export default {
    * Only required property. Should be a unique value across all extensions.
    */
   id,
+  getCommandsModule,
   getContextModule,
   getDataSourcesModule,
   getLayoutTemplateModule,

platform/viewer/src/App.jsx

@@ -48,10 +48,31 @@ function App({ config, defaultExtensions }) {
   );
   const { UIDialogService, UIModalService, UINotificationService } = servicesManager.services;
 
+  // A UI Service may need to use the ViewportGrid context
+  const viewportGridReducer = (state, action) => {
+    console.log(state, action);
+
+    switch (action.type) {
+      case 'DO_TODO':
+        return state;
+      default:
+        return action.payload;
+    }
+  };
+
   return (
     <appConfigContext.Provider value={appConfigContextApi}>
       <Router basename={routerBasename}>
         <ThemeWrapper>
+          <ViewportGridProvider
+            initialState={{
+              numRows: 1,
+              numCols: 1,
+              viewports: [],
+              activeViewportIndex: 0,
+            }}
+            reducer={viewportGridReducer}
+          >
             <SnackbarProvider service={UINotificationService}>
               <DialogProvider service={UIDialogService}>
                 <ModalProvider modal={Modal} service={UIModalService}>
@@ -59,6 +80,7 @@ function App({ config, defaultExtensions }) {
                 </ModalProvider>
               </DialogProvider>
             </SnackbarProvider>
+          </ViewportGridProvider>
         </ThemeWrapper>
       </Router>
     </appConfigContext.Provider>

platform/viewer/src/routes/Mode/Mode.jsx

@@ -6,7 +6,6 @@ import { DicomMetadataStore, ToolBarManager } from '@ohif/core';
 import {
   DragAndDropProvider,
   ImageViewerProvider,
-  ViewportGridProvider,
 } from '@ohif/ui';
 //
 import { useQuery } from '@hooks';
@@ -123,30 +122,10 @@ export default function ModeRoute({
     console.log(state, action);
   };
 
-  const viewportGridReducer = (state, action) => {
-    console.log(state, action);
-
-    switch (action.type) {
-      case 'DO_TODO':
-        return state;
-      default:
-        return action.payload;
-    }
-  };
-
   return (
     <ImageViewerProvider
       initialState={{ StudyInstanceUIDs: StudyInstanceUIDsAsArray }}
       reducer={reducer}
-    >
-      <ViewportGridProvider
-        initialState={{
-          numRows: 1,
-          numCols: 1,
-          viewports: [],
-          activeViewportIndex: 0,
-        }}
-        reducer={viewportGridReducer}
     >
       <CombinedContextProvider>
         {/* TODO: extensionManager is already provided to the extension module.
@@ -160,7 +139,6 @@ export default function ModeRoute({
           />
         </DragAndDropProvider>
       </CombinedContextProvider>
-      </ViewportGridProvider>
     </ImageViewerProvider>
   );
 }