HoverFix.js 1.8 KB

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