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

better dragging flow

Browse Source
This commit is contained in:
lavrton 2015-06-02 08:14:54 +07:00
parent e990e3c9e9
commit c2d9b1d436
12 changed files with 209 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
### Changed
- Dragging now works much better. If your pointer is out of stage content dragging will still continue.
## [0.9.5][2015-05-28]
### Fixed

2
gulpfile.js
View File

@ -152,7 +152,7 @@ gulp.task('api', function() {
});
gulp.task('watch', function() {
gulp.watch(['src2/**/*.ts'], ['dev-build']);
gulp.watch(['src/**/*.js'], ['dev-build']);
});

39
konva.js
View File

@ -1,9 +1,9 @@
/*
* Konva JavaScript Framework v0.9.5
* Konva JavaScript Framework v0.9.9
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Thu May 28 2015
* Date: Tue Jun 02 2015
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov (Konva)
@ -38,7 +38,7 @@ var Konva = {};
Konva = {
// public
version: '0.9.5',
version: '0.9.9',
// private
stages: [],
@ -8657,7 +8657,7 @@ var Konva = {};
return null;
}
this._setPointerPosition(evt);
var dd = Konva.DD, shape;
var shape;
if (!Konva.isDragging()) {
shape = this.getIntersection(this.getPointerPosition());
@ -8691,9 +8691,6 @@ var Konva = {};
// content event
this._fire(CONTENT_MOUSEMOVE, {evt: evt});
}
if(dd) {
dd._drag(evt);
}
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
@ -8862,7 +8859,6 @@ var Konva = {};
this._fire(CONTENT_TOUCHMOVE, {evt: evt});
}
if(dd) {
dd._drag(evt);
if (Konva.isDragging()) {
evt.preventDefault();
}
@ -8884,11 +8880,8 @@ var Konva = {};
},
_setPointerPosition: function(evt) {
var contentPosition = this._getContentPosition(),
offsetX = evt.offsetX,
clientX = evt.clientX,
x = null,
y = null,
touch;
y = null;
evt = evt ? evt : window.event;
// touch events
@ -8896,8 +8889,7 @@ var Konva = {};
// currently, only handle one finger
if (evt.touches.length > 0) {
touch = evt.touches[0];
var touch = evt.touches[0];
// get the information for finger #1
x = touch.clientX - contentPosition.left;
y = touch.clientY - contentPosition.top;
@ -8905,10 +8897,9 @@ var Konva = {};
}
// mouse events
else {
// if offsetX is defined, assume that offsetY is defined as well
if (offsetX !== undefined) {
x = offsetX;
y = evt.offsetY;
if (!contentPosition) {
x = evt.offsetX;
y = evt.offetY;
}
// we unfortunately have to use UA detection here because accessing
// the layerX or layerY properties in newer versions of Chrome
@ -8917,10 +8908,8 @@ var Konva = {};
else if (Konva.UA.browser === 'mozilla') {
x = evt.layerX || (evt.clientX - contentPosition.left);
y = evt.layerY || (evt.clientY - contentPosition.top);
}
// if clientX is defined, assume that clientY is defined as well
else if (clientX !== undefined && contentPosition) {
x = clientX - contentPosition.left;
} else {
x = evt.clientX - contentPosition.left;
y = evt.clientY - contentPosition.top;
}
}
@ -10677,6 +10666,8 @@ var Konva = {};
}
}
node.getStage()._setPointerPosition(evt);
node._setDragPosition(evt);
if(!dd.isDragging) {
dd.isDragging = true;
@ -10723,7 +10714,6 @@ var Konva = {};
},
_endDragAfter: function(evt) {
evt = evt || {};
var dragEndNode = evt.dragEndNode;
if (evt && dragEndNode) {
@ -10942,6 +10932,9 @@ var Konva = {};
html.addEventListener('mouseup', Konva.DD._endDragBefore, true);
html.addEventListener('touchend', Konva.DD._endDragBefore, true);
html.addEventListener('mousemove', Konva.DD._drag);
html.addEventListener('touchmove', Konva.DD._drag);
html.addEventListener('mouseup', Konva.DD._endDragAfter, false);
html.addEventListener('touchend', Konva.DD._endDragAfter, false);

13
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "konva",
"version": "0.9.5",
"version": "0.9.9",
"author": "Anton Lavrenov",
"devDependencies": {
"chai": "1.9.2",

6
src/DragAndDrop.js
View File

@ -33,6 +33,8 @@
}
}
node.getStage()._setPointerPosition(evt);
node._setDragPosition(evt);
if(!dd.isDragging) {
dd.isDragging = true;
@ -79,7 +81,6 @@
},
_endDragAfter: function(evt) {
evt = evt || {};
var dragEndNode = evt.dragEndNode;
if (evt && dragEndNode) {
@ -298,6 +299,9 @@
html.addEventListener('mouseup', Konva.DD._endDragBefore, true);
html.addEventListener('touchend', Konva.DD._endDragBefore, true);
html.addEventListener('mousemove', Konva.DD._drag);
html.addEventListener('touchmove', Konva.DD._drag);
html.addEventListener('mouseup', Konva.DD._endDragAfter, false);
html.addEventListener('touchend', Konva.DD._endDragAfter, false);

27
src/Stage.js
View File

@ -410,7 +410,7 @@
return null;
}
this._setPointerPosition(evt);
var dd = Konva.DD, shape;
var shape;
if (!Konva.isDragging()) {
shape = this.getIntersection(this.getPointerPosition());
@ -444,9 +444,6 @@
// content event
this._fire(CONTENT_MOUSEMOVE, {evt: evt});
}
if(dd) {
dd._drag(evt);
}
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
@ -615,7 +612,6 @@
this._fire(CONTENT_TOUCHMOVE, {evt: evt});
}
if(dd) {
dd._drag(evt);
if (Konva.isDragging()) {
evt.preventDefault();
}
@ -637,11 +633,8 @@
},
_setPointerPosition: function(evt) {
var contentPosition = this._getContentPosition(),
offsetX = evt.offsetX,
clientX = evt.clientX,
x = null,
y = null,
touch;
y = null;
evt = evt ? evt : window.event;
// touch events
@ -649,8 +642,7 @@
// currently, only handle one finger
if (evt.touches.length > 0) {
touch = evt.touches[0];
var touch = evt.touches[0];
// get the information for finger #1
x = touch.clientX - contentPosition.left;
y = touch.clientY - contentPosition.top;
@ -658,10 +650,9 @@
}
// mouse events
else {
// if offsetX is defined, assume that offsetY is defined as well
if (offsetX !== undefined) {
x = offsetX;
y = evt.offsetY;
if (!contentPosition) {
x = evt.offsetX;
y = evt.offetY;
}
// we unfortunately have to use UA detection here because accessing
// the layerX or layerY properties in newer versions of Chrome
@ -670,10 +661,8 @@
else if (Konva.UA.browser === 'mozilla') {
x = evt.layerX || (evt.clientX - contentPosition.left);
y = evt.layerY || (evt.clientY - contentPosition.top);
}
// if clientX is defined, assume that clientY is defined as well
else if (clientX !== undefined && contentPosition) {
x = clientX - contentPosition.left;
} else {
x = evt.clientX - contentPosition.left;
y = evt.clientY - contentPosition.top;
}
}

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

@ -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);

42
test/runner.js
View File

@ -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();

2
test/unit/Context-test.js
View File

@ -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);
});

85
test/unit/DragAndDrop-test.js
View File

@ -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});
});
});

55
test/unit/Stage-test.js
View File

@ -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);
});