lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 13:38:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix some bugs when Konva.Transformer has padding > 0

Browse Source
This commit is contained in:
Anton Lavrenov 2019-09-17 12:50:28 -05:00
parent 250f0b950d
commit 1f14bf1fef
4 changed files with 152 additions and 1398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
## 4.0.11 - 2019-09-17
* Fix some bugs when `Konva.Transformer` has `padding > 0`
## 4.0.10 - 2019-09-10
* Fix drag position handling

1431
konva.js
View File

File diff suppressed because it is too large Load Diff

92
src/shapes/Transformer.ts
View File

@ -395,7 +395,7 @@ export class Transformer extends Group {
if (tr.rotateEnabled()) {
ctx.lineTo(
this.width() / 2,
-tr.rotateAnchorOffset() * Util._sign(this.height())
-tr.rotateAnchorOffset() * Util._sign(this.height()) - padding
);
}
@ -411,6 +411,7 @@ export class Transformer extends Group {
var attrs = this._getNodeRect();
var width = attrs.width;
var height = attrs.height;
var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
this.sin = Math.abs(height / hypotenuse);
this.cos = Math.abs(width / hypotenuse);
@ -448,13 +449,21 @@ export class Transformer extends Group {
var keepProportion = this.keepRatio() || e.shiftKey;
var padding = this.padding();
// console.log(keepProportion);
if (this._movingAnchorName === 'top-left') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x() - anchorNode.x(), 2) +
Math.pow(this.findOne('.bottom-right').y() - anchorNode.y(), 2)
Math.pow(
this.findOne('.bottom-right').x() - anchorNode.x() - padding * 2,
2
) +
Math.pow(
this.findOne('.bottom-right').y() - anchorNode.y() - padding * 2,
2
)
);
var reverseX =
@ -470,16 +479,26 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
this.findOne('.top-left').x(
this.findOne('.bottom-right').x() - x - padding * 2
);
this.findOne('.top-left').y(
this.findOne('.bottom-right').y() - y - padding * 2
);
}
} else if (this._movingAnchorName === 'top-center') {
this.findOne('.top-left').y(anchorNode.y());
} else if (this._movingAnchorName === 'top-right') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-left').x() - anchorNode.x(), 2) +
Math.pow(this.findOne('.bottom-left').y() - anchorNode.y(), 2)
Math.pow(
anchorNode.x() - this.findOne('.bottom-left').x() - padding * 2,
2
) +
Math.pow(
this.findOne('.bottom-left').y() - anchorNode.y() - padding * 2,
2
)
);
var reverseX =
@ -495,8 +514,10 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
this.findOne('.top-right').x(x);
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
this.findOne('.top-right').x(x + padding);
this.findOne('.top-right').y(
this.findOne('.bottom-left').y() - y - padding * 2
);
}
var pos = anchorNode.position();
@ -509,10 +530,18 @@ export class Transformer extends Group {
} else if (this._movingAnchorName === 'bottom-left') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.top-right').x() - anchorNode.x(), 2) +
Math.pow(this.findOne('.top-right').y() - anchorNode.y(), 2)
Math.pow(
this.findOne('.top-right').x() - anchorNode.x() - padding * 2,
2
) +
Math.pow(
anchorNode.y() - this.findOne('.top-right').y() - padding * 2,
2
)
);
console.error(newHypotenuse);
var reverseX =
this.findOne('.top-right').x() < this.findOne('.bottom-left').x()
? -1
@ -526,8 +555,10 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
this.findOne('.bottom-left').y(y);
this.findOne('.bottom-left').x(
this.findOne('.top-right').x() - x - padding * 2
);
this.findOne('.bottom-left').y(y + padding);
}
pos = anchorNode.position();
@ -539,8 +570,8 @@ export class Transformer extends Group {
} else if (this._movingAnchorName === 'bottom-right') {
if (keepProportion) {
newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x(), 2) +
Math.pow(this.findOne('.bottom-right').y(), 2)
Math.pow(this.findOne('.bottom-right').x() - padding, 2) +
Math.pow(this.findOne('.bottom-right').y() - padding, 2)
);
var reverseX =
@ -556,11 +587,10 @@ export class Transformer extends Group {
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
this.findOne('.bottom-right').x(x);
this.findOne('.bottom-right').y(y);
this.findOne('.bottom-right').x(x + padding);
this.findOne('.bottom-right').y(y + padding);
}
} else if (this._movingAnchorName === 'rotater') {
var padding = this.padding();
var attrs = this._getNodeRect();
x = anchorNode.x() - attrs.width / 2;
y = -anchorNode.y() + attrs.height / 2;
@ -629,21 +659,15 @@ export class Transformer extends Group {
return;
}
var absPos = this.findOne('.top-left').getAbsolutePosition(
this.getParent()
);
var centeredScaling = this.centeredScaling() || e.altKey;
if (centeredScaling) {
var topLeft = this.findOne('.top-left');
var bottomRight = this.findOne('.bottom-right');
var topOffsetX = topLeft.x();
var topOffsetY = topLeft.y();
var topOffsetX = topLeft.x() + padding;
var topOffsetY = topLeft.y() + padding;
var bottomOffsetX = this.getWidth() - bottomRight.x();
var bottomOffsetY = this.getHeight() - bottomRight.y();
// console.log(topOffsetX, topOffsetY, bottomOffsetX, bottomOffsetY);
var bottomOffsetX = this.getWidth() - bottomRight.x() + padding;
var bottomOffsetY = this.getHeight() - bottomRight.y() + padding;
bottomRight.move({
x: -topOffsetX,
@ -654,10 +678,12 @@ export class Transformer extends Group {
x: bottomOffsetX,
y: bottomOffsetY
});
absPos = topLeft.getAbsolutePosition(this.getParent());
}
var absPos = this.findOne('.top-left').getAbsolutePosition(
this.getParent()
);
x = absPos.x;
y = absPos.y;
var width =
@ -666,8 +692,6 @@ export class Transformer extends Group {
var height =
this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
// console.log(x, y, width, height);
this._fitNodeInto(
{
x: x + this.offsetX(),
@ -696,7 +720,7 @@ export class Transformer extends Group {
}
}
_fitNodeInto(newAttrs, evt) {
// waring! in this attrs padding may be included
// waring! in this attrs padding is included
var boundBoxFunc = this.boundBoxFunc();
if (boundBoxFunc) {
var oldAttrs = this._getNodeRect();
@ -827,7 +851,7 @@ export class Transformer extends Group {
-this.rotateAnchorOffset() * Math.abs(invertedScale.y);
this.findOne('.rotater').setAttrs({
x: width / 2,
y: scaledRotateAnchorOffset * Util._sign(height),
y: scaledRotateAnchorOffset * Util._sign(height) - padding,
scale: invertedScale,
visible: this.rotateEnabled()
});

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

@ -884,7 +884,7 @@ suite('Transformer', function() {
assert.equal(rect.height(), 100);
});
test.skip('test padding + keep ratio', function() {
test.only('test padding + keep ratio', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
@ -892,22 +892,33 @@ suite('Transformer', function() {
const rect = new Konva.Rect({
x: 50,
y: 50,
width: 200,
height: 10,
fill: 'red'
width: 180,
height: 50,
fill: 'red',
draggable: true
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect,
padding: 50,
padding: 40,
keepRatio: true
});
layer.add(tr);
layer.draw();
var width = rect.width() * rect.scaleX();
var height = rect.height() * rect.scaleY();
rect.on('transformstart transform', () => {
var width = rect.width() * rect.scaleX();
var height = rect.height() * rect.scaleY();
});
throw '';
stage.simulateMouseDown({
x: 200,
x: 250,
y: 150
});
var top = stage.content.getBoundingClientRect().top;