fix mouseleave on stage. close #811

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.18
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu Nov 28 2019
+   * Date: Wed Dec 18 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -6041,6 +6041,7 @@
           if (targetShape && eventsEnabled) {
               targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
               targetShape._fireAndBubble(MOUSELEAVE$1, { evt: evt });
+              this._fire(MOUSELEAVE$1, { evt: evt, target: this, currentTarget: this });
               this.targetShape = null;
           }
           else if (eventsEnabled) {

src/Stage.ts

@@ -443,6 +443,7 @@ export class Stage extends Container<BaseLayer> {
     if (targetShape && eventsEnabled) {
       targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
       targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });
+      this._fire(MOUSELEAVE, { evt: evt, target: this, currentTarget: this });
       this.targetShape = null;
     } else if (eventsEnabled) {
       this._fire(MOUSELEAVE, {

test/functional/MouseEvents-test.js

@@ -1983,6 +1983,72 @@ suite('MouseEvents', function() {
     assert.equal(mouseleave, 1, 'mouseleave should be 1');
   });
 
+  test('test mouseleave from the shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      fill: 'red',
+      radius: 100,
+      x: 200,
+      y: 0
+    })
+    layer.add(circle);
+    layer.draw();
+
+    var mouseleave = 0;
+    stage.on('mouseleave', function() {
+      mouseleave += 1;
+    });
+
+    var mouseout = 0;
+    stage.on('mouseout', function() {
+      mouseout += 1;
+    });
+
+    var circleMouseleave = 0;
+    circle.on('mouseleave', function() {
+      circleMouseleave += 1;
+    });
+
+    var circleMouseout = 0;
+    circle.on('mouseout', function() {
+      circleMouseout += 1;
+    });
+
+    var layerMouseleave = 0;
+    layer.on('mouseleave', function() {
+      layerMouseleave += 1;
+    });
+
+    var layerMouseout = 0;
+    layer.on('mouseout', function() {
+      layerMouseout += 1;
+    });
+    
+
+    // move into a circle
+    stage.simulateMouseMove({ x: 200, y : 5});
+
+    var top = stage.content.getBoundingClientRect().top;
+    var evt = {
+      clientX: 200,
+      clientY: -5 + top,
+      button: 0
+    };
+
+    stage._mouseout(evt);
+
+    assert.equal(circleMouseleave, 1, 'circleMouseleave should be 1');
+    assert.equal(circleMouseout, 1, 'circleMouseout should be 1');
+    assert.equal(layerMouseleave, 1, 'layerMouseleave should be 1');
+    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() {
     var stage = addStage();
     var layer = new Konva.Layer();

test/unit/Node-cache-test.js

@@ -769,9 +769,9 @@ suite('Caching', function() {
     });
     group.add(circle);
     group.cache();
-    stage.draw();
 
-    cloneAndCompareLayer(layer, 210);
+    const canvas = group._cache.get('canvas').scene;
+    assert.equal(canvas.width, 105 * canvas.pixelRatio)
   });
 
   test('cache group with rectangle with fill and opacity', function() {