fix mouseout and mouseleave event on shape destroy. fix #905

.gitignore

@@ -15,6 +15,7 @@ src_old
 *.zip
 *_cache
 types
+out.png
 
 # Numerous always-ignore extensions
 *.diff

CHANGELOG.md

@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 * **BREAKING!** `transformer.boundBoxFunc` works in absolute coordinates of whole transformer.
 * Many `Konva.Transformer` fixes. Now it works correctly when you transform several rotated shapes.
+* Fix for wrong `mouseleave` and `mouseout` fire on shape remove/destroy;
 
 ## 5.0.3 - 2020-05-01
 

src/Stage.ts

@@ -434,7 +434,7 @@ export class Stage extends Container<BaseLayer> {
   }
   _mouseout(evt) {
     this.setPointersPositions(evt);
-    var targetShape = this.targetShape;
+    var targetShape = this.targetShape?.getStage() ? this.targetShape : null;
 
     var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled;
     if (targetShape && eventsEnabled) {
@@ -467,34 +467,30 @@ export class Stage extends Container<BaseLayer> {
     this.setPointersPositions(evt);
     var pointerId = Util._getFirstPointerId(evt);
     var shape: Shape;
-
+    var targetShape = this.targetShape?.getStage() ? this.targetShape : null;
     var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled;
     if (eventsEnabled) {
       shape = this.getIntersection(this.getPointerPosition());
       if (shape && shape.isListening()) {
-        var differentTarget = !this.targetShape || this.targetShape !== shape;
+        var differentTarget = targetShape !== shape;
         if (eventsEnabled && differentTarget) {
-          if (this.targetShape) {
-            this.targetShape._fireAndBubble(
+          if (targetShape) {
+            targetShape._fireAndBubble(
               MOUSEOUT,
               { evt: evt, pointerId },
               shape
             );
-            this.targetShape._fireAndBubble(
+            targetShape._fireAndBubble(
               MOUSELEAVE,
               { evt: evt, pointerId },
               shape
             );
           }
-          shape._fireAndBubble(
-            MOUSEOVER,
-            { evt: evt, pointerId },
-            this.targetShape
-          );
+          shape._fireAndBubble(MOUSEOVER, { evt: evt, pointerId }, targetShape);
           shape._fireAndBubble(
             MOUSEENTER,
             { evt: evt, pointerId },
-            this.targetShape
+            targetShape
           );
           shape._fireAndBubble(MOUSEMOVE, { evt: evt, pointerId });
           this.targetShape = shape;
@@ -506,9 +502,9 @@ export class Stage extends Container<BaseLayer> {
          * if no shape was detected, clear target shape and try
          * to run mouseout from previous target shape
          */
-        if (this.targetShape && eventsEnabled) {
-          this.targetShape._fireAndBubble(MOUSEOUT, { evt: evt, pointerId });
-          this.targetShape._fireAndBubble(MOUSELEAVE, { evt: evt, pointerId });
+        if (targetShape && eventsEnabled) {
+          targetShape._fireAndBubble(MOUSEOUT, { evt: evt, pointerId });
+          targetShape._fireAndBubble(MOUSELEAVE, { evt: evt, pointerId });
           this._fire(MOUSEOVER, {
             evt: evt,
             target: this,

test/functional/MouseEvents-test.js

@@ -2172,7 +2172,54 @@ suite('MouseEvents', function() {
     assert.equal(mouseenter, 0, 'mouseenter should be 1');
   });
 
-  test('should not trigger mouseenter on stage when we go to the shape directly', function() {
+  test('should not trigger mouseleave after shape destroy', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      width: 50,
+      height: 50,
+      fill: 'red'
+    });
+    layer.add(rect);
+
+    layer.draw();
+
+    var mouseout = 0;
+    var mouseleave = 0;
+    stage.on('mouseout', function() {
+      mouseout += 1;
+    });
+
+    rect.on('mouseout', function() {
+      mouseout += 1;
+    });
+
+    stage.on('mouseleave', function() {
+      mouseleave += 1;
+    });
+
+    rect.on('mouseleave', function() {
+      mouseleave += 1;
+    });
+
+    stage.simulateMouseMove({
+      x: 10,
+      y: 10
+    });
+
+    rect.destroy();
+    layer.draw();
+    stage.simulateMouseMove({
+      x: 20,
+      y: 20
+    });
+    assert.equal(mouseout, 0);
+    assert.equal(mouseleave, 0);
+  });
+
+  test('should not trigger mouseenter on stage twice when we go to the shape directly', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);

test/unit/shapes/Transformer-test.js

@@ -3064,7 +3064,8 @@ suite('Transformer', function() {
     layer.add(rect);
 
     var tr = new Konva.Transformer({
-      nodes: [rect]
+      nodes: [rect],
+      ignoreStroke: true
     });
     layer.add(tr);
     layer.draw();