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

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

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

@@ -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();

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

@@ -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);
});
});