Add support for LayoutSelector

extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx

@@ -1,9 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
+import {
+  LayoutSelector as OHIFLayoutSelector,
+  ToolbarButton,
+  useViewportGrid,
+} from '@ohif/ui';
 
-function LayoutSelector() {
+function LayoutSelector({ onSelection }) {
   const [isOpen, setIsOpen] = useState(false);
+  const [viewportGridState, dispatch] = useViewportGrid();
 
   useEffect(() => {
     function LayoutSelector() {
@@ -17,7 +22,7 @@ function LayoutSelector() {
     };
   }, [isOpen]);
 
-  const dropdownContent = isOpen ? OHIFLayoutSelector : undefined;
+  const DropdownContent = isOpen ? OHIFLayoutSelector : null;
 
   return (
     <ToolbarButton
@@ -27,7 +32,19 @@ function LayoutSelector() {
       onClick={() => {
         setIsOpen(!isOpen);
       }}
-      dropdownContent={dropdownContent}
+      dropdownContent={
+        <DropdownContent
+          onSelection={({ numRows, numCols }) => {
+            dispatch({
+              type: 'SET_LAYOUT',
+              payload: {
+                numCols,
+                numRows,
+              },
+            });
+          }}
+        />
+      }
       isActive={isOpen}
       type="primary"
     />
@@ -35,7 +52,14 @@ function LayoutSelector() {
 }
 
 LayoutSelector.propTypes = {
-  children: PropTypes.any.isRequired,
+  /* Callback for grid selection */
+  onSelection: PropTypes.func.isRequired,
+};
+
+LayoutSelector.defaultProps = {
+  onSelection: () => {
+    console.warn('layoutSelector missing `onSelection` prop');
+  },
 };
 
 export default LayoutSelector;

extensions/default/src/getToolbarModule.js

@@ -63,10 +63,6 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
     {
       name: 'ohif.layoutSelector',
       defaultComponent: ToolbarLayoutSelector,
-      requiredConfig: [],
-      optionalConfig: [],
-      requiredProps: [],
-      optionalProps: [],
       clickHandler: (evt, clickedBtn, btnSectionName) => {},
     },
     {

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

@@ -1,80 +1,58 @@
-// // SEE:
+import React, { useState } from 'react';
-// // https://github.com/OHIF/Viewers/blob/b58aa4575ab72fe3f493cc5a4261b4f8256516ab/platform/viewer/src/appExtensions/MeasurementsPanel/index.js#L18-L49
+import PropTypes from 'prop-types';
-// import React from 'react';
-// import { useViewportGrid } from '@ohif/ui';
 
-// function getCommandsModule({ servicesManager }) {
+function LayoutSelector({ onSelection }) {
-//   const { UIDialogService } = servicesManager.services;
+  const [hoveredIndex, setHoveredIndex] = useState();
+  const hoverX = hoveredIndex % 3;
+  const hoverY = Math.floor(hoveredIndex / 3);
+  const isHovered = index => {
+    const x = index % 3;
+    const y = Math.floor(index / 3);
 
-//   const definitions = {
+    return x <= hoverX && y <= hoverY;
-//     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
-      <div>LAYOUT SELECTOR PLACEHOLDER!</div>
+      style={{
-    </>
+        display: 'grid',
+        gridTemplateColumns: '20px 20px 20px',
+        gridTemplateRows: '20px 20px 20px',
+        backgroundColor: '#090c29', // primary-dark
+      }}
+      className="p-2"
+    >
+      {[0, 1, 2, 3, 4, 5, 6, 7, 8].map(index => (
+        <div
+          key={index}
+          style={{
+            border: '1px solid white',
+            backgroundColor: isHovered(index) ? '#5acce6' : '#0b1a42',
+          }}
+          className="cursor-pointer"
+          onClick={() => {
+            const x = index % 3;
+            const y = Math.floor(index / 3);
+
+            onSelection({
+              numRows: x + 1,
+              numCols: y + 1,
+            });
+          }}
+          onMouseEnter={() => setHoveredIndex(index)}
+          onMouseLeave={() => setHoveredIndex(-1)}
+        ></div>
+      ))}
+    </div>
   );
 }
 
+LayoutSelector.defaultProps = {
+  onSelection: () => {},
+};
+
+LayoutSelector.propTypes = {
+  onSelection: PropTypes.func.isRequired,
+};
+
 export default LayoutSelector;

yarn.lock

@@ -17889,6 +17889,16 @@ react-cornerstone-viewport@2.3.8:
     prop-types "^15.7.2"
     react-resize-detector "^4.2.1"
 
+react-cornerstone-viewport@2.3.9:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.9.tgz#f9761da8e536f0a217137c6ca1a983f5882249f9"
+  integrity sha512-qrhq8CbX/jq6b93cQjV2qC/mhHOvFBpxzxcHlvHzEQZt/rmRMcaYxCqjpNaNbUmmBu61wNkxesUVsggkPTTcqg==
+  dependencies:
+    classnames "^2.2.6"
+    date-fns "^2.2.1"
+    prop-types "^15.7.2"
+    react-resize-detector "^4.2.1"
+
 react-dates@21.2.1:
   version "21.2.1"
   resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.2.1.tgz#a979ed6876326ccfbf754a019bc95458cc061ad8"