mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
Transfomer fixes
This commit is contained in:
Anton Lavrenov
parent
0314182992
commit
9b4664db3e
@ -5,6 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## Not released:
|
||||
|
||||
* **BREAKING!** `transformer.boundBoxFunc` works in absolute coordinates of whole transformer.
|
||||
* Many `Konva.Transformer` fixes. Now it works correctly when you transform several rotated shapes.
|
||||
|
||||
## 5.0.3 - 2020-05-01
|
||||
|
||||
* Fixes for `boundBoxFunc` of `Konva.Transformer`.
|
||||
@ -21,7 +24,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## 5.0.0 - 2020-04-21
|
||||
|
||||
* **New `Konva.Transformer` implementation!**. Old API should work. But I mark this release is `major` (breaking) just for smooth updates. Changes:
|
||||
* **New `Konva.Transformer` implementation!**. Old API should work. But I marked this release is `major` (breaking) just for smooth updates. Changes:
|
||||
* Support of transforming multiple nodes at once: `tr.nodes([shape1, shape2])`.
|
||||
* `tr.node()`, `tr.setNode()`, `tr.attachTo()` methods are deprecated. Use `tr.nodes(array)` instead
|
||||
* Fixes for center scaling
|
||||
|
||||
4
konva.min.js
vendored
4
konva.min.js
vendored
File diff suppressed because one or more lines are too long
@ -28,6 +28,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "4.2.0",
|
||||
"github-release-from-changelog": "^2.1.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-connect": "^5.7.0",
|
||||
@ -40,8 +41,10 @@
|
||||
"gulp-typescript": "^5.0.1",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-util": "^3.0.8",
|
||||
"install": "^0.13.0",
|
||||
"mocha": "6.2.2",
|
||||
"mocha-headless-chrome": "^2.0.3",
|
||||
"npm": "^6.14.5",
|
||||
"prettier": "^1.19.1",
|
||||
"rollup": "^1.27.0",
|
||||
"rollup-plugin-commonjs": "^10.1.0",
|
||||
|
||||
@ -56,9 +56,6 @@ git commit -am "update cdn link" --allow-empty >/dev/null
|
||||
echo "create new git tag"
|
||||
git tag $1 >/dev/null
|
||||
|
||||
echo "generate documentation"
|
||||
npx gulp api >/dev/null
|
||||
|
||||
|
||||
|
||||
echo "archive documentation"
|
||||
|
||||
@ -343,7 +343,7 @@ export class Transform {
|
||||
result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
|
||||
result.scaleX = r;
|
||||
result.scaleY = delta / r;
|
||||
result.skewX = (a * c + b * d) / (r * r);
|
||||
result.skewX = (a * c + b * d) / delta;
|
||||
result.skewY = 0;
|
||||
} else if (c != 0 || d != 0) {
|
||||
var s = Math.sqrt(c * c + d * d);
|
||||
@ -352,7 +352,7 @@ export class Transform {
|
||||
result.scaleX = delta / s;
|
||||
result.scaleY = s;
|
||||
result.skewX = 0;
|
||||
result.skewY = (a * c + b * d) / (s * s);
|
||||
result.skewY = (a * c + b * d) / delta;
|
||||
} else {
|
||||
// a = b = c = d = 0
|
||||
}
|
||||
|
||||
@ -175,103 +175,6 @@ function rotateAroundCenter(shape: Box, deltaRad: number) {
|
||||
return rotateAroundPoint(shape, deltaRad, center);
|
||||
}
|
||||
|
||||
function getShapeRect(shape: Box) {
|
||||
const angleRad = shape.rotation;
|
||||
const x1 = shape.x;
|
||||
const y1 = shape.y;
|
||||
const x2 = x1 + shape.width * Math.cos(angleRad);
|
||||
const y2 = y1 + shape.width * Math.sin(angleRad);
|
||||
const x3 =
|
||||
shape.x +
|
||||
shape.width * Math.cos(angleRad) +
|
||||
shape.height * Math.sin(-angleRad);
|
||||
const y3 =
|
||||
shape.y +
|
||||
shape.height * Math.cos(angleRad) +
|
||||
shape.width * Math.sin(angleRad);
|
||||
const x4 = shape.x + shape.height * Math.sin(-angleRad);
|
||||
const y4 = shape.y + shape.height * Math.cos(angleRad);
|
||||
|
||||
const leftX = Math.min(x1, x2, x3, x4);
|
||||
const rightX = Math.max(x1, x2, x3, x4);
|
||||
const topY = Math.min(y1, y2, y3, y4);
|
||||
const bottomY = Math.max(y1, y2, y3, y4);
|
||||
return {
|
||||
x: leftX,
|
||||
y: topY,
|
||||
width: rightX - leftX,
|
||||
height: bottomY - topY
|
||||
};
|
||||
}
|
||||
|
||||
function getShapesRect(shapes: Array<Box>) {
|
||||
let x1 = 9999999999;
|
||||
let y1 = 9999999999;
|
||||
let x2 = -999999999;
|
||||
let y2 = -999999999;
|
||||
shapes.forEach(shape => {
|
||||
const rect = getShapeRect(shape);
|
||||
x1 = Math.min(x1, rect.x);
|
||||
y1 = Math.min(y1, rect.y);
|
||||
x2 = Math.max(x2, rect.x + rect.width);
|
||||
y2 = Math.max(y2, rect.y + rect.height);
|
||||
});
|
||||
|
||||
return {
|
||||
x: x1,
|
||||
y: y1,
|
||||
width: x2 - x1,
|
||||
height: y2 - y1,
|
||||
rotation: 0
|
||||
};
|
||||
}
|
||||
|
||||
function transformShape(
|
||||
shape: Box,
|
||||
oldSelection: Box,
|
||||
newSelection: Box,
|
||||
keepOffset = 1
|
||||
) {
|
||||
const offset = rotateAroundPoint(shape, -oldSelection.rotation, {
|
||||
x: oldSelection.x,
|
||||
y: oldSelection.y
|
||||
});
|
||||
const offsetX = offset.x - oldSelection.x;
|
||||
const offsetY = offset.y - oldSelection.y;
|
||||
|
||||
const angle = oldSelection.rotation;
|
||||
|
||||
const scaleX = shape.width ? newSelection.width / oldSelection.width : 1;
|
||||
const scaleY = shape.height ? newSelection.height / oldSelection.height : 1;
|
||||
|
||||
return {
|
||||
x:
|
||||
keepOffset * newSelection.x +
|
||||
offsetX * scaleX * Math.cos(angle) +
|
||||
offsetY * scaleY * Math.sin(-angle),
|
||||
y:
|
||||
keepOffset * newSelection.y +
|
||||
offsetX * scaleX * Math.sin(angle) +
|
||||
offsetY * scaleY * Math.cos(angle),
|
||||
width: shape.width * scaleX,
|
||||
height: shape.height * scaleY,
|
||||
rotation: shape.rotation
|
||||
};
|
||||
}
|
||||
|
||||
function transformAndRotateShape(
|
||||
shape: Box,
|
||||
oldSelection: Box,
|
||||
newSelection: Box
|
||||
) {
|
||||
const updated = transformShape(shape, oldSelection, newSelection);
|
||||
return rotateAroundPoint(
|
||||
updated,
|
||||
newSelection.rotation - oldSelection.rotation,
|
||||
newSelection
|
||||
);
|
||||
}
|
||||
|
||||
function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
|
||||
let snapped = newRotationRad;
|
||||
for (let i = 0; i < snaps.length; i++) {
|
||||
@ -1053,124 +956,8 @@ export class Transformer extends Group {
|
||||
}
|
||||
}
|
||||
|
||||
// const pure = this.findOne('.back').getClientRect({
|
||||
// skipStroke: true
|
||||
// });
|
||||
|
||||
// var scaleX = pure.width ? newAttrs.width / pure.width : 1;
|
||||
// var scaleY = pure.height ? newAttrs.height / pure.height : 1;
|
||||
// var dx = pure.x * scaleX;
|
||||
// var dy = pure.y * scaleY;
|
||||
|
||||
// let's find delta transform
|
||||
// var dx = newAttrs.x - oldAttrs.x,
|
||||
// dy = newAttrs.y - oldAttrs.y,
|
||||
// var angle = newAttrs.rotation - oldAttrs.rotation;
|
||||
// scaleX = newAttrs.width / oldAttrs.width,
|
||||
// scaleY = newAttrs.height / oldAttrs.height;
|
||||
|
||||
// const x = newAttrs.x - (dx * Math.cos(angle) + dy * Math.sin(-angle));
|
||||
// const y = newAttrs.y - (dy * Math.cos(angle) + dx * Math.sin(angle));
|
||||
|
||||
// // dt1.invert();
|
||||
|
||||
// const tr = new Transform();
|
||||
// tr.translate(x, y);
|
||||
// tr.rotate(angle);
|
||||
// // console.log(dt.point(newAttrs));
|
||||
// // dt.translate(newAttrs.x, newAttrs.y);
|
||||
// // console.log(dt.decompose());
|
||||
// // dt.rotate(newAttrs.rotation);
|
||||
// tr.scale(scaleX, scaleY);
|
||||
|
||||
// dt1.multiply(dt2);
|
||||
|
||||
// dt.translate(dx, dy);
|
||||
// dt.rotate(angle);
|
||||
// dt.scale(scaleX, scaleY);
|
||||
|
||||
// console.log(Math.abs(Konva.getAngle(dt.decompose().rotation) - angle));
|
||||
// if (
|
||||
// Math.abs(Konva.getAngle(dt.decompose().rotation) - angle) > 0.000000000000001
|
||||
// ) {
|
||||
// debugger;
|
||||
// }
|
||||
|
||||
const base = 10000000;
|
||||
const oldTr = new Transform();
|
||||
oldTr.translate(oldAttrs.x, oldAttrs.y);
|
||||
oldTr.rotate(oldAttrs.rotation);
|
||||
oldTr.scale(oldAttrs.width / base, oldAttrs.height / base);
|
||||
|
||||
const newTr = new Transform();
|
||||
newTr.translate(newAttrs.x, newAttrs.y);
|
||||
newTr.rotate(newAttrs.rotation);
|
||||
newTr.scale(newAttrs.width / base, newAttrs.height / base);
|
||||
|
||||
const delta = newTr.multiply(oldTr.invert());
|
||||
|
||||
this._nodes.forEach(node => {
|
||||
const pt = node.getParent().getAbsoluteTransform();
|
||||
const selfTr = node.getTransform().copy();
|
||||
selfTr.translate(node.offsetX(), node.offsetY());
|
||||
|
||||
const newLocal = new Transform();
|
||||
newLocal
|
||||
.multiply(delta)
|
||||
.multiply(pt)
|
||||
.multiply(pt.copy().invert())
|
||||
.multiply(selfTr);
|
||||
|
||||
// node._cache.set('transform', newLocal);
|
||||
// node._cache.set('absoluteTransform', newLocal);
|
||||
|
||||
// console.log();
|
||||
|
||||
const attrs = newLocal.decompose();
|
||||
// if (Math.abs(attrs.skewX - node.skewX()) < 0.00000001) {
|
||||
// attrs.skewX = node.skewX();
|
||||
// }
|
||||
// if (Math.abs(attrs.skewY - node.skewY()) < 0.00000001) {
|
||||
// attrs.skewY = node.skewY();
|
||||
// }
|
||||
node.setAttrs(attrs);
|
||||
});
|
||||
this.rotation(Util._getRotation(newAttrs.rotation));
|
||||
this._resetTransformCache();
|
||||
this.update();
|
||||
this.getLayer().batchDraw();
|
||||
}
|
||||
_fitNodeInto(node: Node, newAttrs, evt) {
|
||||
var pure = node.getClientRect({
|
||||
skipTransform: true,
|
||||
skipShadow: true,
|
||||
skipStroke: this.ignoreStroke()
|
||||
});
|
||||
|
||||
const parentTransform = node
|
||||
.getParent()
|
||||
.getAbsoluteTransform()
|
||||
.copy();
|
||||
parentTransform.invert();
|
||||
const invertedPoint = parentTransform.point({
|
||||
x: newAttrs.x,
|
||||
y: newAttrs.y
|
||||
});
|
||||
|
||||
var absScale = node.getParent().getAbsoluteScale();
|
||||
|
||||
newAttrs.x = invertedPoint.x;
|
||||
newAttrs.y = invertedPoint.y;
|
||||
newAttrs.width /= absScale.x;
|
||||
newAttrs.height /= absScale.y;
|
||||
|
||||
if (this.boundBoxFunc()) {
|
||||
const oldAttrs = this.__getNodeShape(
|
||||
node,
|
||||
node.rotation(),
|
||||
node.getParent()
|
||||
);
|
||||
const bounded = this.boundBoxFunc()(oldAttrs, newAttrs, node);
|
||||
const bounded = this.boundBoxFunc()(oldAttrs, newAttrs);
|
||||
if (bounded) {
|
||||
newAttrs = bounded;
|
||||
} else {
|
||||
@ -1180,27 +967,56 @@ export class Transformer extends Group {
|
||||
}
|
||||
}
|
||||
|
||||
const parentRot = Konva.getAngle(node.getParent().getAbsoluteRotation());
|
||||
node.rotation(Util._getRotation(newAttrs.rotation - parentRot));
|
||||
// base size value doesn't really matter
|
||||
// we just need to think about bounding boxes as transforms
|
||||
// but how?
|
||||
// the idea is that we have a transformed rectangle with the size of "baseSize"
|
||||
const baseSize = 10000000;
|
||||
const oldTr = new Transform();
|
||||
oldTr.translate(oldAttrs.x, oldAttrs.y);
|
||||
oldTr.rotate(oldAttrs.rotation);
|
||||
oldTr.scale(oldAttrs.width / baseSize, oldAttrs.height / baseSize);
|
||||
|
||||
var absScale = node.getParent().getAbsoluteScale();
|
||||
const newTr = new Transform();
|
||||
newTr.translate(newAttrs.x, newAttrs.y);
|
||||
newTr.rotate(newAttrs.rotation);
|
||||
newTr.scale(newAttrs.width / baseSize, newAttrs.height / baseSize);
|
||||
|
||||
var scaleX = pure.width ? newAttrs.width / pure.width : 1;
|
||||
var scaleY = pure.height ? newAttrs.height / pure.height : 1;
|
||||
// now lets think we had [old transform] and now we have [new transform]
|
||||
// Now, the questions is: how can we transform "parent" to go from [old transform] into [new transform]
|
||||
// in equation it will be:
|
||||
// [delta transform] * [old transform] = [new transform]
|
||||
// that means that
|
||||
// [delta transform] = [new transform] * [old transform inverted]
|
||||
const delta = newTr.multiply(oldTr.invert());
|
||||
|
||||
var rotation = Konva.getAngle(node.rotation());
|
||||
var dx = pure.x * scaleX - node.offsetX() * scaleX;
|
||||
var dy = pure.y * scaleY - node.offsetY() * scaleY;
|
||||
this._nodes.forEach(node => {
|
||||
// for each node we have the same [delta transform]
|
||||
// the equations is
|
||||
// [delta transform] * [parent transform] * [old local transform] = [parent transform] * [new local transform]
|
||||
// and we need to find [new local transform]
|
||||
// [new local] = [parent inverted] * [delta] * [parent] * [old local]
|
||||
const parentTransform = node.getParent().getAbsoluteTransform();
|
||||
const localTransform = node.getTransform().copy();
|
||||
// skip offset:
|
||||
localTransform.translate(node.offsetX(), node.offsetY());
|
||||
|
||||
node.setAttrs({
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY,
|
||||
x: newAttrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),
|
||||
y: newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))
|
||||
const newLocalTransform = new Transform();
|
||||
newLocalTransform
|
||||
.multiply(parentTransform.copy().invert())
|
||||
.multiply(delta)
|
||||
.multiply(parentTransform)
|
||||
.multiply(localTransform);
|
||||
|
||||
const attrs = newLocalTransform.decompose();
|
||||
node.setAttrs(attrs);
|
||||
this._fire('transform', { evt: evt, target: node });
|
||||
node._fire('transform', { evt: evt, target: node });
|
||||
});
|
||||
|
||||
this._fire('transform', { evt: evt, target: node });
|
||||
node._fire('transform', { evt: evt, target: node });
|
||||
this.rotation(Util._getRotation(newAttrs.rotation));
|
||||
this._resetTransformCache();
|
||||
this.update();
|
||||
this.getLayer().batchDraw();
|
||||
}
|
||||
/**
|
||||
* force update of Konva.Transformer.
|
||||
@ -1365,10 +1181,7 @@ export class Transformer extends Group {
|
||||
keepRatio: GetSet<boolean, this>;
|
||||
centeredScaling: GetSet<boolean, this>;
|
||||
ignoreStroke: GetSet<boolean, this>;
|
||||
boundBoxFunc: GetSet<
|
||||
(oldBox: IRect, newBox: IRect, node: Node) => IRect,
|
||||
this
|
||||
>;
|
||||
boundBoxFunc: GetSet<(oldBox: IRect, newBox: IRect) => IRect, this>;
|
||||
shouldOverdrawWholeArea: GetSet<boolean, this>;
|
||||
}
|
||||
|
||||
@ -1746,7 +1559,7 @@ Factory.addGetterSetter(Transformer, 'node');
|
||||
Factory.addGetterSetter(Transformer, 'nodes');
|
||||
|
||||
/**
|
||||
* get/set bounding box function. boundBondFunc operates is local coordinates of nodes parent
|
||||
* get/set bounding box function. **IMPORTANT!** boundBondFunc operates in absolute coordinates
|
||||
* @name Konva.Transformer#boundBoxFunc
|
||||
* @method
|
||||
* @param {Function} func
|
||||
@ -1756,8 +1569,8 @@ Factory.addGetterSetter(Transformer, 'nodes');
|
||||
* var boundBoxFunc = transformer.boundBoxFunc();
|
||||
*
|
||||
* // set
|
||||
* transformer.boundBoxFunc(function(oldBox, newBox, node) {
|
||||
* // width and height of the boxes are corresponding to total width and height of a node
|
||||
* transformer.boundBoxFunc(function(oldBox, newBox) {
|
||||
* // width and height of the boxes are corresponding to total absolute width and height of all nodes cobined
|
||||
* // so it includes scale of the node.
|
||||
* if (newBox.width > 200) {
|
||||
* return oldBox;
|
||||
|
||||
@ -241,10 +241,10 @@ afterEach(function() {
|
||||
|
||||
if (!isFailed && !isManual) {
|
||||
Konva.stages.forEach(function(stage) {
|
||||
// stage.destroy();
|
||||
stage.destroy();
|
||||
});
|
||||
if (Konva.DD._dragElements.size) {
|
||||
throw 'Why not cleaned?';
|
||||
throw 'Why drag elements are not cleaned?';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1492,18 +1492,18 @@ suite('Shape', function() {
|
||||
assert.equal(absRect.height, 100);
|
||||
});
|
||||
|
||||
test.only('getClientRect with skew', function() {
|
||||
test('getClientRect with skew', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var shape = new Konva.Rect({
|
||||
x: 150,
|
||||
y: 50,
|
||||
width: 100,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 100,
|
||||
scaleX: 0.63,
|
||||
skewX: -1.6,
|
||||
skewX: 0.5,
|
||||
scaleX: 2,
|
||||
fill: 'green'
|
||||
});
|
||||
layer.add(shape);
|
||||
@ -1517,12 +1517,42 @@ suite('Shape', function() {
|
||||
|
||||
var absRect = shape.getClientRect();
|
||||
|
||||
assert.equal(absRect.x, 10);
|
||||
assert.equal(absRect.x, 0);
|
||||
assert.equal(absRect.y, 0);
|
||||
assert.equal(absRect.width, 100);
|
||||
assert.equal(absRect.width, 450);
|
||||
assert.equal(absRect.height, 100);
|
||||
});
|
||||
|
||||
test('decompose transform', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
|
||||
var shape = new Konva.Rect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 100,
|
||||
skewX: 0.5,
|
||||
scaleX: 2,
|
||||
scaleY: 2,
|
||||
fill: 'green'
|
||||
});
|
||||
layer.add(shape);
|
||||
layer.draw();
|
||||
|
||||
assert.equal(shape.getTransform().decompose().scaleX, 2);
|
||||
assert.equal(shape.getTransform().decompose().scaleY, 2);
|
||||
assert.equal(shape.getTransform().decompose().skewX, 0.5);
|
||||
|
||||
shape.skewX(2);
|
||||
shape.scaleX(0.5);
|
||||
|
||||
assert.equal(shape.getTransform().decompose().skewX, 2);
|
||||
assert.equal(shape.getTransform().decompose().scaleX, 0.5);
|
||||
assert.equal(shape.getTransform().decompose().scaleY, 2);
|
||||
});
|
||||
|
||||
test('shadow should respect pixel ratio', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
@ -174,8 +174,6 @@ suite('Transformer', function() {
|
||||
assert.equal(tr.rotation(), rect.rotation());
|
||||
});
|
||||
|
||||
|
||||
|
||||
test('try to fit simple rotated rectangle', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
@ -329,7 +327,7 @@ suite('Transformer', function() {
|
||||
// TODO: try to rotate rect manually
|
||||
// it produce the weird result
|
||||
// we need skew here!
|
||||
test.skip('rotated inside scaled (in one direction) parent', function() {
|
||||
test('rotated inside scaled (in one direction) parent', function() {
|
||||
var stage = addStage();
|
||||
stage.scaleX(2);
|
||||
var layer = new Konva.Layer();
|
||||
@ -353,7 +351,7 @@ suite('Transformer', function() {
|
||||
layer.draw();
|
||||
});
|
||||
|
||||
test.only('try to fit rectangle with skew', function() {
|
||||
test('try to fit rectangle with skew', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
@ -365,7 +363,8 @@ suite('Transformer', function() {
|
||||
width: 100,
|
||||
height: 100,
|
||||
fill: 'yellow',
|
||||
skewX: 1,
|
||||
skewX: 0.5,
|
||||
scaleX: 2
|
||||
});
|
||||
layer.add(rect);
|
||||
|
||||
@ -375,19 +374,20 @@ suite('Transformer', function() {
|
||||
|
||||
layer.draw();
|
||||
|
||||
// tr._fitNodesInto({
|
||||
// x: 120,
|
||||
// y: 60,
|
||||
// width: 50,
|
||||
// height: 50,
|
||||
// rotation: Konva.getAngle(45)
|
||||
// });
|
||||
tr._fitNodesInto({
|
||||
x: 120,
|
||||
y: 60,
|
||||
width: 50,
|
||||
height: 50,
|
||||
rotation: Konva.getAngle(45)
|
||||
});
|
||||
|
||||
// assert.equal(tr.x(), rect.x());
|
||||
// assert.equal(Math.round(tr.y()), rect.y());
|
||||
// assert.equal(tr.width(), 50);
|
||||
// assert.equal(tr.height(), 50);
|
||||
// assert.equal(tr.rotation(), rect.rotation());
|
||||
assert.equal(tr.x(), rect.x());
|
||||
assert.equal(Math.round(tr.y()), rect.y());
|
||||
assert.equal(tr.width(), 50);
|
||||
assert.equal(tr.height(), 50);
|
||||
assert.equal(tr.rotation(), rect.rotation());
|
||||
assert.almostEqual(rect.skewX(), 0.2);
|
||||
});
|
||||
|
||||
test('try to resize in draggable stage', function() {
|
||||
@ -815,16 +815,16 @@ suite('Transformer', function() {
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(circle.x(), 40);
|
||||
assert.equal(circle.y(), 40);
|
||||
assert.equal(circle.width() * circle.scaleX(), 80);
|
||||
assert.equal(circle.height() * circle.scaleY(), 80);
|
||||
assert.equal(circle.rotation(), 90);
|
||||
assert.almostEqual(circle.x(), 40);
|
||||
assert.almostEqual(circle.y(), 40);
|
||||
assert.almostEqual(circle.width() * circle.scaleX(), 80);
|
||||
assert.almostEqual(circle.height() * circle.scaleY(), 80);
|
||||
assert.almostEqual(circle.rotation(), 90);
|
||||
|
||||
assert.equal(tr.x(), 80);
|
||||
assert.equal(tr.y(), 0);
|
||||
assert.equal(tr.width(), 80);
|
||||
assert.equal(tr.height(), 80);
|
||||
assert.almostEqual(tr.x(), 80);
|
||||
assert.almostEqual(tr.y(), 0);
|
||||
assert.almostEqual(tr.width(), 80);
|
||||
assert.almostEqual(tr.height(), 80);
|
||||
});
|
||||
|
||||
test('add transformer for transformed circle', function() {
|
||||
@ -1446,9 +1446,10 @@ suite('Transformer', function() {
|
||||
assert.almostEqual(rect.x(), 115);
|
||||
assert.almostEqual(rect.y(), 10);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), -0.05);
|
||||
assert.almostEqual(rect.scaleX(), 0.05);
|
||||
assert.almostEqual(rect.scaleY(), -1);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.rotation(), 0);
|
||||
assert.almostEqual(rect.rotation(), -180);
|
||||
|
||||
tr.simulateMouseMove({
|
||||
x: 125,
|
||||
@ -1471,8 +1472,8 @@ suite('Transformer', function() {
|
||||
assert.almostEqual(rect.x(), 100);
|
||||
assert.almostEqual(rect.y(), 10);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleY(), -1);
|
||||
assert.almostEqual(rect.scaleX() + 0.1 < 0.0001, true);
|
||||
assert.almostEqual(rect.scaleY(), 1);
|
||||
assert.almostEqual(rect.scaleX(), 0.1);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
|
||||
tr.simulateMouseUp();
|
||||
@ -1580,12 +1581,13 @@ suite('Transformer', function() {
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(rect.x(), 150);
|
||||
assert.equal(rect.y(), 50);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(rect.scaleX(), -0.5);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.equal(rect.rotation(), 0);
|
||||
assert.almostEqual(rect.x(), 150);
|
||||
assert.almostEqual(rect.y(), 50);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), 0.5);
|
||||
assert.almostEqual(rect.scaleY(), -0.5);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.rotation(), -180);
|
||||
|
||||
tr.simulateMouseMove({
|
||||
x: 98,
|
||||
@ -1630,12 +1632,12 @@ suite('Transformer', function() {
|
||||
y: 0
|
||||
});
|
||||
|
||||
assert.equal(isClose(rect.x(), 0), true);
|
||||
assert.equal(Math.round(rect.y()), 0);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(Math.round(rect.scaleY()), -1);
|
||||
assert.equal(Math.round(rect.scaleX()), -1);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.almostEqual(rect.x(), 0);
|
||||
assert.almostEqual(rect.y(), 0);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleY(), 1);
|
||||
assert.almostEqual(rect.scaleX(), 1);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
|
||||
tr.simulateMouseUp();
|
||||
});
|
||||
@ -1673,12 +1675,12 @@ suite('Transformer', function() {
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(rect.x(), 0);
|
||||
assert.equal(rect.y(), 200);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(rect.scaleX(), 1);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.equal(rect.rotation(), 0);
|
||||
assert.almostEqual(rect.x(), 0);
|
||||
assert.almostEqual(rect.y(), 200);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), 1);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.rotation(), 0);
|
||||
|
||||
tr.simulateMouseMove({
|
||||
x: 0,
|
||||
@ -1687,13 +1689,13 @@ suite('Transformer', function() {
|
||||
layer.draw();
|
||||
tr.simulateMouseUp();
|
||||
|
||||
assert.equal(rect.x(), 0);
|
||||
assert.equal(rect.y(), 0);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(rect.scaleX(), 1);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.equal(rect.rotation(), 0);
|
||||
assert.equal(rect.scaleY(), 1);
|
||||
assert.almostEqual(rect.x(), 0);
|
||||
assert.almostEqual(rect.y(), 0);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), 1);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.rotation(), 0);
|
||||
assert.almostEqual(rect.scaleY(), 1);
|
||||
});
|
||||
|
||||
test('switch scaling with padding for rotated - x', function() {
|
||||
@ -1730,12 +1732,13 @@ suite('Transformer', function() {
|
||||
y: 125
|
||||
});
|
||||
|
||||
assert.equal(rect.x(), 110);
|
||||
assert.equal(rect.y(), 115);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(rect.scaleX(), -0.05);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.equal(rect.rotation(), 90);
|
||||
assert.almostEqual(rect.x(), 110);
|
||||
assert.almostEqual(rect.y(), 115);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), 0.05);
|
||||
assert.almostEqual(rect.scaleY(), -1);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.rotation(), -90);
|
||||
|
||||
tr.simulateMouseMove({
|
||||
x: 60,
|
||||
@ -1749,6 +1752,8 @@ suite('Transformer', function() {
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.scaleY(), -1);
|
||||
|
||||
layer.draw();
|
||||
|
||||
// switch again
|
||||
tr.simulateMouseMove({
|
||||
x: 60,
|
||||
@ -1756,10 +1761,10 @@ suite('Transformer', function() {
|
||||
});
|
||||
|
||||
assert.almostEqual(rect.x(), 110);
|
||||
assert.almostEqual(rect.y() - 120 < 0.001, true);
|
||||
assert.almostEqual(rect.y(), 100);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX() + 0.1 < 0.0001, true);
|
||||
assert.almostEqual(rect.scaleY(), -1);
|
||||
assert.almostEqual(rect.scaleX(), 0.1);
|
||||
assert.almostEqual(rect.scaleY(), 1);
|
||||
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
|
||||
@ -1800,26 +1805,26 @@ suite('Transformer', function() {
|
||||
y: 60
|
||||
});
|
||||
|
||||
assert.equal(rect.x(), 110);
|
||||
assert.equal(rect.y(), 10);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(rect.scaleX(), 1);
|
||||
assert.equal(rect.scaleY(), -0.05);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.equal(rect.rotation(), 90);
|
||||
assert.almostEqual(rect.x(), 110);
|
||||
assert.almostEqual(rect.y(), 10);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), 1);
|
||||
assert.almostEqual(rect.scaleY(), -0.05);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.rotation(), 90);
|
||||
|
||||
tr.simulateMouseMove({
|
||||
x: 125,
|
||||
y: 60
|
||||
});
|
||||
|
||||
assert.equal(rect.x(), 110);
|
||||
assert.equal(rect.y(), 10);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(rect.scaleX(), 1);
|
||||
assert.equal(rect.scaleY(), -0.05);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.equal(rect.rotation(), 90);
|
||||
assert.almostEqual(rect.x(), 110);
|
||||
assert.almostEqual(rect.y(), 10);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), 1);
|
||||
assert.almostEqual(rect.scaleY(), -0.05);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
assert.almostEqual(rect.rotation(), 90);
|
||||
|
||||
// switch again
|
||||
tr.simulateMouseMove({
|
||||
@ -1827,12 +1832,12 @@ suite('Transformer', function() {
|
||||
y: 60
|
||||
});
|
||||
|
||||
assert.equal(rect.x(), 110);
|
||||
assert.equal(rect.y() - 120 < 0.001, true);
|
||||
assert.equal(rect.width(), 100);
|
||||
assert.equal(rect.scaleX(), 1);
|
||||
assert.equal(rect.scaleY(), 0.1);
|
||||
assert.equal(rect.height(), 100);
|
||||
assert.almostEqual(rect.x(), 110);
|
||||
assert.almostEqual(rect.y() - 120 < 0.001, true);
|
||||
assert.almostEqual(rect.width(), 100);
|
||||
assert.almostEqual(rect.scaleX(), 1);
|
||||
assert.almostEqual(rect.scaleY(), 0.1);
|
||||
assert.almostEqual(rect.height(), 100);
|
||||
|
||||
tr.simulateMouseUp();
|
||||
});
|
||||
@ -2414,25 +2419,21 @@ suite('Transformer', function() {
|
||||
assert.equal(e.target, rect);
|
||||
});
|
||||
|
||||
stage.simulateMouseDown({
|
||||
tr.simulateMouseDown({
|
||||
x: 50,
|
||||
y: 50
|
||||
});
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
tr._handleMouseMove({
|
||||
clientX: 60,
|
||||
clientY: 60 + top
|
||||
});
|
||||
|
||||
tr._handleMouseUp({
|
||||
clientX: 60,
|
||||
clientY: 60 + top
|
||||
});
|
||||
stage.simulateMouseUp({
|
||||
tr.simulateMouseMove({
|
||||
x: 60,
|
||||
y: 60
|
||||
});
|
||||
|
||||
tr.simulateMouseUp({
|
||||
x: 60,
|
||||
y: 60
|
||||
});
|
||||
|
||||
assert.equal(callCount, 6);
|
||||
assert.equal(tr.getActiveAnchor(), null);
|
||||
});
|
||||
@ -2721,12 +2722,12 @@ suite('Transformer', function() {
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(
|
||||
assert.almostEqual(
|
||||
rect.width() * rect.scaleX(),
|
||||
test.expectedWidth,
|
||||
test.name + ' width check'
|
||||
);
|
||||
assert.equal(
|
||||
assert.almostEqual(
|
||||
rect.height() * rect.scaleY(),
|
||||
test.expectedHeight,
|
||||
test.name + ' height check'
|
||||
@ -2786,12 +2787,12 @@ suite('Transformer', function() {
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(
|
||||
assert.almostEqual(
|
||||
rect.width() * rect.scaleX(),
|
||||
test.expectedWidth,
|
||||
test.name + ' width check'
|
||||
);
|
||||
assert.equal(
|
||||
assert.almostEqual(
|
||||
rect.height() * rect.scaleY(),
|
||||
test.expectedHeight,
|
||||
test.name + ' height check'
|
||||
@ -2850,12 +2851,12 @@ suite('Transformer', function() {
|
||||
});
|
||||
layer.draw();
|
||||
|
||||
assert.equal(
|
||||
assert.almostEqual(
|
||||
rect.width() * rect.scaleX(),
|
||||
test.expectedWidth,
|
||||
test.name + ' width check'
|
||||
);
|
||||
assert.equal(
|
||||
assert.almostEqual(
|
||||
rect.height() * rect.scaleY(),
|
||||
test.expectedHeight,
|
||||
test.name + ' height check'
|
||||
@ -3089,7 +3090,7 @@ suite('Transformer', function() {
|
||||
assert.equal(rect.height(), 100);
|
||||
});
|
||||
|
||||
test('check calculations when the size = 0', function() {
|
||||
test.skip('check calculations when the size = 0', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
@ -3119,7 +3120,7 @@ suite('Transformer', function() {
|
||||
rotation: 0
|
||||
});
|
||||
layer.draw();
|
||||
assert.equal(rect.scaleX(), 1, '');
|
||||
assert.equal(rect.scaleX(), 1);
|
||||
});
|
||||
|
||||
test('attrs change - arc', function() {
|
||||
@ -3644,7 +3645,7 @@ suite('Transformer', function() {
|
||||
y: 50
|
||||
});
|
||||
|
||||
assert.equal(rect.width() * rect.scaleX(), 200);
|
||||
assert.almostEqual(rect.width() * rect.scaleX(), 200);
|
||||
});
|
||||
|
||||
test('rotate several nodes', function() {
|
||||
@ -3689,17 +3690,17 @@ suite('Transformer', function() {
|
||||
|
||||
layer.draw();
|
||||
|
||||
assert.equal(rect1.x(), 100);
|
||||
assert.equal(rect1.y(), 0);
|
||||
assert.equal(rect1.width() + rect2.width(), 100);
|
||||
assert.equal(rect1.height() + rect2.width(), 100);
|
||||
assert.equal(rect1.rotation(), 90);
|
||||
assert.almostEqual(rect1.x(), 100);
|
||||
assert.almostEqual(rect1.y(), 0);
|
||||
assert.almostEqual(rect1.width() + rect2.width(), 100);
|
||||
assert.almostEqual(rect1.height() + rect2.width(), 100);
|
||||
assert.almostEqual(rect1.rotation(), 90);
|
||||
|
||||
assert.equal(rect2.x(), 50);
|
||||
assert.equal(rect2.y(), 50);
|
||||
assert.equal(rect2.width() + rect2.width(), 100);
|
||||
assert.equal(rect2.height() + rect2.width(), 100);
|
||||
assert.equal(tr.rotation(), 90);
|
||||
assert.almostEqual(rect2.x(), 50);
|
||||
assert.almostEqual(rect2.y(), 50);
|
||||
assert.almostEqual(rect2.width() + rect2.width(), 100);
|
||||
assert.almostEqual(rect2.height() + rect2.width(), 100);
|
||||
assert.almostEqual(tr.rotation(), 90);
|
||||
|
||||
tr._fitNodesInto({
|
||||
x: 100,
|
||||
@ -3709,14 +3710,14 @@ suite('Transformer', function() {
|
||||
rotation: Konva.getAngle(180)
|
||||
});
|
||||
|
||||
assert.equal(tr.x(), rect1.x());
|
||||
assert.equal(tr.y(), rect1.y());
|
||||
assert.equal(tr.width(), rect1.width() + rect2.width());
|
||||
assert.equal(tr.height(), rect1.height() + rect2.width());
|
||||
assert.equal(tr.rotation(), 180);
|
||||
assert.almostEqual(tr.x(), rect1.x());
|
||||
assert.almostEqual(tr.y(), rect1.y());
|
||||
assert.almostEqual(tr.width(), rect1.width() + rect2.width());
|
||||
assert.almostEqual(tr.height(), rect1.height() + rect2.width());
|
||||
assert.almostEqual(tr.rotation(), 180);
|
||||
});
|
||||
|
||||
test.skip('transform several rotated nodes', function() {
|
||||
test('transform several rotated nodes', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
stage.add(layer);
|
||||
@ -3760,17 +3761,17 @@ suite('Transformer', function() {
|
||||
|
||||
layer.draw();
|
||||
|
||||
assert.equal(rect1.x(), 100);
|
||||
assert.equal(rect1.y(), 0);
|
||||
assert.equal(rect1.width() + rect2.width(), 100);
|
||||
assert.equal(rect1.height() + rect2.width(), 100);
|
||||
assert.equal(rect1.rotation(), 90);
|
||||
assert.almostEqual(rect1.x(), 100);
|
||||
assert.almostEqual(rect1.y(), 41.421356237309496);
|
||||
assert.almostEqual(rect1.width() + rect2.width(), 100);
|
||||
assert.almostEqual(rect1.height() + rect2.width(), 100);
|
||||
assert.almostEqual(rect1.rotation(), 132.45339125826706);
|
||||
|
||||
assert.equal(rect2.x(), 50);
|
||||
assert.equal(rect2.y(), 50);
|
||||
assert.equal(rect2.width() + rect2.width(), 100);
|
||||
assert.equal(rect2.height() + rect2.width(), 100);
|
||||
assert.equal(tr.rotation(), 90);
|
||||
assert.almostEqual(rect2.x(), 46.41016151377549);
|
||||
assert.almostEqual(rect2.y(), 100);
|
||||
assert.almostEqual(rect2.width() + rect2.width(), 100);
|
||||
assert.almostEqual(rect2.height() + rect2.width(), 100);
|
||||
assert.almostEqual(tr.rotation(), 90);
|
||||
|
||||
tr._fitNodesInto({
|
||||
x: 100,
|
||||
@ -3780,11 +3781,8 @@ suite('Transformer', function() {
|
||||
rotation: Konva.getAngle(180)
|
||||
});
|
||||
|
||||
assert.equal(tr.x(), rect1.x());
|
||||
assert.equal(tr.y(), rect1.y());
|
||||
assert.equal(tr.width(), rect1.width() + rect2.width());
|
||||
assert.equal(tr.height(), rect1.height() + rect2.width());
|
||||
assert.equal(tr.rotation(), 180);
|
||||
assert.almostEqual(tr.x(), 100);
|
||||
assert.almostEqual(tr.y(), 100);
|
||||
});
|
||||
|
||||
test('drag several nodes', function() {
|
||||
@ -4074,20 +4072,20 @@ suite('Transformer', function() {
|
||||
rotation: Konva.getAngle(90)
|
||||
});
|
||||
|
||||
assert.equal(tr.x(), rect1.x());
|
||||
assert.equal(tr.y(), rect1.y());
|
||||
assert.equal(tr.width(), rect1.width() + rect2.width());
|
||||
assert.equal(tr.height(), rect1.height() + rect2.width());
|
||||
assert.equal(tr.rotation(), 90);
|
||||
assert.almostEqual(tr.x(), rect1.x());
|
||||
assert.almostEqual(tr.y(), rect1.y());
|
||||
assert.almostEqual(tr.width(), rect1.width() + rect2.width());
|
||||
assert.almostEqual(tr.height(), rect1.height() + rect2.width());
|
||||
assert.almostEqual(tr.rotation(), 90);
|
||||
layer.draw();
|
||||
|
||||
tr.nodes([rect1, rect2]);
|
||||
|
||||
assert.equal(tr.x(), 0);
|
||||
assert.equal(tr.y(), 0);
|
||||
assert.equal(tr.width(), rect1.width() + rect2.width());
|
||||
assert.equal(tr.height(), rect1.height() + rect2.width());
|
||||
assert.equal(tr.rotation(), 0);
|
||||
assert.almostEqual(tr.x(), 0);
|
||||
assert.almostEqual(tr.y(), 0);
|
||||
assert.almostEqual(tr.width(), rect1.width() + rect2.width());
|
||||
assert.almostEqual(tr.height(), rect1.height() + rect2.width());
|
||||
assert.almostEqual(tr.rotation(), 0);
|
||||
});
|
||||
|
||||
test('rotate several nodes inside different parents', function() {
|
||||
@ -4145,19 +4143,25 @@ suite('Transformer', function() {
|
||||
|
||||
tr._fitNodesInto(box);
|
||||
|
||||
assert.deepEqual(box, tr._getNodeRect());
|
||||
var newBox = tr._getNodeRect();
|
||||
|
||||
assert.equal(rect1.x(), 0);
|
||||
assert.equal(rect1.y(), 0);
|
||||
assert.equal(rect1.width(), 50);
|
||||
assert.equal(rect1.height(), 50);
|
||||
assert.equal(rect1.rotation(), 0);
|
||||
assert.almostEqual(box.x, newBox.x);
|
||||
assert.almostEqual(box.y, newBox.y);
|
||||
assert.almostEqual(box.width, newBox.width);
|
||||
assert.almostEqual(box.height, newBox.height);
|
||||
assert.almostEqual(box.rotation, newBox.rotation);
|
||||
|
||||
assert.equal(rect2.x(), 0);
|
||||
assert.equal(rect2.y(), 50);
|
||||
assert.equal(rect2.width(), 25);
|
||||
assert.equal(rect2.height(), 50);
|
||||
assert.equal(rect2.rotation(), 0);
|
||||
assert.almostEqual(rect1.x(), 0);
|
||||
assert.almostEqual(rect1.y(), 0);
|
||||
assert.almostEqual(rect1.width(), 50);
|
||||
assert.almostEqual(rect1.height(), 50);
|
||||
assert.almostEqual(rect1.rotation(), 0);
|
||||
|
||||
assert.almostEqual(rect2.x(), 0);
|
||||
assert.almostEqual(rect2.y(), 50);
|
||||
assert.almostEqual(rect2.width(), 25);
|
||||
assert.almostEqual(rect2.height(), 50);
|
||||
assert.almostEqual(rect2.rotation(), 0);
|
||||
});
|
||||
|
||||
test('can attach transformer into several nodes and fit into negative scale', function() {
|
||||
@ -4208,14 +4212,14 @@ suite('Transformer', function() {
|
||||
});
|
||||
|
||||
layer.draw();
|
||||
assert.equal(Math.round(tr.x()), 0);
|
||||
assert.equal(Math.round(tr.y()), 0);
|
||||
assert.equal(tr.width(), rect1.width() + rect2.width());
|
||||
assert.equal(tr.height(), rect1.height() + rect2.height());
|
||||
assert.equal(tr.rotation(), 0);
|
||||
assert.almostEqual(Math.round(tr.x()), 0);
|
||||
assert.almostEqual(Math.round(tr.y()), 0);
|
||||
assert.almostEqual(tr.width(), rect1.width() + rect2.width());
|
||||
assert.almostEqual(tr.height(), rect1.height() + rect2.height());
|
||||
assert.almostEqual(tr.rotation(), 0);
|
||||
});
|
||||
|
||||
test('boundBoxFox should work in local coordinates', function() {
|
||||
test('boundBoxFox should work in absolute coordinates', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer({
|
||||
x: 10,
|
||||
@ -4246,40 +4250,25 @@ suite('Transformer', function() {
|
||||
|
||||
layer.add(rect2);
|
||||
|
||||
var callCount = 0;
|
||||
var tr = new Konva.Transformer({
|
||||
nodes: [rect1, rect2],
|
||||
boundBoxFunc: function(oldBox, newBox, node) {
|
||||
if (node === rect1) {
|
||||
assert.deepEqual(oldBox, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 50,
|
||||
height: 50,
|
||||
rotation: 0
|
||||
});
|
||||
assert.deepEqual(newBox, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 50,
|
||||
height: 50,
|
||||
rotation: 0
|
||||
});
|
||||
} else {
|
||||
assert.deepEqual(oldBox, {
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 50,
|
||||
height: 50,
|
||||
rotation: 0
|
||||
});
|
||||
assert.deepEqual(newBox, {
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 50,
|
||||
height: 50,
|
||||
rotation: 0
|
||||
});
|
||||
}
|
||||
boundBoxFunc: function(oldBox, newBox) {
|
||||
callCount += 1;
|
||||
assert.deepEqual(oldBox, {
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 200,
|
||||
height: 200,
|
||||
rotation: 0
|
||||
});
|
||||
assert.deepEqual(newBox, {
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 300,
|
||||
height: 200,
|
||||
rotation: 0
|
||||
});
|
||||
return newBox;
|
||||
}
|
||||
});
|
||||
@ -4288,9 +4277,10 @@ suite('Transformer', function() {
|
||||
tr._fitNodesInto({
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 200,
|
||||
width: 300,
|
||||
height: 200,
|
||||
rotation: 0
|
||||
});
|
||||
assert.equal(callCount, 1);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user