lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

now that mousemove and touchmove are async due to throttling, the tests have to be async as well

Browse Source
This commit is contained in:
Eric Rowell 2014-02-26 10:38:03 -08:00
parent 64c657c9ba
commit 160de825fa
5 changed files with 425 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Global.js
View File

@ -48,6 +48,7 @@ var Kinetic = {};
traceArrMax: 100, traceArrMax: 100,
dblClickWindow: 400, dblClickWindow: 400,
pixelRatio: undefined, pixelRatio: undefined,
enableThrottling: true,
// user agent // user agent
UA: (function() { UA: (function() {

210
test/functional/DragAndDropEvents-test.js
View File

@ -1,6 +1,6 @@
suite('DragAndDropEvents', function() { suite('DragAndDropEvents', function() {
// ====================================================== // ======================================================
test('test dragstart, dragmove, dragend', function() { test('test dragstart, dragmove, dragend', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -89,51 +89,55 @@ suite('DragAndDropEvents', function() {
assert(!Kinetic.isDragging(), ' isDragging() should be false 5'); assert(!Kinetic.isDragging(), ' isDragging() should be false 5');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6'); assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6');
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 98 + top clientX: 100,
}); clientY: 98 + top
});
assert(Kinetic.isDragging(), ' isDragging() should be true 7'); assert(Kinetic.isDragging(), ' isDragging() should be true 7');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8'); assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8');
assert(dragStart, 'dragstart event was not triggered 9'); assert(dragStart, 'dragstart event was not triggered 9');
//assert.equal(dragMove, 'dragmove event was not triggered'); //assert.equal(dragMove, 'dragmove event was not triggered');
assert(!dragEnd, 'dragend event should not have been triggered 10'); assert(!dragEnd, 'dragend event should not have been triggered 10');
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 98 + top clientY: 98 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle}); Kinetic.DD._endDragAfter({dragEndNode:circle});
assert(dragStart, 'dragstart event was not triggered 11'); assert(dragStart, 'dragstart event was not triggered 11');
assert(dragMove, 'dragmove event was not triggered 12'); assert(dragMove, 'dragmove event was not triggered 12');
assert(dragEnd, 'dragend event was not triggered 13'); assert(dragEnd, 'dragend event was not triggered 13');
assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14'); assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14');
assert(!Kinetic.isDragging(), ' isDragging() should be false 15'); assert(!Kinetic.isDragging(), ' isDragging() should be false 15');
assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16'); assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16');
//console.log(greenCircle.getPosition()); //console.log(greenCircle.getPosition());
//console.log(circle.getPosition()); //console.log(circle.getPosition());
assert.equal(greenCircle.getX(), 40, 'green circle x should be 40'); assert.equal(greenCircle.getX(), 40, 'green circle x should be 40');
assert.equal(greenCircle.getY(), 40, 'green circle y should be 40'); assert.equal(greenCircle.getY(), 40, 'green circle y should be 40');
assert.equal(circle.getX(), 100, 'circle x should be 100'); assert.equal(circle.getX(), 100, 'circle x should be 100');
assert.equal(circle.getY(), 100, 'circle y should be 100'); assert.equal(circle.getY(), 100, 'circle y should be 100');
showHit(layer); showHit(layer);
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('destroy shape while dragging', function() { test('destroy shape while dragging', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -194,31 +198,33 @@ suite('DragAndDropEvents', function() {
assert(!circle.isDragging(), 'circle should not be dragging'); assert(!circle.isDragging(), 'circle should not be dragging');
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 98 + top clientX: 100,
}); clientY: 98 + top
});
assert(circle.isDragging(), 'circle should be dragging'); assert(circle.isDragging(), 'circle should be dragging');
assert(!dragEnd, 'dragEnd should not have fired yet'); assert(!dragEnd, 'dragEnd should not have fired yet');
// at this point, we are in drag and drop mode // at this point, we are in drag and drop mode
// removing or destroying the circle should trigger dragend // removing or destroying the circle should trigger dragend
circle.destroy(); circle.destroy();
layer.draw(); layer.draw();
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('click should not occur after drag and drop', function() { test('click should not occur after drag and drop', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -253,24 +259,28 @@ suite('DragAndDropEvents', function() {
clientY: 40 + top clientY: 40 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 100 + top clientX: 100,
}); clientY: 100 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 100 + top clientY: 100 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle}); Kinetic.DD._endDragAfter({dragEndNode:circle});
assert(!clicked, 'click event should not have been fired'); assert(!clicked, 'click event should not have been fired');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('cancel drag and drop by setting draggable to false', function() { test('cancel drag and drop by setting draggable to false', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -316,24 +326,27 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top clientY: 100 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 100 + top clientX: 100,
}); clientY: 100 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 100 + top clientY: 100 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle}); Kinetic.DD._endDragAfter({dragEndNode:circle});
assert.equal(circle.getPosition().x, 380, 'circle x should be 380'); assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
assert.equal(circle.getPosition().y, 100, 'circle y should be 100'); assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('drag and drop layer', function() { test('drag and drop layer', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer({ var layer = new Kinetic.Layer({
drawFunc: function() { drawFunc: function() {
@ -378,27 +391,31 @@ suite('DragAndDropEvents', function() {
clientY: 96 + top clientY: 96 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 210, stage._mousemove({
clientY: 109 + top clientX: 210,
}); clientY: 109 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 210, clientX: 210,
clientY: 109 + top clientY: 109 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle2}); Kinetic.DD._endDragAfter({dragEndNode:circle2});
//console.log(layer.getPosition()) //console.log(layer.getPosition())
assert.equal(layer.getX(), -189, 'layer x should be -189'); assert.equal(layer.getX(), -189, 'layer x should be -189');
assert.equal(layer.getY(), 13, 'layer y should be 13'); assert.equal(layer.getY(), 13, 'layer y should be 13');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('drag and drop stage', function() { test('drag and drop stage', function(done) {
var container = document.createElement('div'), var container = document.createElement('div'),
stage = new Kinetic.Stage({ stage = new Kinetic.Stage({
container: container, container: container,
@ -436,21 +453,24 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top clientY: 100 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 300, stage._mousemove({
clientY: 110 + top clientX: 300,
}); clientY: 110 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 300, clientX: 300,
clientY: 110 + top clientY: 110 + top
}); });
Kinetic.DD._endDragAfter(); Kinetic.DD._endDragAfter();
assert.equal(stage.getX(), 300); assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10); assert.equal(stage.getY(), 10);
done();
}, 20);
}); });
}); });

542
test/functional/MouseEvents-test.js
View File

@ -1,7 +1,10 @@
suite('MouseEvents', function() { suite('MouseEvents', function() {
// NOTE: disable throttling so these tests can run synchronously
Kinetic.enableThrottling = false;
// ====================================================== // ======================================================
test('stage content mouse events', function() { test('stage content mouse events', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -112,26 +115,30 @@ suite('MouseEvents', function() {
assert.equal(stageContentMouseup, 3); assert.equal(stageContentMouseup, 3);
//assert.equal(stageContentDblClick, 1); //assert.equal(stageContentDblClick, 1);
stage._mousemove({ setTimeout(function() {
clientX: 200, stage._mousemove({
clientY: 1 + top clientX: 200,
}); clientY: 1 + top
});
assert.equal(stageContentMousemove, 1); assert.equal(stageContentMousemove, 1);
stage._mouseout({ stage._mouseout({
clientX: 0, clientX: 0,
clientY: 0 clientY: 0
}); });
assert.equal(stageContentMouseout, 1); assert.equal(stageContentMouseout, 1);
stage._mouseover({ stage._mouseover({
clientX: 0, clientX: 0,
clientY: 0 clientY: 0
}); });
assert.equal(stageContentMouseover, 1); assert.equal(stageContentMouseover, 1);
done();
}, 20);
}); });
@ -395,7 +402,7 @@ suite('MouseEvents', function() {
}); });
// ====================================================== // ======================================================
test('modify fill stroke and stroke width on hover with circle', function() { test('modify fill stroke and stroke width on hover with circle', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer({ var layer = new Kinetic.Layer({
throttle: 999 throttle: 999
@ -433,30 +440,32 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'red', 'circle fill should be red'); assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black'); assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
stage._mousemove({ setTimeout(function() {
clientX: 377, stage._mousemove({
clientY: 101 + top clientX: 377,
}); clientY: 101 + top
});
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow'); assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple'); assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
// move mouse back out of circle setTimeout(function() {
stage._mousemove({ // move mouse back out of circle
clientX: 157, stage._mousemove({
clientY: 138 + top clientX: 157,
}); clientY: 138 + top
stage._mousemove({ });
clientX: 157,
clientY: 138 + top
});
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black'); assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
done();
}, 20);
}, 20);
}); });
// ====================================================== // ======================================================
test('mousedown mouseup mouseover mouseout mousemove click dblclick', function() { test('mousedown mouseup mouseover mouseout mousemove click dblclick', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -518,107 +527,110 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top; var top = stage.content.getBoundingClientRect().top;
// move mouse to center of circle to trigger mouseover setTimeout(function() {
stage._mousemove({ // move mouse to center of circle to trigger mouseover
clientX: 290, stage._mousemove({
clientY: 100 + top clientX: 290,
}); clientY: 100 + top
});
assert(mouseover, '1) mouseover should be true'); assert(mouseover, '1) mouseover should be true');
assert(!mousemove, '1) mousemove should be true'); assert(!mousemove, '1) mousemove should be true');
assert(!mousedown, '1) mousedown should be false'); assert(!mousedown, '1) mousedown should be false');
assert(!mouseup, '1) mouseup should be false'); assert(!mouseup, '1) mouseup should be false');
assert(!click, '1) click should be false'); assert(!click, '1) click should be false');
assert(!dblclick, '1) dblclick should be false'); assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false'); assert(!mouseout, '1) mouseout should be false');
// move mouse again inside circle to trigger mousemove setTimeout(function() {
stage._mousemove({ // move mouse again inside circle to trigger mousemove
clientX: 290, stage._mousemove({
clientY: 100 + top clientX: 290,
}); clientY: 100 + top
});
assert(mouseover, '2) mouseover should be true'); assert(mouseover, '2) mouseover should be true');
assert(mousemove, '2) mousemove should be true'); assert(mousemove, '2) mousemove should be true');
assert(!mousedown, '2) mousedown should be false'); assert(!mousedown, '2) mousedown should be false');
assert(!mouseup, '2) mouseup should be false'); assert(!mouseup, '2) mouseup should be false');
assert(!click, '2) click should be false'); assert(!click, '2) click should be false');
assert(!dblclick, '2) dblclick should be false'); assert(!dblclick, '2) dblclick should be false');
assert(!mouseout, '2) mouseout should be false'); assert(!mouseout, '2) mouseout should be false');
// mousedown inside circle // mousedown inside circle
stage._mousedown({ stage._mousedown({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '3) mouseover should be true'); assert(mouseover, '3) mouseover should be true');
assert(mousemove, '3) mousemove should be true'); assert(mousemove, '3) mousemove should be true');
assert(mousedown, '3) mousedown should be true'); assert(mousedown, '3) mousedown should be true');
assert(!mouseup, '3) mouseup should be false'); assert(!mouseup, '3) mouseup should be false');
assert(!click, '3) click should be false'); assert(!click, '3) click should be false');
assert(!dblclick, '3) dblclick should be false'); assert(!dblclick, '3) dblclick should be false');
assert(!mouseout, '3) mouseout should be false'); assert(!mouseout, '3) mouseout should be false');
// mouseup inside circle // mouseup inside circle
stage._mouseup({ stage._mouseup({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '4) mouseover should be true'); assert(mouseover, '4) mouseover should be true');
assert(mousemove, '4) mousemove should be true'); assert(mousemove, '4) mousemove should be true');
assert(mousedown, '4) mousedown should be true'); assert(mousedown, '4) mousedown should be true');
assert(mouseup, '4) mouseup should be true'); assert(mouseup, '4) mouseup should be true');
assert(click, '4) click should be true'); assert(click, '4) click should be true');
assert(!dblclick, '4) dblclick should be false'); assert(!dblclick, '4) dblclick should be false');
assert(!mouseout, '4) mouseout should be false'); assert(!mouseout, '4) mouseout should be false');
// mousedown inside circle // mousedown inside circle
stage._mousedown({ stage._mousedown({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '5) mouseover should be true'); assert(mouseover, '5) mouseover should be true');
assert(mousemove, '5) mousemove should be true'); assert(mousemove, '5) mousemove should be true');
assert(mousedown, '5) mousedown should be true'); assert(mousedown, '5) mousedown should be true');
assert(mouseup, '5) mouseup should be true'); assert(mouseup, '5) mouseup should be true');
assert(click, '5) click should be true'); assert(click, '5) click should be true');
assert(!dblclick, '5) dblclick should be false'); assert(!dblclick, '5) dblclick should be false');
assert(!mouseout, '5) mouseout should be false'); assert(!mouseout, '5) mouseout should be false');
// mouseup inside circle to trigger double click // mouseup inside circle to trigger double click
stage._mouseup({ stage._mouseup({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '6) mouseover should be true'); assert(mouseover, '6) mouseover should be true');
assert(mousemove, '6) mousemove should be true'); assert(mousemove, '6) mousemove should be true');
assert(mousedown, '6) mousedown should be true'); assert(mousedown, '6) mousedown should be true');
assert(mouseup, '6) mouseup should be true'); assert(mouseup, '6) mouseup should be true');
assert(click, '6) click should be true'); assert(click, '6) click should be true');
assert(dblclick, '6) dblclick should be true'); assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false'); assert(!mouseout, '6) mouseout should be false');
// move mouse outside of circle to trigger mouseout setTimeout(function() {
stage._mousemove({ // move mouse outside of circle to trigger mouseout
clientX: 0, stage._mousemove({
clientY: 100 + top clientX: 0,
}); clientY: 100 + top
stage._mousemove({ });
clientX: 0,
clientY: 100 + top
});
assert(mouseover, '7) mouseover should be true'); assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true'); assert(mousemove, '7) mousemove should be true');
assert(mousedown, '7) mousedown should be true'); assert(mousedown, '7) mousedown should be true');
assert(mouseup, '7) mouseup should be true'); assert(mouseup, '7) mouseup should be true');
assert(click, '7) click should be true'); assert(click, '7) click should be true');
assert(dblclick, '7) dblclick should be true'); assert(dblclick, '7) dblclick should be true');
assert(mouseout, '7) mouseout should be true'); assert(mouseout, '7) mouseout should be true');
done();
}, 20);
}, 20);
}, 20);
}); });
// ====================================================== // ======================================================
@ -700,7 +712,7 @@ suite('MouseEvents', function() {
}); });
// ====================================================== // ======================================================
test('group mouseenter events', function() { test('group mouseenter events', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group({ var group = new Kinetic.Group({
@ -772,84 +784,90 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top; var top = stage.content.getBoundingClientRect().top;
// move mouse outside of circles setTimeout(function() {
stage._mousemove({ // move mouse outside of circles
clientX: 177, stage._mousemove({
clientY: 146 + top clientX: 177,
}); clientY: 146 + top
});
assert.equal(redMouseenters, 0, 'redMouseenters should be 0'); assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0'); assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0'); assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0'); assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0'); assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0'); assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of red circle setTimeout(function() {
stage._mousemove({ // move mouse inside of red circle
clientX: 236, stage._mousemove({
clientY: 145 + top clientX: 236,
}); clientY: 145 + top
});
//console.log('groupMouseenters=' + groupMouseenters); //console.log('groupMouseenters=' + groupMouseenters);
assert.equal(redMouseenters, 1, 'redMouseenters should be 1'); assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0'); assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0'); assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0'); assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1'); assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0'); assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of green circle setTimeout(function() {
stage._mousemove({ // move mouse inside of green circle
clientX: 284, stage._mousemove({
clientY: 118 + top clientX: 284,
}); clientY: 118 + top
});
assert.equal(redMouseenters, 1, 'redMouseenters should be 1'); assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1'); assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1'); assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0'); assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1'); assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0'); assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse back to red circle setTimeout(function() {
// move mouse back to red circle
stage._mousemove({ stage._mousemove({
clientX: 345, clientX: 345,
clientY: 105 + top clientY: 105 + top
}); });
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse outside of circles assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
stage._mousemove({ assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
clientX: 177, assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
clientY: 146 + top assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
}); assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
stage._mousemove({ assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
clientX: 177,
clientY: 146 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');
//document.body.appendChild(layer.bufferCanvas.element) setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
//layer.bufferCanvas.element.style.marginTop = '220px'; assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');
//document.body.appendChild(layer.bufferCanvas.element)
//layer.bufferCanvas.element.style.marginTop = '220px';
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}); });
@ -923,7 +941,7 @@ suite('MouseEvents', function() {
}); });
// ====================================================== // ======================================================
test('test custom circle hit function', function() { test('test custom circle hit function', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -960,82 +978,102 @@ suite('MouseEvents', function() {
circle.on('mouseout', function() { circle.on('mouseout', function() {
mouseouts++; mouseouts++;
}); });
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 0, '1) mouseovers should be 0'); setTimeout(function() {
assert.equal(mouseouts, 0, '1) mouseouts should be 0');
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '2) mouseovers should be 1');
assert.equal(mouseouts, 0, '2)mouseouts should be 0');
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '3) mouseovers should be 1');
assert.equal(mouseouts, 1, '3) mouseouts should be 1');
showHit(layer);
// set drawBufferFunc with setter // move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
circle.hitFunc(function(context) { setTimeout(function() {
var _context = context._context; assert.equal(mouseovers, 0, '1) mouseovers should be 0');
_context.beginPath(); assert.equal(mouseouts, 0, '1) mouseouts should be 0');
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStrokeShape(this);
}); stage._mousemove({
clientX: 286,
clientY: 118 + top
});
layer.getHitCanvas().getContext().clear(); assert.equal(mouseovers, 1, '2) mouseovers should be 1');
layer.drawHit(); assert.equal(mouseouts, 0, '2)mouseouts should be 0');
setTimeout(function() {
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '3) mouseovers should be 1');
assert.equal(mouseouts, 1, '3) mouseouts should be 1');
showHit(layer);
// move mouse far outside circle // set drawBufferFunc with setter
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '4) mouseovers should be 1'); circle.hitFunc(function(context) {
assert.equal(mouseouts, 1, '4) mouseouts should be 1'); var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStrokeShape(this);
stage._mousemove({ });
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '5) mouseovers should be 1'); layer.getHitCanvas().getContext().clear();
assert.equal(mouseouts, 1, '5) mouseouts should be 1'); layer.drawHit();
stage._mousemove({ setTimeout(function() {
clientX: 321,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '6) mouseovers should be 1'); // move mouse far outside circle
assert.equal(mouseouts, 1, '6) mouseouts should be 1'); stage._mousemove({
clientX: 113,
clientY: 112 + top
});
// move to center of circle assert.equal(mouseovers, 1, '4) mouseovers should be 1');
stage._mousemove({ assert.equal(mouseouts, 1, '4) mouseouts should be 1');
clientX: 375,
clientY: 112 + top
});
assert.equal(mouseovers, 2, '7) mouseovers should be 2'); setTimeout(function() {
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '5) mouseovers should be 1');
assert.equal(mouseouts, 1, '5) mouseouts should be 1');
setTimeout(function() {
stage._mousemove({
clientX: 321,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '6) mouseovers should be 1');
assert.equal(mouseouts, 1, '6) mouseouts should be 1');
setTimeout(function() {
// move to center of circle
stage._mousemove({
clientX: 375,
clientY: 112 + top
});
assert.equal(mouseovers, 2, '7) mouseovers should be 2');
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}); });
}); });

34
test/functional/TouchEvents-test.js
View File

@ -92,7 +92,7 @@ suite('TouchEvents', function() {
// ====================================================== // ======================================================
test('touchstart touchend touchmove tap dbltap', function() { test('touchstart touchend touchmove tap dbltap', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -215,20 +215,24 @@ suite('TouchEvents', function() {
assert(tap, '11) tap should be true'); assert(tap, '11) tap should be true');
assert(dbltap, '11) dbltap should be true'); assert(dbltap, '11) dbltap should be true');
// touchmove circle setTimeout(function() {
stage._touchmove({ // touchmove circle
touches: [{ stage._touchmove({
clientX: 290, touches: [{
clientY: 100 + top, clientX: 290,
}], clientY: 100 + top,
preventDefault: function() { }],
} preventDefault: function() {
}); }
});
assert(touchstart, '12) touchstart should be true'); assert(touchstart, '12) touchstart should be true');
assert(touchmove, '12) touchmove should be true'); assert(touchmove, '12) touchmove should be true');
assert(touchend, '12) touchend should be true'); assert(touchend, '12) touchend should be true');
assert(tap, '12) tap should be true'); assert(tap, '12) tap should be true');
assert(dbltap, '12) dbltap should be true'); assert(dbltap, '12) dbltap should be true');
done();
}, 17);
}); });
}); });

1
test/runner.html
View File

@ -102,7 +102,6 @@
<script src="functional/MouseEvents-test.js"></script> <script src="functional/MouseEvents-test.js"></script>
<script src="functional/TouchEvents-test.js"></script> <script src="functional/TouchEvents-test.js"></script>
<script src="functional/KineticEvents-test.js"></script>
<script src="functional/DragAndDropEvents-test.js"></script> <script src="functional/DragAndDropEvents-test.js"></script>
<!--=============== manual tests ================--> <!--=============== manual tests ================-->