lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-07-15 10:30:12 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

re-fixed drag and drop flicker issue on mobile. It was due to the browser taking a few ms to add to canvas dom when drag and drop started

Browse Source
This commit is contained in:
Eric Rowell 2013-01-09 22:34:14 -08:00
parent 48b85119f5
commit c504e7980b
2 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/DragAndDrop.js
View File

@ -10,9 +10,7 @@
topLayer: null
};
Kinetic.Node.prototype._startDrag = function() {
var dd = Kinetic.DD;
var stage = this.getStage();
var pos = stage.getUserPosition();
var dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition();
if(pos) {
var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType;
@ -34,41 +32,7 @@
* and move the node to the top layer
*/
if(nodeType === 'Group' || nodeType === 'Shape') {
var lastContainer = null;
dd.prevParent = this.getParent();
// re-construct node tree
this._eachAncestorReverse(function(node) {
if(node.nodeType === 'Layer') {
dd.topLayer = new Kinetic.Layer({
x: node.getX(),
y: node.getY(),
scale: node.getScale(),
rotation: node.getRotation()
});
lastContainer = dd.topLayer;
stage.add(dd.topLayer);
}
else if(node.nodeType === 'Group') {
var group = new Kinetic.Group({
x: node.getX(),
y: node.getY(),
scale: node.getScale(),
rotation: node.getRotation()
});
lastContainer.add(group);
lastContainer = group;
}
});
this.moveTo(dd.topLayer);
dd.topLayer.draw();
if(dd.prevParent) {
dd.prevParent.getLayer().draw();
}
this._moveToTop();
}
dd.anim.node = this.getLayer();
@ -76,6 +40,49 @@
dd.anim.start();
}
};
Kinetic.Node.prototype._moveToTop = function() {
var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group;
dd.prevParent = this.getParent();
// re-construct node tree
this._eachAncestorReverse(function(node) {
if(node.nodeType === 'Layer') {
dd.topLayer = new Kinetic.Layer({
x: node.getX(),
y: node.getY(),
scale: node.getScale(),
rotation: node.getRotation(),
visible: false
});
lastContainer = dd.topLayer;
stage.add(dd.topLayer);
}
else if(node.nodeType === 'Group') {
group = new Kinetic.Group({
x: node.getX(),
y: node.getY(),
scale: node.getScale(),
rotation: node.getRotation()
});
lastContainer.add(group);
lastContainer = group;
}
});
this.moveTo(dd.topLayer);
dd.topLayer.draw();
setTimeout(function() {
if(dd.prevParent) {
dd.prevParent.getLayer().draw();
}
if(dd.topLayer) {
dd.topLayer.show();
dd.topLayer.draw();
}
}, 0);
};
Kinetic.DD._drag = function(evt) {
var dd = Kinetic.DD, node = dd.node;

2
tests/js/unit/shapes/starTests.js
View File

@ -30,7 +30,7 @@ Test.Modules.STAR = {
layer.add(star);
stage.add(layer);
},
'*add five point star with line join and shadow': function(containerId) {
'add five point star with line join and shadow': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,