lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 07:25:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactored ancestor comparison logic to ensure that container handlers aren't incorrectly executed for mouseover mouseout. Fixed up functional tests

Browse Source
This commit is contained in:
Eric Rowell 2012-08-16 22:03:39 -07:00
parent 6a58830df3
commit 9cdbadc4fd
6 changed files with 54 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
dist/kinetic-core.js vendored
View File

@ -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
*
@ -2175,7 +2175,7 @@ Kinetic.Node = Kinetic.Class.extend({
else {
stage.dragAnim.node = this.getLayer();
}
stage.dragAnim.start();
stage.dragAnim.start();
}
},
_onDraggableChange: function() {
@ -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;
}
@ -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);
}
}
}
}
@ -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) {
@ -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);
@ -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;
@ -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;
@ -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) {
@ -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;
@ -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) {

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

27
src/Node.js
View File

@ -963,7 +963,7 @@ Kinetic.Node = Kinetic.Class.extend({
else {
stage.dragAnim.node = this.getLayer();
}
stage.dragAnim.start();
stage.dragAnim.start();
}
},
_onDraggableChange: function() {
@ -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;
}
@ -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);
}
}
}
}

12
src/Stage.js
View File

@ -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) {
@ -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);
@ -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;
@ -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;
@ -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) {
@ -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;
@ -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) {

2
tests/html/functionalTests.html
View File

@ -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);
};

297
tests/js/functionalTests.js
View File

@ -43,11 +43,12 @@ Test.prototype.tests = {
/*
* simulate drag and drop
*/
console.log(1)
stage._mousedown({
clientX: 380,
clientY: 98
});
console.log(2)
test(!dragStart, 'dragstart event should not have been triggered');
test(!dragMove, 'dragmove event should not have been triggered');
test(!dragEnd, 'dragend event should not have been triggered');
@ -261,7 +262,7 @@ Test.prototype.tests = {
warn(layer.toDataURL() === urls[0], 'end data url is incorrect');
},
'EVENTS - path detection mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -366,286 +367,7 @@ Test.prototype.tests = {
});
test(mouseover, '1) mouseover should be true');
test(!mousemove, '1) mousemove should be false');
test(!mousedown, '1) mousedown should be false');
test(!mouseup, '1) mouseup should be false');
test(!click, '1) click should be false');
test(!dblclick, '1) dblclick should be false');
test(!mouseout, '1) mouseout should be false');
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
clientY: 100
});
test(mouseover, '2) mouseover should be true');
test(mousemove, '2) mousemove should be true');
test(!mousedown, '2) mousedown should be false');
test(!mouseup, '2) mouseup should be false');
test(!click, '2) click should be false');
test(!dblclick, '2) dblclick should be false');
test(!mouseout, '2) mouseout should be false');
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100
});
test(mouseover, '3) mouseover should be true');
test(mousemove, '3) mousemove should be true');
test(mousedown, '3) mousedown should be true');
test(!mouseup, '3) mouseup should be false');
test(!click, '3) click should be false');
test(!dblclick, '3) dblclick should be false');
test(!mouseout, '3) mouseout should be false');
// mouseup inside circle
stage._mouseup({
clientX: 290,
clientY: 100
});
test(mouseover, '4) mouseover should be true');
test(mousemove, '4) mousemove should be true');
test(mousedown, '4) mousedown should be true');
test(mouseup, '4) mouseup should be true');
test(click, '4) click should be true');
test(!dblclick, '4) dblclick should be false');
test(!mouseout, '4) mouseout should be false');
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100
});
test(mouseover, '5) mouseover should be true');
test(mousemove, '5) mousemove should be true');
test(mousedown, '5) mousedown should be true');
test(mouseup, '5) mouseup should be true');
test(click, '5) click should be true');
test(!dblclick, '5) dblclick should be false');
test(!mouseout, '5) mouseout should be false');
// mouseup inside circle to trigger double click
stage._mouseup({
clientX: 290,
clientY: 100
});
test(mouseover, '6) mouseover should be true');
test(mousemove, '6) mousemove should be true');
test(mousedown, '6) mousedown should be true');
test(mouseup, '6) mouseup should be true');
test(click, '6) click should be true');
test(dblclick, '6) dblclick should be true');
test(!mouseout, '6) mouseout should be false');
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100
});
stage._mousemove({
clientX: 0,
clientY: 100
});
test(mouseover, '7) mouseover should be true');
test(mousemove, '7) mousemove should be true');
test(mousedown, '7) mousedown should be true');
test(mouseup, '7) mouseup should be true');
test(click, '7) click should be true');
test(dblclick, '7) dblclick should be true');
test(mouseout, '7) mouseout should be true');
/*
* mobile tests
*/
// reset inDoubleClickWindow
stage.inDoubleClickWindow = false;
// touchstart circle
stage._touchstart({
clientX: 289,
clientY: 100,
preventDefault: function() {
}
});
test(touchstart, '8) touchstart should be true');
test(!touchmove, '8) touchmove should be false');
test(!touchend, '8) touchend should be false');
test(!tap, '8) tap should be false');
test(!dbltap, '8) dbltap should be false');
// touchend circle
stage._touchend({
clientX: 289,
clientY: 100,
preventDefault: function() {
}
});
test(touchstart, '9) touchstart should be true');
test(!touchmove, '9) touchmove should be false');
test(touchend, '9) touchend should be true');
test(tap, '9) tap should be true');
test(!dbltap, '9) dbltap should be false');
// touchstart circle
stage._touchstart({
clientX: 289,
clientY: 100,
preventDefault: function() {
}
});
test(touchstart, '10) touchstart should be true');
test(!touchmove, '10) touchmove should be false');
test(touchend, '10) touchend should be true');
test(tap, '10) tap should be true');
test(!dbltap, '10) dbltap should be false');
// touchend circle to triger dbltap
stage._touchend({
clientX: 289,
clientY: 100,
preventDefault: function() {
}
});
test(touchstart, '11) touchstart should be true');
test(!touchmove, '11) touchmove should be false');
test(touchend, '11) touchend should be true');
test(tap, '11) tap should be true');
test(dbltap, '11) dbltap should be true');
// touchmove circle
stage._touchmove({
clientX: 290,
clientY: 100,
preventDefault: function() {
}
});
test(touchstart, '12) touchstart should be true');
test(touchmove, '12) touchmove should be true');
test(touchend, '12) touchend should be true');
test(tap, '12) tap should be true');
test(dbltap, '12) dbltap should be true');
},
'EVENTS - pixel detection mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
throttle: 999
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
detectionType: 'pixel'
});
// desktop events
var mousedown = false;
var mouseup = false;
var click = false;
var dblclick = false;
var mouseover = false;
var mouseout = false;
var mousemove = false;
// mobile events
var touchstart = false;
var touchend = false;
var tap = false;
var touchmove = false;
var dbltap = false;
circle.on('mousedown', function() {
mousedown = true;
//log('mousedown');
});
circle.on('mouseup', function() {
mouseup = true;
//log('mouseup');
});
circle.on('mouseover', function() {
mouseover = true;
//log('mouseover');
});
circle.on('mouseout', function() {
mouseout = true;
//log('mouseout');
});
circle.on('mousemove', function() {
mousemove = true;
//log('mousemove');
});
circle.on('click', function() {
click = true;
//log('click');
});
circle.on('dblclick', function() {
dblclick = true;
//log('dblclick');
});
/*
* mobile
*/
circle.on('touchstart', function() {
touchstart = true;
//log('touchstart');
});
circle.on('touchend', function() {
touchend = true;
//log('touchend');
});
circle.on('touchmove', function() {
touchmove = true;
//log('touchmove');
});
circle.on('tap', function(evt) {
tap = true;
//log('tap');
});
circle.on('dbltap', function() {
dbltap = true;
//log('dbltap');
});
layer.add(circle);
stage.add(layer);
circle.saveImageData();
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
clientY: 100
});
test(mouseover, '1) mouseover should be true');
test(!mousemove, '1) mousemove should be false');
test(mousemove, '1) mousemove should be true');
test(!mousedown, '1) mousedown should be false');
test(!mouseup, '1) mouseup should be false');
test(!click, '1) click should be false');
@ -935,30 +657,32 @@ Test.prototype.tests = {
group.on('mouseover', function() {
groupMouseovers++;
//onsole.log('over')
console.log('group over')
});
group.on('mouseout', function() {
groupMouseouts++;
//console.log('out')
console.log('group out')
});
redEllipse.on('mouseover', function() {
redMouseovers++;
//console.log('over')
console.log('red over')
});
redEllipse.on('mouseout', function() {
redMouseouts++;
//console.log('out')
console.log('red out')
});
greenEllipse.on('mouseover', function() {
greenMouseovers++;
console.log('green over')
});
greenEllipse.on('mouseout', function() {
greenMouseouts++;
console.log('green out')
});
group.add(redEllipse);
@ -1039,6 +763,7 @@ Test.prototype.tests = {
test(greenMouseouts === 1, 'greenMouseouts should be 1');
test(groupMouseovers === 1, 'groupMouseovers should be 1');
test(groupMouseouts === 1, 'groupMouseouts should be 1');
},
'EVENTS - test event bubbling': function(containerId) {
var stage = new Kinetic.Stage({