mirror of
https://github.com/konvajs/konva.git
synced 2025-11-24 08:46:44 +08:00
setup prettier and make all code better
This commit is contained in:
Anton Lavrenov
@@ -1,500 +1,498 @@
|
||||
suite('DragAndDropEvents', function() {
|
||||
// ======================================================
|
||||
test('test dragstart, dragmove, dragend', function(done) {
|
||||
var stage = addStage();
|
||||
// ======================================================
|
||||
test('test dragstart, dragmove, dragend', function(done) {
|
||||
var stage = addStage();
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var greenCircle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
opacity: 0.5
|
||||
});
|
||||
var greenCircle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 380,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
strokeWidth: 4,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
var circle = new Konva.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);
|
||||
|
||||
circle.setDraggable(true);
|
||||
var dragStart = false;
|
||||
var dragMove = false;
|
||||
var dragEnd = false;
|
||||
var mouseup = false;
|
||||
var events = [];
|
||||
|
||||
layer.add(circle);
|
||||
layer.add(greenCircle);
|
||||
stage.add(layer);
|
||||
circle.on('dragstart', function() {
|
||||
dragStart = true;
|
||||
});
|
||||
|
||||
var dragStart = false;
|
||||
var dragMove = false;
|
||||
var dragEnd = false;
|
||||
var mouseup = false;
|
||||
var events = [];
|
||||
circle.on('dragmove', function() {
|
||||
dragMove = true;
|
||||
});
|
||||
|
||||
circle.on('dragstart', function() {
|
||||
dragStart = true;
|
||||
});
|
||||
circle.on('dragend', function() {
|
||||
dragEnd = true;
|
||||
events.push('dragend');
|
||||
});
|
||||
|
||||
circle.on('mouseup', function() {
|
||||
events.push('mouseup');
|
||||
});
|
||||
|
||||
circle.on('dragmove', function() {
|
||||
dragMove = true;
|
||||
});
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false 1');
|
||||
assert(!Konva.isDragReady(), ' isDragReady()) should be false 2');
|
||||
|
||||
|
||||
circle.on('dragend', function() {
|
||||
dragEnd = true;
|
||||
events.push('dragend');
|
||||
});
|
||||
|
||||
|
||||
|
||||
circle.on('mouseup', function() {
|
||||
events.push('mouseup');
|
||||
});
|
||||
|
||||
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false 1');
|
||||
assert(!Konva.isDragReady(), ' isDragReady()) should be false 2');
|
||||
|
||||
/*
|
||||
/*
|
||||
* simulate drag and drop
|
||||
*/
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 98
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 98
|
||||
});
|
||||
assert(!dragStart, 'dragstart event should not have been triggered 3');
|
||||
//assert.equal(!dragMove, 'dragmove event should not have been triggered');
|
||||
assert(!dragEnd, 'dragend event should not have been triggered 4');
|
||||
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false 5');
|
||||
assert(Konva.isDragReady(), ' isDragReady()) should be true 6');
|
||||
|
||||
setTimeout(
|
||||
function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
assert(!dragStart, 'dragstart event should not have been triggered 3');
|
||||
//assert.equal(!dragMove, 'dragmove event should not have been triggered');
|
||||
assert(!dragEnd, 'dragend event should not have been triggered 4');
|
||||
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false 5');
|
||||
assert(Konva.isDragReady(), ' isDragReady()) should be true 6');
|
||||
assert(Konva.isDragging(), ' isDragging() should be true 7');
|
||||
assert(Konva.isDragReady(), ' isDragReady()) should be true 8');
|
||||
|
||||
setTimeout(function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
assert(dragStart, 'dragstart event was not triggered 9');
|
||||
//assert.equal(dragMove, 'dragmove event was not triggered');
|
||||
assert(!dragEnd, 'dragend event should not have been triggered 10');
|
||||
|
||||
assert(Konva.isDragging(), ' isDragging() should be true 7');
|
||||
assert(Konva.isDragReady(), ' isDragReady()) should be true 8');
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
|
||||
assert(dragStart, 'dragstart event was not triggered 9');
|
||||
//assert.equal(dragMove, 'dragmove event was not triggered');
|
||||
assert(!dragEnd, 'dragend event should not have been triggered 10');
|
||||
assert(dragStart, 'dragstart event was not triggered 11');
|
||||
assert(dragMove, 'dragmove event was not triggered 12');
|
||||
assert(dragEnd, 'dragend event was not triggered 13');
|
||||
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
assert.equal(
|
||||
events.toString(),
|
||||
'mouseup,dragend',
|
||||
'mouseup should occur before dragend 14'
|
||||
);
|
||||
|
||||
assert(dragStart, 'dragstart event was not triggered 11');
|
||||
assert(dragMove, 'dragmove event was not triggered 12');
|
||||
assert(dragEnd, 'dragend event was not triggered 13');
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false 15');
|
||||
assert(!Konva.isDragReady(), ' isDragReady()) should be false 16');
|
||||
|
||||
assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14');
|
||||
//console.log(greenCircle.getPosition());
|
||||
//console.log(circle.getPosition());
|
||||
|
||||
assert.equal(greenCircle.getX(), 40, 'green circle x 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.getY(), 100, 'circle y should be 100');
|
||||
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false 15');
|
||||
assert(!Konva.isDragReady(), ' isDragReady()) should be false 16');
|
||||
showHit(layer);
|
||||
|
||||
//console.log(greenCircle.getPosition());
|
||||
//console.log(circle.getPosition());
|
||||
done();
|
||||
},
|
||||
20
|
||||
);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('destroy shape while dragging', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
|
||||
assert.equal(greenCircle.getX(), 40, 'green circle x 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.getY(), 100, 'circle y should be 100');
|
||||
|
||||
showHit(layer);
|
||||
|
||||
done();
|
||||
}, 20);
|
||||
|
||||
var greenCircle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('destroy shape while dragging', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var greenCircle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
|
||||
var circle = new Konva.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 dragEnd = false;
|
||||
|
||||
|
||||
circle.on('dragend', function() {
|
||||
dragEnd = true;
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
circle.on('mouseup', function() {
|
||||
//console.log('mouseup');
|
||||
events.push('mouseup');
|
||||
});
|
||||
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false');
|
||||
assert(!Konva.isDragReady(), ' isDragReady()) should be false');
|
||||
|
||||
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 98
|
||||
});
|
||||
|
||||
assert(!circle.isDragging(), 'circle should not be dragging');
|
||||
|
||||
setTimeout(function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
|
||||
|
||||
assert(circle.isDragging(), 'circle should be dragging');
|
||||
assert(!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();
|
||||
|
||||
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
|
||||
assert(dragEnd, 'dragEnd should have fired');
|
||||
done();
|
||||
}, 20);
|
||||
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 380,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
strokeWidth: 4,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('click should not occur after drag and drop', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
circle.setDraggable(true);
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
draggable: true
|
||||
});
|
||||
layer.add(circle);
|
||||
layer.add(greenCircle);
|
||||
stage.add(layer);
|
||||
|
||||
var dragEnd = false;
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var clicked = false;
|
||||
|
||||
circle.on('click', function() {
|
||||
//console.log('click');
|
||||
clicked = true;
|
||||
});
|
||||
|
||||
circle.on('dblclick', function() {
|
||||
//console.log('dblclick');
|
||||
});
|
||||
|
||||
stage.simulateMouseDown({
|
||||
x: 40,
|
||||
y: 40
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
assert(!clicked, 'click event should not have been fired');
|
||||
|
||||
done();
|
||||
}, 20);
|
||||
|
||||
circle.on('dragend', function() {
|
||||
dragEnd = true;
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('drag and drop distance', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
circle.dragDistance(4);
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
stage.simulateMouseDown({
|
||||
x: 40,
|
||||
y: 40
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 40,
|
||||
y: 42
|
||||
});
|
||||
assert(!circle.isDragging(), 'still not dragging');
|
||||
stage.simulateMouseMove({
|
||||
x: 40,
|
||||
y: 45
|
||||
});
|
||||
assert(circle.isDragging(), 'now circle is dragging');
|
||||
stage.simulateMouseUp({
|
||||
x: 41,
|
||||
y: 45
|
||||
});
|
||||
|
||||
|
||||
|
||||
done();
|
||||
}, 20);
|
||||
|
||||
circle.on('mouseup', function() {
|
||||
//console.log('mouseup');
|
||||
events.push('mouseup');
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('cancel drag and drop by setting draggable to false', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 380,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
strokeWidth: 4,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
draggable: true
|
||||
assert(!Konva.isDragging(), ' isDragging() should be false');
|
||||
assert(!Konva.isDragReady(), ' isDragReady()) should be false');
|
||||
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 98
|
||||
});
|
||||
|
||||
assert(!circle.isDragging(), 'circle should not be dragging');
|
||||
|
||||
setTimeout(
|
||||
function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
|
||||
var dragStart = false;
|
||||
var dragMove = false;
|
||||
var dragEnd = false;
|
||||
assert(circle.isDragging(), 'circle should be dragging');
|
||||
assert(!dragEnd, 'dragEnd should not have fired yet');
|
||||
|
||||
circle.on('dragstart', function() {
|
||||
dragStart = true;
|
||||
// at this point, we are in drag and drop mode
|
||||
|
||||
// removing or destroying the circle should trigger dragend
|
||||
circle.destroy();
|
||||
layer.draw();
|
||||
|
||||
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(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var clicked = false;
|
||||
|
||||
circle.on('click', function() {
|
||||
//console.log('click');
|
||||
clicked = true;
|
||||
});
|
||||
|
||||
circle.on('dblclick', function() {
|
||||
//console.log('dblclick');
|
||||
});
|
||||
|
||||
stage.simulateMouseDown({
|
||||
x: 40,
|
||||
y: 40
|
||||
});
|
||||
|
||||
setTimeout(
|
||||
function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
circle.on('dragmove', function() {
|
||||
dragMove = true;
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
circle.on('dragend', function() {
|
||||
dragEnd = true;
|
||||
assert(!clicked, 'click event should not have been fired');
|
||||
|
||||
done();
|
||||
},
|
||||
20
|
||||
);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('drag and drop distance', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 40,
|
||||
y: 40,
|
||||
radius: 20,
|
||||
strokeWidth: 4,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
circle.dragDistance(4);
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
stage.simulateMouseDown({
|
||||
x: 40,
|
||||
y: 40
|
||||
});
|
||||
|
||||
setTimeout(
|
||||
function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 40,
|
||||
y: 42
|
||||
});
|
||||
assert(!circle.isDragging(), 'still not dragging');
|
||||
stage.simulateMouseMove({
|
||||
x: 40,
|
||||
y: 45
|
||||
});
|
||||
assert(circle.isDragging(), 'now circle is dragging');
|
||||
stage.simulateMouseUp({
|
||||
x: 41,
|
||||
y: 45
|
||||
});
|
||||
|
||||
circle.on('mousedown', function() {
|
||||
circle.setDraggable(false);
|
||||
});
|
||||
done();
|
||||
},
|
||||
20
|
||||
);
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
// ======================================================
|
||||
test('cancel drag and drop by setting draggable to false', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 380,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
strokeWidth: 4,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
draggable: true
|
||||
});
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
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.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 100
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
|
||||
assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
|
||||
done();
|
||||
}, 20);
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 100
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('drag and drop layer', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.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
|
||||
setTimeout(
|
||||
function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
var circle1 = new Konva.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red'
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
var circle2 = new Konva.Circle({
|
||||
x: 400,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'green'
|
||||
});
|
||||
assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
|
||||
assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
|
||||
done();
|
||||
},
|
||||
20
|
||||
);
|
||||
});
|
||||
|
||||
layer.add(circle1);
|
||||
layer.add(circle2);
|
||||
// ======================================================
|
||||
test('drag and drop layer', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.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
|
||||
});
|
||||
|
||||
stage.add(layer);
|
||||
var circle1 = new Konva.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
var circle2 = new Konva.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.simulateMouseDown({
|
||||
x: 399,
|
||||
y: 96
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 210,
|
||||
y: 109
|
||||
});
|
||||
|
||||
stage.simulateMouseUp({
|
||||
x: 210,
|
||||
y: 109
|
||||
});
|
||||
|
||||
//console.log(layer.getPosition())
|
||||
|
||||
assert.equal(layer.getX(), -189, 'layer x should be -189');
|
||||
assert.equal(layer.getY(), 13, 'layer y should be 13');
|
||||
|
||||
done();
|
||||
}, 20);
|
||||
|
||||
stage.simulateMouseDown({
|
||||
x: 399,
|
||||
y: 96
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('drag and drop stage', function(done) {
|
||||
var container = document.createElement('div'),
|
||||
stage = new Konva.Stage({
|
||||
container: container,
|
||||
width: 578,
|
||||
height: 200,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
konvaContainer.appendChild(container);
|
||||
|
||||
//stage.setDraggable(true);
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'red'
|
||||
setTimeout(
|
||||
function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 210,
|
||||
y: 109
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
stage.simulateMouseUp({
|
||||
x: 210,
|
||||
y: 109
|
||||
});
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
//console.log(layer.getPosition())
|
||||
|
||||
assert.equal(stage.getX(), 0);
|
||||
assert.equal(stage.getY(), 0);
|
||||
assert.equal(layer.getX(), -189, 'layer x should be -189');
|
||||
assert.equal(layer.getY(), 13, 'layer y should be 13');
|
||||
|
||||
/*
|
||||
done();
|
||||
},
|
||||
20
|
||||
);
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('drag and drop stage', function(done) {
|
||||
var container = document.createElement('div'),
|
||||
stage = new Konva.Stage({
|
||||
container: container,
|
||||
width: 578,
|
||||
height: 200,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
konvaContainer.appendChild(container);
|
||||
|
||||
//stage.setDraggable(true);
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
assert.equal(stage.getX(), 0);
|
||||
assert.equal(stage.getY(), 0);
|
||||
|
||||
/*
|
||||
* simulate drag and drop
|
||||
*/
|
||||
stage.simulateMouseDown({
|
||||
x: 0,
|
||||
y: 100
|
||||
stage.simulateMouseDown({
|
||||
x: 0,
|
||||
y: 100
|
||||
});
|
||||
|
||||
setTimeout(
|
||||
function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 300,
|
||||
y: 110
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage.simulateMouseMove({
|
||||
x: 300,
|
||||
y: 110
|
||||
});
|
||||
stage.simulateMouseUp({
|
||||
x: 300,
|
||||
y: 110
|
||||
});
|
||||
|
||||
stage.simulateMouseUp({
|
||||
x: 300,
|
||||
y: 110
|
||||
});
|
||||
assert.equal(stage.getX(), 300);
|
||||
assert.equal(stage.getY(), 10);
|
||||
|
||||
assert.equal(stage.getX(), 300);
|
||||
assert.equal(stage.getY(), 10);
|
||||
|
||||
done();
|
||||
}, 20);
|
||||
|
||||
});
|
||||
});
|
||||
done();
|
||||
},
|
||||
20
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,34 +1,25 @@
|
||||
suite('TouchEvents', function() {
|
||||
|
||||
// ======================================================
|
||||
test('stage content touch events', function() {
|
||||
// ======================================================
|
||||
test('stage content touch events', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var circleTouchstart =
|
||||
circleTouchend =
|
||||
stageContentTouchstart =
|
||||
stageContentTouchend =
|
||||
stageContentTouchmove =
|
||||
stageContentTap =
|
||||
stageContentDbltap =
|
||||
0;
|
||||
var circleTouchstart = circleTouchend = stageContentTouchstart = stageContentTouchend = stageContentTouchmove = stageContentTap = stageContentDbltap = 0;
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
|
||||
circle.on('touchstart', function() {
|
||||
circleTouchstart++;
|
||||
});
|
||||
@@ -58,14 +49,16 @@ suite('TouchEvents', function() {
|
||||
});
|
||||
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
}]
|
||||
touches: [
|
||||
{
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
stage._touchend({
|
||||
touches: []
|
||||
touches: []
|
||||
});
|
||||
|
||||
assert.equal(circleTouchstart, 1, 1);
|
||||
@@ -75,219 +68,222 @@ suite('TouchEvents', function() {
|
||||
assert.equal(stageContentDbltap, 0, 5);
|
||||
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}]
|
||||
touches: [
|
||||
{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
stage._touchend({
|
||||
touches: []
|
||||
touches: []
|
||||
});
|
||||
|
||||
assert.equal(stageContentTouchstart, 2, 6);
|
||||
assert.equal(stageContentTouchend, 2, 7);
|
||||
assert.equal(stageContentDbltap, 1, 8);
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('touchstart touchend touchmove tap dbltap', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('touchstart touchend touchmove tap dbltap', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
// mobile events
|
||||
var touchstart = false;
|
||||
var touchend = false;
|
||||
var tap = false;
|
||||
var touchmove = false;
|
||||
var dbltap = false;
|
||||
|
||||
|
||||
// mobile events
|
||||
var touchstart = false;
|
||||
var touchend = false;
|
||||
var tap = false;
|
||||
var touchmove = false;
|
||||
var dbltap = false;
|
||||
|
||||
|
||||
/*
|
||||
/*
|
||||
* mobile
|
||||
*/
|
||||
circle.on('touchstart', function() {
|
||||
touchstart = true;
|
||||
//log('touchstart');
|
||||
//alert('touchstart')
|
||||
});
|
||||
|
||||
circle.on('touchend', function() {
|
||||
touchend = true;
|
||||
//alert('touchend')
|
||||
//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;
|
||||
|
||||
// reset inDoubleClickWindow
|
||||
Konva.inDblClickWindow = false;
|
||||
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 289,
|
||||
clientY: 100 + top,
|
||||
}],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
|
||||
assert(touchstart, '8) touchstart should be true');
|
||||
assert(!touchmove, '8) touchmove should be false');
|
||||
assert(!touchend, '8) touchend should be false');
|
||||
assert(!tap, '8) tap should be false');
|
||||
assert(!dbltap, '8) dbltap should be false');
|
||||
|
||||
// touchend circle
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '9) touchstart should be true');
|
||||
assert(!touchmove, '9) touchmove should be false');
|
||||
assert(touchend, '9) touchend should be true');
|
||||
assert(tap, '9) tap should be true');
|
||||
assert(!dbltap, '9) dbltap should be false');
|
||||
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 289,
|
||||
clientY: 100 + top,
|
||||
}],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
|
||||
assert(touchstart, '10) touchstart should be true');
|
||||
assert(!touchmove, '10) touchmove should be false');
|
||||
assert(touchend, '10) touchend should be true');
|
||||
assert(tap, '10) tap should be true');
|
||||
assert(!dbltap, '10) dbltap should be false');
|
||||
|
||||
// touchend circle to triger dbltap
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '11) touchstart should be true');
|
||||
assert(!touchmove, '11) touchmove should be false');
|
||||
assert(touchend, '11) touchend should be true');
|
||||
assert(tap, '11) tap should be true');
|
||||
assert(dbltap, '11) dbltap should be true');
|
||||
|
||||
setTimeout(function() {
|
||||
// touchmove circle
|
||||
stage._touchmove({
|
||||
touches: [{
|
||||
clientX: 290,
|
||||
clientY: 100 + top,
|
||||
}],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
|
||||
assert(touchstart, '12) touchstart should be true');
|
||||
assert(touchmove, '12) touchmove should be true');
|
||||
assert(touchend, '12) touchend should be true');
|
||||
assert(tap, '12) tap should be true');
|
||||
assert(dbltap, '12) dbltap should be true');
|
||||
|
||||
done();
|
||||
}, 17);
|
||||
circle.on('touchstart', function() {
|
||||
touchstart = true;
|
||||
//log('touchstart');
|
||||
//alert('touchstart')
|
||||
});
|
||||
|
||||
// test for https://github.com/konvajs/konva/issues/156
|
||||
test("touchstart out of shape, then touch end inside shape", function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var circleTouchend =
|
||||
stageContentTouchstart =
|
||||
stageContentTouchend =
|
||||
0;
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
circle.on('touchend', function() {
|
||||
circleTouchend++;
|
||||
});
|
||||
|
||||
stage.on('contentTouchstart', function() {
|
||||
stageContentTouchstart++;
|
||||
});
|
||||
|
||||
stage.on('contentTouchend', function() {
|
||||
stageContentTouchend++;
|
||||
});
|
||||
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}]
|
||||
});
|
||||
|
||||
stage._touchend({
|
||||
touches: [{
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
}]
|
||||
});
|
||||
|
||||
assert.equal(stageContentTouchstart, 1);
|
||||
assert.equal(stageContentTouchend, 1);
|
||||
assert.equal(circleTouchend, 1);
|
||||
circle.on('touchend', function() {
|
||||
touchend = true;
|
||||
//alert('touchend')
|
||||
//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;
|
||||
|
||||
// reset inDoubleClickWindow
|
||||
Konva.inDblClickWindow = false;
|
||||
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [
|
||||
{
|
||||
clientX: 289,
|
||||
clientY: 100 + top
|
||||
}
|
||||
],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
|
||||
assert(touchstart, '8) touchstart should be true');
|
||||
assert(!touchmove, '8) touchmove should be false');
|
||||
assert(!touchend, '8) touchend should be false');
|
||||
assert(!tap, '8) tap should be false');
|
||||
assert(!dbltap, '8) dbltap should be false');
|
||||
|
||||
// touchend circle
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '9) touchstart should be true');
|
||||
assert(!touchmove, '9) touchmove should be false');
|
||||
assert(touchend, '9) touchend should be true');
|
||||
assert(tap, '9) tap should be true');
|
||||
assert(!dbltap, '9) dbltap should be false');
|
||||
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [
|
||||
{
|
||||
clientX: 289,
|
||||
clientY: 100 + top
|
||||
}
|
||||
],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
|
||||
assert(touchstart, '10) touchstart should be true');
|
||||
assert(!touchmove, '10) touchmove should be false');
|
||||
assert(touchend, '10) touchend should be true');
|
||||
assert(tap, '10) tap should be true');
|
||||
assert(!dbltap, '10) dbltap should be false');
|
||||
|
||||
// touchend circle to triger dbltap
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '11) touchstart should be true');
|
||||
assert(!touchmove, '11) touchmove should be false');
|
||||
assert(touchend, '11) touchend should be true');
|
||||
assert(tap, '11) tap should be true');
|
||||
assert(dbltap, '11) dbltap should be true');
|
||||
|
||||
setTimeout(
|
||||
function() {
|
||||
// touchmove circle
|
||||
stage._touchmove({
|
||||
touches: [
|
||||
{
|
||||
clientX: 290,
|
||||
clientY: 100 + top
|
||||
}
|
||||
],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
|
||||
assert(touchstart, '12) touchstart should be true');
|
||||
assert(touchmove, '12) touchmove should be true');
|
||||
assert(touchend, '12) touchend should be true');
|
||||
assert(tap, '12) tap should be true');
|
||||
assert(dbltap, '12) dbltap should be true');
|
||||
|
||||
done();
|
||||
},
|
||||
17
|
||||
);
|
||||
});
|
||||
|
||||
// test for https://github.com/konvajs/konva/issues/156
|
||||
test('touchstart out of shape, then touch end inside shape', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var circleTouchend = stageContentTouchstart = stageContentTouchend = 0;
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
circle.on('touchend', function() {
|
||||
circleTouchend++;
|
||||
});
|
||||
|
||||
stage.on('contentTouchstart', function() {
|
||||
stageContentTouchstart++;
|
||||
});
|
||||
|
||||
stage.on('contentTouchend', function() {
|
||||
stageContentTouchend++;
|
||||
});
|
||||
|
||||
stage._touchstart({
|
||||
touches: [
|
||||
{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
stage._touchend({
|
||||
touches: [
|
||||
{
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
assert.equal(stageContentTouchstart, 1);
|
||||
assert.equal(stageContentTouchend, 1);
|
||||
assert.equal(circleTouchend, 1);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user