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,
-    commandOptions: { toolName: 'Layout' }, // TODO
+    commandName: 'toggleLayoutSelectionDialog',
+    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,