Create new ToolbarButton type for Layout Selector; wire up custom UI; prep for viewportGridService usage

extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
+
+function LayoutSelector() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    function LayoutSelector() {
+      if (isOpen) {
+        setIsOpen(false);
+      }
+    }
+    window.addEventListener('click', LayoutSelector);
+    return () => {
+      window.removeEventListener('click', LayoutSelector);
+    };
+  }, [isOpen]);
+
+  const dropdownContent = isOpen ? OHIFLayoutSelector : undefined;
+
+  return (
+    <ToolbarButton
+      id="Layout"
+      label="Grid Layout"
+      icon="tool-layout"
+      onClick={() => {
+        setIsOpen(!isOpen);
+      }}
+      dropdownContent={dropdownContent}
+      isActive={isOpen}
+      type="primary"
+    />
+  );
+}
+
+LayoutSelector.propTypes = {
+  children: PropTypes.any.isRequired,
+};
+
+export default LayoutSelector;

extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.jsx

@@ -2,18 +2,18 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ToolbarButton } from '@ohif/ui';
 
-function NestedToolbar({ children }) {
+function NestedMenu({ children }) {
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
-    function closeNestedToolbar() {
+    function closeNestedMenu() {
       if (isOpen) {
         setIsOpen(false);
       }
     }
-    window.addEventListener('click', closeNestedToolbar);
+    window.addEventListener('click', closeNestedMenu);
     return () => {
-      window.removeEventListener('click', closeNestedToolbar);
+      window.removeEventListener('click', closeNestedMenu);
     };
   }, [isOpen]);
 
@@ -34,8 +34,8 @@ function NestedToolbar({ children }) {
   );
 }
 
-NestedToolbar.propTypes = {
+NestedMenu.propTypes = {
   children: PropTypes.any.isRequired,
 };
 
-export default NestedToolbar;
+export default NestedMenu;

extensions/default/src/ViewerLayout/index.jsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { SidePanel } from '@ohif/ui';
 import Header from './Header.jsx';
-import NestedToolbar from './NestedToolbar.jsx';
+import NestedMenu from './ToolbarButtonNestedMenu.jsx';
 
 function ViewerLayout({
   // From Extension Module Params
@@ -90,14 +90,14 @@ function ViewerLayout({
               return <Component key={id} id={id} {...componentProps} />;
             } else {
               return (
-                <NestedToolbar>
+                <NestedMenu>
                   <div className="flex">
                     {toolDef.map(x => {
                       const { id, Component, componentProps } = x;
                       return <Component key={id} id={id} {...componentProps} />;
                     })}
                   </div>
-                </NestedToolbar>
+                </NestedMenu>
               );
             }
           })}

extensions/default/src/getCommandsModule.js

@@ -1,68 +0,0 @@
-// 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: 'SET_LAYOUT',
-          payload: {
-            numCols: 2,
-            numRows: 2,
-          },
-        });
-      }}
-      style={{ color: 'white' }}
-    >
-      Hello World!
-    </div>
-  );
-}
-
-export default getCommandsModule;

extensions/default/src/getToolbarModule.js

@@ -1,5 +1,6 @@
 import { ToolbarButton } from '@ohif/ui';
 import ToolbarDivider from './Toolbar/ToolbarDivider.jsx';
+import ToolbarLayoutSelector from './Toolbar/ToolbarLayoutSelector.jsx';
 
 export default function getToolbarModule({ commandsManager, servicesManager }) {
   const toolbarService = servicesManager.services.ToolBarService;
@@ -59,6 +60,15 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
         toolbarService.setButtons(allButtons);
       },
     },
+    {
+      name: 'ohif.layoutSelector',
+      defaultComponent: ToolbarLayoutSelector,
+      requiredConfig: [],
+      optionalConfig: [],
+      requiredProps: [],
+      optionalProps: [],
+      clickHandler: (evt, clickedBtn, btnSectionName) => {},
+    },
     {
       name: 'ohif.toggle',
       defaultComponent: ToolbarButton,
@@ -76,7 +86,9 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
 
         // Run button logic/command
         // MAKE SURE THIS SUPPORTS TOGGLE!
-        commandsManager.runCommand(props.commandName, props.commandOptions);
+        // commandsManager.runCommand(props.commandName, props.commandOptions);
+        // What if just toggled "content"?
+        // commandName OR content?
 
         // Set buttons & trigger notification
         toolbarService.setButtons(allButtons);

extensions/default/src/index.js

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