lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 09:50:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactored drag and drop a bit and fixed a dependency bug

Browse Source
This commit is contained in:
Eric Rowell
2013-01-13 22:32:08 -08:00
parent bc92dc2b6b
commit abbaef1cc6
4 changed files with 49 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Thorfile
View File

@@ -6,8 +6,7 @@ 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",
# 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/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",
"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"
]

98
src/DragAndDrop.js
View File

@@ -7,48 +7,6 @@
y: 0
}
};
Kinetic.Node.prototype._startDrag = function() {
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, container;
dd.node = this;
dd.offset.x = pos.x - ap.x;
dd.offset.y = pos.y - ap.y;
// Stage and Layer node types
if(nodeType === 'Stage' || nodeType === 'Layer') {
dd.anim.node = this;
dd.anim.start();
}
// Group or Shape node types
else {
if(this.getDragOnTop()) {
container = dd._setupDragLayerAndGetContainer(this);
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() {
if(dd.node) {
that.moveTo(container);
dd.prevParent.getLayer().draw();
stage.dragLayer.draw();
dd.anim.start();
}
}, 0);
}
else {
dd.anim.node = this.getLayer();
dd.anim.start();
}
}
}
};
Kinetic.DD._setupDragLayerAndGetContainer = function(no) {
var dd = Kinetic.DD, stage = no.getStage(), nodeType = no.nodeType, lastContainer, group;
@@ -77,10 +35,8 @@
});
return lastContainer;
};
Kinetic.Stage.prototype._initDragLayer = function() {
var dd = Kinetic.DD, stage = this.getStage(), nodeType = this.nodeType, lastContainer, group;
this.dragLayer = new Kinetic.Layer();
Kinetic.DD._initDragLayer = function(stage) {
stage.dragLayer = new Kinetic.Layer();
stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
};
Kinetic.DD._drag = function(evt) {
@@ -142,6 +98,48 @@
delete dd.node;
dd.anim.stop();
};
Kinetic.Node.prototype._startDrag = function() {
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, container;
dd.node = this;
dd.offset.x = pos.x - ap.x;
dd.offset.y = pos.y - ap.y;
// Stage and Layer node types
if(nodeType === 'Stage' || nodeType === 'Layer') {
dd.anim.node = this;
dd.anim.start();
}
// Group or Shape node types
else {
if(this.getDragOnTop()) {
container = dd._setupDragLayerAndGetContainer(this);
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() {
if(dd.node) {
that.moveTo(container);
dd.prevParent.getLayer().draw();
stage.dragLayer.draw();
dd.anim.start();
}
}, 0);
}
else {
dd.anim.node = this.getLayer();
dd.anim.start();
}
}
}
};
/**
* set draggable
* @name setDraggable
@@ -236,12 +234,4 @@
* @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);
})();

5
src/Stage.js
View File

@@ -33,6 +33,7 @@
Kinetic.Stage.prototype = {
_initStage: function(config) {
var dd = Kinetic.DD;
this.setDefaultAttrs({
width: 400,
height: 200
@@ -47,8 +48,8 @@
this._bindContentEvents();
Kinetic.Global.stages.push(this);
if(Kinetic.DD) {
this._initDragLayer();
if(dd) {
dd._initDragLayer(this);
}
},
/**

2
tests/js/manualTests.js
View File

@@ -767,7 +767,7 @@ Test.Modules.MANUAL = {
layer.add(redCircle);
stage.add(layer);
},
},
'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,