lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-07-16 01:00:44 +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 topLayer: null
}; };
Kinetic.Node.prototype._startDrag = function() { 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) { if(pos) {
var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType; var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType;
@ -19,30 +19,33 @@
dd.offset.x = pos.x - ap.x; dd.offset.x = pos.x - ap.x;
dd.offset.y = pos.y - ap.y; dd.offset.y = pos.y - ap.y;
/* // Stage and Layer node types
* if dragging and dropping the stage, if(nodeType === 'Stage' || nodeType === 'Layer') {
* draw all of the layers
*/
if(nodeType === 'Stage') {
dd.anim.node = this; 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(); dd.anim.start();
} }
};
Kinetic.Node.prototype._moveToTop = function() { // Group or Shape node types
var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group; else {
this._buildTopLayer();
dd.anim.node = dd.topLayer;
dd.prevParent = this.getParent(); 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 // re-construct node tree
this._eachAncestorReverse(function(node) { this._eachAncestorReverse(function(node) {
@ -56,6 +59,7 @@
}); });
lastContainer = dd.topLayer; lastContainer = dd.topLayer;
stage.add(dd.topLayer); stage.add(dd.topLayer);
dd.topLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
} }
else if(node.nodeType === 'Group') { else if(node.nodeType === 'Group') {
group = new Kinetic.Group({ group = new Kinetic.Group({
@ -69,19 +73,6 @@
lastContainer = 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) { Kinetic.DD._drag = function(evt) {
var dd = Kinetic.DD, node = dd.node; 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); layer.add(star);
stage.add(layer); 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({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,