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

drag and drop now ends whenever a mouseup or touchend event is detected anywhere on the page

Browse Source
This commit is contained in:
Eric Rowell 2013-01-27 22:25:16 -08:00
parent be295992e0
commit 1bcdd15f45
3 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/DragAndDrop.js
View File

@ -1,6 +1,4 @@
(function() {
var dd, html = document.getElementsByTagName('html')[0];
Kinetic.DD = {
anim: new Kinetic.Animation(),
moving: false,
@ -10,12 +8,8 @@
}
};
dd = Kinetic.DD;
//html.addEventListener('mousedown', _htmlMouseup);
Kinetic.getNodeDragging = function() {
return dd.node;
return Kinetic.DD.node;
};
Kinetic.DD._setupDragLayerAndGetContainer = function(no) {
@ -51,7 +45,7 @@
stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
};
Kinetic.DD._drag = function(evt) {
var node = dd.node;
var dd = Kinetic.DD, node = dd.node;
if(node) {
var pos = node.getStage().getUserPosition();
@ -81,9 +75,10 @@
}
};
Kinetic.DD._endDrag = function(evt) {
var node = dd.node, nodeType, stage;
var dd = Kinetic.DD, node = dd.node;
if(node) { nodeType = node.nodeType, stage = node.getStage();
if(node) {
var nodeType = node.nodeType, stage = node.getStage();
node.setListening(true);
if(nodeType === 'Stage') {
node.draw();
@ -110,7 +105,7 @@
dd.anim.stop();
};
Kinetic.Node.prototype._startDrag = function(evt) {
var that = this, stage = this.getStage(), pos = stage.getUserPosition();
var dd = Kinetic.DD, that = this, stage = this.getStage(), pos = stage.getUserPosition();
if(pos) {
var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container;
@ -175,6 +170,7 @@
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.isDragging = function() {
var dd = Kinetic.DD;
return dd.node && dd.node._id === this._id && dd.moving;
};
@ -249,4 +245,8 @@
* @name getDragOnTop
* @methodOf Kinetic.Node.prototype
*/
var html = document.getElementsByTagName('html')[0];
html.addEventListener('mouseup', Kinetic.DD._endDrag);
html.addEventListener('touchend', Kinetic.DD._endDrag);
})();

10
src/Stage.js
View File

@ -395,11 +395,6 @@
this._setUserPosition(evt);
var that = this, dd = Kinetic.DD, obj = this.getIntersection(this.getUserPosition());
// end drag and drop
if(dd) {
dd._endDrag(evt);
}
if(obj && obj.shape) {
var shape = obj.shape;
shape._handleEvent('mouseup', evt);
@ -447,11 +442,6 @@
this._setUserPosition(evt);
var that = this, dd = Kinetic.DD, obj = this.getIntersection(this.getUserPosition());
// end drag and drop
if(dd) {
dd._endDrag(evt);
}
if(obj && obj.shape) {
var shape = obj.shape;
shape._handleEvent('touchend', evt);

50
tests/js/functionalTests.js
View File

@ -1,13 +1,13 @@
Test.Modules.DD = {
'remove shape with onclick': function(containerId) {
'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({
@ -23,12 +23,17 @@ Test.Modules.DD = {
layer.add(circle);
stage.add(layer);
function remove() {
circle.remove();
layer.draw();
warn(layer.toDataURL() === dataUrls['cleared'], 'canvas should be cleared after removing shape onclick');
}
circle.on('click', function() {
this.remove();
layer.draw();
setTimeout(remove, 0);
});
stage._mousedown({
clientX: 291,
clientY: 112 + top
@ -37,9 +42,9 @@ Test.Modules.DD = {
clientX: 291,
clientY: 112 + top
});
warn(layer.toDataURL() === dataUrls['cleared'], 'canvas should be cleared after removing shape onclick');
// end drag is tied to document mouseup and touchend event
// which can't be simulated. call _endDrag manually
Kinetic.DD._endDrag();
},
'test dragstart, dragmove, dragend': function(containerId) {
var stage = new Kinetic.Stage({
@ -80,7 +85,7 @@ Test.Modules.DD = {
circle.on('dragend', function() {
dragEnd = true;
// test set draggable false after drag end
this.setDraggable(false);
this.setDraggable(false);
});
warn(layer.toDataURL() === dataUrls['drag circle before'], 'start data url is incorrect');
/*
@ -109,6 +114,9 @@ Test.Modules.DD = {
clientX: 100,
clientY: 98 + top
});
// end drag is tied to document mouseup and touchend event
// which can't be simulated. call _endDrag manually
Kinetic.DD._endDrag();
test(dragStart, 'dragstart event was not triggered');
test(dragMove, 'dragmove event was not triggered');
@ -177,6 +185,9 @@ Test.Modules.DD = {
clientX: 100,
clientY: 100 + top
});
// end drag is tied to document mouseup and touchend event
// which can't be simulated. call _endDrag manually
Kinetic.DD._endDrag();
test(circle.getPosition().x === 380, 'circle x should be 380');
test(circle.getPosition().y === 100, 'circle y should be 100');
@ -243,6 +254,10 @@ Test.Modules.DD = {
clientX: 210,
clientY: 109 + top
});
// end drag is tied to document mouseup and touchend event
// which can't be simulated. call _endDrag manually
Kinetic.DD._endDrag();
//console.log(layer.toDataURL())
warn(layer.toDataURL() === dataUrls['drag layer after'], 'end data url is incorrect');
@ -458,6 +473,9 @@ Test.Modules.EVENT = {
clientX: 290,
clientY: 100 + top
});
// end drag is tied to document mouseup and touchend event
// which can't be simulated. call _endDrag manually
Kinetic.DD._endDrag();
test(mouseover, '4) mouseover should be true');
test(mousemove, '4) mousemove should be true');
@ -486,6 +504,9 @@ Test.Modules.EVENT = {
clientX: 290,
clientY: 100 + top
});
// end drag is tied to document mouseup and touchend event
// which can't be simulated. call _endDrag manually
Kinetic.DD._endDrag();
test(mouseover, '6) mouseover should be true');
test(mousemove, '6) mousemove should be true');
@ -540,6 +561,9 @@ Test.Modules.EVENT = {
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');
@ -568,6 +592,9 @@ Test.Modules.EVENT = {
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');
@ -892,6 +919,9 @@ Test.Modules.EVENT = {
clientX: 374,
clientY: 114 + top
});
// end drag is tied to document mouseup and touchend event
// which can't be simulated. call _endDrag manually
Kinetic.DD._endDrag();
test(e.toString() === 'circle,group1,group2,layer,stage', 'problem with event bubbling');
}