Converting the modal to the new structure and styling it

LesionTracker/client/components/toolbarSection/toolbarSection.js

@@ -129,7 +129,7 @@ Template.toolbarSection.helpers({
             title: 'Download',
             classes: 'imageViewerCommand',
             iconClasses: 'fa fa-camera',
-            active: () => $('#downloadDialog').is(':visible')
+            active: () => $('#imageDownloadDialog').is(':visible')
         });
 
         extraTools.push({

LesionTracker/client/components/viewer/viewer.html

@@ -3,7 +3,6 @@
         {{#if and Template.subscriptionsReady dataSourcesReady}}
             {{>confirmDeleteDialog}}
             {{>measurementTableHUD (clone this)}}
-            {{>downloadDialog}}
             {{>cineDialog}}
         {{/if}}
     </div>

OHIFViewer/client/components/viewer/viewer.html

@@ -2,7 +2,6 @@
     {{#if and Template.subscriptionsReady}}
         <div class="viewerDialogs">
             {{>cineDialog}}
-            {{>downloadDialog}}
             {{>layoutChooser}}
             {{>annotationDialogs}}
 

Packages/ohif-core/client/components/bootstrap/dialog/form.html

@@ -1,7 +1,7 @@
 <template name="dialogForm">
     <div id="{{this.id}}" class="modal fade {{this.class}}" tabindex="-1" role="dialog">
         <div class="modal-dialog {{this.dialogClass}}" role="document">
-            {{#form class='modal-content' hideValidationBox=true
+            {{#form class=(concat 'modal-content ' this.formClass) hideValidationBox=true
                 api=(extend instance.api instance.data.api) schema=this.schema
             }}
                 {{>dialogHeader this}}

Packages/ohif-design/styles/common/global.styl

@@ -128,6 +128,11 @@ body .select2-container--default .select2-results>.select2-results__options
     &:hover
       theme('color', '$textPrimaryColor')
 
+  .card-round
+    theme('background-color', '$uiGrayDark')
+    border-radius(5px)
+    padding: 10px
+
 .full-width
   width: 100%
 

Packages/ohif-viewerbase/client/components/viewer/downloadDialog/downloadDialog.html

@@ -1,4 +1,57 @@
-<template name="downloadDialog">
+<template name="imageDownloadDialog">
+    {{#dialogForm (extend this
+        title='Download High Quality Image'
+        class='themed'
+        dialogClass='modal-lg'
+        formClass='form-themed'
+        confirmLabel='Download'
+        cancelLabel='Cancel'
+        id='imageDownloadDialog'
+        schema=instance.schema
+    )}}
+        <h5>Please specify the dimensions, filename, and desired type for the output image.</h5>
+        <div class="card-round">
+            <div class="row m-t-2">
+                <div class="col-lg-4">
+                    <table class="full-width">
+                        <tbody>
+                            <tr>
+                                <td class="text-right p-r-1">Width</td>
+                                <td>{{>inputText key='width'}}</td>
+                                <td class="p-l-1" rowspan="2">
+                                    <button class="btn btn-secondary js-keep-aspect {{#if keepAspect}}active{{/if}}" title="Keep aspect ratio">
+                                        <i class="fa fa-chain{{#unless keepAspect}}-broken{{/unless}}"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="text-right p-r-1">Height</td>
+                                <td>{{>inputText key='height'}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="col-lg-5">
+                    <table class="full-width">
+                        <tbody>
+                            <tr>
+                                <td class="text-right p-r-1">File name</td>
+                                <td>{{>inputText key='name'}}</td>
+                            </tr>
+                            <tr>
+                                <td class="text-right p-r-1">File type</td>
+                                <td>{{>inputSelect key='type'}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="col-lg-3">{{>inputCheckbox key='showAnnotations'}}</div>
+            </div>
+        </div>
+        <div class="viewport-element hidden"></div>
+        <img class="viewport-preview" />
+    {{/dialogForm}}
+    <!--
     <dialog id="downloadDialog">
         {{#form id='downloadDialogForm' schema=instance.schema api=instance.api}}
             <div class="instructions">Please specify the dimensions, filename, and desired type for the output image.</div>
@@ -38,4 +91,5 @@
             </div>
         {{/form}}
     </dialog>
+    -->
 </template>

Packages/ohif-viewerbase/client/components/viewer/downloadDialog/downloadDialog.js

@@ -1,110 +1,232 @@
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
 import { Session } from 'meteor/session';
+import { $ } from 'meteor/jquery';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 import { OHIF } from 'meteor/ohif:core';
-import { viewportUtils } from '../../../lib/viewportUtils';
+import { cornerstone } from 'meteor/ohif:cornerstone';
 
-function setElementSize(element, canvas, size, value) {
+Template.imageDownloadDialog.onCreated(() => {
-    $(element)[size](value);
-    canvas[size] = value;
-    canvas.style[size] = `${value}px`;
-}
-
-Template.downloadDialog.onCreated(() => {
     const instance = Template.instance();
 
+    instance.schema = new SimpleSchema({
+        width: { type: Number },
+        height: { type: Number },
+        name: {
+            type: String,
+            defaultValue: 'image'
+        },
+        type: {
+            type: String,
+            allowedValues: ['jpeg', 'png'],
+            valuesLabels: ['JPEG', 'PNG'],
+            defaultValue: 'jpeg'
+        },
+        showAnnotations: {
+            type: Boolean,
+            label: 'Show Annotations',
+            defaultValue: false
+        }
+    });
+
+    instance.keepAspect = new ReactiveVar(true);
+    instance.showAnnotations = new ReactiveVar(false);
+});
+
+Template.imageDownloadDialog.onRendered(() => {
+    const instance = Template.instance();
+    const { viewportUtils } = OHIF.viewerbase;
+
+    instance.quality = 1;
+    instance.$viewportElement = instance.$('.viewport-element');
+    instance.viewportElement = instance.$viewportElement[0];
+    instance.$viewportPreview = instance.$('.viewport-preview');
+    instance.viewportPreview = instance.$viewportPreview[0];
+
+    cornerstone.enable(instance.viewportElement);
+    instance.downloadCanvas = $(instance.viewportElement).find('canvas')[0];
+
+    instance.form = instance.$('form').data('component');
+
+    instance.setElementSize = (element, canvas, size, value) => {
+        $(element)[size](value);
+        canvas[size] = value;
+        canvas.style[size] = `${value}px`;
+
+        instance.form.item(size).value(value);
+    };
+
+    instance.updateViewportPreview = () => {
+        instance.$viewportElement.one('CornerstoneImageRendered', (event, enabledElement) => {
+            const image = instance.viewportPreview;
+            const type = 'image/' + instance.form.item('type').value();
+            const dataUrl = instance.downloadCanvas.toDataURL(type, instance.quality);
+            image.src = dataUrl;
+
+            const $element = $(enabledElement.element);
+            let width = $element.width();
+            let height = $element.height();
+            if (width > 512 || height > 512) {
+                const multiplier = 512 / Math.max(width, height);
+                height *= multiplier;
+                width *= multiplier;
+            }
+
+            image.width = width;
+            image.height = height;
+        });
+    };
+
     instance.autorun(() => {
         Session.get('UpdateDownloadViewport');
         const activeViewport = viewportUtils.getActiveViewportElement();
 
         if (activeViewport) {
-          const enabledElement = cornerstone.getEnabledElement(activeViewport);
+            const enabledElement = cornerstone.getEnabledElement(activeViewport);
+            const { width, height } = enabledElement.image;
 
-          cornerstone.loadImage(enabledElement.image.imageId).then(function (image) {
+            const viewport = Object.assign({}, enabledElement.viewport);
-            cornerstone.displayImage(instance.$previewElement, image);
+            delete viewport.scale;
-            cornerstone.displayImage(instance.$downloadElement, image);
+            viewport.translation = {
-            cornerstone.resize(instance.$previewElement, true);
+                x: 0,
+                y: 0
+            };
 
-            setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'width', 300);
+            cornerstone.loadImage(enabledElement.image.imageId).then(image => {
-            setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'height', 200);
+                cornerstone.displayImage(instance.viewportElement, image);
+                cornerstone.setViewport(instance.viewportElement, viewport);
+                cornerstone.resize(instance.viewportElement, true);
 
-            cornerstone.fitToWindow(instance.$downloadElement);
+                instance.setElementSize(instance.viewportElement, instance.downloadCanvas, 'width', width);
-          });
+                instance.setElementSize(instance.viewportElement, instance.downloadCanvas, 'height', height);
+
+                cornerstone.fitToWindow(instance.viewportElement);
+                instance.updateViewportPreview();
+            });
         }
-    })
+    });
 });
 
-Template.downloadDialog.onRendered(() => {
+Template.imageDownloadDialog.helpers({
-    const instance = Template.instance();
+    keepAspect() {
-    const $dialog = instance.$('#downloadDialog');
+        return Template.instance().keepAspect.get();
-
-    instance.$previewElement = $('#previewElement')[0];
-    instance.$downloadElement = document.createElement('div');
-    instance.availableTools = ['length', 'probe', 'simpleAngle', 'arrowAnnotate', 'ellipticalRoi', 'rectangleRoi'];
-    instance.showAnnotations = false;
-
-    cornerstone.enable(instance.$previewElement);
-    cornerstone.enable(instance.$downloadElement);
-    instance.$downloadCanvas = $(instance.$downloadElement).find('canvas')[0];
-
-    // Make the dialog bounded and draggable
-    $dialog.draggable({ defaultElementCursor: 'move' });
-
-    // Polyfill for older browsers
-    dialogPolyfill.registerDialog($dialog.get(0));
-
-    // // Prevent dialog from being dragged when user clicks any button
-    const $controls = $dialog.find('.form-group, .instructions');
-    $controls.on('mousedown touchstart', event => event.stopPropagation());
-});
-
-Template.downloadDialog.events({
-    'change .form-group input[name=width]'(event, instance){
-        const width = $(event.currentTarget).val();
-
-        setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'width', width);
-        cornerstone.fitToWindow(instance.$downloadElement);
-    },
-
-    'change .form-group input[name=height]'(event, instance){
-        const height = $(event.currentTarget).val();
-
-        setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'height', height);
-        cornerstone.fitToWindow(instance.$downloadElement);
-    },
-
-    'change #downloadDialog .form-group .form-check input[type=checkbox]'(event, instance) {
-        const $previewElement = instance.$previewElement;
-        const $downloadElement = instance.$downloadElement;
-
-        instance.showAnnotations = !instance.showAnnotations;
-
-        const action = (instance.showAnnotations) ? 'enable' : 'disable';
-
-        instance.availableTools.forEach(tool => {
-            cornerstoneTools[tool][action]($previewElement);
-            cornerstoneTools[tool][action]($downloadElement);
-        });
-    },
-
-    'click .dropdown-menu .dropdown-item'(event, instance) {
-        const extension = $(event.currentTarget).text();
-        const $extensionButton = $('.btn.extension');
-
-        $extensionButton.text(extension);
-    },
-
-    'click button.download'(event, instance) {
-        const fileName = $('.fileName').val();
-        const extension = $('.btn.extension').text().trim();
-
-        if (!fileName || !extension) {
-          return;
-        }
-
-        cornerstoneTools.saveAs(instance.$downloadElement, `${fileName}.${extension}`, `image/${extension}`);
-    },
-
-    'click button.cancel'(event, instance) {
-        viewportUtils.toggleDownloadDialog();
     }
 });
+
+Template.imageDownloadDialog.events({
+    'click .js-keep-aspect'(event, instance) {
+        const currentState = instance.keepAspect.get();
+        instance.keepAspect.set(!currentState);
+    }
+});
+
+// import { Template } from 'meteor/templating';
+// import { Session } from 'meteor/session';
+// import { OHIF } from 'meteor/ohif:core';
+// import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
+//
+// function setElementSize(element, canvas, size, value) {
+//     $(element)[size](value);
+//     canvas[size] = value;
+//     canvas.style[size] = `${value}px`;
+// }
+//
+// Template.imageDownloadDialog.onCreated(() => {
+//     const instance = Template.instance();
+//     const { viewportUtils } = OHIF.viewerbase;
+//
+//     instance.autorun(() => {
+//         Session.get('UpdateDownloadViewport');
+//         const activeViewport = viewportUtils.getActiveViewportElement();
+//
+//         if (activeViewport) {
+//             const enabledElement = cornerstone.getEnabledElement(activeViewport);
+//
+//             cornerstone.loadImage(enabledElement.image.imageId).then(function(image) {
+//                 cornerstone.displayImage(instance.$previewElement, image);
+//                 cornerstone.displayImage(instance.$downloadElement, image);
+//                 cornerstone.resize(instance.$previewElement, true);
+//
+//                 setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'width', 300);
+//                 setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'height', 200);
+//
+//                 cornerstone.fitToWindow(instance.$downloadElement);
+//             });
+//         }
+//     });
+// });
+//
+// Template.imageDownloadDialog.onRendered(() => {
+//     const instance = Template.instance();
+//     const $dialog = instance.$('#imageDownloadDialog');
+//
+//     instance.$previewElement = $('#previewElement')[0];
+//     instance.$downloadElement = document.createElement('div');
+//     instance.availableTools = ['length', 'probe', 'simpleAngle', 'arrowAnnotate', 'ellipticalRoi', 'rectangleRoi'];
+//     instance.showAnnotations = false;
+//
+//     cornerstone.enable(instance.$previewElement);
+//     cornerstone.enable(instance.$downloadElement);
+//     instance.$downloadCanvas = $(instance.$downloadElement).find('canvas')[0];
+//
+//     // Make the dialog bounded and draggable
+//     $dialog.draggable({ defaultElementCursor: 'move' });
+//
+//     // Polyfill for older browsers
+//     dialogPolyfill.registerDialog($dialog.get(0));
+//
+//     // // Prevent dialog from being dragged when user clicks any button
+//     const $controls = $dialog.find('.form-group, .instructions');
+//     $controls.on('mousedown touchstart', event => event.stopPropagation());
+// });
+//
+// Template.imageDownloadDialog.events({
+//     'change .form-group input[name=width]'(event, instance){
+//         const width = $(event.currentTarget).val();
+//
+//         setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'width', width);
+//         cornerstone.fitToWindow(instance.$downloadElement);
+//     },
+//
+//     'change .form-group input[name=height]'(event, instance){
+//         const height = $(event.currentTarget).val();
+//
+//         setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'height', height);
+//         cornerstone.fitToWindow(instance.$downloadElement);
+//     },
+//
+//     'change #imageDownloadDialog .form-group .form-check input[type=checkbox]'(event, instance) {
+//         const $previewElement = instance.$previewElement;
+//         const $downloadElement = instance.$downloadElement;
+//
+//         instance.showAnnotations = !instance.showAnnotations;
+//
+//         const action = (instance.showAnnotations) ? 'enable' : 'disable';
+//
+//         instance.availableTools.forEach(tool => {
+//             cornerstoneTools[tool][action]($previewElement);
+//             cornerstoneTools[tool][action]($downloadElement);
+//         });
+//     },
+//
+//     'click .dropdown-menu .dropdown-item'(event, instance) {
+//         const extension = $(event.currentTarget).text();
+//         const $extensionButton = $('.btn.extension');
+//
+//         $extensionButton.text(extension);
+//     },
+//
+//     'click button.download'(event, instance) {
+//         const fileName = $('.fileName').val();
+//         const extension = $('.btn.extension').text().trim();
+//
+//         if (!fileName || !extension) return;
+//
+//         cornerstoneTools.saveAs(instance.$downloadElement, `${fileName}.${extension}`, `image/${extension}`);
+//     },
+//
+//     'click button.cancel'(event, instance) {
+//         const { viewportUtils } = OHIF.viewerbase;
+//         viewportUtils.toggleDownloadDialog();
+//     }
+// });

Packages/ohif-viewerbase/client/components/viewer/downloadDialog/downloadDialog.styl

@@ -1,11 +1,12 @@
 @import "{ohif:design}/app"
 
-#downloadDialog
+#imageDownloadDialog
-  theme('border', '2px solid $uiBorderColor', 0.95)
+
-  theme('background', '$uiGrayDarkest', 0.95)
+  .viewport-preview
-  theme('color', '$textSecondaryColor')
+    max-width: 512px
-  width: 626px
+    max-height: 512px
-  z-index: 1000
+
+
 
   .instructions
     margin-bottom: 20px

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

@@ -228,12 +228,8 @@ const toggleCineDialog = () => {
 };
 
 const toggleDownloadDialog = () => {
-    const dialog = document.getElementById('downloadDialog');
-
     stopActiveClip();
-    toggleDialog(dialog);
+    OHIF.ui.showDialog('imageDownloadDialog');
-
-    Session.set('UpdateDownloadViewport', Random.id());
 };
 
 const isDownloadEnabled = () => {