Skip to content

Commit

Permalink
refactored ancestor comparison logic to ensure that container handler…
Browse files Browse the repository at this point in the history 
…s aren't incorrectly executed for mouseover mouseout. Fixed up functional tests
  • Loading branch information
@ericdrowell
ericdrowell committed Aug 17, 2012
1 parent 6a58830 commit 9cdbadc
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 331 deletions.
41 changes: 20 additions & 21 deletions dist/kinetic-core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Aug 15 2012
* Date: Aug 16 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
Expand Down Expand Up @@ -2175,7 +2175,7 @@ Kinetic.Node = Kinetic.Class.extend({
else {
stage.dragAnim.node = this.getLayer();
}
stage.dragAnim.start();
stage.dragAnim.start();
}
},
_onDraggableChange: function() {
Expand Down Expand Up @@ -2208,25 +2208,18 @@ Kinetic.Node = Kinetic.Class.extend({
/**
* handle node event
*/
_handleEvent: function(eventType, evt) {
_handleEvent: function(eventType, evt, compareShape) {
if(this.nodeType === 'Shape') {
evt.shape = this;
}

var stage = this.getStage();
var mover = stage ? stage.mouseoverShape : null;
var mout = stage ? stage.mouseoutShape : null;
var el = this.eventListeners;
var okayToRun = true;

/*
* determine if event handler should be skipped by comparing
* parent nodes
*/
if(eventType === 'mouseover' && mout && mout._id === this._id) {
if(eventType === 'mouseover' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}
else if(eventType === 'mouseout' && mover && mover._id === this._id) {
else if(eventType === 'mouseout' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}

Expand All @@ -2238,14 +2231,14 @@ Kinetic.Node = Kinetic.Class.extend({
}
}

if(stage && mover && mout) {
stage.mouseoverShape = mover.parent;
stage.mouseoutShape = mout.parent;
}

// simulate event bubbling
if(Kinetic.Global.BUBBLE_WHITELIST.indexOf(eventType) >= 0 && !evt.cancelBubble && this.parent) {
this._handleEvent.call(this.parent, eventType, evt);
if(compareShape && compareShape.parent) {
this._handleEvent.call(this.parent, eventType, evt, compareShape.parent);
}
else {
this._handleEvent.call(this.parent, eventType, evt);
}
}
}
}
Expand Down Expand Up @@ -3161,13 +3154,13 @@ Kinetic.Stage = Kinetic.Container.extend({
( function() {
var event = pubEvent;
that.content.addEventListener(event, function(evt) {
that._setUserPosition(evt);
that['_' + event](evt);
}, false);
}());
}
},
_mouseout: function(evt) {
this._setUserPosition(evt);
// if there's a current target shape, run mouseout handlers
var targetShape = this.targetShape;
if(targetShape) {
Expand All @@ -3180,14 +3173,15 @@ Kinetic.Stage = Kinetic.Container.extend({
this._endDrag(evt);
},
_mousemove: function(evt) {
this._setUserPosition(evt);
var go = Kinetic.Global;
var shape = this._getIntersectingShape();
if(shape) {
if(!go.drag.moving && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) {
this.targetShape._handleEvent('mouseout', evt);
this.targetShape._handleEvent('mouseout', evt, shape);
}
shape._handleEvent('mouseover', evt);
shape._handleEvent('mouseover', evt, this.targetShape);
this.targetShape = shape;
}
shape._handleEvent('mousemove', evt);
Expand All @@ -3205,6 +3199,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._startDrag(evt);
},
_mousedown: function(evt) {
this._setUserPosition(evt);
var shape = this._getIntersectingShape();
if(shape) {
this.clickStart = true;
Expand All @@ -3217,6 +3212,7 @@ Kinetic.Stage = Kinetic.Container.extend({
}
},
_mouseup: function(evt) {
this._setUserPosition(evt);
var go = Kinetic.Global;
var shape = this._getIntersectingShape();
var that = this;
Expand Down Expand Up @@ -3248,6 +3244,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._endDrag(evt);
},
_touchstart: function(evt) {
this._setUserPosition(evt);
evt.preventDefault();
var shape = this._getIntersectingShape();
if(shape) {
Expand All @@ -3263,6 +3260,7 @@ Kinetic.Stage = Kinetic.Container.extend({
}
},
_touchend: function(evt) {
this._setUserPosition(evt);
var go = Kinetic.Global;
var shape = this._getIntersectingShape();
var that = this;
Expand Down Expand Up @@ -3295,6 +3293,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._endDrag(evt);
},
_touchmove: function(evt) {
this._setUserPosition(evt);
evt.preventDefault();
var shape = this._getIntersectingShape();
if(shape) {
Expand Down
6 changes: 3 additions & 3 deletions dist/kinetic-core.min.js
View file

Large diffs are not rendered by default.

27 changes: 10 additions & 17 deletions src/Node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -963,7 +963,7 @@ Kinetic.Node = Kinetic.Class.extend({
else {
stage.dragAnim.node = this.getLayer();
}
stage.dragAnim.start();
stage.dragAnim.start();
}
},
_onDraggableChange: function() {
Expand Down Expand Up @@ -996,25 +996,18 @@ Kinetic.Node = Kinetic.Class.extend({
/**
* handle node event
*/
_handleEvent: function(eventType, evt) {
_handleEvent: function(eventType, evt, compareShape) {
if(this.nodeType === 'Shape') {
evt.shape = this;
}

var stage = this.getStage();
var mover = stage ? stage.mouseoverShape : null;
var mout = stage ? stage.mouseoutShape : null;
var el = this.eventListeners;
var okayToRun = true;

/*
* determine if event handler should be skipped by comparing
* parent nodes
*/
if(eventType === 'mouseover' && mout && mout._id === this._id) {
if(eventType === 'mouseover' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}
else if(eventType === 'mouseout' && mover && mover._id === this._id) {
else if(eventType === 'mouseout' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}

Expand All @@ -1026,14 +1019,14 @@ Kinetic.Node = Kinetic.Class.extend({
}
}

if(stage && mover && mout) {
stage.mouseoverShape = mover.parent;
stage.mouseoutShape = mout.parent;
}

// simulate event bubbling
if(Kinetic.Global.BUBBLE_WHITELIST.indexOf(eventType) >= 0 && !evt.cancelBubble && this.parent) {
this._handleEvent.call(this.parent, eventType, evt);
if(compareShape && compareShape.parent) {
this._handleEvent.call(this.parent, eventType, evt, compareShape.parent);
}
else {
this._handleEvent.call(this.parent, eventType, evt);
}
}
}
}
Expand Down
12 changes: 9 additions & 3 deletions src/Stage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,13 +436,13 @@ Kinetic.Stage = Kinetic.Container.extend({
( function() {
var event = pubEvent;
that.content.addEventListener(event, function(evt) {
that._setUserPosition(evt);
that['_' + event](evt);
}, false);
}());
}
},
_mouseout: function(evt) {
this._setUserPosition(evt);
// if there's a current target shape, run mouseout handlers
var targetShape = this.targetShape;
if(targetShape) {
Expand All @@ -455,14 +455,15 @@ Kinetic.Stage = Kinetic.Container.extend({
this._endDrag(evt);
},
_mousemove: function(evt) {
this._setUserPosition(evt);
var go = Kinetic.Global;
var shape = this._getIntersectingShape();
if(shape) {
if(!go.drag.moving && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) {
this.targetShape._handleEvent('mouseout', evt);
this.targetShape._handleEvent('mouseout', evt, shape);
}
shape._handleEvent('mouseover', evt);
shape._handleEvent('mouseover', evt, this.targetShape);
this.targetShape = shape;
}
shape._handleEvent('mousemove', evt);
Expand All @@ -480,6 +481,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._startDrag(evt);
},
_mousedown: function(evt) {
this._setUserPosition(evt);
var shape = this._getIntersectingShape();
if(shape) {
this.clickStart = true;
Expand All @@ -492,6 +494,7 @@ Kinetic.Stage = Kinetic.Container.extend({
}
},
_mouseup: function(evt) {
this._setUserPosition(evt);
var go = Kinetic.Global;
var shape = this._getIntersectingShape();
var that = this;
Expand Down Expand Up @@ -523,6 +526,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._endDrag(evt);
},
_touchstart: function(evt) {
this._setUserPosition(evt);
evt.preventDefault();
var shape = this._getIntersectingShape();
if(shape) {
Expand All @@ -538,6 +542,7 @@ Kinetic.Stage = Kinetic.Container.extend({
}
},
_touchend: function(evt) {
this._setUserPosition(evt);
var go = Kinetic.Global;
var shape = this._getIntersectingShape();
var that = this;
Expand Down Expand Up @@ -570,6 +575,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._endDrag(evt);
},
_touchmove: function(evt) {
this._setUserPosition(evt);
evt.preventDefault();
var shape = this._getIntersectingShape();
if(shape) {
Expand Down
2 changes: 1 addition & 1 deletion tests/html/functionalTests.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
test.run();

document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
console.log(evt.clientX + ',' + evt.clientY);
//console.log(evt.clientX + ',' + evt.clientY);
}, false);
};

Expand Down
Loading

0 comments on commit 9cdbadc

Please sign in to comment.