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/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);