refactor: layout manager to viewer (#1026)

* docs: formatting

* Prefer numRows and numColumns to percentage width/height for layout

* fix: LayoutManager --> ViewportGrid (get out of UI component library)

* docs: remove outdated docs

* Don't expose ExampleDropTarget

* Revert thumnail entry drag source removal

* Update screaming tests

* fix drag-n-drop

* fix vtk mpr2d CC: @jamesapetts

* remove setSingleLayoutData

* remove vtk qualifier

platform/viewer/src/connectedComponents/ConnectedLayoutButton.js

@@ -7,7 +7,7 @@ const { setLayout, setViewportActive } = OHIF.redux.actions;
 const mapStateToProps = state => {
   return {
     currentLayout: state.viewports.layout,
-    activeViewportIndex: state.viewports.activeViewportIndex
+    activeViewportIndex: state.viewports.activeViewportIndex,
   };
 };
 
@@ -15,10 +15,11 @@ const mapDispatchToProps = dispatch => {
   return {
     // TODO: Change if layout switched becomes more complex
     onChange: (selectedCell, currentLayout, activeViewportIndex) => {
-      let viewports = [];
-      const rows = selectedCell.row + 1;
-      const columns = selectedCell.col + 1;
-      const numViewports = rows * columns;
+      const viewports = [];
+      const numRows = selectedCell.row + 1;
+      const numColumns = selectedCell.col + 1;
+      const numViewports = numRows * numColumns;
+
       for (let i = 0; i < numViewports; i++) {
         // Hacky way to allow users to exit MPR "mode"
         const viewport = currentLayout.viewports[i];
@@ -28,16 +29,16 @@ const mapDispatchToProps = dispatch => {
         }
 
         viewports.push({
-          height: `${100 / rows}%`,
-          width: `${100 / columns}%`,
           plugin,
         });
       }
       const layout = {
+        numRows,
+        numColumns,
         viewports,
       };
 
-      const maxActiveIndex = rows * columns - 1;
+      const maxActiveIndex = numViewports - 1;
       if (activeViewportIndex > maxActiveIndex) {
         dispatch(setViewportActive(0));
       }
@@ -52,9 +53,10 @@ const mergeProps = (propsFromState, propsFromDispatch) => {
   const { currentLayout, activeViewportIndex } = propsFromState;
 
   return {
-    onChange: selectedCell => onChangeFromDispatch(selectedCell, currentLayout, activeViewportIndex)
+    onChange: selectedCell =>
+      onChangeFromDispatch(selectedCell, currentLayout, activeViewportIndex),
   };
-}
+};
 
 const ConnectedLayoutButton = connect(
   mapStateToProps,

platform/viewer/src/connectedComponents/ConnectedLayoutManager.js

@@ -1,36 +0,0 @@
-import { LayoutManager } from '@ohif/ui';
-import { MODULE_TYPES } from '@ohif/core';
-import { connect } from 'react-redux';
-import { extensionManager } from './../App.js';
-
-const mapStateToProps = state => {
-  const availableViewportModules = {};
-  const viewportModules = extensionManager.modules[MODULE_TYPES.VIEWPORT];
-
-  viewportModules.forEach(moduleDefinition => {
-    availableViewportModules[moduleDefinition.extensionId] =
-      moduleDefinition.module;
-  });
-
-  // TODO: Use something like state.plugins.defaultPlugin[MODULE_TYPES.VIEWPORT]
-  let defaultPlugin;
-  if (viewportModules.length) {
-    defaultPlugin = viewportModules[0].extensionId;
-  }
-
-  return {
-    layout: state.viewports.layout,
-    activeViewportIndex: state.viewports.activeViewportIndex,
-    // TODO: rename `availableViewportModules`
-    availablePlugins: availableViewportModules,
-    // TODO: rename `defaultViewportModule`
-    defaultPlugin,
-  };
-};
-
-const ConnectedLayoutManager = connect(
-  mapStateToProps,
-  null
-)(LayoutManager);
-
-export default ConnectedLayoutManager;

platform/viewer/src/connectedComponents/ConnectedPluginSwitch.js

@@ -1,9 +1,9 @@
-import OHIF from "@ohif/core";
-import PluginSwitch from "./PluginSwitch.js";
-import { commandsManager } from "./../App.js";
-import { connect } from "react-redux";
+// import OHIF from '@ohif/core';
+import PluginSwitch from './PluginSwitch.js';
+import { commandsManager } from './../App.js';
+import { connect } from 'react-redux';
 
-const { setLayout } = OHIF.redux.actions;
+// const { setLayout } = OHIF.redux.actions;
 
 const mapStateToProps = state => {
   const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
@@ -11,17 +11,17 @@ const mapStateToProps = state => {
   return {
     activeViewportIndex,
     viewportSpecificData,
-    layout
+    layout,
   };
 };
 
-const mapDispatchToProps = dispatch => {
-  return {
-    setLayout: data => {
-      dispatch(setLayout(data));
-    }
-  };
-};
+// const mapDispatchToProps = dispatch => {
+//   return {
+//     setLayout: data => {
+//       dispatch(setLayout(data));
+//     }
+//   };
+// };
 
 /*function setSingleLayoutData(originalArray, viewportIndex, data) {
   const viewports = originalArray.slice();
@@ -39,19 +39,17 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
   // TODO: Do not display certain options if the current display set
   // cannot be displayed using these view types
   const mpr = () => {
-        commandsManager.runCommand("mpr2d");
-      }
-  ;
-
+    commandsManager.runCommand('mpr2d');
+  };
   return {
-    mpr
+    mpr,
   };
 };
 
 const ConnectedPluginSwitch = connect(
   mapStateToProps,
-  mapDispatchToProps,
+  null, // mapDispatchToProps
   mergeProps
 )(PluginSwitch);
 
-export default ConnectedPluginSwitch;
+export default ConnectedPluginSwitch;

platform/viewer/src/connectedComponents/PluginSwitch.js

@@ -13,9 +13,7 @@ class PluginSwitch extends Component {
   render() {
     return (
       <div className="PluginSwitch">
-        <ToolbarButton       label = "2D MPR"
-                             icon = "cube"
-                             onClick = {this.props.mpr} />
+        <ToolbarButton label="2D MPR" icon="cube" onClick={this.props.mpr} />
       </div>
     );
   }

platform/viewer/src/connectedComponents/ViewerMain.js

@@ -1,7 +1,7 @@
 import './ViewerMain.css';
 
 import { Component } from 'react';
-import ConnectedLayoutManager from './ConnectedLayoutManager.js';
+import { ConnectedViewportGrid } from './../components/ViewportGrid/index.js';
 import ConnectedToolContextMenu from './ConnectedToolContextMenu.js';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -124,11 +124,15 @@ class ViewerMain extends Component {
     return viewportData;
   };
 
-  setViewportData = ({ viewportIndex, item }) => {
+  setViewportData = ({
+    viewportIndex,
+    studyInstanceUid,
+    displaySetInstanceUid,
+  }) => {
     const displaySet = this.findDisplaySet(
       this.props.studies,
-      item.studyInstanceUid,
-      item.displaySetInstanceUid
+      studyInstanceUid,
+      displaySetInstanceUid
     );
 
     this.props.setViewportSpecificData(viewportIndex, displaySet);
@@ -138,14 +142,14 @@ class ViewerMain extends Component {
     return (
       <div className="ViewerMain">
         {this.state.displaySets.length && (
-          <ConnectedLayoutManager
+          <ConnectedViewportGrid
             studies={this.props.studies}
             viewportData={this.getViewportData()}
             setViewportData={this.setViewportData}
           >
             {/* Children to add to each viewport that support children */}
             <ConnectedToolContextMenu />
-          </ConnectedLayoutManager>
+          </ConnectedViewportGrid>
         )}
       </div>
     );