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

moved dd logic in destroy() from Node to DD namespace. refactored stopDrag logic to correctly handle the event object

Browse Source
This commit is contained in:
Eric Rowell
2013-04-07 10:52:33 -07:00
parent 6f61b07500
commit b6cca6a143
3 changed files with 113 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/DragAndDrop.js
View File

@@ -40,7 +40,6 @@
},
_endDragBefore: function(evt) {
var dd = Kinetic.DD,
evt = evt || {},
node = dd.node,
nodeType, layer;
@@ -53,17 +52,15 @@
// operation actually started.
if(dd.isDragging) {
dd.isDragging = false;
evt.dragEndNode = node;
if (evt) {
evt.dragEndNode = node;
}
}
delete dd.node;
if (layer) {
layer.draw();
}
else {
node.draw();
}
(layer || node).draw();
}
},
_endDragAfter: function(evt) {
@@ -112,9 +109,10 @@
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.stopDrag = function() {
var dd = Kinetic.DD;
dd._endDragBefore();
dd._endDragAfter();
var dd = Kinetic.DD,
evt = {};
dd._endDragBefore(evt);
dd._endDragAfter(evt);
};
/**
@@ -128,6 +126,20 @@
this._dragChange();
};
var origDestroy = Kinetic.Node.prototype.destroy;
Kinetic.Node.prototype.destroy = function() {
var dd = Kinetic.DD;
// stop DD
if(dd.node && dd.node._id === this._id) {
this.stopDrag();
}
origDestroy.call(this);
};
/**
* determine if node is currently in drag and drop mode
* @name isDragging

5
src/Node.js
View File

@@ -153,11 +153,6 @@
go._removeId(this.getId());
go._removeName(this.getName(), this._id);
// stop DD
if(dd && dd.node && dd.node._id === this._id) {
this._endDrag();
}
// stop transition
if(this.trans) {
this.trans.stop();

89
tests/js/functionalTests.js
View File

@@ -173,6 +173,95 @@ Test.Modules.DD = {
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');
});
testDataUrl(layer.toDataURL(), 'drag circle before', 'start data url is incorrect');
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');
},
'cancel drag and drop by setting draggable to false': function(containerId) {
var stage = new Kinetic.Stage({