othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Converting the modal to the new structure and styling it

Browse Source
This commit is contained in:
Bruno Alves de Faria 2018-01-16 18:41:08 -02:00
parent d03a03ce76
commit 56093a9d68
9 changed files with 286 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LesionTracker/client/components/toolbarSection/toolbarSection.js
View File

@ -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({

1
LesionTracker/client/components/viewer/viewer.html
View File

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

1
OHIFViewer/client/components/viewer/viewer.html
View File

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

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

@ -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}}

5
Packages/ohif-design/styles/common/global.styl
View File

@ -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%

58
Packages/ohif-viewerbase/client/components/viewer/downloadDialog/downloadDialog.html
View File

@ -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>
-->
</template>

306
Packages/ohif-viewerbase/client/components/viewer/downloadDialog/downloadDialog.js
View File

@ -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) {
$(element)[size](value);
canvas[size] = value;
canvas.style[size] = `${value}px`;
}
Template.downloadDialog.onCreated(() => {
Template.imageDownloadDialog.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) {
cornerstone.displayImage(instance.$previewElement, image);
cornerstone.displayImage(instance.$downloadElement, image);
cornerstone.resize(instance.$previewElement, true);
const viewport = Object.assign({}, enabledElement.viewport);
delete viewport.scale;
viewport.translation = {
x: 0,
y: 0
};
setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'width', 300);
setElementSize(instance.$downloadElement, instance.$downloadCanvas, 'height', 200);
cornerstone.loadImage(enabledElement.image.imageId).then(image => {
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(() => {
const instance = Template.instance();
const $dialog = instance.$('#downloadDialog');
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.helpers({
keepAspect() {
return Template.instance().keepAspect.get();
}
});
});
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();
// }
// });

15
Packages/ohif-viewerbase/client/components/viewer/downloadDialog/downloadDialog.styl
View File

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

6
Packages/ohif-viewerbase/client/lib/viewportUtils.js
View File

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