[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/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 (