diff --git a/platform/core/src/services/ViewportGridService/index.js b/platform/core/src/services/ViewportGridService/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/platform/viewer/src/components/ViewportGrid.jsx b/platform/viewer/src/components/ViewportGrid.jsx index c14134bba..6156b0c92 100644 --- a/platform/viewer/src/components/ViewportGrid.jsx +++ b/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) { - // TODO: Empty Viewport - return null; - } + // if (!displaySet) { + // // TODO: Empty Viewport + // return null; + // } // const pluginName = // !layout.plugin && displaySet && displaySet.plugin @@ -50,7 +58,9 @@ function ViewportGrid(props) { return ( { /* setDisplaySet for Viewport */ }} + onDrop={() => { + /* setDisplaySet for Viewport */ + }} viewportIndex={viewportIndex} isActive={activeViewportIndex === viewportIndex} > @@ -59,12 +69,10 @@ function ViewportGrid(props) { ); }); - // const ViewportPanes = React.useMemo(getViewportPanes, [ - // viewportData, - // children, - // setViewportData, - // activeViewportIndex, - // ]); + const ViewportPanes = React.useMemo(getViewportPanes, [ + children, + activeViewportIndex, + ]); return (
- {/* {ViewportPanes} */} + {ViewportPanes}
); -}; +} 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, diff --git a/platform/viewer/src/components/ViewportPane.jsx b/platform/viewer/src/components/ViewportPane.jsx index d3d4769d9..eb6bfd396 100644 --- a/platform/viewer/src/components/ViewportPane.jsx +++ b/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({ - accept: 'displayset', - drop: (displaySet, monitor) => { - const canDrop = monitor.canDrop(); - const isOver = monitor.isOver(); + // 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; + // 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(), - }), - }); + // 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 (
diff --git a/platform/viewer/src/contexts/ViewportGridProvider.js b/platform/viewer/src/contexts/ViewportGridProvider.js new file mode 100644 index 000000000..85fc225cc --- /dev/null +++ b/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 ( + + {/* {children} */} + + ); +} + +ViewportGridProvider.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]).isRequired, +}; + +export default ViewportGridProvider;