fix some stage evetns. close #627

CHANGELOG.md

@@ -5,6 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fix some stage events. `mouseenter` and `mouseleave` should work correctly on empty spaces
+* Fix some typescript types
+
 ## [3.2.3][2019-03-21]
 
 * Fix `hasName` method for empty name cases

src/Node.ts

@@ -2076,9 +2076,10 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
 
     var shouldStop =
       (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
-      compareShape &&
+      ((compareShape &&
-      (this._id === compareShape._id ||
+        (this === compareShape ||
-        (this.isAncestorOf && this.isAncestorOf(compareShape)));
+          (this.isAncestorOf && this.isAncestorOf(compareShape)))) ||
+        (this.nodeType === 'Stage' && !compareShape));
 
     if (!shouldStop) {
       this._fire(eventType, evt);

src/Stage.ts

@@ -55,6 +55,7 @@ var STAGE = 'Stage',
   MAX_LAYERS_NUMBER = 5,
   EMPTY_STRING = '',
   EVENTS = [
+    MOUSEENTER,
     MOUSEDOWN,
     MOUSEMOVE,
     MOUSEUP,
@@ -287,7 +288,7 @@ export class Stage extends Container {
    * // or if you interested in shape parent:
    * var group = stage.getIntersection({x: 50, y: 50}, 'Group');
    */
-  getIntersection(pos: Vector2d, selector?: string) {
+  getIntersection(pos: Vector2d, selector?: string): Shape | null {
     var layers = this.children,
       len = layers.length,
       end = len - 1,
@@ -378,6 +379,10 @@ export class Stage extends Container {
       addEvent(this, EVENTS[n]);
     }
   }
+  _mouseenter(evt) {
+    this.setPointersPositions(evt);
+    this._fire(MOUSEENTER, { evt: evt, target: this, currentTarget: this });
+  }
   _mouseover(evt) {
     this.setPointersPositions(evt);
     this._fire(CONTENT_MOUSEOVER, { evt: evt });
@@ -391,6 +396,17 @@ export class Stage extends Container {
       targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
       targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });
       this.targetShape = null;
+    } else if (!DD.isDragging) {
+      this._fire(MOUSELEAVE, {
+        evt: evt,
+        target: this,
+        currentTarget: this
+      });
+      this._fire(MOUSEOUT, {
+        evt: evt,
+        target: this,
+        currentTarget: this
+      });
     }
     this.pointerPos = undefined;
 
@@ -402,7 +418,7 @@ export class Stage extends Container {
       return this._touchmove(evt);
     }
     this.setPointersPositions(evt);
-    var shape;
+    var shape: Shape;
 
     if (!DD.isDragging) {
       shape = this.getIntersection(this.getPointerPosition());

test/functional/MouseEvents-test.js

@@ -1953,4 +1953,119 @@ suite('MouseEvents', function() {
       }, 5);
     });
   });
+
+  test('test mouseenter on empty stage', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var mouseenterCount = 0;
+    stage.on('mouseenter', function() {
+      mouseenterCount += 1;
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    var evt = {
+      clientX: 10,
+      clientY: 10 + top,
+      button: 0
+    };
+
+    stage._mouseenter(evt);
+
+    assert.equal(mouseenterCount, 1, 'mouseenterCount should be 1');
+  });
+
+  test('test mouseleave on empty stage', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var mouseleave = 0;
+    stage.on('mouseleave', function() {
+      mouseleave += 1;
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    var evt = {
+      clientX: 0,
+      clientY: 0 + top,
+      button: 0
+    };
+
+    stage._mouseout(evt);
+
+    assert.equal(mouseleave, 1, 'mouseleave 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();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      width: 50,
+      height: 50,
+      fill: 'red'
+    });
+    layer.add(rect);
+
+    layer.draw();
+
+    var mouseenter = 0;
+    stage.on('mouseenter', function() {
+      debugger;
+      mouseenter += 1;
+    });
+
+    stage.simulateMouseMove({
+      x: 100,
+      y: 100
+    });
+
+    stage.simulateMouseMove({
+      x: 25,
+      y: 25
+    });
+
+    assert.equal(mouseenter, 0, 'mouseenter should be 1');
+  });
+
+  test('should not trigger mouseenter on stage when we go to the shape directly', 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 mouseenter = 0;
+    stage.on('mouseenter', function() {
+      mouseenter += 1;
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    var evt = {
+      clientX: 10,
+      clientY: 10 + top,
+      button: 0
+    };
+
+    stage._mouseenter(evt);
+
+    stage.simulateMouseMove({
+      x: 10,
+      y: 10
+    });
+
+    stage._mouseout(evt);
+
+    assert.equal(mouseenter, 1, 'mouseenter should be 1');
+  });
 });