ISSUE-4115 - triggers in/out events for sub targets

src/mixins/canvas_events.mixin.js

@@ -166,8 +166,6 @@
      * @param {Event} e Event object fired on mousedown
      */
     _onMouseOut: function(e) {
-      console.log('_onMouseOut',e);
-
       var target = this._hoveredTarget;
       this.fire('mouse:out', { target: target, e: e });
       this._hoveredTarget = null;
@@ -831,8 +829,9 @@
     _fireOverOutEvents: function(target, e) {
       var _this = this, _hoveredTarget = this._hoveredTarget,
           _hoveredTargets = this._hoveredTargets, targets = this.targets,
-          diff = _hoveredTargets.length - targets.length;
-      [target].concat(targets, new Array(diff > 0 ? diff : 0)).forEach(function(_target, index) {
+          diff = _hoveredTargets.length - targets.length,
+          diffArrayLength = diff > 0 ? diff : 0;
+      [target].concat(targets, new Array(diffArrayLength).fill(null)).forEach(function(_target, index) {
         _this.fireSyntheticInOutEvents(_target, e, {
           oldTarget: index === 0 ? _hoveredTarget : _hoveredTargets[index - 1],
           canvasEvtOut: 'mouse:out',

src/shapes/group.class.js

@@ -35,7 +35,7 @@
     strokeWidth: 0,
 
     /**
-     * Indicates if click events should also check for subtargets
+     * Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets
      * @type Boolean
      * @default
      */

test/unit/canvas_events.js

@@ -489,8 +489,6 @@
       if (obj._objects) {
         obj._objects.forEach(setSubTargetCheckRecursive);
       }
-      // TODO: maybe this property could've been baked into the JSON?
-      // not sure if loadFromJSON accounts for it tho
       obj.subTargetCheck = true;
       obj.on('mouseover', function() {
         counterOver++;
@@ -505,17 +503,33 @@
       });
       canvas.setActiveObject(activeSelection);
       setSubTargetCheckRecursive(activeSelection);
-      // perform MouseOver event on deepest nested subTarget
+
+      // perform MouseOver event on a deeply nested subTarget
+      var moveEvent = fabric.document.createEvent('HTMLEvents');
+      moveEvent.initEvent('mousemove', true, true);
+      var target = canvas.item(1);
+      canvas.targets = [
+        target.item(1),
+        target.item(1).item(1),
+        target.item(1).item(1).item(1)
+      ];
+      canvas._fireOverOutEvents(target, moveEvent);
       assert.equal(counterOver, 4, 'mouseover fabric event fired 4 times for primary hoveredTarget & subTargets');
-      assert.equal(canvas._hoveredTarget, activeSelection, 'activeSelection is _hoveredTarget');
+      assert.equal(canvas._hoveredTarget, target, 'activeSelection is _hoveredTarget');
       assert.equal(canvas._hoveredTargets.length, 3, '3 additional subTargets are captured as _hoveredTargets');
+
       // perform MouseOut even on all hoveredTargets
-      assert.equal(counterOver, 4, 'mouseout fabric event fired 4 times for primary hoveredTarget & subTargets');
+      canvas.targets = [];
+      canvas._fireOverOutEvents(null, moveEvent);
+      assert.equal(counterOut, 4, 'mouseout fabric event fired 4 times for primary hoveredTarget & subTargets');
       assert.equal(canvas._hoveredTarget, null, '_hoveredTarget has been set to null');
       assert.equal(canvas._hoveredTargets.length, 0, '_hoveredTargets array is empty');
     });
   });
 
+  // TODO: QUnit.test('mousemove: subTargetCheck: setCursorFromEvent considers subTargets')
+  // TODO: QUnit.test('mousemove: subTargetCheck: setCursorFromEvent considers subTargets in reverse order, so the top-most subTarget's .hoverCursor takes precedence')
+
   ['MouseDown', 'MouseMove', 'MouseOut', 'MouseEnter', 'MouseWheel', 'DoubleClick'].forEach(function(eventType) {
     QUnit.test('avoid multiple registration - ' + eventType, function(assert) {
       var funcName = '_on' + eventType;