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

platform/ui/src/components/LayoutSelector/LayoutSelector.jsx

@@ -0,0 +1,80 @@
+// // 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;
+
+import React from 'react';
+
+function LayoutSelector() {
+  return (
+    <>
+      <div>LAYOUT SELECTOR PLACEHOLDER!</div>
+    </>
+  );
+}
+
+export default LayoutSelector;

platform/ui/src/components/LayoutSelector/index.js

@@ -0,0 +1,2 @@
+import LayoutSelector from './LayoutSelector';
+export default LayoutSelector;