fix: generalize fix for swallowed hover events

Replaces the old drag hover fix (which fixed kindof the same thing)
with one that works in a general fashion only on element.* level.

Related to bpmn-io/bpmn-js#1366

lib/features/dragging/index.js

@@ -1,15 +1,13 @@
+import HoverFixModule from '../hover-fix';
 import SelectionModule from '../selection';
 
 import Dragging from './Dragging';
-import HoverFix from './HoverFix';
+
 
 export default {
-  __init__: [
-    'hoverFix'
-  ],
   __depends__: [
-    SelectionModule
+    HoverFixModule,
+    SelectionModule,
   ],
   dragging: [ 'type', Dragging ],
-  hoverFix: [ 'type', HoverFix ]
 };

lib/features/dragging/HoverFix.js → lib/features/hover-fix/HoverFix.js

@@ -20,14 +20,16 @@ var HIGH_PRIORITY = 1500;
  * 1) have a hover state after a successful drag.move event
  * 2) have an out event when dragging leaves an element
  *
- * @param {EventBus} eventBus
- * @param {Dragging} dragging
  * @param {ElementRegistry} elementRegistry
+ * @param {EventBus} eventBus
+ * @param {Injector} injector
  */
-export default function HoverFix(eventBus, dragging, elementRegistry) {
+export default function HoverFix(elementRegistry, eventBus, injector) {
 
   var self = this;
 
+  var dragging = injector.get('dragging', false);
+
   /**
    * Make sure we are god damn hovering!
    *
@@ -58,80 +60,73 @@ export default function HoverFix(eventBus, dragging, elementRegistry) {
     }
   }
 
-  /**
-   * We wait for a specific sequence of events before
-   * emitting a fake drag.hover event.
-   *
-   * Event Sequence:
-   *
-   * drag.start
-   * drag.move >> ensure we are hovering
-   */
-  eventBus.on('drag.start', function(event) {
 
-    eventBus.once('drag.move', HIGH_PRIORITY, function(event) {
+  if (dragging) {
 
-      ensureHover(event);
+    /**
+     * We wait for a specific sequence of events before
+     * emitting a fake drag.hover event.
+     *
+     * Event Sequence:
+     *
+     * drag.start
+     * drag.move >> ensure we are hovering
+     */
+    eventBus.on('drag.start', function(event) {
 
-    });
+      eventBus.once('drag.move', HIGH_PRIORITY, function(event) {
 
-  });
+        ensureHover(event);
+
+      });
+
+    });
+  }
 
 
   /**
-   * We make sure that drag.out is always fired, even if the
+   * We make sure that element.out is always fired, even if the
    * browser swallows an element.out event.
    *
    * Event sequence:
    *
-   * drag.hover
+   * element.hover
    * (element.out >> sometimes swallowed)
-   * element.hover >> ensure we fired drag.out
+   * element.hover >> ensure we fired element.out
    */
-  eventBus.on('drag.init', function() {
+  (function() {
+    var hoverGfx;
+    var hover;
 
-    var hover, hoverGfx;
+    eventBus.on('element.hover', function(event) {
 
-    function setDragHover(event) {
-      hover = event.hover;
-      hoverGfx = event.hoverGfx;
-    }
+      // (1) remember current hover element
+      hoverGfx = event.gfx;
+      hover = event.element;
+    });
 
-    function unsetHover() {
-      hover = null;
-      hoverGfx = null;
-    }
+    eventBus.on('element.hover', HIGH_PRIORITY, function(event) {
 
-    function ensureOut() {
+      // (3) am I on an element still?
+      if (hover) {
 
-      if (!hover) {
-        return;
+        // (4) that is a problem, gotta "simulate the out"
+        eventBus.fire('element.out', {
+          element: hover,
+          gfx: hoverGfx
+        });
       }
 
-      var element = hover,
-          gfx = hoverGfx;
-
-      hover = null;
-      hoverGfx = null;
-
-      // emit synthetic out event
-      dragging.out({
-        element: element,
-        gfx: gfx
-      });
-    }
+    });
 
-    eventBus.on('drag.hover', setDragHover);
-    eventBus.on('element.out', unsetHover);
-    eventBus.on('element.hover', HIGH_PRIORITY, ensureOut);
+    eventBus.on('element.out', function() {
 
-    eventBus.once('drag.cleanup', function() {
-      eventBus.off('drag.hover', setDragHover);
-      eventBus.off('element.out', unsetHover);
-      eventBus.off('element.hover', ensureOut);
+      // (2) unset hover state if we correctly outed us *GG*
+      hoverGfx = null;
+      hover = null;
     });
 
-  });
+  })();
 
   this._findTargetGfx = function(event) {
     var position,
@@ -152,9 +147,9 @@ export default function HoverFix(eventBus, dragging, elementRegistry) {
 }
 
 HoverFix.$inject = [
+  'elementRegistry',
   'eventBus',
-  'dragging',
-  'elementRegistry'
+  'injector'
 ];
 
 

lib/features/hover-fix/index.js

@@ -0,0 +1,8 @@
+import HoverFix from './HoverFix';
+
+export default {
+  __init__: [
+    'hoverFix'
+  ],
+  hoverFix: [ 'type', HoverFix ],
+};