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

src/canvas.class.js

@@ -330,6 +330,20 @@
      */
     fireMiddleClick: false,
 
+    /**
+     * Keep track of the hovered target
+     * @type fabric.Object
+     * @private
+     */
+    _hoveredTarget: null,
+
+    /**
+     * hold the list of nested targets hovered
+     * @type Array[fabric.Object]
+     * @private
+     */
+    _hoveredTargets: [],
+
     /**
      * @private
      */
@@ -1477,8 +1491,9 @@
         this.fire('selection:cleared', { target: obj });
         obj.fire('deselected');
       }
-      if (this._hoveredTarget === obj) {
+      if (obj === this._hoveredTarget){
         this._hoveredTarget = null;
+        this._hoveredTargets = [];
       }
       this.callSuper('_onObjectRemoved', obj);
     },

src/mixins/canvas_events.mixin.js

@@ -166,10 +166,18 @@
      * @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;
       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) {
           if (obj.isEditing) {
@@ -193,6 +201,7 @@
       if (!this.currentTransform && !this.findTarget(e)) {
         this.fire('mouse:over', { target: null, e: e });
         this._hoveredTarget = null;
+        this._hoveredTargets = [];
       }
     },
 
@@ -231,7 +240,7 @@
     _onDragOver: function(e) {
       e.preventDefault();
       var target = this._simpleEventHandler('dragover', e);
-      this._fireEnterLeaveEvents(target, e);
+      this._fireEnterLeaveEvents([target].concat(this.targets), e);
     },
 
     /**
@@ -777,7 +786,7 @@
     __onMouseMove: function (e) {
       this._handleEvent(e, 'move:before');
       this._cacheTransformEventData(e);
-      var target, pointer;
+      var target, pointer, _this = this;
 
       if (this.isDrawingMode) {
         this._onMouseMoveInDrawingMode(e);
@@ -803,6 +812,14 @@
         target = this.findTarget(e) || null;
         this._setCursorFromEvent(e, target);
         this._fireOverOutEvents(target, e);
+        // handle triggering on SubTargets
+        this.targets.map(function(subTarget,k){
+          _this._fireOverOutEvents(subTarget, e, '_hoveredTarget' + k);
+        });
+        // hoverCursor should come from top-most subtarget
+        this.targets.slice(0).reverse().map(function(subTarget){
+          _this._setCursorFromEvent(e, subTarget);
+        });
       }
       else {
         this._transformObject(e);
@@ -818,13 +835,39 @@
      * @private
      */
     _fireOverOutEvents: function(target, e) {
+      var _this = this;
       this.fireSyntheticInOutEvents(target, e, {
-        targetName: '_hoveredTarget',
+        oldTarget: this._hoveredTarget,
         canvasEvtOut: 'mouse:out',
         evtOut: 'mouseout',
         canvasEvtIn: 'mouse:over',
         evtIn: 'mouseover',
       });
+      this.targets.forEach(function(_target, index) {
+        _this.fireSyntheticInOutEvents(_target, e, {
+          oldTarget: _this._hoveredTargets[index],
+          canvasEvtOut: 'mouse:out',
+          evtOut: 'mouseout',
+          canvasEvtIn: 'mouse:over',
+          evtIn: 'mouseover',
+        });
+      });
+      var remainingTargetsLength = this._hoveredTargets.length - this.targets.length;
+      if (remainingTargetsLength > 0){
+        for (var i = 0; i < remainingTargetsLength; i++){
+          var _remainingTargetIndex = i + this.targets.length - 1;
+          this.fireSyntheticInOutEvents(null, e, {
+            oldTarget: this._hoveredTargets[_remainingTargetIndex],
+            canvasEvtOut: 'mouse:out',
+            evtOut: 'mouseout',
+            canvasEvtIn: 'mouse:over',
+            evtIn: 'mouseover',
+          });
+        }
+      }
+      // whatever it happened, the target is not the hovered target.
+      this._hoveredTarget = target;
+      this._hoveredTargets = this.targets.concat();
     },
 
     /**
@@ -835,15 +878,14 @@
      */
     _fireEnterLeaveEvents: function(target, e) {
       this.fireSyntheticInOutEvents(target, e, {
-        targetName: '_draggedoverTarget',
+        oldTarget: '_draggedoverTarget',
         evtOut: 'dragleave',
         evtIn: 'dragenter',
       });
     },
 
     /**
      * Manage the synthetic in/out events for the fabric objects on the canvas
-     * @param {Fabric.Object} target the target where the target from the supported events
      * @param {Event} e Event object fired
      * @param {Object} config configuration for the function to work
      * @param {String} config.targetName property on the canvas where the old target is stored
@@ -854,15 +896,12 @@
      * @private
      */
     fireSyntheticInOutEvents: function(target, e, config) {
-      var inOpt, outOpt, oldTarget = this[config.targetName], outFires, inFires,
+      var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires,
           targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut;
       if (targetChanged) {
         inOpt = { e: e, target: target, previousTarget: oldTarget };
         outOpt = { e: e, target: oldTarget, nextTarget: target };
-        this[config.targetName] = target;
       }
-      inFires = target && targetChanged;
-      outFires = oldTarget && targetChanged;
       if (outFires) {
         canvasEvtOut && this.fire(canvasEvtOut, outOpt);
         oldTarget.fire(config.evtOut, outOpt);

src/mixins/canvas_grouping.mixin.js

@@ -53,6 +53,7 @@
       if (activeSelection.contains(target)) {
         activeSelection.removeWithUpdate(target);
         this._hoveredTarget = target;
+        this._hoveredTargets = this.targets;
         if (activeSelection.size() === 1) {
           // activate last remaining object
           this._setActiveObject(activeSelection.item(0), e);
@@ -61,6 +62,7 @@
       else {
         activeSelection.addWithUpdate(target);
         this._hoveredTarget = activeSelection;
+        this._hoveredTargets = this.targets;
       }
       this._fireSelectionEvents(currentActiveObjects, e);
     },
@@ -71,6 +73,7 @@
     _createActiveSelection: function(target, e) {
       var currentActives = this.getActiveObjects(), group = this._createGroup(target);
       this._hoveredTarget = group;
+      // ISSUE 4115: should we consider subTargets here?
       this._setActiveObject(group, e);
       this._fireSelectionEvents(currentActives, e);
     },

src/shapes/object.class.js

@@ -2116,4 +2116,23 @@
    */
   fabric.Object.__uid = 0;
 
+  /**
+   * A GUID for tracking hovered targets and sub targets
+   * simply tracking via subTargets[index] is not reliable
+   */
+  function generateGUID() {
+    // https://stackoverflow.com/questions/8012002/create-a-unique-number-with-javascript-time
+    return new Date().valueOf().toString(36) + Math.random().toString(36).substr(2);
+    // return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    //   var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    //   return v.toString(16);
+    // });
+  }
+  fabric.Object.prototype.__defineGetter__('__guid', function(){
+    if (!this.__myGUID) {
+      this.__myGUID = generateGUID();
+    }
+    return this.__myGUID;
+  });
+
 })(typeof exports !== 'undefined' ? exports : this);

test/unit/canvas_events.js

@@ -550,7 +550,7 @@
     c._hoveredTarget = obj;
     c.currentTransform = {};
     c.upperCanvasEl.dispatchEvent(event);
-    assert.equal(c._hoveredTarget, obj, '_hoveredTarget has been removed');
+    assert.equal(c._hoveredTarget, obj, '_hoveredTarget has been not removed');
   });
 
   QUnit.test('mouseEnter removes __corner', function(assert) {