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

improved drag and drop layer creation logic to further reduce the possibility of a flicker

Browse Source
This commit is contained in:
Eric Rowell 2013-01-09 23:27:37 -08:00
parent c504e7980b
commit 40bcaeafed
2 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/DragAndDrop.js
View File

@ -10,7 +10,7 @@
topLayer: null
};
Kinetic.Node.prototype._startDrag = function() {
var dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition();
var that = this, dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition();
if(pos) {
var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType;
@ -19,30 +19,33 @@
dd.offset.x = pos.x - ap.x;
dd.offset.y = pos.y - ap.y;
/*
* if dragging and dropping the stage,
* draw all of the layers
*/
if(nodeType === 'Stage') {
// Stage and Layer node types
if(nodeType === 'Stage' || nodeType === 'Layer') {
dd.anim.node = this;
}
else {
/*
* if node type is a group or shape, create a top layer,
* and move the node to the top layer
*/
if(nodeType === 'Group' || nodeType === 'Shape') {
this._moveToTop();
}
dd.anim.node = this.getLayer();
}
dd.anim.start();
}
};
Kinetic.Node.prototype._moveToTop = function() {
var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group;
// Group or Shape node types
else {
this._buildTopLayer();
dd.anim.node = dd.topLayer;
dd.prevParent = this.getParent();
// WARNING: it's important to delay the moveTo operation,
// layer redraws, and anim.start() until after the method execution
// has completed or else there will be a flicker on mobile devices
// due to the time it takes to append the dd canvas to the DOM
setTimeout(function() {
that.moveTo(dd.topLayer);
dd.prevParent.getLayer().draw();
dd.topLayer.show();
dd.topLayer.draw();
dd.anim.start();
}, 0);
}
}
};
Kinetic.Node.prototype._buildTopLayer = function() {
var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group;
// re-construct node tree
this._eachAncestorReverse(function(node) {
@ -56,6 +59,7 @@
});
lastContainer = dd.topLayer;
stage.add(dd.topLayer);
dd.topLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
}
else if(node.nodeType === 'Group') {
group = new Kinetic.Group({
@ -69,19 +73,6 @@
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,