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

exposed absolute positioning logic inside the _prepareDrag method so that developers have access to it via the setAbsolutePosition() method

Browse Source
This commit is contained in:
Eric Rowell 2012-04-14 10:40:54 -07:00
parent 2108736df7
commit fb9f324cfb
6 changed files with 145 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
dist/kinetic-core.js vendored
View File

@ -186,7 +186,7 @@ Kinetic.Node = function(config) {
this.attrs.draggable = false;
this.eventListeners = {};
// set attrs
// set attrs
this.setAttrs(config);
};
/*
@ -451,6 +451,53 @@ Kinetic.Node.prototype = {
getAbsolutePosition: function() {
return this.getAbsoluteTransform().getTranslation();
},
/**
* set absolute position relative to stage
*/
setAbsolutePosition: function(pos, override) {
/*
* save rotation and scale and then
* remove them from the transform
*/
var rot = this.attrs.rotation;
var scale = {
x: this.attrs.scale.x,
y: this.attrs.scale.y
};
this.attrs.rotation = 0;
this.attrs.scale = {
x: 1,
y: 1
};
// unravel transform
var it = this.getAbsoluteTransform();
it.invert();
it.translate(pos.x, pos.y);
pos = {
x: this.attrs.x + it.getTranslation().x,
y: this.attrs.y + it.getTranslation().y
};
// handle override
if(override !== undefined) {
if(override.x !== undefined) {
pos.x = override.x;
}
if(override.y !== undefined) {
pos.y = override.y;
}
}
this.setPosition(pos.x, pos.y);
// restore rotation and scale
this.rotate(rot);
this.attrs.scale = {
x: scale.x,
y: scale.y
};
},
/**
* move node by an amount
* @param {Number} x
@ -1813,46 +1860,16 @@ Kinetic.Stage.prototype = {
newNodePos.y = db.bottom;
}
/*
* save rotation and scale and then
* remove them from the transform
*/
var rot = node.attrs.rotation;
var scale = {
x: node.attrs.scale.x,
y: node.attrs.scale.y
};
node.attrs.rotation = 0;
node.attrs.scale = {
x: 1,
y: 1
};
// unravel transform
var it = node.getAbsoluteTransform();
it.invert();
it.translate(newNodePos.x, newNodePos.y);
newNodePos = {
x: node.attrs.x + it.getTranslation().x,
y: node.attrs.y + it.getTranslation().y
};
// constraint overrides
var override = {};
if(dc === 'horizontal') {
newNodePos.y = node.attrs.y;
override.y = node.attrs.y;
}
else if(dc === 'vertical') {
newNodePos.x = node.attrs.x;
override.x = node.attrs.x;
}
node.setPosition(newNodePos.x, newNodePos.y);
// restore rotation and scale
node.rotate(rot);
node.attrs.scale = {
x: scale.x,
y: scale.y
};
node.setAbsolutePosition(newNodePos, override);
go.drag.node.getLayer().draw();

4
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

49
src/Node.js
View File

@ -33,7 +33,7 @@ Kinetic.Node = function(config) {
this.attrs.draggable = false;
this.eventListeners = {};
// set attrs
// set attrs
this.setAttrs(config);
};
/*
@ -298,6 +298,53 @@ Kinetic.Node.prototype = {
getAbsolutePosition: function() {
return this.getAbsoluteTransform().getTranslation();
},
/**
* set absolute position relative to stage
*/
setAbsolutePosition: function(pos, override) {
/*
* save rotation and scale and then
* remove them from the transform
*/
var rot = this.attrs.rotation;
var scale = {
x: this.attrs.scale.x,
y: this.attrs.scale.y
};
this.attrs.rotation = 0;
this.attrs.scale = {
x: 1,
y: 1
};
// unravel transform
var it = this.getAbsoluteTransform();
it.invert();
it.translate(pos.x, pos.y);
pos = {
x: this.attrs.x + it.getTranslation().x,
y: this.attrs.y + it.getTranslation().y
};
// handle override
if(override !== undefined) {
if(override.x !== undefined) {
pos.x = override.x;
}
if(override.y !== undefined) {
pos.y = override.y;
}
}
this.setPosition(pos.x, pos.y);
// restore rotation and scale
this.rotate(rot);
this.attrs.scale = {
x: scale.x,
y: scale.y
};
},
/**
* move node by an amount
* @param {Number} x

38
src/Stage.js
View File

@ -758,46 +758,16 @@ Kinetic.Stage.prototype = {
newNodePos.y = db.bottom;
}
/*
* save rotation and scale and then
* remove them from the transform
*/
var rot = node.attrs.rotation;
var scale = {
x: node.attrs.scale.x,
y: node.attrs.scale.y
};
node.attrs.rotation = 0;
node.attrs.scale = {
x: 1,
y: 1
};
// unravel transform
var it = node.getAbsoluteTransform();
it.invert();
it.translate(newNodePos.x, newNodePos.y);
newNodePos = {
x: node.attrs.x + it.getTranslation().x,
y: node.attrs.y + it.getTranslation().y
};
// constraint overrides
var override = {};
if(dc === 'horizontal') {
newNodePos.y = node.attrs.y;
override.y = node.attrs.y;
}
else if(dc === 'vertical') {
newNodePos.x = node.attrs.x;
override.x = node.attrs.x;
}
node.setPosition(newNodePos.x, newNodePos.y);
// restore rotation and scale
node.rotate(rot);
node.attrs.scale = {
x: scale.x,
y: scale.y
};
node.setAbsolutePosition(newNodePos, override);
go.drag.node.getLayer().draw();

2
tests/js/Test.js
View File

@ -10,7 +10,7 @@ function log(message) {
* Test constructor
*/
function Test() {
this.testOnly = 'DRAG AND DROP - draggable true';
this.testOnly = '';
this.counter = 0;
}
/**

41
tests/js/unitTests.js
View File

@ -171,11 +171,8 @@ Test.prototype.tests = {
group.add(triangle);
layer.draw();
console.log(stage.toJSON());
var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
test(stage.toJSON() === expectedJson, "problem with serialization");
},
'STAGE - load stage with custom shape using json': function(containerId) {
var stage = new Kinetic.Stage({
@ -1430,6 +1427,44 @@ Test.prototype.tests = {
layer.draw();
},
'NODE - test getPosition and getAbsolutePosition for shape inside transformed stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
//rotationDeg: 60
//rotationDeg: Math.PI / 3
});
layer.add(rect);
stage.add(layer);
//stage.rotateDeg(20);
//console.log(rect.getAbsoluteTransform().getTranslation())
stage.rotate(Math.PI / 3);
stage.setScale(0.5);
stage.draw();
test(rect.getPosition().x === 200, 'rect position x should be 200');
test(rect.getPosition().y === 20, 'rect position y should be 20');
test(Math.round(rect.getAbsolutePosition().x) === 41, 'rect absolute position x should be about 41');
test(Math.round(rect.getAbsolutePosition().y) === 92, 'rect absolute position y should be about 92');
},
'NODE - test drag and drop properties and methods': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,