mirror of
https://github.com/konvajs/konva.git
synced 2025-09-18 18:27:58 +08:00
better dragging flow
This commit is contained in:
lavrton
@@ -33,13 +33,10 @@ suite('DragAndDropEvents', function() {
|
||||
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() {
|
||||
@@ -52,20 +49,14 @@ suite('DragAndDropEvents', function() {
|
||||
});
|
||||
|
||||
|
||||
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');
|
||||
});
|
||||
|
||||
@@ -76,12 +67,10 @@ suite('DragAndDropEvents', function() {
|
||||
/*
|
||||
* simulate drag and drop
|
||||
*/
|
||||
//console.log(1)
|
||||
stage._mousedown({
|
||||
clientX: 380,
|
||||
clientY: 98 + top
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 98
|
||||
});
|
||||
//console.log(2)
|
||||
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');
|
||||
@@ -90,9 +79,9 @@ suite('DragAndDropEvents', function() {
|
||||
assert(Konva.isDragReady(), ' isDragReady()) should be true 6');
|
||||
|
||||
setTimeout(function() {
|
||||
stage._mousemove({
|
||||
clientX: 100,
|
||||
clientY: 98 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
|
||||
assert(Konva.isDragging(), ' isDragging() should be true 7');
|
||||
@@ -102,12 +91,10 @@ suite('DragAndDropEvents', function() {
|
||||
//assert.equal(dragMove, 'dragmove event was not triggered');
|
||||
assert(!dragEnd, 'dragend event should not have been triggered 10');
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 100,
|
||||
clientY: 98 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
|
||||
assert(dragStart, 'dragstart event was not triggered 11');
|
||||
assert(dragMove, 'dragmove event was not triggered 12');
|
||||
@@ -169,9 +156,6 @@ suite('DragAndDropEvents', function() {
|
||||
layer.add(greenCircle);
|
||||
stage.add(layer);
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
|
||||
var dragEnd = false;
|
||||
|
||||
|
||||
@@ -191,17 +175,17 @@ suite('DragAndDropEvents', function() {
|
||||
assert(!Konva.isDragReady(), ' isDragReady()) should be false');
|
||||
|
||||
|
||||
stage._mousedown({
|
||||
clientX: 380,
|
||||
clientY: 98 + top
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 98
|
||||
});
|
||||
|
||||
assert(!circle.isDragging(), 'circle should not be dragging');
|
||||
|
||||
setTimeout(function() {
|
||||
stage._mousemove({
|
||||
clientX: 100,
|
||||
clientY: 98 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 98
|
||||
});
|
||||
|
||||
|
||||
@@ -242,8 +226,7 @@ suite('DragAndDropEvents', function() {
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top,
|
||||
clicked = false;
|
||||
var clicked = false;
|
||||
|
||||
circle.on('click', function() {
|
||||
//console.log('click');
|
||||
@@ -254,23 +237,21 @@ suite('DragAndDropEvents', function() {
|
||||
//console.log('dblclick');
|
||||
});
|
||||
|
||||
stage._mousedown({
|
||||
clientX: 40,
|
||||
clientY: 40 + top
|
||||
stage.simulateMouseDown({
|
||||
x: 40,
|
||||
y: 40
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage._mousemove({
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
|
||||
assert(!clicked, 'click event should not have been fired');
|
||||
|
||||
@@ -300,28 +281,26 @@ suite('DragAndDropEvents', function() {
|
||||
circle.dragDistance(4);
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
stage._mousedown({
|
||||
clientX: 40,
|
||||
clientY: 40 + top
|
||||
stage.simulateMouseDown({
|
||||
x: 40,
|
||||
y: 40
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage._mousemove({
|
||||
clientX: 40,
|
||||
clientY: 42 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 40,
|
||||
y: 42
|
||||
});
|
||||
assert(!circle.isDragging(), 'still not dragging');
|
||||
stage._mousemove({
|
||||
clientX: 40,
|
||||
clientY: 45 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 40,
|
||||
y: 45
|
||||
});
|
||||
assert(circle.isDragging(), 'now circle is dragging');
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 41,
|
||||
clientY: 45 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 41,
|
||||
y: 45
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
|
||||
|
||||
|
||||
@@ -372,23 +351,21 @@ suite('DragAndDropEvents', function() {
|
||||
/*
|
||||
* simulate drag and drop
|
||||
*/
|
||||
stage._mousedown({
|
||||
clientX: 380,
|
||||
clientY: 100 + top
|
||||
stage.simulateMouseDown({
|
||||
x: 380,
|
||||
y: 100
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage._mousemove({
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 100,
|
||||
y: 100
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
|
||||
assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
|
||||
assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
|
||||
@@ -437,23 +414,21 @@ suite('DragAndDropEvents', function() {
|
||||
/*
|
||||
* simulate drag and drop
|
||||
*/
|
||||
stage._mousedown({
|
||||
clientX: 399,
|
||||
clientY: 96 + top
|
||||
stage.simulateMouseDown({
|
||||
x: 399,
|
||||
y: 96
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage._mousemove({
|
||||
clientX: 210,
|
||||
clientY: 109 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 210,
|
||||
y: 109
|
||||
});
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 210,
|
||||
clientY: 109 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 210,
|
||||
y: 109
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle2});
|
||||
|
||||
//console.log(layer.getPosition())
|
||||
|
||||
@@ -499,23 +474,21 @@ suite('DragAndDropEvents', function() {
|
||||
/*
|
||||
* simulate drag and drop
|
||||
*/
|
||||
stage._mousedown({
|
||||
clientX: 0,
|
||||
clientY: 100 + top
|
||||
stage.simulateMouseDown({
|
||||
x: 0,
|
||||
y: 100
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
stage._mousemove({
|
||||
clientX: 300,
|
||||
clientY: 110 + top
|
||||
stage.simulateMouseMove({
|
||||
x: 300,
|
||||
y: 110
|
||||
});
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 300,
|
||||
clientY: 110 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 300,
|
||||
y: 110
|
||||
});
|
||||
Konva.DD._endDragAfter();
|
||||
|
||||
assert.equal(stage.getX(), 300);
|
||||
assert.equal(stage.getY(), 10);
|
||||
|
||||
@@ -223,4 +223,44 @@ afterEach(function(){
|
||||
// });
|
||||
});
|
||||
|
||||
init();
|
||||
Konva.Stage.prototype.simulateMouseDown = function(pos) {
|
||||
var top = this.content.getBoundingClientRect().top;
|
||||
|
||||
this._mousedown({
|
||||
clientX: pos.x,
|
||||
clientY: pos.y + top,
|
||||
button: pos.button
|
||||
});
|
||||
};
|
||||
|
||||
Konva.Stage.prototype.simulateMouseMove = function(pos) {
|
||||
var top = this.content.getBoundingClientRect().top;
|
||||
|
||||
var evt = {
|
||||
clientX: pos.x,
|
||||
clientY: pos.y + top,
|
||||
button: pos.button
|
||||
};
|
||||
|
||||
this._mousemove(evt);
|
||||
Konva.DD._drag(evt);
|
||||
};
|
||||
|
||||
Konva.Stage.prototype.simulateMouseUp = function(pos) {
|
||||
"use strict";
|
||||
var top = this.content.getBoundingClientRect().top;
|
||||
|
||||
|
||||
var evt = {
|
||||
clientX: pos.x,
|
||||
clientY: pos.y + top,
|
||||
button: pos.button
|
||||
};
|
||||
|
||||
|
||||
Konva.DD._endDragBefore(evt);
|
||||
this._mouseup(evt);
|
||||
Konva.DD._endDragAfter(evt);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
@@ -39,7 +39,7 @@ suite('Context', function() {
|
||||
});
|
||||
|
||||
contextProperties.forEach(function(prop) {
|
||||
assert.equal(nativeContext.hasOwnProperty(prop), true, 'native context has no property ' + prop);
|
||||
assert.equal(nativeContext[prop] !== undefined, true, 'native context has no property ' + prop);
|
||||
assert.equal(context[prop] !== undefined, true, 'context wrapper has no property ' + prop);
|
||||
});
|
||||
|
||||
|
||||
@@ -69,9 +69,6 @@ suite('DragAndDrop', function() {
|
||||
// ======================================================
|
||||
test('right click is not for dragging', function() {
|
||||
var stage = addStage();
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var circle = new Konva.Circle({
|
||||
@@ -88,48 +85,42 @@ suite('DragAndDrop', function() {
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
stage._mousedown({
|
||||
clientX: 291,
|
||||
clientY: 112 + top,
|
||||
stage.simulateMouseDown({
|
||||
x: 291,
|
||||
y: 112
|
||||
});
|
||||
|
||||
stage._mousemove({
|
||||
clientX: 311,
|
||||
clientY: 112 + top,
|
||||
stage.simulateMouseMove({
|
||||
x: 311,
|
||||
y: 112
|
||||
});
|
||||
|
||||
assert(circle.isDragging(), 'dragging is ok');
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 291,
|
||||
clientY: 112 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 291,
|
||||
y: 112
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
|
||||
|
||||
|
||||
stage._mousedown({
|
||||
clientX: 291,
|
||||
clientY: 112 + top,
|
||||
stage.simulateMouseDown({
|
||||
x: 291,
|
||||
y: 112,
|
||||
button: 2
|
||||
});
|
||||
|
||||
stage._mousemove({
|
||||
clientX: 311,
|
||||
clientY: 112 + top,
|
||||
stage.simulateMouseMove({
|
||||
x: 311,
|
||||
y: 112,
|
||||
button: 2
|
||||
});
|
||||
|
||||
assert(circle.isDragging() === false, 'no dragging with right click');
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 291,
|
||||
clientY: 112 + top,
|
||||
stage.simulateMouseUp({
|
||||
x: 291,
|
||||
y: 112,
|
||||
button: 2
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
@@ -177,15 +168,15 @@ suite('DragAndDrop', function() {
|
||||
|
||||
assert.equal(shape, rect, 'rect is detected');
|
||||
|
||||
stage._mousedown({
|
||||
clientX: stage.width() / 2,
|
||||
clientY: stage.height() / 2 + top
|
||||
stage.simulateMouseDown({
|
||||
x: stage.width() / 2,
|
||||
y: stage.height() / 2
|
||||
});
|
||||
|
||||
|
||||
stage._mousemove({
|
||||
clientX: stage.width() / 2 + 5,
|
||||
clientY: stage.height() / 2 + top
|
||||
stage.simulateMouseMove({
|
||||
x: stage.width() / 2 + 5,
|
||||
y: stage.height() / 2
|
||||
});
|
||||
|
||||
// redraw layer. hit must be not touched for not dragging layer
|
||||
@@ -207,12 +198,10 @@ suite('DragAndDrop', function() {
|
||||
assert.equal(!!shape, false, 'circle is not detected');
|
||||
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 291,
|
||||
clientY: 112 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 291,
|
||||
y: 112 + top
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
|
||||
});
|
||||
|
||||
@@ -254,15 +243,15 @@ suite('DragAndDrop', function() {
|
||||
endDragLayer.add(rect);
|
||||
endDragLayer.draw();
|
||||
|
||||
stage._mousedown({
|
||||
clientX: stage.width() / 2,
|
||||
clientY: stage.height() / 2 + top
|
||||
stage.simulateMouseDown({
|
||||
x: stage.width() / 2,
|
||||
y: stage.height() / 2
|
||||
});
|
||||
|
||||
|
||||
stage._mousemove({
|
||||
clientX: stage.width() / 2 + 5,
|
||||
clientY: stage.height() / 2 + top
|
||||
stage.simulateMouseMove({
|
||||
x: stage.width() / 2 + 5,
|
||||
y: stage.height() / 2
|
||||
});
|
||||
|
||||
// change layer while dragging circle
|
||||
@@ -291,12 +280,10 @@ suite('DragAndDrop', function() {
|
||||
assert.equal(!!shape, false, 'circle is not detected');
|
||||
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 291,
|
||||
clientY: 112 + top
|
||||
stage.simulateMouseUp({
|
||||
x: 291,
|
||||
y: 112 + top
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:circle});
|
||||
|
||||
});
|
||||
});
|
||||
@@ -470,54 +470,51 @@ suite('Stage', function() {
|
||||
assert(false, 'double click fired');
|
||||
});
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top,
|
||||
clientY = 60 + top;
|
||||
var y = 60;
|
||||
|
||||
// simulate dragging
|
||||
stage._mousedown({
|
||||
clientX: 60,
|
||||
clientY: clientY
|
||||
stage.simulateMouseDown({
|
||||
x: 60,
|
||||
y: y
|
||||
});
|
||||
|
||||
stage._mousemove({
|
||||
clientX: 61,
|
||||
clientY: clientY
|
||||
stage.simulateMouseMove({
|
||||
x: 61,
|
||||
y: y
|
||||
});
|
||||
|
||||
stage._mousemove({
|
||||
clientX: 62,
|
||||
clientY: clientY
|
||||
stage.simulateMouseMove({
|
||||
x: 62,
|
||||
y: y
|
||||
});
|
||||
|
||||
stage._mousemove({
|
||||
clientX: 63,
|
||||
clientY: clientY
|
||||
stage.simulateMouseMove({
|
||||
x: 63,
|
||||
y: y
|
||||
});
|
||||
|
||||
stage._mousemove({
|
||||
clientX: 64,
|
||||
clientY: clientY
|
||||
stage.simulateMouseMove({
|
||||
x: 64,
|
||||
y: y
|
||||
});
|
||||
|
||||
Konva.DD._endDragBefore();
|
||||
stage._mouseup({
|
||||
clientX: 65,
|
||||
clientY: clientY
|
||||
stage.simulateMouseUp({
|
||||
x: 65,
|
||||
y: y
|
||||
});
|
||||
Konva.DD._endDragAfter({dragEndNode:rect});
|
||||
|
||||
assert.equal(Konva.isDragging(), false);
|
||||
assert.equal(Konva.DD.node, undefined);
|
||||
// simulate click
|
||||
stage._mousedown({
|
||||
clientX: 66,
|
||||
clientY: clientY
|
||||
stage.simulateMouseDown({
|
||||
x: 66,
|
||||
y: y
|
||||
});
|
||||
|
||||
stage._mouseup({
|
||||
clientX: 66,
|
||||
clientY: clientY
|
||||
stage.simulateMouseUp({
|
||||
x: 66,
|
||||
y: y
|
||||
});
|
||||
Konva.DD._endDragBefore({dragEndNode:rect});
|
||||
assert.equal(Konva.isDragging(), false);
|
||||
assert.equal(Konva.DD.node, undefined);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user