[OHIF-251] - Double click to maximise viewport/ revert to previous layout. (#1860)

* WIP

* double click to maximise implemented at the viewport grid layer.

* Remove memory of cached layout when the layout is changed, or a different displaySet is set.

* WIP fix double click for cornerstone.

* Update CST

* Prevent maximising when double clicking the action bar

* Update extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

* Apply suggestions from code review

* Fix conflicts.

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/core/package.json

@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "cornerstone-core": "^2.3.0",
-    "cornerstone-tools": "4.17.0",
+    "cornerstone-tools": "4.18.0",
     "cornerstone-wado-image-loader": "^3.1.2",
     "dicom-parser": "^1.8.3"
   },

platform/core/src/services/ViewportGridService/ViewportGridService.js

@@ -6,14 +6,18 @@ const publicAPI = {
   setActiveViewportIndex: _setActiveViewportIndex,
   setDisplaysetForViewport: _setDisplaysetForViewport,
   setLayout: _setLayout,
+  setCachedLayout: _setCachedLayout,
   setServiceImplementation,
 };
 
 const serviceImplementation = {
   _getState: () => console.warn('getState() NOT IMPLEMENTED'),
-  _setActiveViewportIndex: () => console.warn('setActiveViewportIndex() NOT IMPLEMENTED'),
-  _setDisplaysetForViewport: () => console.warn('setDisplaysetForViewport() NOT IMPLEMENTED'),
+  _setActiveViewportIndex: () =>
+    console.warn('setActiveViewportIndex() NOT IMPLEMENTED'),
+  _setDisplaysetForViewport: () =>
+    console.warn('setDisplaysetForViewport() NOT IMPLEMENTED'),
   _setLayout: () => console.warn('setLayout() NOT IMPLEMENTED'),
+  _setCachedLayout: () => console.warn('setCachedLayout() NOT IMPLEMENTED'),
 };
 
 function _getState() {
@@ -35,10 +39,15 @@ function _setLayout({ numCols, numRows }) {
   return serviceImplementation._setLayout({ numCols, numRows });
 }
 
+function _setCachedLayout({ numCols, numRows, viewports }) {
+  return serviceImplementation._setLayout({ numCols, numRows, viewports });
+}
+
 function setServiceImplementation({
   getState: getStateImplementation,
   setActiveViewportIndex: setActiveViewportIndexImplementation,
   setDisplaysetForViewport: setDisplaysetForViewportImplementation,
+  setCachedLayout: setCachedLayoutImplementation,
   setLayout: setLayoutImplementation,
 }) {
   if (getStateImplementation) {
@@ -53,6 +62,9 @@ function setServiceImplementation({
   if (setLayoutImplementation) {
     serviceImplementation._setLayout = setLayoutImplementation;
   }
+  if (setCachedLayoutImplementation) {
+    serviceImplementation._setCachedLayout = setCachedLayoutImplementation;
+  }
 }
 
 export default {

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -16,6 +16,7 @@ const ViewportActionBar = ({
   showPatientInfo: patientInfoVisibility,
   onSeriesChange,
   onHydrationClick,
+  onDoubleClick,
 }) => {
   const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);
 
@@ -135,7 +136,10 @@ const ViewportActionBar = ({
   };
 
   return (
-    <div className="flex items-center p-2 border-b select-none border-primary-light min-h-12">
+    <div
+      className="flex items-center p-2 border-b select-none border-primary-light min-h-12"
+      onDoubleClick={onDoubleClick}
+    >
       <div className="flex flex-grow">
         <div className="flex items-center">
           {renderIconStatus()}

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -11,6 +11,7 @@ function ViewportPane({
   className,
   isActive,
   onDrop,
+  onDoubleClick,
   onInteraction,
   acceptDropsFor,
 }) {
@@ -57,6 +58,7 @@ function ViewportPane({
       // https://reactjs.org/docs/events.html#mouse-events
       // https://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element
       onMouseDown={onInteractionHandler}
+      onDoubleClick={onDoubleClick}
       onClick={onInteractionHandler}
       onScroll={onInteractionHandler}
       onWheel={onInteractionHandler}
@@ -95,6 +97,8 @@ ViewportPane.propTypes = {
   onDrop: PropTypes.func.isRequired,
   /** Called when the viewportPane is interacted with by the user */
   onInteraction: PropTypes.func.isRequired,
+  /** Executed when the pane is double clicked */
+  onDoubleClick: PropTypes.func,
 };
 
 const noop = () => {};

platform/ui/src/contextProviders/ViewportGridProvider.jsx

@@ -32,7 +32,7 @@ export function ViewportGridProvider({ children, service }) {
 
         viewports[viewportIndex] = { displaySetInstanceUID, imageIndex };
 
-        return { ...state, ...{ viewports } };
+        return { ...state, ...{ viewports }, cachedLayout: undefined };
       }
       case 'SET_LAYOUT': {
         const { numCols, numRows } = action.payload;
@@ -51,8 +51,12 @@ export function ViewportGridProvider({ children, service }) {
         return {
           ...state,
           ...{ activeViewportIndex, numCols, numRows, viewports },
+          cachedLayout: undefined,
         };
       }
+      case 'SET_CACHED_LAYOUT': {
+        return { ...state, cachedLayout: action.payload };
+      }
       default:
         return action.payload;
     }
@@ -93,6 +97,15 @@ export function ViewportGridProvider({ children, service }) {
     [dispatch]
   );
 
+  const setCachedLayout = useCallback(
+    payload =>
+      dispatch({
+        type: 'SET_CACHED_LAYOUT',
+        payload,
+      }),
+    [dispatch]
+  );
+
   /**
    * Sets the implementation of a modal service that can be used by extensions.
    *
@@ -105,6 +118,7 @@ export function ViewportGridProvider({ children, service }) {
         setActiveViewportIndex,
         setDisplaysetForViewport,
         setLayout,
+        setCachedLayout,
       });
     }
   }, [
@@ -113,6 +127,7 @@ export function ViewportGridProvider({ children, service }) {
     setActiveViewportIndex,
     setDisplaysetForViewport,
     setLayout,
+    setCachedLayout,
   ]);
 
   const api = {
@@ -120,6 +135,7 @@ export function ViewportGridProvider({ children, service }) {
     setActiveViewportIndex,
     setDisplaysetForViewport,
     setLayout,
+    setCachedLayout,
   };
 
   return (

platform/viewer/package.json

@@ -67,7 +67,7 @@
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "4.17.0",
+    "cornerstone-tools": "4.18.0",
     "cornerstone-wado-image-loader": "^3.1.2",
     "dcmjs": "0.14.2",
     "dicom-parser": "^1.8.3",

platform/viewer/src/components/ViewportGrid.jsx

@@ -11,7 +11,7 @@ const { ImageSet } = classes;
 function ViewerViewportGrid(props) {
   const { servicesManager, viewportComponents, dataSource } = props;
   const [
-    { numCols, numRows, activeViewportIndex, viewports },
+    { numCols, numRows, activeViewportIndex, viewports, cachedLayout },
     viewportGridService,
   ] = useViewportGrid();
 
@@ -67,6 +67,43 @@ function ViewerViewportGrid(props) {
     };
   };
 
+  const onDoubleClick = viewportIndex => {
+    if (cachedLayout) {
+      viewportGridService.setLayout({
+        numCols: cachedLayout.numCols,
+        numRows: cachedLayout.numRows,
+      });
+
+      cachedLayout.viewports.forEach((viewport, viewportIndex) => {
+        viewportGridService.setDisplaysetForViewport({
+          viewportIndex,
+          displaySetInstanceUID: viewport.displaySetInstanceUID,
+        });
+      });
+
+      return;
+    }
+
+    const cachedViewports = viewports.map(viewport => {
+      return {
+        displaySetInstanceUID: viewport.displaySetInstanceUID,
+      };
+    });
+
+    viewportGridService.setDisplaysetForViewport({
+      viewportIndex: 0,
+      displaySetInstanceUID: viewports[viewportIndex].displaySetInstanceUID,
+    });
+
+    viewportGridService.setLayout({ numCols: 1, numRows: 1 });
+
+    viewportGridService.setCachedLayout({
+      numCols,
+      numRows,
+      viewports: cachedViewports,
+    });
+  };
+
   // TODO:
   // Hmm... Should a "displaySet" being added update the viewport based on HP?
   // I guess it might.
@@ -127,6 +164,7 @@ function ViewerViewportGrid(props) {
           acceptDropsFor="displayset"
           onDrop={onDropHandler.bind(null, viewportIndex)}
           onInteraction={onInterationHandler}
+          onDoubleClick={() => onDoubleClick(viewportIndex)}
           isActive={activeViewportIndex === viewportIndex}
         >
           <ViewportComponent