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

OHIF-15 Fixed cine dialog positioning + dragging whole dialog even when clicking on a button.

Browse Source
This commit is contained in:
Emanuel Oliveira 2016-10-27 01:33:48 -02:00
parent ca28f5dbce
commit 5aaa5b934d
6 changed files with 142 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
OHIFViewer/client/components/toolbarSection/toolbarSection.js
View File

@ -92,7 +92,7 @@ Template.toolbarSection.helpers({
iconClasses: 'fa fa-undo'
});
if (!OHIF.uiSettings.multiframeEnhancementsEnabled) {
if (!OHIF.uiSettings.displayEchoUltrasoundWorkflow) {
buttonData.push({
id: 'previousDisplaySet',
@ -225,7 +225,7 @@ Template.toolbarSection.onRendered(function() {
instance.$('#layout').dropdown();
if (OHIF.uiSettings.multiframeEnhancementsEnabled) {
if (OHIF.uiSettings.displayEchoUltrasoundWorkflow) {
toggleCineDialog();
}

12
Packages/ohif-core/client/ui/bounded/bounded.js
View File

@ -29,6 +29,7 @@ class Bounded {
this.element = element;
this.$element = $(element);
this.options(options);
this.setBoundedFlag(false);
}
// Set or change the instance options
@ -114,20 +115,26 @@ class Bounded {
if (this.allowResizing && elementInfo.width > boundingInfo.width) {
this.$element.width(boundingInfo.width);
this.$element.css('left', boundingInfo.x0);
this.setBoundedFlag(true);
} else if (elementInfo.x0 < boundingInfo.x0) {
this.$element.css('left', boundingInfo.x0);
this.setBoundedFlag(true);
} else if (elementInfo.x1 > boundingInfo.x1) {
this.$element.css('left', boundingInfo.x1 - elementInfo.width);
this.setBoundedFlag(true);
}
// Fix element's y positioning and height
if (this.allowResizing && elementInfo.height > boundingInfo.height) {
this.$element.height(boundingInfo.height);
this.$element.css('top', boundingInfo.y0);
this.setBoundedFlag(true);
} else if (elementInfo.y0 < boundingInfo.y0) {
this.$element.css('top', boundingInfo.y0);
this.setBoundedFlag(true);
} else if (elementInfo.y1 > boundingInfo.y1) {
this.$element.css('top', boundingInfo.y1 - elementInfo.height);
this.setBoundedFlag(true);
}
};
}
@ -144,6 +151,11 @@ class Bounded {
this.$boundingElement.off('resize', this.spatialChangedHandler);
}
// This is a means to let outside world know that the element in question has been moved
setBoundedFlag(value) {
this.$element.data('wasBounded', value);
}
}
OHIF.Bounded = Bounded;

24
Packages/ohif-core/client/ui/draggable/draggable.js
View File

@ -1,6 +1,6 @@
// Allow attaching to jQuery selectors
$.fn.draggable = function() {
makeDraggable(this);
$.fn.draggable = function(options) {
makeDraggable(this, options);
return this;
};
@ -11,10 +11,17 @@ $.fn.draggable = function() {
*
* @param element
*/
makeDraggable = function(element) {
makeDraggable = function(element, options) {
var container = $(window);
var diffX,
diffY;
diffY,
wasNotDragged = true;
options = options || {};
options.defaultElementCursor = options.defaultElementCursor || 'default';
// initialize dragged flag
element.data('wasDragged', false);
function getCursorCoords(e) {
var cursor = {
@ -62,11 +69,18 @@ makeDraggable = function(element) {
$(document).on('touchmove', moveHandler);
$(document).on('touchend', stopMoving);
// let outside world know that the element in question has been dragged
if (wasNotDragged) {
element.data('wasDragged', true);
wasNotDragged = false;
}
}
function stopMoving() {
container.css('cursor', 'default');
element.css('cursor', 'default');
element.css('cursor', options.defaultElementCursor);
$(document).off('mousemove', moveHandler);
$(document).off('touchmove', moveHandler);

106
Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
View File

@ -105,13 +105,115 @@ Template.cineDialog.onCreated(() => {
Session.set('UpdateCINE', Random.id());
});
});
/**
* Set/Reset Window resize handler. This function is a replacement for
* ... jQuery's on('resize', func) version which, for some unkown reason
* ... is currently not working for this portion of code.
* ... Further investigation is necessary.
*/
instance.setResizeHandler = (handler) => {
if (typeof handler === 'function') {
let origHandler = window.onresize;
instance.origWindowResizeHandler = typeof origHandler === 'function' ? origHandler : null;
window.onresize = function (event) {
if (typeof origHandler === 'function') {
origHandler.call(window, event);
}
handler.call(window, event);
};
} else {
window.onresize = instance.origWindowResizeHandler || null;
window.origWindowResizeHandler = null;
}
};
/**
* Set optimal position for Cine dialog.
*/
instance.setOptimalPosition = (event, options) => {
let toolbarElement = $('.toolbarSection .toolbarSectionTools:first'),
cineDialog = $('#cineDialog'),
cineDialogSize,
cineDialogCoords,
toolbarRect;
if (toolbarElement.length < 1 || cineDialog.length < 1) {
return;
}
if (cineDialog.data('wasDragged') || cineDialog.data('wasBounded')) {
// restore original handler...
instance.setResizeHandler(null);
return;
}
cineDialogSize = {
width: cineDialog.outerWidth() || 0,
height: cineDialog.outerHeight() || 0
};
toolbarRect = {
offset: toolbarElement.offset() || { top: 0, left: 0 },
width: toolbarElement.outerWidth() || 0,
height: toolbarElement.outerHeight() || 0
};
cineDialogCoords = {
left: toolbarRect.offset.left + toolbarRect.width + 20,
top: toolbarRect.offset.top + toolbarRect.height - cineDialogSize.height
};
if (options) {
if (options.left) {
cineDialogCoords.left = options.left;
}
if (options.top) {
cineDialogCoords.top = options.top;
}
}
cineDialog.css(cineDialogCoords);
};
});
Template.cineDialog.onRendered(() => {
const instance = Template.instance();
let dialog = instance.$('#cineDialog'),
singleRowLayout = OHIF.uiSettings.displayEchoUltrasoundWorkflow;
// set dialog in optimal position and make sure it continues in a optimal position...
// ... when the window has been resized
instance.setOptimalPosition(null, {
top: singleRowLayout ? 47 : 26
});
// The jQuery method does not seem to be working...
// ... $(window).resize(instance.setOptimalPosition)
// This requires additional investigation.
instance.setResizeHandler(instance.setOptimalPosition);
// Make the CINE dialog bounded and draggable
instance.$('#cineDialog').bounded().draggable();
dialog.bounded().draggable({ defaultElementCursor: 'move' });
// Prevent dialog from being dragged when user clicks any button
dialog.find('.cine-navigation, .cine-controls, .cine-options').on('mousedown touchstart', function (e) {
e.stopPropagation();
});
});
Template.cineDialog.onDestroyed(() => {
const instance = Template.instance();
// remove resize handler...
instance.setResizeHandler(null);
});
Template.cineDialog.events({
@ -145,7 +247,7 @@ Template.cineDialog.helpers({
},
getClassNames(baseCls) {
return baseCls + ' ' + (OHIF.uiSettings.multiframeEnhancementsEnabled ? 'single' : 'double') + '-row-style'
return baseCls + ' ' + (OHIF.uiSettings.displayEchoUltrasoundWorkflow ? 'single' : 'double') + '-row-style'
}
});

4
Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
View File

@ -8,6 +8,7 @@
border-radius: 8px
z-index: 1000
overflow: hidden
cursor: move
h5
font-size: 20px
@ -27,6 +28,9 @@
&:active, &.active
theme('color', '$activeColor')
.cine-navigation, .cine-controls, .cine-options
cursor: default
#cineDialog.double-row-style
box-sizing: border-box
width: 300px

2
Packages/worklist/both/schema.js
View File

@ -149,7 +149,7 @@ export const UISettings = new SimpleSchema({
label: 'The UP/DOWN display set navigation buttons will iterate over all the viewports at once?',
defaultValue: false
},
multiframeEnhancementsEnabled: {
displayEchoUltrasoundWorkflow: {
type: Boolean,
label: 'Enable cine dialog enhancements for multiframe images.',
defaultValue: false