mouseenter bug fix. close #119

CHANGELOG.md

@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Not released][Not released]
 
+### Fixed
+- fixes in typescript definitions
+- bug with `mouseenter` event on deep nesting case
+
 ## [0.13.9][2016-05-14]
 
 ### Changed

konva.js

@@ -3,7 +3,7 @@
  * Konva JavaScript Framework v0.13.0
  * http://konvajs.github.io/
  * Licensed under the MIT or GPL Version 2 licenses.
- * Date: Sat May 14 2016
+ * Date: Tue Jun 07 2016
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@@ -4069,9 +4069,11 @@
                 this._fire(eventType, evt);
 
                 // simulate event bubbling
-                var stopBubble = (eventType === MOUSEENTER || eventType === MOUSELEAVE) && ((compareShape && compareShape.isAncestorOf && compareShape.isAncestorOf(this)));
+                var stopBubble =
+                    (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
+                    ((compareShape && compareShape.isAncestorOf && compareShape.isAncestorOf(this) && !compareShape.isAncestorOf(this.parent)));
                 if((evt && !evt.cancelBubble || !evt) && this.parent && this.parent.isListening() && (!stopBubble)) {
-                    if(compareShape && compareShape.parent) {
+                    if (compareShape && compareShape.parent) {
                         this._fireAndBubble.call(this.parent, eventType, evt, compareShape.parent);
                     }
                     else {

release.sh

@@ -69,6 +69,7 @@ find source themes -exec perl -i -pe "s|${old_cdn}|${new_cdn}|g" {} +
 find source themes -exec perl -i -pe "s|${old_cdn_min}|${new_cdn_min}|g" {} +
 
 echo "regenerate site"
+rm ./db.json
 npm start
 
 echo "commit site changes"

src/Node.js

@@ -1811,9 +1811,11 @@
                 this._fire(eventType, evt);
 
                 // simulate event bubbling
-                var stopBubble = (eventType === MOUSEENTER || eventType === MOUSELEAVE) && ((compareShape && compareShape.isAncestorOf && compareShape.isAncestorOf(this)));
+                var stopBubble =
+                    (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
+                    ((compareShape && compareShape.isAncestorOf && compareShape.isAncestorOf(this) && !compareShape.isAncestorOf(this.parent)));
                 if((evt && !evt.cancelBubble || !evt) && this.parent && this.parent.isListening() && (!stopBubble)) {
-                    if(compareShape && compareShape.parent) {
+                    if (compareShape && compareShape.parent) {
                         this._fireAndBubble.call(this.parent, eventType, evt, compareShape.parent);
                     }
                     else {

test/functional/MouseEvents-test.js

@@ -1213,6 +1213,136 @@ suite('MouseEvents', function() {
         assert.equal(group1Mouseenter, 2, 'move3 : group1 mouseenter should trigger');
     });
 
+    // ======================================================
+    test('test mouseleave + mouseenter with deep nesting', function() {
+        var stage = addStage();
+        var layer = new Konva.Layer();
+        stage.add(layer);
+
+        var leftRect = new Konva.Rect({
+            x: 0, y: 0, width: 100, height: 100, fill: 'green'
+        });
+        layer.add(leftRect);
+
+
+        var rightGrandParentGroup = new Konva.Group({name: 'rightGrandParentGroup'});
+        layer.add(rightGrandParentGroup);
+
+        var rightParentGroup = new Konva.Group({name: 'rightParentGroup'});
+        rightGrandParentGroup.add(rightParentGroup);
+
+        var rightRect = new Konva.Rect({
+            x: 100, y: 0, width: 100, height: 100, fill: 'red'
+        });
+        rightParentGroup.add(rightRect);
+        stage.draw();
+
+
+        var leftRectMouseenter = 0;
+        var leftRectMouseleave = 0;
+        var leftRectMouseover = 0;
+        var leftRectMouseout = 0;
+
+        var rightGrandParentGroupMouseenter = 0;
+        var rightGrandParentGroupMouseleave = 0;
+        var rightGrandParentGroupMouseover = 0;
+        var rightGrandParentGroupMouseout = 0;
+
+        var rightParentGroupMouseenter = 0;
+        var rightParentGroupMouseleave = 0;
+        var rightParentGroupMouseover = 0;
+        var rightParentGroupMouseout = 0;
+
+        var rightRectMouseenter = 0;
+        var rightRectMouseleave = 0;
+        var rightRectMouseover = 0;
+        var rightRectMouseout = 0;
+
+        leftRect.on('mouseenter', function() {
+            leftRectMouseenter += 1;
+        });
+        leftRect.on('mouseleave', function() {
+            leftRectMouseleave += 1;
+        });
+        leftRect.on('mouseover', function() {
+            leftRectMouseover += 1;
+        });
+        leftRect.on('mouseout', function() {
+            leftRectMouseout += 1;
+        });
+
+        rightGrandParentGroup.on('mouseenter', function() {
+            rightGrandParentGroupMouseenter += 1;
+        });
+        rightGrandParentGroup.on('mouseleave', function() {
+            rightGrandParentGroupMouseleave += 1;
+        });
+        rightGrandParentGroup.on('mouseover', function() {
+            rightGrandParentGroupMouseover += 1;
+        });
+        rightGrandParentGroup.on('mouseout', function() {
+            rightGrandParentGroupMouseout += 1;
+        });
+
+
+        rightParentGroup.on('mouseenter', function() {
+            rightParentGroupMouseenter += 1;
+        });
+        rightParentGroup.on('mouseleave', function() {
+            rightParentGroupMouseleave += 1;
+        });
+        rightParentGroup.on('mouseover', function() {
+            rightParentGroupMouseover += 1;
+        });
+        rightParentGroup.on('mouseout', function() {
+            rightParentGroupMouseout += 1;
+        });
+
+
+        rightRect.on('mouseenter', function() {
+            rightRectMouseenter += 1;
+        });
+        rightRect.on('mouseleave', function() {
+            rightRectMouseleave += 1;
+        });
+        rightRect.on('mouseover', function() {
+            rightRectMouseover += 1;
+        });
+        rightRect.on('mouseout', function() {
+            rightRectMouseout += 1;
+        });
+
+
+
+        stage.simulateMouseMove({
+            x: 50,
+            y: 50
+        });
+
+        assert.equal(leftRectMouseenter, 1, 'move1 : leftRectMouseenter mouseenter should trigger');
+
+        stage.simulateMouseMove({
+            x: 150,
+            y: 50
+        });
+
+        assert.equal(leftRectMouseleave, 1, 'move2 : leftRectMouseleave mouseleave should trigger');
+        assert.equal(rightRectMouseenter, 1, 'move2 : rightRect mouseenter should trigger');
+        assert.equal(rightParentGroupMouseenter, 1, 'move2 : rightParentGroup mouseenter should trigger');
+        assert.equal(rightGrandParentGroupMouseenter, 1, 'move2 : rightGrandParentGroup mouseenter should trigger');
+
+        stage.simulateMouseMove({
+            x: 50,
+            y: 50
+        });
+
+        assert.equal(rightRectMouseleave, 1, 'move3 : rightRect mouseleave should trigger');
+        assert.equal(rightParentGroupMouseleave, 1, 'move3 : rightParentGroup mouseleave should trigger');
+        assert.equal(rightGrandParentGroupMouseleave, 1, 'move3 : rightGrandParentGroup mouseleave should trigger');
+
+        assert.equal(leftRectMouseenter, 2, 'move3 : leftRectMouseenter mouseenter should trigger');
+    });
+
     // ======================================================
     test('test event bubbling', function() {
         var stage = addStage();