Push grid, pane, and provider

platform/viewer/src/components/ViewportGrid.jsx

@@ -1,7 +1,7 @@
 /**
  * CSS Grid Reference: http://grid.malven.co/
  */
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 //
 import ViewportPane from './ViewportPane.jsx';
@@ -11,27 +11,35 @@ import ViewportPane from './ViewportPane.jsx';
 function ViewportGrid(props) {
   const {
     activeViewportIndex,
-    viewports,
     displaySets,
     numRows,
     numColumns,
     children,
   } = props;
 
+  // From ViewportGridService and/or ContextProvider
+  const [viewportGrid, setViewportGrid] = useState({
+    viewports: [
+      {
+        displaySetUid: undefined,
+      },
+    ],
+  });
+
   const rowSize = 100 / numRows;
   const colSize = 100 / numColumns;
 
   // viewportData --> displaySets
 
   const getViewportPanes = () =>
-    viewports.map((viewport, viewportIndex) => {
+    viewportGrid.viewports.map((viewport, viewportIndex) => {
       const someId = viewport.displaySetId;
-      const displaySet = displaySets[someId];
+      // const displaySet = displaySets[someId];
 
-      if (!displaySet) {
+      // if (!displaySet) {
-        // TODO: Empty Viewport
+      //   // TODO: Empty Viewport
-        return null;
+      //   return null;
-      }
+      // }
 
       // const pluginName =
       //   !layout.plugin && displaySet && displaySet.plugin
@@ -50,7 +58,9 @@ function ViewportGrid(props) {
       return (
         <ViewportPane
           key={viewportIndex}
-          onDrop={() => { /* setDisplaySet for Viewport */ }}
+          onDrop={() => {
+            /* setDisplaySet for Viewport */
+          }}
           viewportIndex={viewportIndex}
           isActive={activeViewportIndex === viewportIndex}
         >
@@ -59,12 +69,10 @@ function ViewportGrid(props) {
       );
     });
 
-  // const ViewportPanes = React.useMemo(getViewportPanes, [
+  const ViewportPanes = React.useMemo(getViewportPanes, [
-  //   viewportData,
+    children,
-  //   children,
+    activeViewportIndex,
-  //   setViewportData,
+  ]);
-  //   activeViewportIndex,
-  // ]);
 
   return (
     <div
@@ -77,13 +85,13 @@ function ViewportGrid(props) {
         width: '100%',
       }}
     >
-      {/* {ViewportPanes} */}
+      {ViewportPanes}
     </div>
   );
-};
+}
 
 ViewportGrid.propTypes = {
-  viewports: PropTypes.array.isRequired,
+  // viewports: PropTypes.array.isRequired,
   activeViewportIndex: PropTypes.number.isRequired,
   children: PropTypes.node,
   numRows: PropTypes.number.isRequired,
@@ -91,7 +99,7 @@ ViewportGrid.propTypes = {
 };
 
 ViewportGrid.defaultProps = {
-  viewports: [],
+  // viewports: [],
   numRows: 1,
   numColumns: 1,
   activeViewportIndex: 0,

platform/viewer/src/components/ViewportPane.jsx

@@ -1,32 +1,35 @@
 import React from 'react';
-import { useDrop } from 'react-dnd';
+// 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({
+  // const [{ isHovered, isHighlighted }, drop] = useDrop({
-    accept: 'displayset',
+  //   accept: 'displayset',
-    drop: (displaySet, monitor) => {
+  //   drop: (displaySet, monitor) => {
-      const canDrop = monitor.canDrop();
+  //     const canDrop = monitor.canDrop();
-      const isOver = monitor.isOver();
+  //     const isOver = monitor.isOver();
 
-      if (canDrop && isOver && onDrop) {
+  //     if (canDrop && isOver && onDrop) {
-        const { StudyInstanceUID, displaySetInstanceUID } = displaySet;
+  //       const { StudyInstanceUID, displaySetInstanceUID } = displaySet;
 
-        onDrop({ viewportIndex, StudyInstanceUID, displaySetInstanceUID });
+  //       onDrop({ viewportIndex, StudyInstanceUID, displaySetInstanceUID });
-      }
+  //     }
-    },
+  //   },
-    // Monitor, and collect props; returned as values by `useDrop`
+  //   // Monitor, and collect props; returned as values by `useDrop`
-    collect: monitor => ({
+  //   collect: monitor => ({
-      isHighlighted: monitor.canDrop(),
+  //     isHighlighted: monitor.canDrop(),
-      isHovered: monitor.isOver(),
+  //     isHovered: monitor.isOver(),
-    }),
+  //   }),
-  });
+  // });
+
+  const isHovered = false;
+  const isHighlighted = false;
 
   return (
     <div
-      ref={drop}
+      // ref={drop}
       className={classNames({ hovered: isHovered, highlighted: isHighlighted })}
       data-cy={`viewport-pane-${viewportIndex}`}
     >

platform/viewer/src/contexts/ViewportGridProvider.js

@@ -0,0 +1,37 @@
+import React, { useState, createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const ViewportGridContext = createContext(null);
+
+export const useViewportGrid = () => useContext(ViewportGridContext);
+
+export default function ViewportGridProvider({ children }) {
+  const [viewportGrid, setViewportGrid] = useState({
+    rows: 1,
+    columns: 1,
+    viewports: [],
+  });
+
+  const get = () => {
+    return viewportGrid;
+  };
+
+  const set = ({ rows, columns, viewports }) => {
+    setViewportGrid({ rows, columns, viewports });
+  };
+
+  return (
+    <ViewportGridProvider.Provider value={{ get, set }}>
+      {/* {children} */}
+    </ViewportGridProvider.Provider>
+  );
+}
+
+ViewportGridProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default ViewportGridProvider;