lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-22 21:02:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Transfomer fixes

Browse Source
This commit is contained in:
Anton Lavrenov
2020-05-06 11:40:08 -05:00
parent 0314182992
commit 9b4664db3e
10 changed files with 1684 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -5,6 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released: ## 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 ## 5.0.3 - 2020-05-01
* Fixes for `boundBoxFunc` of `Konva.Transformer`. * 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 ## 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])`. * 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 * `tr.node()`, `tr.setNode()`, `tr.attachTo()` methods are deprecated. Use `tr.nodes(array)` instead
* Fixes for center scaling * Fixes for center scaling

1557
konva.js
View File

File diff suppressed because it is too large Load Diff

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@@ -28,6 +28,7 @@
}, },
"devDependencies": { "devDependencies": {
"chai": "4.2.0", "chai": "4.2.0",
"github-release-from-changelog": "^2.1.1",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0", "gulp-connect": "^5.7.0",
@@ -40,8 +41,10 @@
"gulp-typescript": "^5.0.1", "gulp-typescript": "^5.0.1",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp-util": "^3.0.8", "gulp-util": "^3.0.8",
"install": "^0.13.0",
"mocha": "6.2.2", "mocha": "6.2.2",
"mocha-headless-chrome": "^2.0.3", "mocha-headless-chrome": "^2.0.3",
"npm": "^6.14.5",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"rollup": "^1.27.0", "rollup": "^1.27.0",
"rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-commonjs": "^10.1.0",

3
release.sh
View File

@@ -56,9 +56,6 @@ git commit -am "update cdn link" --allow-empty >/dev/null
echo "create new git tag" echo "create new git tag"
git tag $1 >/dev/null git tag $1 >/dev/null
echo "generate documentation"
npx gulp api >/dev/null
echo "archive documentation" echo "archive documentation"

4
src/Util.ts
View File

@@ -343,7 +343,7 @@ export class Transform {
result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r); result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
result.scaleX = r; result.scaleX = r;
result.scaleY = delta / r; result.scaleY = delta / r;
result.skewX = (a * c + b * d) / (r * r); result.skewX = (a * c + b * d) / delta;
result.skewY = 0; result.skewY = 0;
} else if (c != 0 || d != 0) { } else if (c != 0 || d != 0) {
var s = Math.sqrt(c * c + d * d); var s = Math.sqrt(c * c + d * d);
@@ -352,7 +352,7 @@ export class Transform {
result.scaleX = delta / s; result.scaleX = delta / s;
result.scaleY = s; result.scaleY = s;
result.skewX = 0; result.skewX = 0;
result.skewY = (a * c + b * d) / (s * s); result.skewY = (a * c + b * d) / delta;
} else { } else {
// a = b = c = d = 0 // a = b = c = d = 0
} }

287
src/shapes/Transformer.ts
View File

@@ -175,103 +175,6 @@ function rotateAroundCenter(shape: Box, deltaRad: number) {
return rotateAroundPoint(shape, deltaRad, center); 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) { function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
let snapped = newRotationRad; let snapped = newRotationRad;
for (let i = 0; i < snaps.length; i++) { 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()) { if (this.boundBoxFunc()) {
const oldAttrs = this.__getNodeShape( const bounded = this.boundBoxFunc()(oldAttrs, newAttrs);
node,
node.rotation(),
node.getParent()
);
const bounded = this.boundBoxFunc()(oldAttrs, newAttrs, node);
if (bounded) { if (bounded) {
newAttrs = bounded; newAttrs = bounded;
} else { } else {
@@ -1180,27 +967,56 @@ export class Transformer extends Group {
} }
} }
const parentRot = Konva.getAngle(node.getParent().getAbsoluteRotation()); // base size value doesn't really matter
node.rotation(Util._getRotation(newAttrs.rotation - parentRot)); // 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; // now lets think we had [old transform] and now we have [new transform]
var scaleY = pure.height ? newAttrs.height / pure.height : 1; // 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()); this._nodes.forEach(node => {
var dx = pure.x * scaleX - node.offsetX() * scaleX; // for each node we have the same [delta transform]
var dy = pure.y * scaleY - node.offsetY() * scaleY; // 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({ const newLocalTransform = new Transform();
scaleX: scaleX, newLocalTransform
scaleY: scaleY, .multiply(parentTransform.copy().invert())
x: newAttrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)), .multiply(delta)
y: newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation)) .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.rotation(Util._getRotation(newAttrs.rotation));
this._fire('transform', { evt: evt, target: node }); this._resetTransformCache();
node._fire('transform', { evt: evt, target: node }); this.update();
this.getLayer().batchDraw();
} }
/** /**
* force update of Konva.Transformer. * force update of Konva.Transformer.
@@ -1365,10 +1181,7 @@ export class Transformer extends Group {
keepRatio: GetSet<boolean, this>; keepRatio: GetSet<boolean, this>;
centeredScaling: GetSet<boolean, this>; centeredScaling: GetSet<boolean, this>;
ignoreStroke: GetSet<boolean, this>; ignoreStroke: GetSet<boolean, this>;
boundBoxFunc: GetSet< boundBoxFunc: GetSet<(oldBox: IRect, newBox: IRect) => IRect, this>;
(oldBox: IRect, newBox: IRect, node: Node) => IRect,
this
>;
shouldOverdrawWholeArea: GetSet<boolean, this>; shouldOverdrawWholeArea: GetSet<boolean, this>;
} }
@@ -1746,7 +1559,7 @@ Factory.addGetterSetter(Transformer, 'node');
Factory.addGetterSetter(Transformer, 'nodes'); 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 * @name Konva.Transformer#boundBoxFunc
* @method * @method
* @param {Function} func * @param {Function} func
@@ -1756,8 +1569,8 @@ Factory.addGetterSetter(Transformer, 'nodes');
* var boundBoxFunc = transformer.boundBoxFunc(); * var boundBoxFunc = transformer.boundBoxFunc();
* *
* // set * // set
* transformer.boundBoxFunc(function(oldBox, newBox, node) { * transformer.boundBoxFunc(function(oldBox, newBox) {
* // width and height of the boxes are corresponding to total width and height of a node * // 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. * // so it includes scale of the node.
* if (newBox.width > 200) { * if (newBox.width > 200) {
* return oldBox; * return oldBox;

4
test/runner.js
View File

@@ -241,10 +241,10 @@ afterEach(function() {
if (!isFailed && !isManual) { if (!isFailed && !isManual) {
Konva.stages.forEach(function(stage) { Konva.stages.forEach(function(stage) {
// stage.destroy(); stage.destroy();
}); });
if (Konva.DD._dragElements.size) { if (Konva.DD._dragElements.size) {
throw 'Why not cleaned?'; throw 'Why drag elements are not cleaned?';
} }
} }
}); });

46
test/unit/Shape-test.js
View File

@@ -1492,18 +1492,18 @@ suite('Shape', function() {
assert.equal(absRect.height, 100); assert.equal(absRect.height, 100);
}); });
test.only('getClientRect with skew', function() { test('getClientRect with skew', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);
var shape = new Konva.Rect({ var shape = new Konva.Rect({
x: 150, x: 0,
y: 50, y: 0,
width: 100, width: 200,
height: 100, height: 100,
scaleX: 0.63, skewX: 0.5,
skewX: -1.6, scaleX: 2,
fill: 'green' fill: 'green'
}); });
layer.add(shape); layer.add(shape);
@@ -1517,12 +1517,42 @@ suite('Shape', function() {
var absRect = shape.getClientRect(); var absRect = shape.getClientRect();
assert.equal(absRect.x, 10); assert.equal(absRect.x, 0);
assert.equal(absRect.y, 0); assert.equal(absRect.y, 0);
assert.equal(absRect.width, 100); assert.equal(absRect.width, 450);
assert.equal(absRect.height, 100); 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() { test('shadow should respect pixel ratio', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();

382
test/unit/shapes/Transformer-test.js
View File

@@ -174,8 +174,6 @@ suite('Transformer', function() {
assert.equal(tr.rotation(), rect.rotation()); assert.equal(tr.rotation(), rect.rotation());
}); });
test('try to fit simple rotated rectangle', function() { test('try to fit simple rotated rectangle', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
@@ -329,7 +327,7 @@ suite('Transformer', function() {
// TODO: try to rotate rect manually // TODO: try to rotate rect manually
// it produce the weird result // it produce the weird result
// we need skew here! // 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(); var stage = addStage();
stage.scaleX(2); stage.scaleX(2);
var layer = new Konva.Layer(); var layer = new Konva.Layer();
@@ -353,7 +351,7 @@ suite('Transformer', function() {
layer.draw(); layer.draw();
}); });
test.only('try to fit rectangle with skew', function() { test('try to fit rectangle with skew', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);
@@ -365,7 +363,8 @@ suite('Transformer', function() {
width: 100, width: 100,
height: 100, height: 100,
fill: 'yellow', fill: 'yellow',
skewX: 1, skewX: 0.5,
scaleX: 2
}); });
layer.add(rect); layer.add(rect);
@@ -375,19 +374,20 @@ suite('Transformer', function() {
layer.draw(); layer.draw();
// tr._fitNodesInto({ tr._fitNodesInto({
// x: 120, x: 120,
// y: 60, y: 60,
// width: 50, width: 50,
// height: 50, height: 50,
// rotation: Konva.getAngle(45) rotation: Konva.getAngle(45)
// }); });
// assert.equal(tr.x(), rect.x()); assert.equal(tr.x(), rect.x());
// assert.equal(Math.round(tr.y()), rect.y()); assert.equal(Math.round(tr.y()), rect.y());
// assert.equal(tr.width(), 50); assert.equal(tr.width(), 50);
// assert.equal(tr.height(), 50); assert.equal(tr.height(), 50);
// assert.equal(tr.rotation(), rect.rotation()); assert.equal(tr.rotation(), rect.rotation());
assert.almostEqual(rect.skewX(), 0.2);
}); });
test('try to resize in draggable stage', function() { test('try to resize in draggable stage', function() {
@@ -815,16 +815,16 @@ suite('Transformer', function() {
}); });
layer.draw(); layer.draw();
assert.equal(circle.x(), 40); assert.almostEqual(circle.x(), 40);
assert.equal(circle.y(), 40); assert.almostEqual(circle.y(), 40);
assert.equal(circle.width() * circle.scaleX(), 80); assert.almostEqual(circle.width() * circle.scaleX(), 80);
assert.equal(circle.height() * circle.scaleY(), 80); assert.almostEqual(circle.height() * circle.scaleY(), 80);
assert.equal(circle.rotation(), 90); assert.almostEqual(circle.rotation(), 90);
assert.equal(tr.x(), 80); assert.almostEqual(tr.x(), 80);
assert.equal(tr.y(), 0); assert.almostEqual(tr.y(), 0);
assert.equal(tr.width(), 80); assert.almostEqual(tr.width(), 80);
assert.equal(tr.height(), 80); assert.almostEqual(tr.height(), 80);
}); });
test('add transformer for transformed circle', function() { test('add transformer for transformed circle', function() {
@@ -1446,9 +1446,10 @@ suite('Transformer', function() {
assert.almostEqual(rect.x(), 115); assert.almostEqual(rect.x(), 115);
assert.almostEqual(rect.y(), 10); assert.almostEqual(rect.y(), 10);
assert.almostEqual(rect.width(), 100); 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.height(), 100);
assert.almostEqual(rect.rotation(), 0); assert.almostEqual(rect.rotation(), -180);
tr.simulateMouseMove({ tr.simulateMouseMove({
x: 125, x: 125,
@@ -1471,8 +1472,8 @@ suite('Transformer', function() {
assert.almostEqual(rect.x(), 100); assert.almostEqual(rect.x(), 100);
assert.almostEqual(rect.y(), 10); assert.almostEqual(rect.y(), 10);
assert.almostEqual(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.almostEqual(rect.scaleY(), -1); assert.almostEqual(rect.scaleY(), 1);
assert.almostEqual(rect.scaleX() + 0.1 < 0.0001, true); assert.almostEqual(rect.scaleX(), 0.1);
assert.almostEqual(rect.height(), 100); assert.almostEqual(rect.height(), 100);
tr.simulateMouseUp(); tr.simulateMouseUp();
@@ -1580,12 +1581,13 @@ suite('Transformer', function() {
}); });
layer.draw(); layer.draw();
assert.equal(rect.x(), 150); assert.almostEqual(rect.x(), 150);
assert.equal(rect.y(), 50); assert.almostEqual(rect.y(), 50);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(rect.scaleX(), -0.5); assert.almostEqual(rect.scaleX(), 0.5);
assert.equal(rect.height(), 100); assert.almostEqual(rect.scaleY(), -0.5);
assert.equal(rect.rotation(), 0); assert.almostEqual(rect.height(), 100);
assert.almostEqual(rect.rotation(), -180);
tr.simulateMouseMove({ tr.simulateMouseMove({
x: 98, x: 98,
@@ -1630,12 +1632,12 @@ suite('Transformer', function() {
y: 0 y: 0
}); });
assert.equal(isClose(rect.x(), 0), true); assert.almostEqual(rect.x(), 0);
assert.equal(Math.round(rect.y()), 0); assert.almostEqual(rect.y(), 0);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(Math.round(rect.scaleY()), -1); assert.almostEqual(rect.scaleY(), 1);
assert.equal(Math.round(rect.scaleX()), -1); assert.almostEqual(rect.scaleX(), 1);
assert.equal(rect.height(), 100); assert.almostEqual(rect.height(), 100);
tr.simulateMouseUp(); tr.simulateMouseUp();
}); });
@@ -1673,12 +1675,12 @@ suite('Transformer', function() {
}); });
layer.draw(); layer.draw();
assert.equal(rect.x(), 0); assert.almostEqual(rect.x(), 0);
assert.equal(rect.y(), 200); assert.almostEqual(rect.y(), 200);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(rect.scaleX(), 1); assert.almostEqual(rect.scaleX(), 1);
assert.equal(rect.height(), 100); assert.almostEqual(rect.height(), 100);
assert.equal(rect.rotation(), 0); assert.almostEqual(rect.rotation(), 0);
tr.simulateMouseMove({ tr.simulateMouseMove({
x: 0, x: 0,
@@ -1687,13 +1689,13 @@ suite('Transformer', function() {
layer.draw(); layer.draw();
tr.simulateMouseUp(); tr.simulateMouseUp();
assert.equal(rect.x(), 0); assert.almostEqual(rect.x(), 0);
assert.equal(rect.y(), 0); assert.almostEqual(rect.y(), 0);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(rect.scaleX(), 1); assert.almostEqual(rect.scaleX(), 1);
assert.equal(rect.height(), 100); assert.almostEqual(rect.height(), 100);
assert.equal(rect.rotation(), 0); assert.almostEqual(rect.rotation(), 0);
assert.equal(rect.scaleY(), 1); assert.almostEqual(rect.scaleY(), 1);
}); });
test('switch scaling with padding for rotated - x', function() { test('switch scaling with padding for rotated - x', function() {
@@ -1730,12 +1732,13 @@ suite('Transformer', function() {
y: 125 y: 125
}); });
assert.equal(rect.x(), 110); assert.almostEqual(rect.x(), 110);
assert.equal(rect.y(), 115); assert.almostEqual(rect.y(), 115);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(rect.scaleX(), -0.05); assert.almostEqual(rect.scaleX(), 0.05);
assert.equal(rect.height(), 100); assert.almostEqual(rect.scaleY(), -1);
assert.equal(rect.rotation(), 90); assert.almostEqual(rect.height(), 100);
assert.almostEqual(rect.rotation(), -90);
tr.simulateMouseMove({ tr.simulateMouseMove({
x: 60, x: 60,
@@ -1749,6 +1752,8 @@ suite('Transformer', function() {
assert.almostEqual(rect.height(), 100); assert.almostEqual(rect.height(), 100);
assert.almostEqual(rect.scaleY(), -1); assert.almostEqual(rect.scaleY(), -1);
layer.draw();
// switch again // switch again
tr.simulateMouseMove({ tr.simulateMouseMove({
x: 60, x: 60,
@@ -1756,10 +1761,10 @@ suite('Transformer', function() {
}); });
assert.almostEqual(rect.x(), 110); 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.width(), 100);
assert.almostEqual(rect.scaleX() + 0.1 < 0.0001, true); assert.almostEqual(rect.scaleX(), 0.1);
assert.almostEqual(rect.scaleY(), -1); assert.almostEqual(rect.scaleY(), 1);
assert.almostEqual(rect.height(), 100); assert.almostEqual(rect.height(), 100);
@@ -1800,26 +1805,26 @@ suite('Transformer', function() {
y: 60 y: 60
}); });
assert.equal(rect.x(), 110); assert.almostEqual(rect.x(), 110);
assert.equal(rect.y(), 10); assert.almostEqual(rect.y(), 10);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(rect.scaleX(), 1); assert.almostEqual(rect.scaleX(), 1);
assert.equal(rect.scaleY(), -0.05); assert.almostEqual(rect.scaleY(), -0.05);
assert.equal(rect.height(), 100); assert.almostEqual(rect.height(), 100);
assert.equal(rect.rotation(), 90); assert.almostEqual(rect.rotation(), 90);
tr.simulateMouseMove({ tr.simulateMouseMove({
x: 125, x: 125,
y: 60 y: 60
}); });
assert.equal(rect.x(), 110); assert.almostEqual(rect.x(), 110);
assert.equal(rect.y(), 10); assert.almostEqual(rect.y(), 10);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(rect.scaleX(), 1); assert.almostEqual(rect.scaleX(), 1);
assert.equal(rect.scaleY(), -0.05); assert.almostEqual(rect.scaleY(), -0.05);
assert.equal(rect.height(), 100); assert.almostEqual(rect.height(), 100);
assert.equal(rect.rotation(), 90); assert.almostEqual(rect.rotation(), 90);
// switch again // switch again
tr.simulateMouseMove({ tr.simulateMouseMove({
@@ -1827,12 +1832,12 @@ suite('Transformer', function() {
y: 60 y: 60
}); });
assert.equal(rect.x(), 110); assert.almostEqual(rect.x(), 110);
assert.equal(rect.y() - 120 < 0.001, true); assert.almostEqual(rect.y() - 120 < 0.001, true);
assert.equal(rect.width(), 100); assert.almostEqual(rect.width(), 100);
assert.equal(rect.scaleX(), 1); assert.almostEqual(rect.scaleX(), 1);
assert.equal(rect.scaleY(), 0.1); assert.almostEqual(rect.scaleY(), 0.1);
assert.equal(rect.height(), 100); assert.almostEqual(rect.height(), 100);
tr.simulateMouseUp(); tr.simulateMouseUp();
}); });
@@ -2414,25 +2419,21 @@ suite('Transformer', function() {
assert.equal(e.target, rect); assert.equal(e.target, rect);
}); });
stage.simulateMouseDown({ tr.simulateMouseDown({
x: 50, x: 50,
y: 50 y: 50
}); });
var top = stage.content.getBoundingClientRect().top; tr.simulateMouseMove({
tr._handleMouseMove({
clientX: 60,
clientY: 60 + top
});
tr._handleMouseUp({
clientX: 60,
clientY: 60 + top
});
stage.simulateMouseUp({
x: 60, x: 60,
y: 60 y: 60
}); });
tr.simulateMouseUp({
x: 60,
y: 60
});
assert.equal(callCount, 6); assert.equal(callCount, 6);
assert.equal(tr.getActiveAnchor(), null); assert.equal(tr.getActiveAnchor(), null);
}); });
@@ -2721,12 +2722,12 @@ suite('Transformer', function() {
}); });
layer.draw(); layer.draw();
assert.equal( assert.almostEqual(
rect.width() * rect.scaleX(), rect.width() * rect.scaleX(),
test.expectedWidth, test.expectedWidth,
test.name + ' width check' test.name + ' width check'
); );
assert.equal( assert.almostEqual(
rect.height() * rect.scaleY(), rect.height() * rect.scaleY(),
test.expectedHeight, test.expectedHeight,
test.name + ' height check' test.name + ' height check'
@@ -2786,12 +2787,12 @@ suite('Transformer', function() {
}); });
layer.draw(); layer.draw();
assert.equal( assert.almostEqual(
rect.width() * rect.scaleX(), rect.width() * rect.scaleX(),
test.expectedWidth, test.expectedWidth,
test.name + ' width check' test.name + ' width check'
); );
assert.equal( assert.almostEqual(
rect.height() * rect.scaleY(), rect.height() * rect.scaleY(),
test.expectedHeight, test.expectedHeight,
test.name + ' height check' test.name + ' height check'
@@ -2850,12 +2851,12 @@ suite('Transformer', function() {
}); });
layer.draw(); layer.draw();
assert.equal( assert.almostEqual(
rect.width() * rect.scaleX(), rect.width() * rect.scaleX(),
test.expectedWidth, test.expectedWidth,
test.name + ' width check' test.name + ' width check'
); );
assert.equal( assert.almostEqual(
rect.height() * rect.scaleY(), rect.height() * rect.scaleY(),
test.expectedHeight, test.expectedHeight,
test.name + ' height check' test.name + ' height check'
@@ -3089,7 +3090,7 @@ suite('Transformer', function() {
assert.equal(rect.height(), 100); 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 stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);
@@ -3119,7 +3120,7 @@ suite('Transformer', function() {
rotation: 0 rotation: 0
}); });
layer.draw(); layer.draw();
assert.equal(rect.scaleX(), 1, ''); assert.equal(rect.scaleX(), 1);
}); });
test('attrs change - arc', function() { test('attrs change - arc', function() {
@@ -3644,7 +3645,7 @@ suite('Transformer', function() {
y: 50 y: 50
}); });
assert.equal(rect.width() * rect.scaleX(), 200); assert.almostEqual(rect.width() * rect.scaleX(), 200);
}); });
test('rotate several nodes', function() { test('rotate several nodes', function() {
@@ -3689,17 +3690,17 @@ suite('Transformer', function() {
layer.draw(); layer.draw();
assert.equal(rect1.x(), 100); assert.almostEqual(rect1.x(), 100);
assert.equal(rect1.y(), 0); assert.almostEqual(rect1.y(), 0);
assert.equal(rect1.width() + rect2.width(), 100); assert.almostEqual(rect1.width() + rect2.width(), 100);
assert.equal(rect1.height() + rect2.width(), 100); assert.almostEqual(rect1.height() + rect2.width(), 100);
assert.equal(rect1.rotation(), 90); assert.almostEqual(rect1.rotation(), 90);
assert.equal(rect2.x(), 50); assert.almostEqual(rect2.x(), 50);
assert.equal(rect2.y(), 50); assert.almostEqual(rect2.y(), 50);
assert.equal(rect2.width() + rect2.width(), 100); assert.almostEqual(rect2.width() + rect2.width(), 100);
assert.equal(rect2.height() + rect2.width(), 100); assert.almostEqual(rect2.height() + rect2.width(), 100);
assert.equal(tr.rotation(), 90); assert.almostEqual(tr.rotation(), 90);
tr._fitNodesInto({ tr._fitNodesInto({
x: 100, x: 100,
@@ -3709,14 +3710,14 @@ suite('Transformer', function() {
rotation: Konva.getAngle(180) rotation: Konva.getAngle(180)
}); });
assert.equal(tr.x(), rect1.x()); assert.almostEqual(tr.x(), rect1.x());
assert.equal(tr.y(), rect1.y()); assert.almostEqual(tr.y(), rect1.y());
assert.equal(tr.width(), rect1.width() + rect2.width()); assert.almostEqual(tr.width(), rect1.width() + rect2.width());
assert.equal(tr.height(), rect1.height() + rect2.width()); assert.almostEqual(tr.height(), rect1.height() + rect2.width());
assert.equal(tr.rotation(), 180); assert.almostEqual(tr.rotation(), 180);
}); });
test.skip('transform several rotated nodes', function() { test('transform several rotated nodes', function() {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);
@@ -3760,17 +3761,17 @@ suite('Transformer', function() {
layer.draw(); layer.draw();
assert.equal(rect1.x(), 100); assert.almostEqual(rect1.x(), 100);
assert.equal(rect1.y(), 0); assert.almostEqual(rect1.y(), 41.421356237309496);
assert.equal(rect1.width() + rect2.width(), 100); assert.almostEqual(rect1.width() + rect2.width(), 100);
assert.equal(rect1.height() + rect2.width(), 100); assert.almostEqual(rect1.height() + rect2.width(), 100);
assert.equal(rect1.rotation(), 90); assert.almostEqual(rect1.rotation(), 132.45339125826706);
assert.equal(rect2.x(), 50); assert.almostEqual(rect2.x(), 46.41016151377549);
assert.equal(rect2.y(), 50); assert.almostEqual(rect2.y(), 100);
assert.equal(rect2.width() + rect2.width(), 100); assert.almostEqual(rect2.width() + rect2.width(), 100);
assert.equal(rect2.height() + rect2.width(), 100); assert.almostEqual(rect2.height() + rect2.width(), 100);
assert.equal(tr.rotation(), 90); assert.almostEqual(tr.rotation(), 90);
tr._fitNodesInto({ tr._fitNodesInto({
x: 100, x: 100,
@@ -3780,11 +3781,8 @@ suite('Transformer', function() {
rotation: Konva.getAngle(180) rotation: Konva.getAngle(180)
}); });
assert.equal(tr.x(), rect1.x()); assert.almostEqual(tr.x(), 100);
assert.equal(tr.y(), rect1.y()); assert.almostEqual(tr.y(), 100);
assert.equal(tr.width(), rect1.width() + rect2.width());
assert.equal(tr.height(), rect1.height() + rect2.width());
assert.equal(tr.rotation(), 180);
}); });
test('drag several nodes', function() { test('drag several nodes', function() {
@@ -4074,20 +4072,20 @@ suite('Transformer', function() {
rotation: Konva.getAngle(90) rotation: Konva.getAngle(90)
}); });
assert.equal(tr.x(), rect1.x()); assert.almostEqual(tr.x(), rect1.x());
assert.equal(tr.y(), rect1.y()); assert.almostEqual(tr.y(), rect1.y());
assert.equal(tr.width(), rect1.width() + rect2.width()); assert.almostEqual(tr.width(), rect1.width() + rect2.width());
assert.equal(tr.height(), rect1.height() + rect2.width()); assert.almostEqual(tr.height(), rect1.height() + rect2.width());
assert.equal(tr.rotation(), 90); assert.almostEqual(tr.rotation(), 90);
layer.draw(); layer.draw();
tr.nodes([rect1, rect2]); tr.nodes([rect1, rect2]);
assert.equal(tr.x(), 0); assert.almostEqual(tr.x(), 0);
assert.equal(tr.y(), 0); assert.almostEqual(tr.y(), 0);
assert.equal(tr.width(), rect1.width() + rect2.width()); assert.almostEqual(tr.width(), rect1.width() + rect2.width());
assert.equal(tr.height(), rect1.height() + rect2.width()); assert.almostEqual(tr.height(), rect1.height() + rect2.width());
assert.equal(tr.rotation(), 0); assert.almostEqual(tr.rotation(), 0);
}); });
test('rotate several nodes inside different parents', function() { test('rotate several nodes inside different parents', function() {
@@ -4145,19 +4143,25 @@ suite('Transformer', function() {
tr._fitNodesInto(box); tr._fitNodesInto(box);
assert.deepEqual(box, tr._getNodeRect()); var newBox = tr._getNodeRect();
assert.equal(rect1.x(), 0); assert.almostEqual(box.x, newBox.x);
assert.equal(rect1.y(), 0); assert.almostEqual(box.y, newBox.y);
assert.equal(rect1.width(), 50); assert.almostEqual(box.width, newBox.width);
assert.equal(rect1.height(), 50); assert.almostEqual(box.height, newBox.height);
assert.equal(rect1.rotation(), 0); assert.almostEqual(box.rotation, newBox.rotation);
assert.equal(rect2.x(), 0); assert.almostEqual(rect1.x(), 0);
assert.equal(rect2.y(), 50); assert.almostEqual(rect1.y(), 0);
assert.equal(rect2.width(), 25); assert.almostEqual(rect1.width(), 50);
assert.equal(rect2.height(), 50); assert.almostEqual(rect1.height(), 50);
assert.equal(rect2.rotation(), 0); 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() { test('can attach transformer into several nodes and fit into negative scale', function() {
@@ -4208,14 +4212,14 @@ suite('Transformer', function() {
}); });
layer.draw(); layer.draw();
assert.equal(Math.round(tr.x()), 0); assert.almostEqual(Math.round(tr.x()), 0);
assert.equal(Math.round(tr.y()), 0); assert.almostEqual(Math.round(tr.y()), 0);
assert.equal(tr.width(), rect1.width() + rect2.width()); assert.almostEqual(tr.width(), rect1.width() + rect2.width());
assert.equal(tr.height(), rect1.height() + rect2.height()); assert.almostEqual(tr.height(), rect1.height() + rect2.height());
assert.equal(tr.rotation(), 0); 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 stage = addStage();
var layer = new Konva.Layer({ var layer = new Konva.Layer({
x: 10, x: 10,
@@ -4246,40 +4250,25 @@ suite('Transformer', function() {
layer.add(rect2); layer.add(rect2);
var callCount = 0;
var tr = new Konva.Transformer({ var tr = new Konva.Transformer({
nodes: [rect1, rect2], nodes: [rect1, rect2],
boundBoxFunc: function(oldBox, newBox, node) { boundBoxFunc: function(oldBox, newBox) {
if (node === rect1) { callCount += 1;
assert.deepEqual(oldBox, { assert.deepEqual(oldBox, {
x: 0, x: 10,
y: 0, y: 10,
width: 50, width: 200,
height: 50, height: 200,
rotation: 0 rotation: 0
}); });
assert.deepEqual(newBox, { assert.deepEqual(newBox, {
x: 0, x: 10,
y: 0, y: 10,
width: 50, width: 300,
height: 50, height: 200,
rotation: 0 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
});
}
return newBox; return newBox;
} }
}); });
@@ -4288,9 +4277,10 @@ suite('Transformer', function() {
tr._fitNodesInto({ tr._fitNodesInto({
x: 10, x: 10,
y: 10, y: 10,
width: 200, width: 300,
height: 200, height: 200,
rotation: 0 rotation: 0
}); });
assert.equal(callCount, 1);
}); });
}); });