lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed up dd regression

Browse Source
This commit is contained in:
Eric Rowell
2013-08-12 03:00:08 -07:00
parent 355c80088f
commit 2cf0a690f9
4 changed files with 86 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/DragAndDrop.js
View File

@@ -15,19 +15,7 @@
node = dd.node;
if(node) {
var pos = node.getStage().getPointerPosition();
var dbf = node.getDragBoundFunc();
var newNodePos = {
x: pos.x - dd.offset.x,
y: pos.y - dd.offset.y
};
if(dbf !== undefined) {
newNodePos = dbf.call(node, newNodePos, evt);
}
node.setAbsolutePosition(newNodePos);
node._setDragPosition(evt);
if(!dd.isDragging) {
dd.isDragging = true;
@@ -85,11 +73,9 @@
*/
Kinetic.Node.prototype.startDrag = function() {
var dd = Kinetic.DD,
that = this,
stage = this.getStage(),
layer = this.getLayer(),
pos = stage.getPointerPosition(),
m = this.getTransform().getTranslation(),
ap = this.getAbsolutePosition();
if(pos) {
@@ -102,9 +88,27 @@
dd.offset.y = pos.y - ap.y;
dd.anim.setLayers(layer || this.getLayers());
dd.anim.start();
this._setDragPosition();
}
};
Kinetic.Node.prototype._setDragPosition = function(evt) {
var dd = Kinetic.DD
pos = this.getStage().getPointerPosition(),
dbf = this.getDragBoundFunc(),
newNodePos = {
x: pos.x - dd.offset.x,
y: pos.y - dd.offset.y
};
if(dbf !== undefined) {
newNodePos = dbf.call(this, newNodePos, evt);
}
this.setAbsolutePosition(newNodePos);
};
/**
* stop drag and drop
* @method

85
src/Node.js
View File

@@ -530,11 +530,11 @@
* @memberof Kinetic.Node.prototype
*/
getAbsolutePosition: function() {
var trans = this.getAbsoluteTransform(),
var absoluteTransform = this.getAbsoluteTransform(),
o = this.getOffset();
trans.translate(o.x, o.y);
return trans.getTranslation();
absoluteTransform.translate(o.x, o.y);
return absoluteTransform.getTranslation();
},
/**
* set absolute position
@@ -568,6 +568,44 @@
this._setTransform(trans);
return this;
},
_setTransform: function(trans) {
var key;
for(key in trans) {
this.attrs[key] = trans[key];
}
this._clearCache(TRANSFORM);
this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
},
_clearTransform: function() {
var trans = {
x: this.getX(),
y: this.getY(),
rotation: this.getRotation(),
scaleX: this.getScaleX(),
scaleY: this.getScaleY(),
offsetX: this.getOffsetX(),
offsetY: this.getOffsetY(),
skewX: this.getSkewX(),
skewY: this.getSkewY()
};
this.attrs.x = 0;
this.attrs.y = 0;
this.attrs.rotation = 0;
this.attrs.scaleX = 1;
this.attrs.scaleY = 1;
this.attrs.offsetX = 0;
this.attrs.offsetY = 0;
this.attrs.skewX = 0;
this.attrs.skewY = 0;
this._clearCache(TRANSFORM);
this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
return trans;
},
/**
* move node by an amount relative to its current position
* @method
@@ -1086,47 +1124,6 @@
}
}
},
/**
* clears the transform and returns the original transform
*/
_clearTransform: function() {
var trans = {
x: this.getX(),
y: this.getY(),
rotation: this.getRotation(),
scaleX: this.getScaleX(),
scaleY: this.getScaleY(),
offsetX: this.getOffsetX(),
offsetY: this.getOffsetY(),
skewX: this.getSkewX(),
skewY: this.getSkewY()
};
this.attrs.x = 0;
this.attrs.y = 0;
this.attrs.rotation = 0;
this.attrs.scaleX = 1;
this.attrs.scaleY = 1;
this.attrs.offsetX = 0;
this.attrs.offsetY = 0;
this.attrs.skewX = 0;
this.attrs.skewY = 0;
this._clearCache(TRANSFORM);
this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
return trans;
},
_setTransform: function(trans) {
var key;
for(key in trans) {
this.attrs[key] = trans[key];
}
this._clearCache(TRANSFORM);
this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
},
_fireBeforeChangeEvent: function(attr, oldVal, newVal) {
this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, {
oldVal: oldVal,

18
src/Util.js
View File

@@ -235,6 +235,24 @@
*/
getMatrix: function() {
return this.m;
},
/**
* set to absolute position via translation
* @method
* @memberof Kinetic.Transform.prototype
* @author ericdrowell
*/
setAbsolutePosition: function(x, y) {
var m0 = this.m[0],
m1 = this.m[1],
m2 = this.m[2],
m3 = this.m[3],
m4 = this.m[4],
m5 = this.m[5],
yt = ((m0 * (y - m5)) - (m1 * (x - m4))) / ((m0 * m3) - (m1 * m2)),
xt = (x - m4 - (m2 * yt)) / m0;
this.translate(xt, yt);
}
};
})();

20
tests/js/manualTests.js
View File

@@ -979,7 +979,7 @@ Test.Modules.DRAG_AND_DROP = {
stage.add(layer);
layer.draw();
},
'drag and drop elastic star with shadow': function(containerId) {
'drag and drop star with shadow': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -988,8 +988,8 @@ Test.Modules.DRAG_AND_DROP = {
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 200,
y: 100,
x: 260,
y: 160,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
@@ -1003,6 +1003,7 @@ Test.Modules.DRAG_AND_DROP = {
x: 5,
y: 5
},
offset: 60,
draggable: true,
name: 'star'
});
@@ -1012,8 +1013,6 @@ Test.Modules.DRAG_AND_DROP = {
star.setLineJoin('bevel');
layer.draw();
var trans = null;
showHit(layer);
},
@@ -1415,10 +1414,7 @@ Test.Modules.DRAG_AND_DROP = {
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
scale: {
x: 2,
y: 2
}
scale: 2
});
var Circle = new Kinetic.Circle({
@@ -1483,7 +1479,6 @@ Test.Modules.DRAG_AND_DROP = {
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
rotationDeg: 60,
scale: {
x: 2,
@@ -1492,11 +1487,12 @@ Test.Modules.DRAG_AND_DROP = {
offset: {
x: 50,
y: 25
}
},
draggable: true
});
group.add(rect);
layer.add(group);
layer.add(rect);
stage.add(bgLayer);
stage.add(layer);