OHIF-184: Add menu tool option to download viewport as PNG or JPEG (#130)

* OHIF-184: added download icon to the OHIF's tool bar

* OHIF-184: refactor dialog toggle method to support cine dialog and download dialog

* OHIF-184: Added hotKey support for downloadDialog.

* OHIF-184: added disabled verify function

* OHIF-184: Finished form structure. Created preview canvas. Added width and height config of the preview. Added the download feature. Added Cancel button.

* OHIF-184: setting default extension as png

* OHIF-184: moved download icon to more in toolbar

* OHIF-184: enabling/disabling tools when toggling show annotations checkbox

* OHIF-184: using a dynamic canvas to create the download content

* OHIF-184: Download with configurable width and height. download distorced

* OHIF-184: using dynamic elemento to manage download image instead of using the preview element

* OHIF-184: make dialog dragable through preview

* OHIF-184: removing useless line

* OHIF-184: adding download icon to leasion tracker

* OHIF-184: adding download dialog template to lesion tracker viewer

Packages/ohif-viewerbase/client/lib/hotkeyUtils.js

@@ -62,6 +62,7 @@ Meteor.startup(function() {
         toggleOverlayTags: 'SHIFT',
         toggleCinePlay: 'SPACE',
         toggleCineDialog: '',
+        toggleDownloadDialog: '',
 
         // Preset hotkeys
         WLPreset0: '1',
@@ -218,6 +219,11 @@ Meteor.startup(function() {
             name: 'Show/Hide Cine Controls',
             action: viewportUtils.toggleCineDialog,
             disabled: OHIF.viewerbase.viewportUtils.hasMultipleFrames
+        },
+        toggleDownloadDialog: {
+            name: 'Show/Hide Download Dialog',
+            action: viewportUtils.toggleDownloadDialog,
+            disabled: () => !viewportUtils.isDownloadEnabled()
         }
     }, true);
 

Packages/ohif-viewerbase/client/lib/viewportUtils.js

@@ -172,11 +172,11 @@ const linkStackScroll = () => {
 
 // This function was originally defined alone inside client/lib/toggleDialog.js
 // and has been moved here to avoid circular dependency issues.
-const toggleDialog = element => {
+const toggleDialog = (element, closeAction) => {
     const $element = $(element);
     if($element.is('dialog')) {
         if (element.hasAttribute('open')) {
-            stopAllClips();
+            if (closeAction) closeAction();
             element.close();
         } else {
             element.show();
@@ -187,8 +187,6 @@ const toggleDialog = element => {
         $element.toggleClass('dialog-closed', isClosed);
         $element.toggleClass('dialog-open', !isClosed);
     }
-
-    Session.set('UpdateCINE', Math.random());
 };
 
 // Toggle the play/stop state for the cornerstone clip tool
@@ -210,7 +208,24 @@ const toggleCinePlay = () => {
 // Show/hide the CINE dialog
 const toggleCineDialog = () => {
     const dialog = document.getElementById('cineDialog');
+
+    toggleDialog(dialog, stopAllClips);
+    Session.set('UpdateCINE', Random.id());
+};
+
+const toggleDownloadDialog = () => {
+    const dialog = document.getElementById('downloadDialog');
+
+    stopActiveClip();
     toggleDialog(dialog);
+
+    Session.set('UpdateDownloadViewport', Random.id());
+};
+
+const isDownloadEnabled = () => {
+    const activeViewport = getActiveViewportElement();
+
+    return activeViewport ? true : false;
 };
 
 // Check if the clip is playing on the active viewport
@@ -287,6 +302,14 @@ const stopAllClips = () => {
     });
 };
 
+const stopActiveClip = () => {
+    const activeElement = getActiveViewportElement();
+
+    if ($(activeElement).find('canvas').length) {
+        cornerstoneTools.stopClip(activeElement);
+    }
+}
+
 
 const isStackScrollLinkingDisabled = () => {
     let linkableViewportsCount = 0;
@@ -329,7 +352,9 @@ const viewportUtils = {
     toggleDialog,
     toggleCinePlay,
     toggleCineDialog,
+    toggleDownloadDialog,
     isPlaying,
+    isDownloadEnabled,
     hasMultipleFrames,
     stopAllClips,
     isStackScrollLinkingDisabled