Fix wrong mouseleave trigger for Konva.Stage

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.2.4
+
+* Fix wrong `mouseleave` trigger for `Konva.Stage`
+
 ## 7.2.3
 
 * Fix transformer rotation when parent of a node is rotated too.

src/Stage.ts

@@ -69,7 +69,7 @@ var STAGE = 'Stage',
     MOUSEDOWN,
     MOUSEMOVE,
     MOUSEUP,
-    MOUSEOUT,
+    MOUSELEAVE,
     TOUCHSTART,
     TOUCHMOVE,
     TOUCHEND,
@@ -436,7 +436,7 @@ export class Stage extends Container<Layer> {
     this._fire(CONTENT_MOUSEOVER, { evt: evt });
     this._fire(MOUSEOVER, { evt: evt, target: this, currentTarget: this });
   }
-  _mouseout(evt) {
+  _mouseleave(evt) {
     this.setPointersPositions(evt);
     var targetShape = this.targetShape?.getStage() ? this.targetShape : null;
 

test/functional/MouseEvents-test.js

@@ -108,7 +108,7 @@ suite('MouseEvents', function () {
 
       assert.equal(stageContentMousemove, 1);
 
-      stage._mouseout({
+      stage._mouseleave({
         offsetX: 0,
         offsetY: 0,
       });
@@ -2139,7 +2139,7 @@ suite('MouseEvents', function () {
       button: 0,
     };
 
-    stage._mouseout(evt);
+    stage._mouseleave(evt);
 
     assert.equal(mouseleave, 1, 'mouseleave should be 1');
   });
@@ -2198,7 +2198,7 @@ suite('MouseEvents', function () {
       button: 0,
     };
 
-    stage._mouseout(evt);
+    stage._mouseleave(evt);
 
     assert.equal(circleMouseleave, 1, 'circleMouseleave should be 1');
     assert.equal(circleMouseout, 1, 'circleMouseout should be 1');
@@ -2321,7 +2321,7 @@ suite('MouseEvents', function () {
       y: 10,
     });
 
-    stage._mouseout(evt);
+    stage._mouseleave(evt);
 
     assert.equal(mouseenter, 1, 'mouseenter should be 1');
   });

test/unit/Stage-test.js

@@ -1241,6 +1241,29 @@ suite('Stage', function () {
     compareCanvases(stage.toCanvas(), layer.toCanvas(), 200);
   });
 
+  test('listen to mouseleave event on container', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      fill: 'black',
+      radius: 50,
+    });
+    layer.add(circle);
+    stage.add(layer);
+
+    var count = 0;
+    stage.on('mouseleave', function () {
+      count += 1;
+    });
+    stage.on('mouseout', function () {
+      count += 1;
+    });
+    stage._mouseleave({});
+    assert.equal(count, 2);
+  });
+
   test('toDataURL with hidden layer', function () {
     var stage = addStage();
     var layer = new Konva.Layer();