all files / lib/features/dragging/ HoverFix.js

60% Statements 12/20
50% Branches 3/6
83.33% Functions 5/6
60% Lines 12/20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94                                                          330×                     330×   231×   224×   91×                   330×   90× 17×     73×           73× 73×                                              
import {
  closest as domClosest
} from 'min-dom';
 
import {
  toPoint
} from '../../util/Event';
 
function getGfx(target) {
  var node = domClosest(target, 'svg, .djs-element', true);
  return node;
}
 
 
/**
 * Browsers may swallow the hover event if users are to
 * fast with the mouse.
 *
 * @see http://stackoverflow.com/questions/7448468/why-cant-i-reliably-capture-a-mouseout-event
 *
 * The fix implemented in this component ensure that we
 * have a hover state after a successive drag.move event.
 *
 * @param {EventBus} eventBus
 * @param {Dragging} dragging
 * @param {ElementRegistry} elementRegistry
 */
export default function HoverFix(eventBus, dragging, elementRegistry) {
 
  var self = this;
 
  // we wait for a specific sequence of events before
  // emitting a fake drag.hover event.
  //
  // Event Sequence:
  //
  // drag.start
  // drag.move
  // drag.move >> ensure we are hovering
  //
  eventBus.on('drag.start', function(event) {
 
    eventBus.once('drag.move', function() {
 
      eventBus.once('drag.move', function(event) {
 
        self.ensureHover(event);
      });
    });
  });
 
  /**
   * Make sure we are god damn hovering!
   *
   * @param {Event} dragging event
   */
  this.ensureHover = function(event) {
 
    if (event.hover) {
      return;
    }
 
    var originalEvent = event.originalEvent,
        position,
        target,
        element,
        gfx;
 
    Eif (!(originalEvent instanceof MouseEvent)) {
      return;
    }
 
    position = toPoint(originalEvent);
 
    // damn expensive operation, ouch!
    target = document.elementFromPoint(position.x, position.y);
 
    gfx = getGfx(target);
 
    if (gfx) {
      element = elementRegistry.get(gfx);
 
      dragging.hover({ element: element, gfx: gfx });
    }
  };
 
}
 
HoverFix.$inject = [
  'eventBus',
  'dragging',
  'elementRegistry'
];