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

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

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

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

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({