mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
1517 lines
42 KiB
JavaScript
1517 lines
42 KiB
JavaScript
|
|
Test.Modules.DD = {
|
|
'stage mouse handlers': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
draggable: true
|
|
});
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle',
|
|
draggable: true
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
/*
|
|
stage.on('mousedown', function(evt) {
|
|
console.log('mousedown');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
|
|
stage.on('mouseup', function(evt) {
|
|
console.log('mouseup');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
|
|
stage.on('mousemove', function(evt) {
|
|
console.log('mousemove');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
|
|
stage.on('click', function(evt) {
|
|
console.log('click');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
|
|
|
|
stage.on('dblclick', function(evt) {
|
|
console.log('dblclick');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
|
|
|
|
|
|
|
|
stage.on('dragstart', function(evt) {
|
|
console.log('dragstart');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
*/
|
|
|
|
|
|
stage.on('mouseover', function(evt) {
|
|
console.log('mouseover');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
|
|
stage.on('mouseout', function(evt) {
|
|
console.log('mouseout');
|
|
console.log(evt.targetNode);
|
|
console.log('-------');
|
|
});
|
|
|
|
|
|
|
|
},
|
|
'remove shape with onclick': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
name: 'myCircle',
|
|
draggable: true
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
function remove() {
|
|
circle.remove();
|
|
layer.draw();
|
|
}
|
|
|
|
circle.on('click', function() {
|
|
setTimeout(remove, 0);
|
|
});
|
|
|
|
stage._mousedown({
|
|
clientX: 291,
|
|
clientY: 112 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 291,
|
|
clientY: 112 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle});
|
|
},
|
|
'test dragstart, dragmove, dragend': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var greenCircle = new Kinetic.Circle({
|
|
x: 40,
|
|
y: 40,
|
|
radius: 20,
|
|
strokeWidth: 4,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
opacity: 0.5
|
|
});
|
|
|
|
|
|
var circle = new Kinetic.Circle({
|
|
x: 380,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black',
|
|
opacity: 0.5
|
|
|
|
});
|
|
|
|
circle.setDraggable(true);
|
|
|
|
layer.add(circle);
|
|
layer.add(greenCircle);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
var dragStart = false;
|
|
var dragMove = false;
|
|
var dragEnd = false;
|
|
var mouseup = false;
|
|
var layerDragMove = false;
|
|
var events = [];
|
|
|
|
circle.on('dragstart', function() {
|
|
dragStart = true;
|
|
});
|
|
|
|
|
|
circle.on('dragmove', function() {
|
|
dragMove = true;
|
|
});
|
|
|
|
|
|
layer.on('dragmove', function() {
|
|
//console.log('move');
|
|
});
|
|
|
|
circle.on('dragend', function() {
|
|
dragEnd = true;
|
|
console.log('dragend');
|
|
events.push('dragend');
|
|
});
|
|
|
|
|
|
|
|
circle.on('mouseup', function() {
|
|
console.log('mouseup');
|
|
events.push('mouseup');
|
|
});
|
|
|
|
|
|
test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false');
|
|
test(!Kinetic.Global.isDragReady(), 'Global isDragReady()) should be false');
|
|
|
|
/*
|
|
* simulate drag and drop
|
|
*/
|
|
//console.log(1)
|
|
stage._mousedown({
|
|
clientX: 380,
|
|
clientY: 98 + top
|
|
});
|
|
//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');
|
|
|
|
test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false');
|
|
test(Kinetic.Global.isDragReady(), 'Global isDragReady()) should be true');
|
|
|
|
stage._mousemove({
|
|
clientX: 100,
|
|
clientY: 98 + top
|
|
});
|
|
|
|
test(Kinetic.Global.isDragging(), 'Global isDragging() should be true');
|
|
test(Kinetic.Global.isDragReady(), 'Global isDragReady()) should be true');
|
|
|
|
test(dragStart, 'dragstart event was not triggered');
|
|
//test(dragMove, 'dragmove event was not triggered');
|
|
test(!dragEnd, 'dragend event should not have been triggered');
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 100,
|
|
clientY: 98 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle});
|
|
|
|
test(dragStart, 'dragstart event was not triggered');
|
|
test(dragMove, 'dragmove event was not triggered');
|
|
test(dragEnd, 'dragend event was not triggered');
|
|
|
|
test(events.toString() === 'mouseup,dragend', 'mouseup should occur before dragend');
|
|
|
|
|
|
test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false');
|
|
test(!Kinetic.Global.isDragReady(), 'Global isDragReady()) should be false');
|
|
|
|
//console.log(greenCircle.getPosition());
|
|
//console.log(circle.getPosition());
|
|
|
|
|
|
|
|
test(greenCircle.getX() === 40, 'green circle x should be 40');
|
|
test(greenCircle.getY() === 40, 'green circle y should be 40');
|
|
test(circle.getX() === 100, 'circle x should be 100');
|
|
test(circle.getY() === 100, 'circle y should be 100');
|
|
|
|
showHit(layer);
|
|
|
|
},
|
|
'destroy shape while dragging': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var greenCircle = new Kinetic.Circle({
|
|
x: 40,
|
|
y: 40,
|
|
radius: 20,
|
|
strokeWidth: 4,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
opacity: 0.5
|
|
});
|
|
|
|
|
|
var circle = new Kinetic.Circle({
|
|
x: 380,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black',
|
|
opacity: 0.5
|
|
|
|
});
|
|
|
|
circle.setDraggable(true);
|
|
|
|
layer.add(circle);
|
|
layer.add(greenCircle);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
|
|
var dragEnd = false;
|
|
|
|
|
|
circle.on('dragend', function() {
|
|
dragEnd = true;
|
|
|
|
});
|
|
|
|
|
|
|
|
circle.on('mouseup', function() {
|
|
console.log('mouseup');
|
|
events.push('mouseup');
|
|
});
|
|
|
|
test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false');
|
|
test(!Kinetic.Global.isDragReady(), 'Global isDragReady()) should be false');
|
|
|
|
|
|
stage._mousedown({
|
|
clientX: 380,
|
|
clientY: 98 + top
|
|
});
|
|
|
|
test(!circle.isDragging(), 'circle should not be dragging');
|
|
|
|
stage._mousemove({
|
|
clientX: 100,
|
|
clientY: 98 + top
|
|
});
|
|
|
|
|
|
test(circle.isDragging(), 'circle should be dragging');
|
|
test(!dragEnd, 'dragEnd should not have fired yet');
|
|
|
|
// at this point, we are in drag and drop mode
|
|
|
|
|
|
// removing or destroying the circle should trigger dragend
|
|
circle.destroy();
|
|
layer.draw();
|
|
|
|
test(!circle.isDragging(), 'destroying circle should stop drag and drop');
|
|
test(dragEnd, 'dragEnd should have fired');
|
|
|
|
|
|
|
|
},
|
|
'click should not occur after drag and drop': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var circle = new Kinetic.Circle({
|
|
x: 40,
|
|
y: 40,
|
|
radius: 20,
|
|
strokeWidth: 4,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
draggable: true
|
|
});
|
|
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top,
|
|
clicked = false;
|
|
|
|
circle.on('click', function() {
|
|
console.log('click');
|
|
clicked = true;
|
|
});
|
|
|
|
circle.on('dblclick', function() {
|
|
console.log('dblclick');
|
|
});
|
|
|
|
stage._mousedown({
|
|
clientX: 40,
|
|
clientY: 40 + top
|
|
});
|
|
|
|
stage._mousemove({
|
|
clientX: 100,
|
|
clientY: 100 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 100,
|
|
clientY: 100 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle});
|
|
|
|
test(!clicked, 'click event should not have been fired');
|
|
|
|
},
|
|
'cancel drag and drop by setting draggable to false': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: 380,
|
|
y: 100,
|
|
radius: 70,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black',
|
|
draggable: true
|
|
});
|
|
|
|
var dragStart = false;
|
|
var dragMove = false;
|
|
var dragEnd = false;
|
|
|
|
circle.on('dragstart', function() {
|
|
dragStart = true;
|
|
});
|
|
|
|
circle.on('dragmove', function() {
|
|
dragMove = true;
|
|
});
|
|
|
|
circle.on('dragend', function() {
|
|
dragEnd = true;
|
|
});
|
|
|
|
circle.on('mousedown', function() {
|
|
circle.setDraggable(false);
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
/*
|
|
* simulate drag and drop
|
|
*/
|
|
stage._mousedown({
|
|
clientX: 380,
|
|
clientY: 100 + top
|
|
});
|
|
|
|
stage._mousemove({
|
|
clientX: 100,
|
|
clientY: 100 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 100,
|
|
clientY: 100 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle});
|
|
|
|
test(circle.getPosition().x === 380, 'circle x should be 380');
|
|
test(circle.getPosition().y === 100, 'circle y should be 100');
|
|
},
|
|
'drag and drop layer': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
drawFunc: function() {
|
|
var context = this.getContext();
|
|
context.beginPath();
|
|
context.moveTo(200, 50);
|
|
context.lineTo(420, 80);
|
|
context.quadraticCurveTo(300, 100, 260, 170);
|
|
context.closePath();
|
|
context.fillStyle = 'blue';
|
|
context.fill(context);
|
|
},
|
|
draggable: true
|
|
});
|
|
|
|
var circle1 = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'red'
|
|
});
|
|
|
|
var circle2 = new Kinetic.Circle({
|
|
x: 400,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green'
|
|
});
|
|
|
|
layer.add(circle1);
|
|
layer.add(circle2);
|
|
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
/*
|
|
* simulate drag and drop
|
|
*/
|
|
stage._mousedown({
|
|
clientX: 399,
|
|
clientY: 96 + top
|
|
});
|
|
|
|
stage._mousemove({
|
|
clientX: 210,
|
|
clientY: 109 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 210,
|
|
clientY: 109 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle2});
|
|
|
|
console.log(layer.getPosition())
|
|
|
|
test(layer.getX() === -189, 'layer x should be -189');
|
|
test(layer.getY() === 13, 'layer y should be 13');
|
|
|
|
}
|
|
};
|
|
|
|
Test.Modules.EVENT = {
|
|
'draw events': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
|
|
var circle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'red'
|
|
});
|
|
|
|
var events = [];
|
|
|
|
layer.on('draw', function(evt) {
|
|
events.push('layer-draw');
|
|
});
|
|
|
|
layer.on('beforeDraw', function(evt) {
|
|
events.push('layer-beforeDraw');
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
console.log(events.toString())
|
|
|
|
test(events.toString() === 'layer-beforeDraw,layer-draw', 'draw event order is incorrect');
|
|
|
|
|
|
},
|
|
'click mapping': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
drawFunc: function() {
|
|
var context = this.getContext();
|
|
context.beginPath();
|
|
context.moveTo(200, 50);
|
|
context.lineTo(420, 80);
|
|
context.quadraticCurveTo(300, 100, 260, 170);
|
|
context.closePath();
|
|
context.fillStyle = 'blue';
|
|
context.fill(context);
|
|
}
|
|
});
|
|
|
|
var redCircle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'red'
|
|
});
|
|
|
|
var greenCircle = new Kinetic.Circle({
|
|
x: 400,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'green'
|
|
});
|
|
|
|
var redClicks = 0;
|
|
var greenClicks = 0;
|
|
|
|
redCircle.on('click', function() {
|
|
console.log('clicked redCircle');
|
|
redClicks++;
|
|
});
|
|
|
|
greenCircle.on('click', function() {
|
|
console.log('clicked greenCircle');
|
|
greenClicks++;
|
|
});
|
|
|
|
|
|
layer.add(redCircle);
|
|
layer.add(greenCircle);
|
|
|
|
stage.add(layer);
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
showHit(layer);
|
|
|
|
// mousedown and mouseup on red circle
|
|
stage._mousedown({
|
|
clientX: 284,
|
|
clientY: 113 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 284,
|
|
clientY: 113 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:redCircle});
|
|
|
|
test(redClicks === 1, 'red circle should have 1 click');
|
|
test(greenClicks === 0, 'green circle should have 0 clicks');
|
|
|
|
// mousedown and mouseup on green circle
|
|
stage._mousedown({
|
|
clientX: 397,
|
|
clientY: 108 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 397,
|
|
clientY: 108 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:redCircle});
|
|
|
|
test(redClicks === 1, 'red circle should have 1 click');
|
|
test(greenClicks === 1, 'green circle should have 1 click');
|
|
|
|
// mousedown red circle and mouseup on green circle
|
|
stage._mousedown({
|
|
clientX: 284,
|
|
clientY: 113 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 397,
|
|
clientY: 108 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:redCircle});
|
|
|
|
test(redClicks === 1, 'red circle should still have 1 click');
|
|
test(greenClicks === 1, 'green circle should still have 1 click');
|
|
|
|
},
|
|
'text events': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var text = new Kinetic.Text({
|
|
x: 290,
|
|
y: 111,
|
|
fontFamily: 'Calibri',
|
|
fontSize: 30,
|
|
fill: 'red',
|
|
text: 'Testing 123',
|
|
draggable: true
|
|
});
|
|
|
|
var click = false
|
|
|
|
text.on('click', function() {
|
|
console.log('text click');
|
|
click = true;
|
|
});
|
|
|
|
layer.add(text);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
showHit(layer);
|
|
|
|
stage._mousedown({
|
|
clientX: 300,
|
|
clientY: 120 + top
|
|
});
|
|
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 300,
|
|
clientY: 120 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:text});
|
|
|
|
//TODO: can't get this to pass
|
|
test(click, 'click event should have been fired when mousing down and then up on text');
|
|
|
|
},
|
|
'modify fill stroke and stroke width on hover with circle': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer({
|
|
throttle: 999
|
|
});
|
|
var circle = new Kinetic.Circle({
|
|
x: 380,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black'
|
|
});
|
|
|
|
circle.on('mouseover', function() {
|
|
this.setFill('yellow');
|
|
this.setStroke('purple');
|
|
this.setStrokeWidth(20);
|
|
//console.log('mouseover')
|
|
layer.draw();
|
|
});
|
|
|
|
circle.on('mouseout', function() {
|
|
this.setFill('red');
|
|
this.setStroke('black');
|
|
this.setStrokeWidth(4);
|
|
//console.log('mouseout')
|
|
layer.draw();
|
|
});
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
test(circle.getFill() === 'red', 'circle fill should be red');
|
|
test(circle.getStroke() === 'black', 'circle stroke should be black');
|
|
|
|
stage._mousemove({
|
|
clientX: 377,
|
|
clientY: 101 + top
|
|
});
|
|
|
|
test(circle.getFill() === 'yellow', 'circle fill should be yellow');
|
|
test(circle.getStroke() === 'purple', 'circle stroke should be purple');
|
|
|
|
// move mouse back out of circle
|
|
stage._mousemove({
|
|
clientX: 157,
|
|
clientY: 138 + top
|
|
});
|
|
stage._mousemove({
|
|
clientX: 157,
|
|
clientY: 138 + top
|
|
});
|
|
|
|
test(circle.getFill() === 'red', 'circle fill should be red');
|
|
test(circle.getStroke() === 'black', 'circle stroke should be black');
|
|
},
|
|
'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.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
fill: 'red',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
// 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);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
// move mouse to center of circle to trigger mouseover
|
|
stage._mousemove({
|
|
clientX: 290,
|
|
clientY: 100 + top
|
|
});
|
|
|
|
test(mouseover, '1) mouseover should be true');
|
|
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');
|
|
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 + top
|
|
});
|
|
|
|
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 + top
|
|
});
|
|
|
|
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
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 290,
|
|
clientY: 100 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle});
|
|
|
|
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 + top
|
|
});
|
|
|
|
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
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 290,
|
|
clientY: 100 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle});
|
|
|
|
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 + top
|
|
});
|
|
stage._mousemove({
|
|
clientX: 0,
|
|
clientY: 100 + top
|
|
});
|
|
|
|
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
|
|
Kinetic.Global.inDblClickWindow = false;
|
|
|
|
// touchstart circle
|
|
stage._touchstart({
|
|
clientX: 289,
|
|
clientY: 100 + top,
|
|
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 + top,
|
|
preventDefault: function() {
|
|
}
|
|
});
|
|
// end drag is tied to document mouseup and touchend event
|
|
// which can't be simulated. call _endDrag manually
|
|
//Kinetic.DD._endDrag();
|
|
|
|
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 + top,
|
|
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 + top,
|
|
preventDefault: function() {
|
|
}
|
|
});
|
|
// end drag is tied to document mouseup and touchend event
|
|
// which can't be simulated. call _endDrag manually
|
|
//Kinetic.DD._endDrag();
|
|
|
|
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 + top,
|
|
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');
|
|
},
|
|
'test group mousedown events': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var group = new Kinetic.Group();
|
|
|
|
var redCircle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 80,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black',
|
|
name: 'red'
|
|
});
|
|
|
|
var greenCircle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 40,
|
|
strokeWidth: 4,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
name: 'green'
|
|
});
|
|
|
|
group.add(redCircle);
|
|
group.add(greenCircle);
|
|
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
var groupMousedowns = 0;
|
|
var greenCircleMousedowns = 0;
|
|
|
|
group.on('mousedown', function() {
|
|
groupMousedowns++;
|
|
});
|
|
|
|
greenCircle.on('mousedown', function() {
|
|
greenCircleMousedowns++;
|
|
});
|
|
|
|
stage._mousedown({
|
|
clientX: 285,
|
|
clientY: 100 + top
|
|
});
|
|
|
|
test(groupMousedowns === 1, 'groupMousedowns should be 1');
|
|
test(greenCircleMousedowns === 1, 'greenCircleMousedowns should be 1');
|
|
|
|
stage._mousedown({
|
|
clientX: 332,
|
|
clientY: 139 + top
|
|
});
|
|
|
|
test(groupMousedowns === 2, 'groupMousedowns should be 2');
|
|
test(greenCircleMousedowns === 1, 'greenCircleMousedowns should be 1');
|
|
|
|
stage._mousedown({
|
|
clientX: 285,
|
|
clientY: 92 + top
|
|
});
|
|
|
|
test(groupMousedowns === 3, 'groupMousedowns should be 3');
|
|
test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2');
|
|
|
|
stage._mousedown({
|
|
clientX: 221,
|
|
clientY: 146 + top
|
|
});
|
|
|
|
//test(groupMousedowns === 4, 'groupMousedowns should be 4');
|
|
test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2');
|
|
},
|
|
'group mouseenter events': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 9999
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var group = new Kinetic.Group({
|
|
name: 'group'
|
|
});
|
|
|
|
var redMouseenters = 0;
|
|
var redMouseleaves = 0;
|
|
var greenMouseenters = 0;
|
|
var greenMouseleaves = 0;
|
|
var groupMouseenters = 0;
|
|
var groupMouseleaves = 0;
|
|
|
|
var redCircle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 80,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black',
|
|
name: 'red'
|
|
});
|
|
|
|
var greenCircle = new Kinetic.Circle({
|
|
x: stage.getWidth() / 2,
|
|
y: stage.getHeight() / 2,
|
|
radius: 40,
|
|
strokeWidth: 4,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
name: 'green'
|
|
});
|
|
|
|
group.on('mouseenter', function() {
|
|
groupMouseenters++;
|
|
//console.log('group over')
|
|
});
|
|
|
|
group.on('mouseleave', function() {
|
|
groupMouseleaves++;
|
|
//console.log('group out')
|
|
});
|
|
|
|
redCircle.on('mouseenter', function() {
|
|
redMouseenters++;
|
|
//console.log('red over')
|
|
});
|
|
|
|
redCircle.on('mouseleave', function() {
|
|
redMouseleaves++;
|
|
//console.log('red out')
|
|
});
|
|
|
|
greenCircle.on('mouseenter', function() {
|
|
greenMouseenters++;
|
|
//console.log('green over')
|
|
});
|
|
|
|
greenCircle.on('mouseleave', function() {
|
|
greenMouseleaves++;
|
|
//console.log('green out')
|
|
});
|
|
|
|
group.add(redCircle);
|
|
group.add(greenCircle);
|
|
|
|
layer.add(group);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
// move mouse outside of circles
|
|
stage._mousemove({
|
|
clientX: 177,
|
|
clientY: 146 + top
|
|
});
|
|
|
|
test(redMouseenters === 0, 'redMouseenters should be 0');
|
|
test(redMouseleaves === 0, 'redMouseleaves should be 0');
|
|
test(greenMouseenters === 0, 'greenMouseenters should be 0');
|
|
test(greenMouseleaves === 0, 'greenMouseleaves should be 0');
|
|
test(groupMouseenters === 0, 'groupMouseenters should be 0');
|
|
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
|
|
|
|
// move mouse inside of red circle
|
|
stage._mousemove({
|
|
clientX: 236,
|
|
clientY: 145 + top
|
|
});
|
|
|
|
//console.log('groupMouseenters=' + groupMouseenters);
|
|
|
|
test(redMouseenters === 1, 'redMouseenters should be 1');
|
|
test(redMouseleaves === 0, 'redMouseleaves should be 0');
|
|
test(greenMouseenters === 0, 'greenMouseenters should be 0');
|
|
test(greenMouseleaves === 0, 'greenMouseleaves should be 0');
|
|
test(groupMouseenters === 1, 'groupMouseenters should be 1');
|
|
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
|
|
|
|
// move mouse inside of green circle
|
|
stage._mousemove({
|
|
clientX: 284,
|
|
clientY: 118 + top
|
|
});
|
|
|
|
test(redMouseenters === 1, 'redMouseenters should be 1');
|
|
test(redMouseleaves === 1, 'redMouseleaves should be 1');
|
|
test(greenMouseenters === 1, 'greenMouseenters should be 1');
|
|
test(greenMouseleaves === 0, 'greenMouseleaves should be 0');
|
|
test(groupMouseenters === 1, 'groupMouseenters should be 1');
|
|
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
|
|
|
|
// move mouse back to red circle
|
|
|
|
stage._mousemove({
|
|
clientX: 345,
|
|
clientY: 105 + top
|
|
});
|
|
stage._mousemove({
|
|
clientX: 345,
|
|
clientY: 105 + top
|
|
});
|
|
|
|
test(redMouseenters === 2, 'redMouseenters should be 2');
|
|
test(redMouseleaves === 1, 'redMouseleaves should be 1');
|
|
test(greenMouseenters === 1, 'greenMouseenters should be 1');
|
|
test(greenMouseleaves === 1, 'greenMouseleaves should be 1');
|
|
test(groupMouseenters === 1, 'groupMouseenters should be 1');
|
|
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
|
|
|
|
// move mouse outside of circles
|
|
stage._mousemove({
|
|
clientX: 177,
|
|
clientY: 146 + top
|
|
});
|
|
stage._mousemove({
|
|
clientX: 177,
|
|
clientY: 146 + top
|
|
});
|
|
test(redMouseenters === 2, 'redMouseenters should be 2');
|
|
test(redMouseleaves === 2, 'redMouseleaves should be 2');
|
|
test(greenMouseenters === 1, 'greenMouseenters should be 1');
|
|
test(greenMouseleaves === 1, 'greenMouseleaves should be 1');
|
|
test(groupMouseenters === 1, 'groupMouseenters should be 1');
|
|
test(groupMouseleaves === 1, 'groupMouseleaves should be 1');
|
|
|
|
//document.body.appendChild(layer.bufferCanvas.element)
|
|
|
|
//layer.bufferCanvas.element.style.marginTop = '220px';
|
|
|
|
},
|
|
'test event bubbling': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: 380,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black'
|
|
});
|
|
|
|
var group1 = new Kinetic.Group();
|
|
var group2 = new Kinetic.Group();
|
|
|
|
/*
|
|
* stage
|
|
* |
|
|
* layer
|
|
* |
|
|
* group2
|
|
* |
|
|
* group1
|
|
* |
|
|
* circle
|
|
*/
|
|
|
|
group1.add(circle);
|
|
group2.add(group1);
|
|
layer.add(group2);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
// events array
|
|
var e = [];
|
|
|
|
circle.on('click', function() {
|
|
e.push('circle');
|
|
});
|
|
group1.on('click', function() {
|
|
e.push('group1');
|
|
});
|
|
group2.on('click', function() {
|
|
e.push('group2');
|
|
});
|
|
layer.on('click', function() {
|
|
e.push('layer');
|
|
});
|
|
stage.on('click', function() {
|
|
e.push('stage');
|
|
});
|
|
// click on circle
|
|
stage._mousedown({
|
|
clientX: 374,
|
|
clientY: 114 + top
|
|
});
|
|
Kinetic.DD._endDragBefore();
|
|
stage._mouseup({
|
|
clientX: 374,
|
|
clientY: 114 + top
|
|
});
|
|
Kinetic.DD._endDragAfter({dragEndNode:circle});
|
|
|
|
test(e.toString() === 'circle,group1,group2,layer,stage', 'problem with event bubbling');
|
|
}
|
|
};
|
|
|
|
Test.Modules['HIT FUNCS'] = {
|
|
'test custom circle hit function': function(containerId) {
|
|
var stage = new Kinetic.Stage({
|
|
container: containerId,
|
|
width: 578,
|
|
height: 200,
|
|
throttle: 999
|
|
});
|
|
var layer = new Kinetic.Layer();
|
|
var circle = new Kinetic.Circle({
|
|
x: 380,
|
|
y: stage.getHeight() / 2,
|
|
radius: 70,
|
|
strokeWidth: 4,
|
|
fill: 'red',
|
|
stroke: 'black',
|
|
drawHitFunc: function(context) {
|
|
var _context = context._context;
|
|
|
|
_context.beginPath();
|
|
_context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
|
|
_context.closePath();
|
|
context.fillStrokeShape(this);
|
|
}
|
|
});
|
|
|
|
circle.setDraggable(true);
|
|
|
|
layer.add(circle);
|
|
stage.add(layer);
|
|
|
|
var top = stage.content.getBoundingClientRect().top;
|
|
|
|
var mouseovers = 0;
|
|
var mouseouts = 0;
|
|
|
|
circle.on('mouseover', function() {
|
|
mouseovers++;
|
|
});
|
|
|
|
circle.on('mouseout', function() {
|
|
mouseouts++;
|
|
});
|
|
// move mouse far outside circle
|
|
stage._mousemove({
|
|
clientX: 113,
|
|
clientY: 112 + top
|
|
});
|
|
|
|
test(mouseovers === 0, '1) mouseovers should be 0');
|
|
test(mouseouts === 0, '1) mouseouts should be 0');
|
|
|
|
stage._mousemove({
|
|
clientX: 286,
|
|
clientY: 118 + top
|
|
});
|
|
|
|
test(mouseovers === 1, '2) mouseovers should be 1');
|
|
test(mouseouts === 0, '2)mouseouts should be 0');
|
|
|
|
stage._mousemove({
|
|
clientX: 113,
|
|
clientY: 112 + top
|
|
});
|
|
|
|
test(mouseovers === 1, '3) mouseovers should be 1');
|
|
test(mouseouts === 1, '3) mouseouts should be 1');
|
|
|
|
showHit(layer);
|
|
|
|
|
|
// set drawBufferFunc with setter
|
|
|
|
circle.setDrawHitFunc(function(context) {
|
|
var _context = context._context;
|
|
_context.beginPath();
|
|
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
|
|
_context.closePath();
|
|
context.fillStrokeShape(this);
|
|
|
|
});
|
|
|
|
layer.getHitCanvas().getContext().clear();
|
|
layer.drawHit();
|
|
|
|
|
|
// move mouse far outside circle
|
|
stage._mousemove({
|
|
clientX: 113,
|
|
clientY: 112 + top
|
|
});
|
|
|
|
test(mouseovers === 1, '4) mouseovers should be 1');
|
|
test(mouseouts === 1, '4) mouseouts should be 1');
|
|
|
|
stage._mousemove({
|
|
clientX: 286,
|
|
clientY: 118 + top
|
|
});
|
|
|
|
test(mouseovers === 1, '5) mouseovers should be 1');
|
|
test(mouseouts === 1, '5) mouseouts should be 1');
|
|
|
|
stage._mousemove({
|
|
clientX: 321,
|
|
clientY: 112 + top
|
|
});
|
|
|
|
test(mouseovers === 1, '6) mouseovers should be 1');
|
|
test(mouseouts === 1, '6) mouseouts should be 1');
|
|
|
|
// move to center of circle
|
|
stage._mousemove({
|
|
clientX: 375,
|
|
clientY: 112 + top
|
|
});
|
|
|
|
test(mouseovers === 2, '7) mouseovers should be 2');
|
|
test(mouseouts === 1, '7) mouseouts should be 1');
|
|
|
|
}
|
|
};
|