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,17 +48,39 @@ 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>
-          <SnackbarProvider service={UINotificationService}>
+          <ViewportGridProvider
-            <DialogProvider service={UIDialogService}>
+            initialState={{
-              <ModalProvider modal={Modal} service={UIModalService}>
+              numRows: 1,
-                {appRoutes}
+              numCols: 1,
-              </ModalProvider>
+              viewports: [],
-            </DialogProvider>
+              activeViewportIndex: 0,
-          </SnackbarProvider>
+            }}
+            reducer={viewportGridReducer}
+          >
+            <SnackbarProvider service={UINotificationService}>
+              <DialogProvider service={UIDialogService}>
+                <ModalProvider modal={Modal} service={UIModalService}>
+                  {appRoutes}
+                </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,44 +122,23 @@ 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
+      <CombinedContextProvider>
-        initialState={{
+        {/* TODO: extensionManager is already provided to the extension module.
-          numRows: 1,
+          *  Use it from there instead of passing as a prop here.
-          numCols: 1,
+          */}
-          viewports: [],
+        <DragAndDropProvider>
-          activeViewportIndex: 0,
+          <LayoutComponent
-        }}
+            {...layoutTemplateData.props}
-        reducer={viewportGridReducer}
+            StudyInstanceUIDs={StudyInstanceUIDs}
-      >
+            ViewportGridComp={ViewportGridWithDataSource}
-        <CombinedContextProvider>
+          />
-          {/* TODO: extensionManager is already provided to the extension module.
+        </DragAndDropProvider>
-           *  Use it from there instead of passing as a prop here.
+      </CombinedContextProvider>
-           */}
-          <DragAndDropProvider>
-            <LayoutComponent
-              {...layoutTemplateData.props}
-              StudyInstanceUIDs={StudyInstanceUIDs}
-              ViewportGridComp={ViewportGridWithDataSource}
-            />
-          </DragAndDropProvider>
-        </CombinedContextProvider>
-      </ViewportGridProvider>
     </ImageViewerProvider>
   );
 }