# all files / Github/diagram-js/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

    1128×

    1128×

    129×

    129×

    129×

    1128×

    129×
    54×

    75×

    75×
    75×

    1×

     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'
    ];