feat: Snapshot Download Tool (#840)

* feat(Download ScreenShot Dialog)

- UI part of it

* feat(Download ScreenShot Dialog)

- UI part of it

* feat(Download ScreenShot Dialog)

- Missing Annotations showing controls

* feat(Download ScreenShot Dialog)

- Missing Annotations showing controls

* feat(Download ScreenShot Dialog)

- Partial Pull Request - Not ready to Prod yet.

* feat(Download ScreenShot Dialog)

  - UI - v2

* feat(Download ScreenShot Dialog)

  - UI - v3

* feat(Download ScreenShot Dialog)

  - Resizing tool

* feat(Download ScreenShot Dialog)

  - Resizing tool

* feat(Download ScreenShot Dialog)

  - Removing hardcoded CSS left

* feat(Download ScreenShot Dialog)

  - Bugfixes

* feat(Download ScreenShot Dialog)

  - Bugfixes - Escape closes the modal

* feat(Download ScreenShot Dialog)

  - Bugfixes - Responsive issues

* WIP: Refactoring DownloadDialog

* WIP: Refactoring DownloadDialog

* Align label and hide background canvas

* Add constantes and remove code not used

* Reset state on close modal

* Extract cornerstone to connect

* Fix modal zindex and add custom canvas classname

* CR Update: Add proptypes and fix useeffect warning

* CR Update: Refactor hooks, styles and imports

* CR Update: Remove important from css

* CR Update: Update core utils test of index

platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js

@@ -0,0 +1,121 @@
+import { connect } from 'react-redux';
+import { DownloadDialog } from '@ohif/ui';
+import { utils } from '@ohif/core';
+import cornerstone from 'cornerstone-core';
+import cornerstoneTools from 'cornerstone-tools';
+
+const MINIMUM_SIZE = 100;
+const DEFAULT_SIZE = 512;
+
+const mapStateToProps = (state, ownProps) => {
+  const { viewportSpecificData, activeViewportIndex } = state.viewports;
+  const { dom: activeEnabledElement } =
+    viewportSpecificData[activeViewportIndex] || {};
+
+  return {
+    minimumSize: MINIMUM_SIZE,
+    defaultSize: DEFAULT_SIZE,
+    canvasClass: 'cornerstone-canvas',
+    onClose: ownProps.toggleDownloadDialog,
+    activeViewport: activeEnabledElement,
+    enableViewport: viewportElement => {
+      if (viewportElement) {
+        cornerstone.enable(viewportElement);
+      }
+    },
+    disableViewport: viewportElement => {
+      if (viewportElement) {
+        cornerstone.disable(viewportElement);
+      }
+    },
+    updateViewportPreview: (viewportElement, downloadCanvas, fileType) =>
+      new Promise(resolve => {
+        cornerstone.fitToWindow(viewportElement);
+
+        viewportElement.addEventListener(
+          'cornerstoneimagerendered',
+          function updateViewport(event) {
+            const enabledElement = cornerstone.getEnabledElement(event.target)
+              .element;
+            const type = 'image/' + fileType;
+            const dataUrl = downloadCanvas.toDataURL(type, 1);
+
+            let newWidth = enabledElement.offsetHeight;
+            let newHeight = enabledElement.offsetWidth;
+
+            if (newWidth > DEFAULT_SIZE || newHeight > DEFAULT_SIZE) {
+              const multiplier = DEFAULT_SIZE / Math.max(newWidth, newHeight);
+              newHeight *= multiplier;
+              newWidth *= multiplier;
+            }
+
+            resolve({ dataUrl, width: newWidth, height: newHeight });
+
+            viewportElement.removeEventListener(
+              'cornerstoneimagerendered',
+              updateViewport
+            );
+          }
+        );
+      }),
+    loadImage: (activeViewport, viewportElement, width, height) =>
+      new Promise(resolve => {
+        if (activeViewport && viewportElement) {
+          const enabledElement = cornerstone.getEnabledElement(activeViewport);
+          const viewport = Object.assign({}, enabledElement.viewport);
+          delete viewport.scale;
+          viewport.translation = {
+            x: 0,
+            y: 0,
+          };
+
+          cornerstone.loadImage(enabledElement.image.imageId).then(image => {
+            cornerstone.displayImage(viewportElement, image);
+            cornerstone.setViewport(viewportElement, viewport);
+            cornerstone.resize(viewportElement, true);
+
+            const MAX_TEXTURE_SIZE = 16384;
+            const newWidth = Math.min(width || image.width, MAX_TEXTURE_SIZE);
+            const newHeight = Math.min(
+              height || image.height,
+              MAX_TEXTURE_SIZE
+            );
+
+            resolve({ image, width: newWidth, height: newHeight });
+          });
+        }
+      }),
+    toggleAnnotations: (toggle, viewportElement) => {
+      cornerstoneTools.store.state.tools.forEach(({ name }) => {
+        if (toggle) {
+          cornerstoneTools.setToolEnabledForElement(viewportElement, name);
+        } else {
+          cornerstoneTools.setToolDisabledForElement(viewportElement, name);
+        }
+      });
+    },
+    downloadBlob: (filename, fileType, viewportElement, downloadCanvas) => {
+      const file = `${filename}.${fileType}`;
+      const mimetype = `image/${fileType}`;
+
+      /* Handles JPEG images for IE11 */
+      if (downloadCanvas.msToBlob && fileType === 'jpeg') {
+        const image = downloadCanvas.toDataURL(mimetype, 1);
+        const blob = utils.b64toBlob(
+          image.replace('data:image/jpeg;base64,', ''),
+          mimetype
+        );
+        return window.navigator.msSaveBlob(blob, file);
+      }
+
+      return cornerstoneTools.SaveAs(viewportElement, file, mimetype);
+    },
+  };
+};
+
+const ConnectedDownloadDialog = connect(
+  mapStateToProps,
+  null
+)(DownloadDialog);
+
+export default ConnectedDownloadDialog;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -1,19 +1,21 @@
-import './ToolbarRow.css';
-
 import React, { Component } from 'react';
+import { MODULE_TYPES } from '@ohif/core';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 import {
   ExpandableToolMenu,
   RoundedButtonGroup,
   ToolbarButton,
 } from '@ohif/ui';
+
+import './ToolbarRow.css';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
+import ConnectedDownloadDialog from './ConnectedDownloadDialog';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
-import { MODULE_TYPES } from '@ohif/core';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+
 
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
@@ -44,10 +46,13 @@ class ToolbarRow extends Component {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
       isCineDialogOpen: false,
+      isDownloadScreenShotDialogOpen: false,
     };
 
     this._handleBuiltIn = _handleBuiltIn.bind(this);
 
+    this.toggleDownloadDialog = toggleDownloadDialog.bind(this);
+
     const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
     this.buttonGroups = {
       left: [
@@ -111,6 +116,13 @@ class ToolbarRow extends Component {
       zIndex: 999,
     };
 
+    const downloadScreenShotContainerStyle = {
+      display: this.state.isDownloadScreenShotDialogOpen ? 'block' : 'none',
+      position: 'absolute',
+      top: '82px',
+      zIndex: 1001,
+    };
+
     const onPress = (side, value) => {
       this.props.handleSidePanelChange(side, value);
     };
@@ -146,6 +158,12 @@ class ToolbarRow extends Component {
         <div className="CineDialogContainer" style={cineDialogContainerStyle}>
           <ConnectedCineDialog />
         </div>
+        <div className="DownloadScreenShotContainer" style={downloadScreenShotContainerStyle}>
+          <ConnectedDownloadDialog
+            isOpen={this.state.isDownloadScreenShotDialogOpen}
+            toggleDownloadDialog={this.toggleDownloadDialog}
+          />
+        </div>
       </>
     );
   }
@@ -277,12 +295,25 @@ function _getVisibleToolbarButtons() {
   return toolbarButtonDefinitions;
 }
 
+/**
+ * Toggles the Download Dialog Modal
+ */
+function toggleDownloadDialog() {
+  this.setState({
+    isDownloadScreenShotDialogOpen: !this.state.isDownloadScreenShotDialogOpen,
+  });
+}
+
 function _handleBuiltIn({ behavior } = {}) {
   if (behavior === 'CINE') {
     this.setState({
       isCineDialogOpen: !this.state.isCineDialogOpen,
     });
   }
+
+  if (behavior === 'DOWNLOAD_SCREEN_SHOT') {
+    this.toggleDownloadDialog();
+  }
 }
 
 export default withTranslation('Common')(ToolbarRow);

platform/viewer/src/theme-tide.css

@@ -38,8 +38,10 @@
     --text-disabled-color: #878787;
 
     --input-background-color: #2c363f;
+    --input-placeholder-color--hover: #4d5a63;
     --input-placeholder-color: #d3d3d3;
 
+
     --table-hover-color: #2c363f;
     --table-text-primary-color: #ffffff;
     --table-text-secondary-color: #91b9cd;