From 5aaa5b934d347da6d1c9571f2adf41851e0c24c7 Mon Sep 17 00:00:00 2001 From: Emanuel Oliveira Date: Thu, 27 Oct 2016 01:33:48 -0200 Subject: [PATCH] OHIF-15 Fixed cine dialog positioning + dragging whole dialog even when clicking on a button. --- .../toolbarSection/toolbarSection.js | 4 +- .../ohif-core/client/ui/bounded/bounded.js | 12 ++ .../client/ui/draggable/draggable.js | 24 +++- .../viewer/cineDialog/cineDialog.js | 106 +++++++++++++++++- .../viewer/cineDialog/cineDialog.styl | 4 + Packages/worklist/both/schema.js | 2 +- 6 files changed, 142 insertions(+), 10 deletions(-) diff --git a/OHIFViewer/client/components/toolbarSection/toolbarSection.js b/OHIFViewer/client/components/toolbarSection/toolbarSection.js index 9593a6a91..1bf77f6aa 100644 --- a/OHIFViewer/client/components/toolbarSection/toolbarSection.js +++ b/OHIFViewer/client/components/toolbarSection/toolbarSection.js @@ -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(); } diff --git a/Packages/ohif-core/client/ui/bounded/bounded.js b/Packages/ohif-core/client/ui/bounded/bounded.js index 06baff3c7..2d4d1ecd3 100644 --- a/Packages/ohif-core/client/ui/bounded/bounded.js +++ b/Packages/ohif-core/client/ui/bounded/bounded.js @@ -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; diff --git a/Packages/ohif-core/client/ui/draggable/draggable.js b/Packages/ohif-core/client/ui/draggable/draggable.js index d78c04060..b21e79da9 100644 --- a/Packages/ohif-core/client/ui/draggable/draggable.js +++ b/Packages/ohif-core/client/ui/draggable/draggable.js @@ -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); diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js index b7c6a1f9f..41b93560e 100644 --- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js +++ b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js @@ -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' } }); diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl index 462cbc6a4..16c3659ca 100644 --- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl +++ b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl @@ -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 diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js index c59ef702c..b63ab5dc4 100644 --- a/Packages/worklist/both/schema.js +++ b/Packages/worklist/both/schema.js @@ -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