Fix some issues with mouseenter and mouseleave events. fix #875

CHANGELOG.md

@@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fix some issues with `mouseenter` and `mouseleave` events.
+
 ## 4.2.0 - 2020-03-14
 
 * Add `rotationSnapTolerance` property to `Konva.Transformer`.

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.2.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Mar 16 2020
+   * Date: Wed Mar 18 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -114,12 +114,13 @@
       inDblClickWindow: false,
       /**
        * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
-       * But you may override such property, if you want to use your value.
+       * But you may override such property, if you want to use your value. Set this value before any components initializations.
        * @property pixelRatio
        * @default undefined
        * @name pixelRatio
        * @memberof Konva
        * @example
+       * // before any Konva code:
        * Konva.pixelRatio = 1;
        */
       pixelRatio: undefined,
@@ -2331,10 +2332,10 @@
    * @returns {Number}
    * @example
    * // get
-   * var pixelRatio = canvas.pixelRatio();
+   * var pixelRatio = layer.getCanvas.pixelRatio();
    *
    * // set
-   * canvas.pixelRatio(100);
+   * layer.getCanvas().pixelRatio(3);
    */
   Factory.addGetterSetter(Canvas, 'pixelRatio', undefined, getNumberValidator());
   var SceneCanvas = /** @class */ (function (_super) {
@@ -4353,7 +4354,7 @@
                   this.parent.isListening() &&
                   !stopBubble) {
                   if (compareShape && compareShape.parent) {
-                      this._fireAndBubble.call(this.parent, eventType, evt, compareShape.parent);
+                      this._fireAndBubble.call(this.parent, eventType, evt, compareShape);
                   }
                   else {
                       this._fireAndBubble.call(this.parent, eventType, evt);

src/Node.ts

@@ -2251,7 +2251,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
             this.parent,
             eventType,
             evt,
-            compareShape.parent
+            compareShape
           );
         } else {
           this._fireAndBubble.call(this.parent, eventType, evt);

test/functional/MouseEvents-test.js

@@ -1288,6 +1288,98 @@ suite('MouseEvents', function() {
     );
   });
 
+  // ======================================================
+  test('test mouseleave and mouseenter on deep nesting', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    // top group
+    var group = new Konva.Group({
+      x: 0,
+      y: 0,
+      width: stage.width(),
+      height: stage.height(),
+      name: 'top-group'
+    });
+    layer.add(group);
+
+    // circle inside top group
+    var circle = new Konva.Circle({
+      x: 50,
+      y: 50,
+      radius: 50,
+      fill: 'green'
+    });
+    group.add(circle);
+
+    // two level nesting
+    var group2 = new Konva.Group({
+      x: 0,
+      y: 0,
+      name: 'group-2'
+    });
+    group.add(group2);
+
+    var group3 = new Konva.Group({
+      x: 0,
+      y: 0,
+      name: 'group-3'
+    });
+    group2.add(group3);
+
+    // circle inside deep group
+    var circle2 = new Konva.Circle({
+      x: 50,
+      y: 50,
+      radius: 20,
+      fill: 'white'
+    });
+    group3.add(circle2);
+
+    layer.draw();
+
+    var mouseenter = 0;
+    var mouseleave = 0;
+    group.on('mouseenter', function() {
+      mouseenter += 1;
+    });
+    group.on('mouseleave', function() {
+      mouseleave += 1;
+    });
+    // move to big circle
+    stage.simulateMouseMove({
+      x: 20,
+      y: 20
+    });
+    assert.equal(mouseenter, 1, 'first enter big circle');
+    assert.equal(mouseleave, 0, 'no leave on first move');
+
+    // move to small inner circle
+    stage.simulateMouseMove({
+      x: 50,
+      y: 50
+    });
+    assert.equal(mouseenter, 1, 'enter small circle');
+    assert.equal(mouseleave, 0, 'no leave on second move');
+
+    // move to big circle
+    stage.simulateMouseMove({
+      x: 20,
+      y: 20
+    });
+    assert.equal(mouseenter, 1, 'second enter big circle');
+    assert.equal(mouseleave, 0, 'no leave on third move');
+
+    // move out of group
+    stage.simulateMouseMove({
+      x: 0,
+      y: 0
+    });
+    assert.equal(mouseenter, 1, 'mouseenter = 1 at the end');
+    assert.equal(mouseleave, 1, 'first mouseleave');
+  });
+
   // ======================================================
   test('test dblclick to a wrong target', function() {
     var stage = addStage();
@@ -1993,7 +2085,7 @@ suite('MouseEvents', function() {
       radius: 100,
       x: 200,
       y: 0
-    })
+    });
     layer.add(circle);
     layer.draw();
 
@@ -2026,10 +2118,9 @@ suite('MouseEvents', function() {
     layer.on('mouseout', function() {
       layerMouseout += 1;
     });
-    
 
     // move into a circle
-    stage.simulateMouseMove({ x: 200, y : 5});
+    stage.simulateMouseMove({ x: 200, y: 5 });
 
     var top = stage.content.getBoundingClientRect().top;
     var evt = {
@@ -2046,7 +2137,6 @@ suite('MouseEvents', function() {
     assert.equal(layerMouseout, 1, 'layerMouseout should be 1');
     assert.equal(mouseleave, 1, 'mouseleave should be 1');
     assert.equal(mouseout, 1, 'mouseout should be 1');
-    
   });
 
   test('should not trigger mouseenter on stage when we go to the shape from empty space', function() {
@@ -2191,7 +2281,6 @@ suite('MouseEvents', function() {
       y: 40
     });
 
-    
     stage.simulateMouseUp({
       x: 40,
       y: 40
@@ -2201,7 +2290,6 @@ suite('MouseEvents', function() {
     assert.equal(clicks, 0, 'clicks not triggered');
     assert.deepEqual(stage.getPointerPosition(), { x: 80, y: 80 });
 
-
     // try touch too
     stage.simulateTouchStart({
       x: 30,