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

extensions/cornerstone/package.json

@@ -33,7 +33,7 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.3.0",
     "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",

extensions/cornerstone/src/init.js

@@ -38,12 +38,13 @@ export default function init({ servicesManager, configuration }) {
           ],
           onSubmit: ({ action, value }) => {
             switch (action.id) {
-              case 'save': callback(value.label);
+              case 'save':
+                callback(value.label);
             }
             UIDialogService.dismiss({ id: dialogId });
           },
           body: ({ value, setValue }) => {
-            const onChangeHandler = (event) => {
+            const onChangeHandler = event => {
               event.persist();
               setValue(value => ({ ...value, label: event.target.value }));
             };
@@ -93,7 +94,7 @@ export default function init({ servicesManager, configuration }) {
   // THIS
   // is a way for extensions that "depend" on this extension to notify it of
   // new cornerstone enabled elements so it's commands continue to work.
-  const handleOhifCornerstoneEnabledElementEvent = function (evt) {
+  const handleOhifCornerstoneEnabledElementEvent = function(evt) {
     const { viewportIndex, enabledElement } = evt.detail;
 
     setEnabledElement(viewportIndex, enabledElement);
@@ -271,7 +272,10 @@ const _connectToolsToMeasurementService = measurementService => {
   const csToolsVer4MeasurementSource = _initMeasurementService(
     measurementService
   );
-  _connectMeasurementServiceToTools(measurementService, csToolsVer4MeasurementSource);
+  _connectMeasurementServiceToTools(
+    measurementService,
+    csToolsVer4MeasurementSource
+  );
   const { addOrUpdate, remove } = csToolsVer4MeasurementSource;
   const elementEnabledEvt = cornerstone.EVENTS.ELEMENT_ENABLED;
 
@@ -336,14 +340,18 @@ const _connectToolsToMeasurementService = measurementService => {
   });
 };
 
-const _connectMeasurementServiceToTools = (measurementService, measurementSource) => {
-  const { MEASUREMENTS_CLEARED, MEASUREMENT_REMOVED } = measurementService.EVENTS;
+const _connectMeasurementServiceToTools = (
+  measurementService,
+  measurementSource
+) => {
+  const {
+    MEASUREMENTS_CLEARED,
+    MEASUREMENT_REMOVED,
+  } = measurementService.EVENTS;
   const sourceId = measurementSource.id;
 
   measurementService.subscribe(MEASUREMENTS_CLEARED, () => {
-    cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
-      {}
-    );
+    cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState({});
     cornerstone.getEnabledElements().forEach(enabledElement => {
       cornerstone.updateImage(enabledElement.element);
     });

extensions/dicom-rt/package.json

@@ -30,7 +30,7 @@
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.17.0",
+    "cornerstone-tools": "4.18.0",
     "dcmjs": "0.14.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",

extensions/dicom-segmentation/package.json

@@ -30,7 +30,7 @@
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "4.17.0",
+    "cornerstone-tools": "4.18.0",
     "dcmjs": "0.14.2",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",

extensions/dicom-sr/package.json

@@ -33,7 +33,7 @@
     "@ohif/ui": "^0.50.0",
     "cornerstone-core": "^2.3.0",
     "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",

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -399,14 +399,23 @@ function OHIFCornerstoneSRViewport({
     });
   }
 
+  const label =
+    viewports.length > 1
+      ? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
+      : '';
+
   return (
     <>
       <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
         onSeriesChange={onMeasurementChange}
         onHydrationClick={hydrateMeasurementService}
         showNavArrows={viewportIndex === activeViewportIndex}
         studyData={{
-          label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
+          label,
           isTracked: false,
           isLocked: displaySet.isLocked,
           isHydrated,
@@ -432,18 +441,23 @@ function OHIFCornerstoneSRViewport({
           },
         }}
       />
-      <CornerstoneViewport
-        onElementEnabled={onElementEnabled}
-        viewportIndex={viewportIndex}
-        imageIds={imageIds}
-        imageIdIndex={currentImageIdIndex}
-        // TODO: ViewportGrid Context?
-        isActive={true} // todo
-        isStackPrefetchEnabled={true} // todo
-        isPlaying={false}
-        frameRate={24}
-        isOverlayVisible={false}
-      />
+      <div
+        className="relative flex flex-row w-full h-full"
+        onDoubleClick={_onDoubleClick}
+      >
+        <CornerstoneViewport
+          onElementEnabled={onElementEnabled}
+          viewportIndex={viewportIndex}
+          imageIds={imageIds}
+          imageIdIndex={currentImageIdIndex}
+          // TODO: ViewportGrid Context?
+          isActive={true} // todo
+          isStackPrefetchEnabled={true} // todo
+          isPlaying={false}
+          frameRate={24}
+          isOverlayVisible={false}
+        />
+      </div>
       {childrenWithProps}
     </>
   );
@@ -573,4 +587,14 @@ function _addToolDataToCornerstoneTools(data, toolType, imageId) {
   toolData.data.push(data);
 }
 
+function _onDoubleClick() {
+  const cancelActiveManipulatorsForElement = cornerstoneTools.getModule(
+    'manipulatorState'
+  ).setters.cancelActiveManipulatorsForElement;
+  const enabledElements = cornerstoneTools.store.state.enabledElements;
+  enabledElements.forEach(element => {
+    cancelActiveManipulatorsForElement(element);
+  });
+}
+
 export default OHIFCornerstoneSRViewport;

extensions/measurement-tracking/package.json

@@ -28,7 +28,7 @@
   },
   "peerDependencies": {
     "@ohif/core": "^0.50.0",
-    "cornerstone-tools": "4.17.0",
+    "cornerstone-tools": "4.18.0",
     "dcmjs": "0.14.2",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -295,6 +295,10 @@ function TrackedCornerstoneViewport({
   return (
     <>
       <ViewportActionBar
+        onDoubleClick={evt => {
+          evt.stopPropagation();
+          evt.preventDefault();
+        }}
         onSeriesChange={direction => switchMeasurement(direction)}
         showNavArrows={showNavArrows}
         studyData={{
@@ -324,7 +328,10 @@ function TrackedCornerstoneViewport({
         }}
       />
       {/* TODO: Viewport interface to accept stack or layers of content like this? */}
-      <div className="relative flex flex-row w-full h-full">
+      <div
+        className="relative flex flex-row w-full h-full"
+        onDoubleClick={_onDoubleClick}
+      >
         <CornerstoneViewport
           onElementEnabled={onElementEnabled}
           viewportIndex={viewportIndex}
@@ -406,6 +413,18 @@ function _getCornerstoneStack(displaySet, dataSource) {
   return stack;
 }
 
+
+function _onDoubleClick() {
+  const cancelActiveManipulatorsForElement = cornerstoneTools.getModule(
+    'manipulatorState'
+  ).setters.cancelActiveManipulatorsForElement;
+  const enabledElements = cornerstoneTools.store.state.enabledElements;
+  enabledElements.forEach(element => {
+    cancelActiveManipulatorsForElement(element);
+  });
+}
+
+
 /**
  * Builds the viewport data from a datasource and a displayset.
  *
@@ -413,6 +432,7 @@ function _getCornerstoneStack(displaySet, dataSource) {
  * @param {Object} displaySet
  * @return {Object} viewport data
  */
+
 async function _getViewportData(dataSource, displaySet) {
   const stack = _getCornerstoneStack(displaySet, dataSource);
 

extensions/vtk/package.json

@@ -57,7 +57,7 @@
     "@ohif/core": "^2.9.6",
     "@ohif/ui": "^2.0.0",
     "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",
     "gh-pages": "^2.0.1",