Reduce event emission on canvas for over/out (fabricjs#6055)

ickata · Jul 27, 2021 · a84e699 · a84e699
1 parent 06e2066
commit a84e699
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js
@@ -827,23 +827,24 @@
      * @private
      */
     _fireOverOutEvents: function(target, e) {
-      var _this = this, _hoveredTarget = this._hoveredTarget,
+      var _hoveredTarget = this._hoveredTarget,
           _hoveredTargets = this._hoveredTargets, targets = this.targets,
-          diff = _hoveredTargets.length - targets.length,
-          diffArrayLength = diff > 0 ? diff : 0,
-          diffArray = [];
-      for (var i = 0; i < diffArrayLength; i++){
-        diffArray.push(null);
-      }
-      [target].concat(targets, diffArray).forEach(function(_target, index) {
-        _this.fireSyntheticInOutEvents(_target, e, {
-          oldTarget: index === 0 ? _hoveredTarget : _hoveredTargets[index - 1],
-          canvasEvtOut: 'mouse:out',
+          length = Math.max(_hoveredTargets.length, targets.length);
+
+      this.fireSyntheticInOutEvents(target, e, {
+        oldTarget: _hoveredTarget,
+        evtOut: 'mouseout',
+        canvasEvtOut: 'mouse:out',
+        evtIn: 'mouseover',
+        canvasEvtIn: 'mouse:over',
+      });
+      for (var i = 0; i < length; i++){
+        this.fireSyntheticInOutEvents(targets[i], e, {
+          oldTarget: _hoveredTargets[i],
           evtOut: 'mouseout',
-          canvasEvtIn: 'mouse:over',
           evtIn: 'mouseover',
         });
-      });
+      }
       this._hoveredTarget = target;
       this._hoveredTargets = this.targets.concat();
     },
@@ -855,21 +856,22 @@
      * @private
      */
     _fireEnterLeaveEvents: function(target, e) {
-      var _this = this, _draggedoverTarget = this._draggedoverTarget,
+      var _draggedoverTarget = this._draggedoverTarget,
           _hoveredTargets = this._hoveredTargets, targets = this.targets,
-          diff = _hoveredTargets.length - targets.length,
-          diffArrayLength = diff > 0 ? diff : 0,
-          diffArray = [];
-      for (var i = 0; i < diffArrayLength; i++){
-        diffArray.push(null);
-      }
-      [target].concat(targets, diffArray).forEach(function(_target, index) {
-        _this.fireSyntheticInOutEvents(_target, e, {
-          oldTarget: index === 0 ? _draggedoverTarget : _hoveredTargets[index - 1],
+          length = Math.max(_hoveredTargets.length, targets.length);
+
+      this.fireSyntheticInOutEvents(target, e, {
+        oldTarget: _draggedoverTarget,
+        evtOut: 'dragleave',
+        evtIn: 'dragenter',
+      });
+      for (var i = 0; i < length; i++) {
+        this.fireSyntheticInOutEvents(targets[i], e, {
+          oldTarget: _hoveredTargets[i],
           evtOut: 'dragleave',
           evtIn: 'dragenter',
         });
-      });
+      }
       this._draggedoverTarget = target;
     },
 

diff --git a/test/unit/canvas_events.js b/test/unit/canvas_events.js
@@ -504,11 +504,13 @@
     var c = new fabric.Canvas();
     var targetArray = [];
     var targetOutArray = [];
-    c.on('mouse:over', function(opt) {
-      targetArray.push(opt.target);
-    });
-    c.on('mouse:out', function(opt) {
-      targetOutArray.push(opt.target);
+    [rect1, rect2, rect3, rect4, rect5, group1, group2, group].forEach(function(t) {
+      t.on('mouseover', function(opt) {
+        targetArray.push(opt.target);
+      });
+      t.on('mouseout', function(opt) {
+        targetOutArray.push(opt.target);
+      });
     });
     c.add(group, rect5);
     simulateEvent(c.upperCanvasEl, 'mousemove', {