lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

when parent and children are both draggable, the lowest level child draggable property now has priority over ancestors. Refactored dependency order in thorfile

Browse Source
This commit is contained in:
Eric Rowell 2013-01-27 21:29:22 -08:00
parent 6cd7ab135f
commit be295992e0
5 changed files with 78 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Thorfile
View File

@ -6,7 +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",
"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/Node.js", "src/Animation.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Shape.js", "src/Stage.js", "src/Layer.js", "src/Group.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"
]

6
src/Animation.js
View File

@ -138,4 +138,10 @@
var raf = Kinetic.DD && Kinetic.DD.moving ? this.fixedRequestAnimFrame : RAF;
raf(callback);
};
var moveTo = Kinetic.Node.prototype.moveTo;
Kinetic.Node.prototype.moveTo = function(container) {
moveTo.call(this, container);
};
})();

29
src/DragAndDrop.js
View File

@ -1,4 +1,6 @@
(function() {
var dd, html = document.getElementsByTagName('html')[0];
Kinetic.DD = {
anim: new Kinetic.Animation(),
moving: false,
@ -7,8 +9,17 @@
y: 0
}
};
dd = Kinetic.DD;
//html.addEventListener('mousedown', _htmlMouseup);
Kinetic.getNodeDragging = function() {
return dd.node;
};
Kinetic.DD._setupDragLayerAndGetContainer = function(no) {
var dd = Kinetic.DD, stage = no.getStage(), nodeType = no.nodeType, lastContainer, group;
var stage = no.getStage(), nodeType = no.nodeType, lastContainer, group;
// re-construct node tree
no._eachAncestorReverse(function(node) {
@ -40,7 +51,7 @@
stage.dragLayer.getCanvas().getElement().className = 'kinetic-drag-and-drop-layer';
};
Kinetic.DD._drag = function(evt) {
var dd = Kinetic.DD, node = dd.node;
var node = dd.node;
if(node) {
var pos = node.getStage().getUserPosition();
@ -70,7 +81,7 @@
}
};
Kinetic.DD._endDrag = function(evt) {
var dd = Kinetic.DD, node = dd.node, nodeType, stage;
var node = dd.node, nodeType, stage;
if(node) { nodeType = node.nodeType, stage = node.getStage();
node.setListening(true);
@ -98,8 +109,8 @@
delete dd.node;
dd.anim.stop();
};
Kinetic.Node.prototype._startDrag = function() {
var that = this, dd = Kinetic.DD, stage = this.getStage(), pos = stage.getUserPosition();
Kinetic.Node.prototype._startDrag = function(evt) {
var that = this, stage = this.getStage(), pos = stage.getUserPosition();
if(pos) {
var m = this.getTransform().getTranslation(), ap = this.getAbsolutePosition(), nodeType = this.nodeType, container;
@ -164,13 +175,17 @@
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.isDragging = function() {
var dd = Kinetic.DD;
return dd.node && dd.node._id === this._id && dd.moving;
};
Kinetic.Node.prototype._listenDrag = function() {
this._dragCleanup();
this.on('mousedown.kinetic touchstart.kinetic', this._startDrag);
var that = this;
this.on('mousedown.kinetic touchstart.kinetic', function(evt) {
if(!Kinetic.getNodeDragging()) {
that._startDrag(evt);
}
});
};
Kinetic.Node.prototype._dragChange = function() {

19
src/Stage.js
View File

@ -377,8 +377,9 @@
}
},
_mousedown: function(evt) {
var obj, dd = Kinetic.DD;
this._setUserPosition(evt);
var obj = this.getIntersection(this.getUserPosition());
obj = this.getIntersection(this.getUserPosition());
if(obj && obj.shape) {
var shape = obj.shape;
this.clickStart = true;
@ -386,8 +387,8 @@
}
//init stage drag and drop
if(Kinetic.DD && this.attrs.draggable) {
this._startDrag();
if(dd && this.attrs.draggable && !dd.node) {
this._startDrag(evt);
}
},
_mouseup: function(evt) {
@ -425,9 +426,11 @@
this.clickStart = false;
},
_touchstart: function(evt) {
var obj, dd = Kinetic.DD;
this._setUserPosition(evt);
evt.preventDefault();
var obj = this.getIntersection(this.getUserPosition());
obj = this.getIntersection(this.getUserPosition());
if(obj && obj.shape) {
var shape = obj.shape;
@ -435,11 +438,9 @@
shape._handleEvent('touchstart', evt);
}
/*
* init stage drag and drop
*/
if(Kinetic.DD && this.attrs.draggable) {
this._startDrag();
// init stage drag and drop
if(dd && this.attrs.draggable && !dd.node) {
this._startDrag(evt);
}
},
_touchend: function(evt) {

41
tests/js/manualTests.js
View File

@ -1318,7 +1318,8 @@ Test.Modules.DRAG_AND_DROP = {
offset: {
x: 50,
y: 25
}
},
dragOnTop: true
});
group.add(rect);
@ -1327,8 +1328,44 @@ Test.Modules.DRAG_AND_DROP = {
var anim = new Kinetic.Animation(function() {
rect.rotate(0.01);
}, layer);
anim.start();
},
'stage and shape draggable': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
draggable: true
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var rect = new Kinetic.Rect({
x: 150,
y: 100,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
var rect2 = new Kinetic.Rect({
x: 300,
y: 100,
width: 100,
height: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
layer.add(rect).add(rect2);
stage.add(layer);
}
};