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

src/canvas.class.js

@@ -339,7 +339,7 @@
 
     /**
      * hold the list of nested targets hovered
-     * @type fabric.Object
+     * @type Array[fabric.Object]
      * @private
      */
     _hoveredTargets: [],
@@ -1491,21 +1491,9 @@
         this.fire('selection:cleared', { target: obj });
         obj.fire('deselected');
       }
-      // TODO: need a way to cleanly check if obj is one of _hoveredTargetN and de-ref it
-      // if (obj === this._hoveredTarget){
-      //   this._hoveredTarget = null;
-      // }
-      // is there a more sane way than looping through ALL properties of *this* ?
-      // i wanted to put them into a ._hoveredTargets[Array]
-      // but, that complicates the logic of fireSyntheticInOutEvents
-      var keys = Object.keys(this);
-      for (var i = 0; i < keys.length; i++){
-        var key = keys[i];
-        if (key.indexOf('_hoveredTarget') > -1){
-          if (obj === this[key]){
-            this[key] = null;
-          }
-        }
+      if (obj === this._hoveredTarget){
+        this._hoveredTarget = null;
+        this._hoveredTargets = [];
       }
       this.callSuper('_onObjectRemoved', obj);
     },

src/mixins/canvas_events.mixin.js

@@ -168,23 +168,15 @@
     _onMouseOut: function(e) {
       console.log('_onMouseOut',e);
 
-      // pre-ISSUE-4115
       var target = this._hoveredTarget;
       this.fire('mouse:out', { target: target, e: e });
       target && target.fire('mouseout', { e: e });
 
-      // post-ISSUE-4115
-      // should we really be firing mouseOut on ALL _hoveredTargets?
-      // maybe just the top-level one? I dunno...
-      var keys = Object.keys(this);
-      for (var i = 0; i < keys.length; i++){
-        var key = keys[i];
-        if (key.indexOf('_hoveredTarget') > -1){
-          var target = this[key];
-          this.fire('mouse:out', { target: target, e: e });
-          target && target.fire('mouseout', { e: e });
-        }
-      }
+      var _this = this;
+      this._hoveredTargets.forEach(function(_target){
+        _this.fire('mouse:out', { target: target, e: e });
+        _target && target.fire('mouseout', { e: e });
+      });
 
       if (this._iTextInstances) {
         this._iTextInstances.forEach(function(obj) {
@@ -208,16 +200,8 @@
       // side effects we added to it.
       if (!this.currentTransform && !this.findTarget(e)) {
         this.fire('mouse:over', { target: null, e: e });
-        // PRE-ISSUE-4115
-        // this._hoveredTarget = null;
-        // POST-ISSUE-4115
-        var keys = Object.keys(this);
-        for (var i = 0; i < keys.length; i++){
-          var key = keys[i];
-          if (key.indexOf('_hoveredTarget') > -1){
-            this[key] = null;
-          }
-        }
+        this._hoveredTarget = null;
+        this._hoveredTargets = [];
       }
     },
 

src/mixins/canvas_grouping.mixin.js

@@ -53,20 +53,7 @@
       if (activeSelection.contains(target)) {
         activeSelection.removeWithUpdate(target);
         this._hoveredTarget = target;
-        // ISSUE-4115: clear out any additional hovered targets that were set?
-        // should we fire mouse:out on those?
-        var keys = Object.keys(this);
-        for (var i = 0; i < keys.length; i++){
-          var key = keys[i];
-          if (key.indexOf('_hoveredTarget') > -1){
-            this[key] = null;
-          }
-        }
-        // ISSUE-4115: loop through this.targets and assign them as hovered as well?
-        // why don't we fire mouse:over here?
-        for (var i = 0; i < this.targets.length; i++){
-          this['_hoveredTarget' + i] = this.targets[i];
-        }
+        this._hoveredTargets = this.targets;
         if (activeSelection.size() === 1) {
           // activate last remaining object
           this._setActiveObject(activeSelection.item(0), e);
@@ -75,15 +62,7 @@
       else {
         activeSelection.addWithUpdate(target);
         this._hoveredTarget = activeSelection;
-        // ISSUE-4115: clear out any additional hovered targets that were set?
-        // should we fire mouse:out on those?
-        var keys = Object.keys(this);
-        for (var i = 0; i < keys.length; i++){
-          var key = keys[i];
-          if (key.indexOf('_hoveredTarget') > -1){
-            this[key] = null;
-          }
-        }
+        this._hoveredTargets = this.targets;
       }
       this._fireSelectionEvents(currentActiveObjects, e);
     },