ohif-viewer/extensions/default/src/getCommandsModule.js

// 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: 2,
        numRows: 2,
        activeViewportIndex: 0,
        viewports: [],
      }})
    }}
    style={{ color: 'white' }}
  >
    Hello World!
  </div>
}

export default getCommandsModule;