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

LT-253: Creating dynamic form components

Browse Source
This commit is contained in:
Bruno Alves de Faria authored and Erik Ziegler committed 2016-07-22 11:12:04 +02:00
1 parent 88f737644f
commit cb875b1913
72 files changed
+1169 -126
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
+2
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
toggleCinePlay = function() {
var element = getActiveViewportElement();
var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
Packages/viewerbase/client/components/viewer/gridLayout/gridLayout.js
+2
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
Template.gridLayout.helpers({
height: function() {
var rows = this.rows || 1;
Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
+5 -3
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
var allCornerstoneEvents = 'CornerstoneToolsMouseDown CornerstoneToolsMouseDownActivate ' +
'CornerstoneToolsMouseClick CornerstoneToolsMouseDrag CornerstoneToolsMouseUp ' +
'CornerstoneToolsMouseWheel CornerstoneToolsTap CornerstoneToolsTouchPress ' +
@@ -115,7 +117,7 @@ function loadSeriesIntoViewport(data, templateData) {
templateData.imageId = imageId;
// Save the current image ID inside the ViewportLoading object.
//
//
// The ViewportLoading object relates the viewport elements with whichever
// image is currently being loaded into them. This is useful so that we can
// place progress (download %) for each image inside the proper viewports.
@@ -144,7 +146,7 @@ function loadSeriesIntoViewport(data, templateData) {
}
// Update the enabled element with the image and viewport data
// This is not usually necessary, but we need them stored in case
// This is not usually necessary, but we need them stored in case
// a sopClassUid-specific viewport setting is present.
enabledElement.image = image;
enabledElement.viewport = cornerstone.getDefaultViewport(enabledElement.canvas, image);
@@ -564,4 +566,4 @@ Template.imageViewerViewport.events({
var viewportIndex = $('.imageViewerViewport').index(e.currentTarget);
layoutManager.toggleEnlargement(viewportIndex);
}
});
});
Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.js
+3 -1
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
Meteor.startup(function() {
cornerstoneTools.loadHandlerManager.setStartLoadHandler(startLoadingHandler);
cornerstoneTools.loadHandlerManager.setEndLoadHandler(doneLoadingHandler);
@@ -67,4 +69,4 @@ Template.loadingIndicator.helpers({
return percentComplete + '%';
}
}
});
});
Packages/viewerbase/client/components/viewer/playClipButton/playClipButton.js
+2
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
toggleCinePlay = function(element) {
var viewports = $('.imageViewerViewport');
Packages/viewerbase/client/components/viewer/toolbar/toolbar.js
+2
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
function getDefaultButtonData() {
var buttonData = [];
Packages/viewerbase/lib/WLPresets.js
+2
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
applyWLPreset = function(presetName, element) {
log.info("Applying WL Preset: " + presetName);
var viewport = cornerstone.getViewport(element);
Packages/viewerbase/lib/displayReferenceLines.js
+4 -2
View File
@@ -1,6 +1,8 @@
import { OHIF } from 'meteor/ohif:core';
/**
* This function disables reference lines for a specific viewport element.
* It also enables reference lines for all other viewports with the
* It also enables reference lines for all other viewports with the
* class .imageViewerViewport.
*
* @param element {node} DOM Node representing the viewport element
@@ -36,4 +38,4 @@ displayReferenceLines = function(element) {
cornerstoneTools.referenceLines.tool.enable(element, OHIF.viewer.updateImageSynchronizer);
});
};
};
Packages/viewerbase/lib/enableHotkeys.js
+3 -3
View File
@@ -1,4 +1,4 @@
OHIF = window.OHIF || {};
import { OHIF } from 'meteor/ohif:core';
Meteor.startup(function() {
@@ -31,7 +31,7 @@ Meteor.startup(function() {
WLPresetBone: ['NUMPAD4', '4'],
WLPresetBrain: ['NUMPAD5', '5']
};
// For now
OHIF.viewer.hotkeys = OHIF.viewer.defaultHotkeys;
@@ -262,7 +262,7 @@ function bindHotkey(hotkey, task) {
} else {
fn = hotkeyFunctions[task];
// If the function doesn't exist in the
// If the function doesn't exist in the
// hotkey function list, try the viewer-specific function list
if (!fn && OHIF.viewer && OHIF.viewer.functionList) {
fn = OHIF.viewer.functionList[task];
Packages/viewerbase/lib/helpers/blaze.js
-38
View File
@@ -1,38 +0,0 @@
// Return the current template instance
Template.registerHelper('instance', () => {
return Template.instance();
});
// Return the session value for the given key
Template.registerHelper('session', key => {
return Session.get(key);
});
// Create a new object and extends it with the argument objects
Template.registerHelper('extend', (...argsArray) => {
// Create the resulting object
const result = {};
// Extract the Spacebars kw hash
const kwHash = _.last(argsArray).hash;
// Extract the given objects
const objects = _.initial(argsArray);
// Iterate over the given objects
_.each(objects, current => {
// Stop here if the current argument is not an object
if (typeof current !== 'object') {
return;
}
// Extend the resulting object with the current argument object
_.extend(result, current);
});
// Extend the resulting object with the Spacebars kw hash
_.extend(result, kwHash);
// Return the resulting object
return result;
});
Packages/viewerbase/lib/helpers/logical.js
-69
View File
@@ -1,69 +0,0 @@
/**
* Global Blaze UI helpers to work with logical operations
*/
// Convert any value into a boolean value
Template.registerHelper('bool', value => {
return !!value;
});
// Check if two values are identical
Template.registerHelper('eq', (a, b) => {
return a === b;
});
// Check if two values are different
Template.registerHelper('ne', (a, b) => {
return a === b;
});
// Check if the first value is greater than the second one
Template.registerHelper('gt', (a, b) => {
return a > b;
});
// Check if the first value is lesser than the second one
Template.registerHelper('lt', (a, b) => {
return a < b;
});
// Check if the first value is greater than or equals the second one
Template.registerHelper('gte', (a, b) => {
return a >= b;
});
// Check if the first value is lesser than or equals the second one
Template.registerHelper('lte', (a, b) => {
return a <= b;
});
// Get the boolean negation for the given value
Template.registerHelper('not', value => {
return !value;
});
// Check if all the given values are true
Template.registerHelper('and', (...values) => {
let result = true;
_.each(_.initial(values, 1), value => value || (result = false));
return result;
});
// Check if one of the given values is true
Template.registerHelper('or', (...values) => {
let result = false;
_.each(_.initial(values, 1), value => value && (result = true));
return result;
});
// Choose the first truthy value in the given values
Template.registerHelper('choose', (...values) => {
let result;
_.each(_.initial(values, 1), value => value && (result = value));
return result;
});
// Check if the value is different from undefined
Template.registerHelper('isDefined', value => {
return typeof value !== 'undefined';
});
Packages/viewerbase/lib/toolManager.js
+2
View File
@@ -1,3 +1,5 @@
import { OHIF } from 'meteor/ohif:core';
var activeTool = 'wwwc';
var defaultTool = 'wwwc';
Packages/viewerbase/lib/ui/draggable/draggable.js
-110
View File
@@ -1,110 +0,0 @@
// Allow attaching to jQuery selectors
$.fn.draggable = function() {
makeDraggable(this);
return this;
};
/**
* This function makes an element movable around the page.
* It supports mouse and touch input and allows whichever element
* is specified to be moved to any arbitrary position.
*
* @param element
*/
makeDraggable = function(element) {
var container = $(window);
var diffX,
diffY;
function getCursorCoords(e) {
var cursor = {
x: e.clientX,
y: e.clientY
};
// Handle touchMove cases
if (cursor.x === undefined) {
cursor.x = e.originalEvent.touches[0].pageX;
}
if (cursor.y === undefined) {
cursor.y = e.originalEvent.touches[0].pageY;
}
return cursor;
}
function startMoving(e) {
// Prevent dragging dialog by clicking on slider
// (could be extended for buttons, not sure it's necessary
if (e.target.type && e.target.type === 'range') {
return;
}
var elementTop = parseFloat(element.offset().top),
elementLeft = parseFloat(element.offset().left);
var cursor = getCursorCoords(e);
diffX = cursor.x - elementLeft;
diffY = cursor.y - elementTop;
container.css('cursor', 'move');
element.css('cursor', 'move');
element.css({
cursor: 'move',
left: elementLeft + 'px',
top: elementTop + 'px',
bottom: 'auto', // Setting these to empty doesn't seem to work in Firefox or Safari
right: 'auto'
});
$(document).on('mousemove', moveHandler);
$(document).on('mouseup', stopMoving);
$(document).on('touchmove', moveHandler);
$(document).on('touchend', stopMoving);
}
function stopMoving() {
container.css('cursor', 'default');
element.css('cursor', 'default');
$(document).off('mousemove', moveHandler);
$(document).off('touchmove', moveHandler);
}
function moveHandler(e) {
// Prevent dialog box dragging whole page in iOS
e.preventDefault();
var elementWidth = parseFloat(element.outerWidth()),
elementHeight = parseFloat(element.outerHeight()),
containerWidth = parseFloat(container.width()),
containerHeight = parseFloat(container.height());
var cursor = getCursorCoords(e);
var elementLeft = cursor.x - diffX;
var elementTop = cursor.y - diffY;
elementLeft = Math.max(elementLeft, 0);
elementTop = Math.max(elementTop, 0);
if (elementLeft + elementWidth > containerWidth) {
elementLeft = containerWidth - elementWidth;
}
if (elementTop + elementHeight > containerHeight) {
elementTop = containerHeight - elementHeight;
}
element.css({
left: elementLeft + 'px',
top: elementTop + 'px',
bottom: 'auto', // Setting these to empty doesn't seem to work in Firefox or Safari
right: 'auto'
});
}
element.on('mousedown', startMoving);
element.on('touchstart', startMoving);
};
Packages/viewerbase/lib/ui/resizable/resizable.js
-147
View File
@@ -1,147 +0,0 @@
// Allow attaching to jQuery selectors
$.fn.resizable = function(options) {
_.each(this, element => {
const resizableInstance = $(element).data('resizableInstance');
if (options === 'destroy' && resizableInstance) {
$(element).removeData('resizableInstance');
resizableInstance.destroy();
} else {
if (resizableInstance) {
resizableInstance.options(options);
} else {
$(element).data('resizableInstance', new Resizable(element, options));
}
}
});
return this;
};
/**
* This class makes an element resizable.
*/
class Resizable {
constructor(element, options={}) {
this.element = element;
this.$element = $(element);
this.options(options);
}
options(options={}) {
const { boundSize, minWidth, minHeight } = options;
this.minWidth = minWidth || this.$element.width() || 16;
this.minHeight = minHeight || this.$element.height() || 16;
this.boundSize = boundSize || 8;
this.destroy();
this.init();
}
init() {
for (var x = -1; x <= 1; x++) {
for (var y = -1; y <= 1; y++) {
this.createBound(x, y);
}
}
this.$element.addClass('resizable');
}
destroy() {
this.$element.removeClass('resizable').find('resize-bound').remove();
}
attachEventHandlers($bound, xDirection, yDirection) {
const $window = $(window);
const initResizeHandler = event => {
event.stopPropagation();
this.width = this.initialWidth = this.$element.width();
this.height = this.initialHeight = this.$element.height();
this.startWidth = this.width;
this.startHeight = this.height;
this.posX = parseInt(this.$element.css('left'));
this.posY = parseInt(this.$element.css('top'));
this.startPosX = this.posX;
this.startPosY = this.posY;
this.startX = event.clientX;
this.startY = event.clientY;
this.$element.addClass('resizing');
$window.on('mousemove', resizeHandler);
$window.on('mouseup', endResizeHandler);
};
const resizeHandler = event => {
let x, y;
x = event.clientX < 0 ? 0 : event.clientX;
x = x > window.innerWidth ? window.innerWidth : x;
y = event.clientY < 0 ? 0 : event.clientY;
y = y > window.innerHeight ? window.innerHeight : y;
const xDistance = (x - this.startX) * xDirection;
const yDistance = (y - this.startY) * yDirection;
const width = xDistance + this.startWidth;
const height = yDistance + this.startHeight;
this.width = width < this.minWidth ? this.minWidth : width;
this.height = height < this.minHeight ? this.minHeight : height;
this.$element.width(this.width);
this.$element.height(this.height);
if (xDirection < 0) {
this.posX = this.startPosX - xDistance;
if (width < this.minWidth) {
this.posX = this.startPosX + (this.startWidth - this.minWidth);
}
this.$element.css('left', `${this.posX}px`);
}
if (yDirection < 0) {
this.posY = this.startPosY - yDistance;
if (height < this.minHeight) {
this.posY = this.startPosY + (this.startHeight - this.minHeight);
}
this.$element.css('top', `${this.posY}px`);
}
};
const endResizeHandler = event => {
$window.off('mousemove', resizeHandler);
$window.off('mouseup', endResizeHandler);
this.$element.removeClass('resizing');
};
$bound.on('mousedown', initResizeHandler);
}
createBound(xDirection, yDirection) {
if (xDirection === 0 && xDirection === yDirection) {
return;
}
const $bound = $('<div class="resize-bound"></div>');
$bound[0].onselectstart = () => false;
$bound.css('font-size', `${this.boundSize}px`);
const mapX = ['left', 'center', 'right'];
const mapY = ['top', 'middle', 'bottom'];
$bound.addClass('bound-' + mapX[xDirection + 1]);
$bound.addClass('bound-' + mapY[yDirection + 1]);
$bound.appendTo(this.$element);
this.attachEventHandlers($bound, xDirection, yDirection);
}
}
Packages/viewerbase/lib/ui/resizable/resizable.styl
-55
View File
@@ -1,55 +0,0 @@
@import "{design}/app"
.resizable
transform(scale(1))
&.resizing, .resize-bound
user-select: none
-webkit-touch-callout: none
-webkit-user-select: none
-khtml-user-select: none
-moz-user-select: none
-ms-user-select: none
.resize-bound
content: ''
line-height: 1em
position: fixed
.bound-left
left: 0
width: 1em
.bound-center
left: 1em
height: 1em
right: 1em
.bound-right
right: 0
width: 1em
.bound-top
top: 0
height: 1em
.bound-middle
top: 1em
width: 1em
bottom: 1em
.bound-bottom
bottom: 0
height: 1em
.bound-left.bound-top, .bound-right.bound-bottom
cursor: nwse-resize
.bound-left.bound-bottom, .bound-right.bound-top
cursor: nesw-resize
.bound-left.bound-middle, .bound-right.bound-middle
cursor: ew-resize
.bound-center.bound-top, .bound-center.bound-bottom
cursor: ns-resize
Packages/viewerbase/package.js
-6
View File
@@ -117,9 +117,6 @@ Package.onUse(function(api) {
api.addFiles('lib/toolManager.js', 'client');
api.addFiles('lib/enablePrefetchOnElement.js', 'client');
api.addFiles('lib/displayReferenceLines.js', 'client');
api.addFiles('lib/ui/draggable/draggable.js', 'client');
api.addFiles('lib/ui/resizable/resizable.js', 'client');
api.addFiles('lib/ui/resizable/resizable.styl', 'client');
api.addFiles('lib/toggleDialog.js', 'client');
api.addFiles('lib/setActiveViewport.js', 'client');
api.addFiles('lib/switchToImageByIndex.js', 'client');
@@ -168,7 +165,6 @@ Package.onUse(function(api) {
api.export('LayoutManager', 'client');
// Global objects
api.export('OHIF', 'client');
api.export('ClientId', 'client');
// Collections
@@ -177,8 +173,6 @@ Package.onUse(function(api) {
// UI Helpers
api.addFiles([
'lib/helpers/formatDA.js',
'lib/helpers/blaze.js',
'lib/helpers/logical.js',
'lib/helpers/formatJSDate.js',
'lib/helpers/jsDateFromNow.js',
'lib/helpers/formatNumberPrecision.js',