lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-24 19:03:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

drag and drop layer is now created on stage instantiation, and is removed and added as needed

Browse Source
This commit is contained in:
Eric Rowell 2013-01-12 23:39:56 -08:00
parent ed579e4843
commit 5cda46be69
4 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Thorfile
View File

@ -6,7 +6,8 @@ class Build < Thor
FILES = [
"src/Global.js", "src/util/Type.js", "src/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
"src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js",
"src/Animation.js", "src/Node.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/Layer.js", "src/Group.js", "src/Shape.js",
# The following order must remain intact due to dependency tree
"src/Animation.js", "src/Node.js", "src/Transition.js", "src/Container.js", "src/Stage.js", "src/DragAndDrop.js", "src/Layer.js", "src/Group.js", "src/Shape.js",
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"
]

42
src/DragAndDrop.js
View File

@ -26,18 +26,17 @@
// Group or Shape node types
else {
if(this.getDragOnTop()) {
this._buildTopLayer();
dd.anim.node = dd.topLayer;
this._buildDragLayer();
dd.anim.node = stage.dragLayer;
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);
that.moveTo(stage.dragLayer);
dd.prevParent.getLayer().draw();
dd.topLayer.show();
dd.topLayer.draw();
stage.dragLayer.draw();
dd.anim.start();
}, 0);
}
@ -48,22 +47,20 @@
}
}
};
Kinetic.Node.prototype._buildTopLayer = function() {
Kinetic.Node.prototype._buildDragLayer = function() {
var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group;
// re-construct node tree
this._eachAncestorReverse(function(node) {
if(node.nodeType === 'Layer') {
dd.topLayer = new Kinetic.Layer({
stage.dragLayer.setAttrs({
x: node.getX(),
y: node.getY(),
scale: node.getScale(),
rotation: node.getRotation(),
visible: false
rotation: node.getRotation()
});
lastContainer = dd.topLayer;
stage.add(dd.topLayer);
dd.topLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
lastContainer = stage.dragLayer;
stage.add(stage.dragLayer);
}
else if(node.nodeType === 'Group') {
group = new Kinetic.Group({
@ -78,6 +75,12 @@
}
});
};
Kinetic.Stage.prototype._initDragLayer = function() {
var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group;
this.dragLayer = new Kinetic.Layer();
stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
};
Kinetic.DD._drag = function(evt) {
var dd = Kinetic.DD, node = dd.node;
@ -104,14 +107,14 @@
node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
// execute ondragmove if defined
node._handleEvent('dragmove', evt);
}
};
Kinetic.DD._endDrag = function(evt) {
var dd = Kinetic.DD, node = dd.node;
if(node) {
var nodeType = node.nodeType;
var nodeType = node.nodeType, stage = node.getStage();
node.setListening(true);
if(nodeType === 'Stage') {
node.draw();
@ -119,9 +122,8 @@
else {
if((nodeType === 'Group' || nodeType === 'Shape') && node.getDragOnTop() && dd.prevParent) {
node.moveTo(dd.prevParent);
dd.topLayer.remove();
stage.dragLayer.remove();
dd.prevParent = null;
dd.topLayer = null;
}
node.getLayer().draw();
@ -232,4 +234,12 @@
* @name getDragOnTop
* @methodOf Kinetic.Node.prototype
*/
// because we're using a high performance inheritance pattern, we will need to re
// extend stage and container so that they pick up the drag and drop methods
// the build file defines Layer, Group, and Shappe after the DD definition,
// so these classes have not been extended yet and will automatically pick up
// the drag and drop methods
Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
})();

10
src/Stage.js
View File

@ -5,8 +5,8 @@
* @augments Kinetic.Container
* @param {Object} config
* @param {String|DomElement} config.container Container id or DOM element
*
*
*
*
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
@ -48,6 +48,10 @@
Kinetic.Global.stages.push(this);
this._addId(this);
this._addName(this);
if(Kinetic.DD) {
this._initDragLayer();
}
},
/**
* set container dom element which contains the stage wrapper div element
@ -216,7 +220,7 @@
drawLayer(0);
},
/**
* converts stage into an image.
* converts stage into an image.
* @name toImage
* @methodOf Kinetic.Stage.prototype
* @param {Object} config

1
tests/js/unit/nodeTests.js
View File

@ -1936,6 +1936,7 @@ Test.Modules.NODE = {
stage.add(layer);
test(stage.getAbsoluteZIndex() === 0, 'stage abs zindex should be 0');
console.log(layer.getAbsoluteZIndex());
test(layer.getAbsoluteZIndex() === 1, 'layer abs zindex should be 1');
test(group1.getAbsoluteZIndex() === 2, 'group1 abs zindex should be 2');
test(group2.getAbsoluteZIndex() === 3, 'group2 abs zindex should be 3');