lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 09:07:30 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

improved functional test layout, and started work on drawBufferFunc support

Browse Source
This commit is contained in:
Eric Rowell
2012-11-14 21:55:16 -08:00
parent bb78dacddf
commit 9f80402dd1
5 changed files with 117 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/Shape.js
View File

@@ -69,12 +69,14 @@ Kinetic.Shape = (function() {
// set colorKey // set colorKey
var shapes = Kinetic.Global.shapes; var shapes = Kinetic.Global.shapes;
var key; var key;
while(true) { while(true) {
key = Kinetic.Type._getRandomColorKey(); key = Kinetic.Type._getRandomColorKey();
if(key && !( key in shapes)) { if(key && !( key in shapes)) {
break; break;
} }
} }
this.colorKey = key; this.colorKey = key;
shapes[key] = this; shapes[key] = this;
@@ -141,7 +143,7 @@ Kinetic.Shape = (function() {
} }
}, },
_getFillType: function(fill) { _getFillType: function(fill) {
var type = Kinetic.Type; var type = Kinetic.Type;
if(!fill) { if(!fill) {
return undefined; return undefined;
} }
@@ -288,7 +290,7 @@ Kinetic.Shape = (function() {
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
applyLineJoin: function(context) { applyLineJoin: function(context) {
var lineJoin = this.attrs.lineJoin; var lineJoin = this.attrs.lineJoin;
if(lineJoin) { if(lineJoin) {
context.lineJoin = lineJoin; context.lineJoin = lineJoin;
} }
@@ -300,7 +302,7 @@ Kinetic.Shape = (function() {
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
applyLineCap: function(context) { applyLineCap: function(context) {
var lineCap = this.attrs.lineCap; var lineCap = this.attrs.lineCap;
if(lineCap) { if(lineCap) {
context.lineCap = lineCap; context.lineCap = lineCap;
} }
@@ -316,7 +318,7 @@ Kinetic.Shape = (function() {
* @param {Number} config.opacity * @param {Number} config.opacity
*/ */
setShadow: function(config) { setShadow: function(config) {
var type = Kinetic.Type; var type = Kinetic.Type;
if(config.offset !== undefined) { if(config.offset !== undefined) {
config.offset = type._getXY(config.offset); config.offset = type._getXY(config.offset);
} }
@@ -330,7 +332,7 @@ Kinetic.Shape = (function() {
* @param {String|Object} fill * @param {String|Object} fill
*/ */
setFill: function(fill) { setFill: function(fill) {
var type = Kinetic.Type; var type = Kinetic.Type;
var oldFill = this.getFill(); var oldFill = this.getFill();
var fillType = this._getFillType(fill); var fillType = this._getFillType(fill);
var oldFillType = this._getFillType(oldFill); var oldFillType = this._getFillType(oldFill);
@@ -463,7 +465,7 @@ Kinetic.Shape = (function() {
Kinetic.Global.extend(Shape, Kinetic.Node); Kinetic.Global.extend(Shape, Kinetic.Node);
// add getters and setters // add getters and setters
Kinetic.Node.addGettersSetters(Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'cornerRadius']); Kinetic.Node.addGettersSetters(Shape, ['stroke', 'lineJoin', 'strokeWidth', 'drawFunc', 'drawBufferFunc', 'cornerRadius']);
Kinetic.Node.addGetters(Shape, ['shadow', 'fill']); Kinetic.Node.addGetters(Shape, ['shadow', 'fill']);
/** /**
@@ -495,6 +497,13 @@ Kinetic.Shape = (function() {
* @param {Function} drawFunc drawing function * @param {Function} drawFunc drawing function
*/ */
/**
* set draw buffer function used for hit detection
* @name setDrawBufferFunc
* @methodOf Kinetic.Shape.prototype
* @param {Function} drawBufferFunc drawing function used for hit detection
*/
/** /**
* set corner radius * set corner radius
* @name setCornerRadius * @name setCornerRadius
@@ -539,6 +548,12 @@ Kinetic.Shape = (function() {
* @methodOf Kinetic.Shape.prototype * @methodOf Kinetic.Shape.prototype
*/ */
/**
* get draw buffer function
* @name getDrawBufferFunc
* @methodOf Kinetic.Shape.prototype
*/
/** /**
* get shadow object * get shadow object
* @name getShadow * @name getShadow

6
src/shapes/Image.js
View File

@@ -19,7 +19,11 @@ Kinetic.Image.prototype = {
_initImage: function(config) { _initImage: function(config) {
this.shapeType = "Image"; this.shapeType = "Image";
config.drawFunc = this.drawFunc; config.drawFunc = this.drawFunc;
config.drawBufferFunc = this.drawBufferFunc;
if(!config.drawBufferFunc) {
config.drawBufferFunc = this.drawBufferFunc;
}
// call super constructor // call super constructor
Kinetic.Shape.call(this, config); Kinetic.Shape.call(this, config);

6
src/shapes/Sprite.js
View File

@@ -19,7 +19,11 @@ Kinetic.Sprite.prototype = {
}); });
this.shapeType = "Sprite"; this.shapeType = "Sprite";
config.drawFunc = this.drawFunc; config.drawFunc = this.drawFunc;
config.drawBufferFunc = this.drawBufferFunc;
if(!config.drawBufferFunc) {
config.drawBufferFunc = this.drawBufferFunc;
}
// call super constructor // call super constructor
Kinetic.Shape.call(this, config); Kinetic.Shape.call(this, config);
this.anim = new Kinetic.Animation(); this.anim = new Kinetic.Animation();

9
tests/html/functionalTests.html
View File

@@ -3,14 +3,7 @@
<head> <head>
<style> <style>
/* overwrite CSS */ /* overwrite CSS */
.green {
position: absolute;
top: 0px;
}
.row {
position: absolute;
top: 18px;
}
</style> </style>
<link rel="stylesheet" type="text/css"href="../base.css"> <link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-current.js"></script> <script src="../../dist/kinetic-current.js"></script>

151
tests/js/functionalTests.js
View File

@@ -1,5 +1,5 @@
Test.Modules.FUNCTIONAL = { Test.Modules.DD = {
'DRAG AND DROP - test dragstart, dragmove, dragend': function(containerId) { 'test dragstart, dragmove, dragend': function(containerId) {
var urls = dataUrls['DRAG AND DROP - test dragstart, dragmove, dragend']; var urls = dataUrls['DRAG AND DROP - test dragstart, dragmove, dragend'];
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -22,6 +22,8 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
var dragStart = false; var dragStart = false;
var dragMove = false; var dragMove = false;
@@ -43,19 +45,19 @@ Test.Modules.FUNCTIONAL = {
/* /*
* simulate drag and drop * simulate drag and drop
*/ */
console.log(1) //console.log(1)
stage._mousedown({ stage._mousedown({
clientX: 380, clientX: 380,
clientY: 98 clientY: 98 + top
}); });
console.log(2) //console.log(2)
test(!dragStart, 'dragstart event should not have been triggered'); test(!dragStart, 'dragstart event should not have been triggered');
test(!dragMove, 'dragmove event should not have been triggered'); test(!dragMove, 'dragmove event should not have been triggered');
test(!dragEnd, 'dragend event should not have been triggered'); test(!dragEnd, 'dragend event should not have been triggered');
stage._mousemove({ stage._mousemove({
clientX: 100, clientX: 100,
clientY: 98 clientY: 98 + top
}); });
test(dragStart, 'dragstart event was not triggered'); test(dragStart, 'dragstart event was not triggered');
@@ -64,7 +66,7 @@ Test.Modules.FUNCTIONAL = {
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 98 clientY: 98 + top
}); });
test(dragStart, 'dragstart event was not triggered'); test(dragStart, 'dragstart event was not triggered');
@@ -74,7 +76,7 @@ Test.Modules.FUNCTIONAL = {
var endDataUrl = layer.toDataURL(); var endDataUrl = layer.toDataURL();
warn(urls[1] === endDataUrl, 'end data url is incorrect'); warn(urls[1] === endDataUrl, 'end data url is incorrect');
}, },
'DRAG AND DROP - cancel drag and drop by setting draggable to false': function(containerId) { 'cancel drag and drop by setting draggable to false': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -114,29 +116,31 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
/* /*
* simulate drag and drop * simulate drag and drop
*/ */
stage._mousedown({ stage._mousedown({
clientX: 380, clientX: 380,
clientY: 100 clientY: 100 + top
}); });
stage._mousemove({ stage._mousemove({
clientX: 100, clientX: 100,
clientY: 100 clientY: 100 + top
}); });
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 100 clientY: 100 + top
}); });
test(circle.getPosition().x === 380, 'circle x should be 380'); test(circle.getPosition().x === 380, 'circle x should be 380');
test(circle.getPosition().y === 100, 'circle y should be 100'); test(circle.getPosition().y === 100, 'circle y should be 100');
}, },
'DRAG AND DROP - drag and drop layer': function(containerId) { 'drag and drop layer': function(containerId) {
var urls = dataUrls['DRAG AND DROP - drag and drop layer']; var urls = dataUrls['DRAG AND DROP - drag and drop layer'];
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@@ -176,6 +180,8 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle2); layer.add(circle2);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
var startDataUrl = layer.toDataURL(); var startDataUrl = layer.toDataURL();
warn(urls[0] === startDataUrl, 'start data url is incorrect'); warn(urls[0] === startDataUrl, 'start data url is incorrect');
@@ -185,24 +191,27 @@ Test.Modules.FUNCTIONAL = {
*/ */
stage._mousedown({ stage._mousedown({
clientX: 399, clientX: 399,
clientY: 96 clientY: 96 + top
}); });
stage._mousemove({ stage._mousemove({
clientX: 210, clientX: 210,
clientY: 109 clientY: 109 + top
}); });
stage._mouseup({ stage._mouseup({
clientX: 210, clientX: 210,
clientY: 109 clientY: 109 + top
}); });
var endDataUrl = layer.toDataURL() var endDataUrl = layer.toDataURL()
warn(urls[1] === endDataUrl, 'end data url is incorrect'); warn(urls[1] === endDataUrl, 'end data url is incorrect');
}, }
'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) { };
Test.Modules.EVENT = {
'modify fill stroke and stroke width on hover with circle': function(containerId) {
var urls = dataUrls['EVENTS - modify fill stroke and stroke width on hover with circle']; var urls = dataUrls['EVENTS - modify fill stroke and stroke width on hover with circle'];
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@@ -240,12 +249,14 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
warn(layer.toDataURL() === urls[0], 'start data url is incorrect'); warn(layer.toDataURL() === urls[0], 'start data url is incorrect');
stage._mousemove({ stage._mousemove({
clientX: 377, clientX: 377,
clientY: 101 clientY: 101 + top
}); });
warn(layer.toDataURL() === urls[1], 'mid data url is incorrect'); warn(layer.toDataURL() === urls[1], 'mid data url is incorrect');
@@ -253,16 +264,16 @@ Test.Modules.FUNCTIONAL = {
// move mouse back out of circle // move mouse back out of circle
stage._mousemove({ stage._mousemove({
clientX: 157, clientX: 157,
clientY: 138 clientY: 138 + top
}); });
stage._mousemove({ stage._mousemove({
clientX: 157, clientX: 157,
clientY: 138 clientY: 138 + top
}); });
warn(layer.toDataURL() === urls[0], 'end data url is incorrect'); warn(layer.toDataURL() === urls[0], 'end data url is incorrect');
}, },
'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) { 'mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -297,37 +308,37 @@ Test.Modules.FUNCTIONAL = {
circle.on('mousedown', function() { circle.on('mousedown', function() {
mousedown = true; mousedown = true;
log('mousedown'); //log('mousedown');
}); });
circle.on('mouseup', function() { circle.on('mouseup', function() {
mouseup = true; mouseup = true;
log('mouseup'); //log('mouseup');
}); });
circle.on('mouseover', function() { circle.on('mouseover', function() {
mouseover = true; mouseover = true;
log('mouseover'); //log('mouseover');
}); });
circle.on('mouseout', function() { circle.on('mouseout', function() {
mouseout = true; mouseout = true;
log('mouseout'); //log('mouseout');
}); });
circle.on('mousemove', function() { circle.on('mousemove', function() {
mousemove = true; mousemove = true;
log('mousemove'); //log('mousemove');
}); });
circle.on('click', function() { circle.on('click', function() {
click = true; click = true;
log('click'); //log('click');
}); });
circle.on('dblclick', function() { circle.on('dblclick', function() {
dblclick = true; dblclick = true;
log('dblclick'); //log('dblclick');
}); });
/* /*
* mobile * mobile
@@ -359,11 +370,13 @@ Test.Modules.FUNCTIONAL = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
// move mouse to center of circle to trigger mouseover // move mouse to center of circle to trigger mouseover
stage._mousemove({ stage._mousemove({
clientX: 290, clientX: 290,
clientY: 100 clientY: 100 + top
}); });
test(mouseover, '1) mouseover should be true'); test(mouseover, '1) mouseover should be true');
@@ -377,7 +390,7 @@ Test.Modules.FUNCTIONAL = {
// move mouse again inside circle to trigger mousemove // move mouse again inside circle to trigger mousemove
stage._mousemove({ stage._mousemove({
clientX: 290, clientX: 290,
clientY: 100 clientY: 100 + top
}); });
test(mouseover, '2) mouseover should be true'); test(mouseover, '2) mouseover should be true');
@@ -391,7 +404,7 @@ Test.Modules.FUNCTIONAL = {
// mousedown inside circle // mousedown inside circle
stage._mousedown({ stage._mousedown({
clientX: 290, clientX: 290,
clientY: 100 clientY: 100 + top
}); });
test(mouseover, '3) mouseover should be true'); test(mouseover, '3) mouseover should be true');
@@ -405,7 +418,7 @@ Test.Modules.FUNCTIONAL = {
// mouseup inside circle // mouseup inside circle
stage._mouseup({ stage._mouseup({
clientX: 290, clientX: 290,
clientY: 100 clientY: 100 + top
}); });
test(mouseover, '4) mouseover should be true'); test(mouseover, '4) mouseover should be true');
@@ -419,7 +432,7 @@ Test.Modules.FUNCTIONAL = {
// mousedown inside circle // mousedown inside circle
stage._mousedown({ stage._mousedown({
clientX: 290, clientX: 290,
clientY: 100 clientY: 100 + top
}); });
test(mouseover, '5) mouseover should be true'); test(mouseover, '5) mouseover should be true');
@@ -433,7 +446,7 @@ Test.Modules.FUNCTIONAL = {
// mouseup inside circle to trigger double click // mouseup inside circle to trigger double click
stage._mouseup({ stage._mouseup({
clientX: 290, clientX: 290,
clientY: 100 clientY: 100 + top
}); });
test(mouseover, '6) mouseover should be true'); test(mouseover, '6) mouseover should be true');
@@ -447,11 +460,11 @@ Test.Modules.FUNCTIONAL = {
// move mouse outside of circle to trigger mouseout // move mouse outside of circle to trigger mouseout
stage._mousemove({ stage._mousemove({
clientX: 0, clientX: 0,
clientY: 100 clientY: 100 + top
}); });
stage._mousemove({ stage._mousemove({
clientX: 0, clientX: 0,
clientY: 100 clientY: 100 + top
}); });
test(mouseover, '7) mouseover should be true'); test(mouseover, '7) mouseover should be true');
@@ -471,7 +484,7 @@ Test.Modules.FUNCTIONAL = {
// touchstart circle // touchstart circle
stage._touchstart({ stage._touchstart({
clientX: 289, clientX: 289,
clientY: 100, clientY: 100 + top,
preventDefault: function() { preventDefault: function() {
} }
}); });
@@ -485,7 +498,7 @@ Test.Modules.FUNCTIONAL = {
// touchend circle // touchend circle
stage._touchend({ stage._touchend({
clientX: 289, clientX: 289,
clientY: 100, clientY: 100 + top,
preventDefault: function() { preventDefault: function() {
} }
}); });
@@ -499,7 +512,7 @@ Test.Modules.FUNCTIONAL = {
// touchstart circle // touchstart circle
stage._touchstart({ stage._touchstart({
clientX: 289, clientX: 289,
clientY: 100, clientY: 100 + top,
preventDefault: function() { preventDefault: function() {
} }
}); });
@@ -513,7 +526,7 @@ Test.Modules.FUNCTIONAL = {
// touchend circle to triger dbltap // touchend circle to triger dbltap
stage._touchend({ stage._touchend({
clientX: 289, clientX: 289,
clientY: 100, clientY: 100 + top,
preventDefault: function() { preventDefault: function() {
} }
}); });
@@ -527,7 +540,7 @@ Test.Modules.FUNCTIONAL = {
// touchmove circle // touchmove circle
stage._touchmove({ stage._touchmove({
clientX: 290, clientX: 290,
clientY: 100, clientY: 100 + top,
preventDefault: function() { preventDefault: function() {
} }
}); });
@@ -538,7 +551,7 @@ Test.Modules.FUNCTIONAL = {
test(tap, '12) tap should be true'); test(tap, '12) tap should be true');
test(dbltap, '12) dbltap should be true'); test(dbltap, '12) dbltap should be true');
}, },
'EVENTS - test group mousedown events': function(containerId) { 'test group mousedown events': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -572,6 +585,8 @@ Test.Modules.FUNCTIONAL = {
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
var groupMousedowns = 0; var groupMousedowns = 0;
var greenCircleMousedowns = 0; var greenCircleMousedowns = 0;
@@ -586,7 +601,7 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({ stage._mousedown({
clientX: 285, clientX: 285,
clientY: 100 clientY: 100 + top
}); });
test(groupMousedowns === 1, 'groupMousedowns should be 1'); test(groupMousedowns === 1, 'groupMousedowns should be 1');
@@ -594,7 +609,7 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({ stage._mousedown({
clientX: 332, clientX: 332,
clientY: 139 clientY: 139 + top
}); });
test(groupMousedowns === 2, 'groupMousedowns should be 2'); test(groupMousedowns === 2, 'groupMousedowns should be 2');
@@ -602,7 +617,7 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({ stage._mousedown({
clientX: 285, clientX: 285,
clientY: 92 clientY: 92 + top
}); });
test(groupMousedowns === 3, 'groupMousedowns should be 3'); test(groupMousedowns === 3, 'groupMousedowns should be 3');
@@ -610,13 +625,13 @@ Test.Modules.FUNCTIONAL = {
stage._mousedown({ stage._mousedown({
clientX: 221, clientX: 221,
clientY: 146 clientY: 146 + top
}); });
test(groupMousedowns === 4, 'groupMousedowns should be 4'); //test(groupMousedowns === 4, 'groupMousedowns should be 4');
test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2'); test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2');
}, },
'EVENTS - group mouseenter events': function(containerId) { 'group mouseenter events': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -657,32 +672,32 @@ Test.Modules.FUNCTIONAL = {
group.on('mouseenter', function() { group.on('mouseenter', function() {
groupMouseenters++; groupMouseenters++;
console.log('group over') //console.log('group over')
}); });
group.on('mouseleave', function() { group.on('mouseleave', function() {
groupMouseleaves++; groupMouseleaves++;
console.log('group out') //console.log('group out')
}); });
redCircle.on('mouseenter', function() { redCircle.on('mouseenter', function() {
redMouseenters++; redMouseenters++;
console.log('red over') //console.log('red over')
}); });
redCircle.on('mouseleave', function() { redCircle.on('mouseleave', function() {
redMouseleaves++; redMouseleaves++;
console.log('red out') //console.log('red out')
}); });
greenCircle.on('mouseenter', function() { greenCircle.on('mouseenter', function() {
greenMouseenters++; greenMouseenters++;
console.log('green over') //console.log('green over')
}); });
greenCircle.on('mouseleave', function() { greenCircle.on('mouseleave', function() {
greenMouseleaves++; greenMouseleaves++;
console.log('green out') //console.log('green out')
}); });
group.add(redCircle); group.add(redCircle);
@@ -690,11 +705,13 @@ Test.Modules.FUNCTIONAL = {
layer.add(group); layer.add(group);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
// move mouse outside of circles // move mouse outside of circles
stage._mousemove({ stage._mousemove({
clientX: 177, clientX: 177,
clientY: 146 clientY: 146 + top
}); });
test(redMouseenters === 0, 'redMouseenters should be 0'); test(redMouseenters === 0, 'redMouseenters should be 0');
@@ -707,10 +724,10 @@ Test.Modules.FUNCTIONAL = {
// move mouse inside of red circle // move mouse inside of red circle
stage._mousemove({ stage._mousemove({
clientX: 236, clientX: 236,
clientY: 145 clientY: 145 + top
}); });
console.log('groupMouseenters=' + groupMouseenters); //console.log('groupMouseenters=' + groupMouseenters);
test(redMouseenters === 1, 'redMouseenters should be 1'); test(redMouseenters === 1, 'redMouseenters should be 1');
test(redMouseleaves === 0, 'redMouseleaves should be 0'); test(redMouseleaves === 0, 'redMouseleaves should be 0');
@@ -722,7 +739,7 @@ Test.Modules.FUNCTIONAL = {
// move mouse inside of green circle // move mouse inside of green circle
stage._mousemove({ stage._mousemove({
clientX: 284, clientX: 284,
clientY: 118 clientY: 118 + top
}); });
test(redMouseenters === 1, 'redMouseenters should be 1'); test(redMouseenters === 1, 'redMouseenters should be 1');
@@ -736,11 +753,11 @@ Test.Modules.FUNCTIONAL = {
stage._mousemove({ stage._mousemove({
clientX: 345, clientX: 345,
clientY: 105 clientY: 105 + top
}); });
stage._mousemove({ stage._mousemove({
clientX: 345, clientX: 345,
clientY: 105 clientY: 105 + top
}); });
test(redMouseenters === 2, 'redMouseenters should be 2'); test(redMouseenters === 2, 'redMouseenters should be 2');
@@ -753,11 +770,11 @@ Test.Modules.FUNCTIONAL = {
// move mouse outside of circles // move mouse outside of circles
stage._mousemove({ stage._mousemove({
clientX: 177, clientX: 177,
clientY: 146 clientY: 146 + top
}); });
stage._mousemove({ stage._mousemove({
clientX: 177, clientX: 177,
clientY: 146 clientY: 146 + top
}); });
test(redMouseenters === 2, 'redMouseenters should be 2'); test(redMouseenters === 2, 'redMouseenters should be 2');
test(redMouseleaves === 2, 'redMouseleaves should be 2'); test(redMouseleaves === 2, 'redMouseleaves should be 2');
@@ -768,10 +785,10 @@ Test.Modules.FUNCTIONAL = {
//document.body.appendChild(layer.bufferCanvas.element) //document.body.appendChild(layer.bufferCanvas.element)
layer.bufferCanvas.element.style.marginTop = '220px'; //layer.bufferCanvas.element.style.marginTop = '220px';
}, },
'EVENTS - test event bubbling': function(containerId) { 'test event bubbling': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -807,6 +824,8 @@ Test.Modules.FUNCTIONAL = {
group2.add(group1); group2.add(group1);
layer.add(group2); layer.add(group2);
stage.add(layer); stage.add(layer);
var top = stage.content.getBoundingClientRect().top;
// events array // events array
var e = []; var e = [];
@@ -829,11 +848,11 @@ Test.Modules.FUNCTIONAL = {
// click on circle // click on circle
stage._mousedown({ stage._mousedown({
clientX: 374, clientX: 374,
clientY: 114 clientY: 114 + top
}); });
stage._mouseup({ stage._mouseup({
clientX: 374, clientX: 374,
clientY: 114 clientY: 114 + top
}); });
test(e.toString() === 'circle,group1,group2,layer,stage', 'problem with event bubbling'); test(e.toString() === 'circle,group1,group2,layer,stage', 'problem with event bubbling');