Update Viewer to use UI components instead of local

platform/viewer/src/components/ViewportGrid.jsx

@@ -3,32 +3,34 @@
  */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-//
-import ViewportPane from './ViewportPane.jsx';
+import { ViewportGrid, ViewportPane } from '@ohif/ui';
 // import DefaultViewport from './DefaultViewport.js';
 // import EmptyViewport from './EmptyViewport.js';
 
-function ViewportGrid(props) {
-  const {
-    activeViewportIndex,
-    displaySets,
-    numRows,
-    numColumns,
-    children,
-  } = props;
+function ViewerViewportGrid(props) {
+  const { activeViewportIndex, displaySets, children } = props;
 
   // From ViewportGridService and/or ContextProvider
   const [viewportGrid, setViewportGrid] = useState({
+    numRows: 2,
+    numCols: 2,
+    activeViewportIndex: 0,
     viewports: [
       {
         displaySetUid: undefined,
       },
+      {
+        displaySetUid: undefined,
+      },
+      {
+        displaySetUid: undefined,
+      },
+      {
+        displaySetUid: undefined,
+      },
     ],
   });
 
-  const rowSize = 100 / numRows;
-  const colSize = 100 / numColumns;
-
   // viewportData --> displaySets
 
   const getViewportPanes = () =>
@@ -58,10 +60,10 @@ function ViewportGrid(props) {
       return (
         <ViewportPane
           key={viewportIndex}
+          className="m-1"
           onDrop={() => {
             /* setDisplaySet for Viewport */
           }}
-          viewportIndex={viewportIndex}
           isActive={activeViewportIndex === viewportIndex}
         >
           {/* {ViewportComponent} */}
@@ -75,34 +77,25 @@ function ViewportGrid(props) {
   ]);
 
   return (
-    <div
-      data-cy="viewport-grid"
-      style={{
-        display: 'grid',
-        gridTemplateRows: `repeat(${numRows}, ${rowSize}%)`,
-        gridTemplateColumns: `repeat(${numColumns}, ${colSize}%)`,
-        height: '100%',
-        width: '100%',
-      }}
-    >
+    <ViewportGrid numRows={viewportGrid.numRows} numCols={viewportGrid.numCols}>
       {ViewportPanes}
-    </div>
+    </ViewportGrid>
   );
 }
 
-ViewportGrid.propTypes = {
+ViewerViewportGrid.propTypes = {
   // viewports: PropTypes.array.isRequired,
   activeViewportIndex: PropTypes.number.isRequired,
   children: PropTypes.node,
-  numRows: PropTypes.number.isRequired,
-  numColumns: PropTypes.number.isRequired,
+  // numRows: PropTypes.number.isRequired,
+  // numColumns: PropTypes.number.isRequired,
 };
 
-ViewportGrid.defaultProps = {
+ViewerViewportGrid.defaultProps = {
   // viewports: [],
-  numRows: 1,
-  numColumns: 1,
+  // numRows: 1,
+  // numColumns: 1,
   activeViewportIndex: 0,
 };
 
-export default ViewportGrid;
+export default ViewerViewportGrid;

platform/viewer/src/components/ViewportPane.jsx

@@ -1,50 +0,0 @@
-import React from 'react';
-// import { useDrop } from 'react-dnd';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const ViewportPane = function(props) {
-  const { children, onDrop, viewportIndex } = props;
-  // const [{ isHovered, isHighlighted }, drop] = useDrop({
-  //   accept: 'displayset',
-  //   drop: (displaySet, monitor) => {
-  //     const canDrop = monitor.canDrop();
-  //     const isOver = monitor.isOver();
-
-  //     if (canDrop && isOver && onDrop) {
-  //       const { StudyInstanceUID, displaySetInstanceUID } = displaySet;
-
-  //       onDrop({ viewportIndex, StudyInstanceUID, displaySetInstanceUID });
-  //     }
-  //   },
-  //   // Monitor, and collect props; returned as values by `useDrop`
-  //   collect: monitor => ({
-  //     isHighlighted: monitor.canDrop(),
-  //     isHovered: monitor.isOver(),
-  //   }),
-  // });
-
-  const isHovered = false;
-  const isHighlighted = false;
-
-  return (
-    <div
-      // ref={drop}
-      className={classNames({ hovered: isHovered, highlighted: isHighlighted })}
-      data-cy={`viewport-pane-${viewportIndex}`}
-    >
-      {children}
-    </div>
-  );
-};
-
-ViewportPane.propTypes = {
-  /** The ViewportComp */
-  children: PropTypes.node.isRequired,
-  /** Function that handles drop events */
-  onDrop: PropTypes.func.isRequired,
-  /** The "index" of the viewport in the current ViewportGrid */
-  viewportIndex: PropTypes.number.isRequired,
-};
-
-export default ViewportPane;

platform/viewer/src/routes/ModeRoute.js

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useCallback } from 'react';
-import { displaySetManager, ToolBarManager } from '@ohif/core';
-import { useViewModel } from '@ohif/core';
+import { displaySetManager, ToolBarManager, useViewModel } from '@ohif/core';
+import { DragAndDropProvider } from '@ohif/ui';
 import Compose from './Compose';
-import ViewportGrid from './../components/ViewportGrid.jsx';
+import ViewportGrid from './../components/ViewportGrid';
 
 export default function ModeRoute({
   location,
@@ -89,13 +89,15 @@ export default function ModeRoute({
       {/* TODO: extensionManager is already provided to the extension module.
        *  Use it from there instead of passing as a prop here.
        */}
-      <LayoutComponent
-        extensionManager={extensionManager}
-        displaySetInstanceUids={displaySetInstanceUids}
-        toolBarLayout={toolBarLayout}
-        ViewportGrid={ViewportGrid}
-        {...layoutTemplateData.props}
-      />
+      <DragAndDropProvider>
+        <LayoutComponent
+          extensionManager={extensionManager}
+          displaySetInstanceUids={displaySetInstanceUids}
+          toolBarLayout={toolBarLayout}
+          ViewportGrid={ViewportGrid}
+          {...layoutTemplateData.props}
+        />
+      </DragAndDropProvider>
     </CombinedContextProvider>
   );
 }