Switch to react-dnd via react-viewerbase to fix drag/drop of display sets

OHIFViewer-react/src/App.js

@@ -5,9 +5,10 @@ import ViewerRouting from "./ViewerRouting.js";
 import StudyListRouting from './StudyListRouting.js';
 import StandaloneRouting from './StandaloneRouting.js';
 import IHEInvokeImageDisplay from './IHEInvokeImageDisplay.js';
+import { ViewerbaseDragDropContext } from 'react-viewerbase';
+
 import './App.css';
 import './variables.css';
-// TODO: figure out how to change themes dynamically
 import './theme-tide.css';
 
 const reload = () => window.location.reload();
@@ -90,4 +91,4 @@ class App extends Component {
     }
 }
 
-export default withRouter(App);
+export default ViewerbaseDragDropContext(withRouter(App));

OHIFViewer-react/src/FlexboxLayout/ViewerMain.css

@@ -1,12 +1,12 @@
 #viewer {
-  height: "calc(100% - %s)" % var(--top-bar-height);
+  height: calc(100% - var(--top-bar-height));
 }
 
 #viewer > .loadingTextDiv {
   color: var(--text-secondary-color);
   font-size: 30px;
   height: 100%;
-  line-height: "calc(100% - %s)" % var(--top-bar-height);
+  line-height: calc(100% - var(--top-bar-height));
 }
 
 .ViewerMain {

OHIFViewer-react/src/FlexboxLayout/ViewerMain.js

@@ -39,7 +39,8 @@ class ViewerMain extends Component {
         super(props);
 
         this.state = {
-            displaySets: []
+            displaySets: [],
+            viewportData: [],
         };
 
         this.getCornerstoneViewport = this.getCornerstoneViewport.bind(this);
@@ -70,12 +71,22 @@ class ViewerMain extends Component {
             study.displaySets.forEach(dSet => dSet.images.length && displaySets.push(dSet));
         });
 
+        // TODO: re-add plugins back in
+        // TODO: We shouldn't just show hang display sets by default
+        const viewportData = displaySets.map((dSet, index) => {
+            return this.getCornerstoneViewport(dSet, index);
+        });
+
+        debugger;
+
         this.setState({
-            displaySets
+            displaySets,
+            viewportData
         });
     }
 
     getCornerstoneViewport(data, index) {
+        debugger;
         const stack = getCornerstoneStack(this.props.studies, data)
         const viewportData = {
             stack,
@@ -90,16 +101,28 @@ class ViewerMain extends Component {
         />);
     };
 
-    render() {
-        // TODO: re-add plugins back in
-        const viewportData = this.state.displaySets.map((dSet, index) => {
-            return this.getCornerstoneViewport(dSet, index);
-        })
+    setViewportData = ({viewportIndex, item}) => {
+        // TODO: Replace this with mapDispatchToProps call
+        // if we decide to put viewport info into redux
 
+        const updatedViewportData = this.state.viewportData;
+        const data = {
+            studyInstanceUid: item.studyInstanceUid,
+            displaySetInstanceUid: item.displaySetInstanceUid
+        };
+
+        updatedViewportData[viewportIndex] = this.getCornerstoneViewport(data, viewportIndex);
+
+        this.setState({
+            viewportData: updatedViewportData
+        });
+    }
+
+    render() {
         // TODO: Connect LayoutManager to redux
         return (
             <div className="ViewerMain">
-                <LayoutManager viewportData={viewportData}/>
+                <LayoutManager viewportData={this.state.viewportData} setViewportData={this.setViewportData}/>
             </div>
         );
     }

OHIFViewer-react/src/components/Dropdown/Dropdown.js

@@ -8,7 +8,7 @@ class Dropdown extends Component {
   }
 
   renderList = () => {
-    const { list, link, align } = this.props
+    const { list, align } = this.props
 
     if (!this.state.open) {
       return null

OHIFViewer-react/src/config.js

@@ -15,6 +15,10 @@ window.info = {
     homepage
 };
 
+// For debugging
+window.cornerstone = cornerstone;
+window.cornerstoneTools = cornerstoneTools;
+
 cornerstoneTools.external.cornerstone = cornerstone;
 cornerstoneTools.external.Hammer = Hammer;
 cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

OHIFViewer-react/src/sha.js

@@ -1 +1 @@
-export default '2cf00fe8274068bf5b06bac94c813d242bc90eb1';
+export default '2569d0e79b807af440fa6934b5d50d42bad155f6';