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

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();
     }
 

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;

Packages/ohif-core/client/ui/draggable/draggable.js

@@ -1,6 +1,6 @@
 // Allow attaching to jQuery selectors
-$.fn.draggable = function() {
+$.fn.draggable = function(options) {
-    makeDraggable(this);
+    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);

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'
     }
 
 });

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

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