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

Fix position jitter when flip enabled false

Browse Source 
Rather than disabling the exiting updates when flipEnabled is false I've updated to translate and set scale to an absolute value on the new transform.

This appears to solve the jitter and work otherwise the same as the existing method.
This commit is contained in:
Mike 2023-10-30 08:40:54 +00:00 committed by GitHub
parent 963119f24e
commit eeca597a0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/shapes/Transformer.ts
View File

@ -973,7 +973,6 @@ export class Transformer extends Group {
return;
}
const allowNegativeScale = this.flipEnabled();
var t = new Transform();
t.rotate(Konva.getAngle(this.rotation()));
if (
@ -991,10 +990,6 @@ export class Transformer extends Group {
this._movingAnchorName = this._movingAnchorName.replace('left', 'right');
this._anchorDragOffset.x -= offset.x;
this._anchorDragOffset.y -= offset.y;
if (!allowNegativeScale) {
this.update();
return;
}
} else if (
this._movingAnchorName &&
newAttrs.width < 0 &&
@ -1008,10 +1003,6 @@ export class Transformer extends Group {
this._anchorDragOffset.x -= offset.x;
this._anchorDragOffset.y -= offset.y;
newAttrs.width += this.padding() * 2;
if (!allowNegativeScale) {
this.update();
return;
}
}
if (
this._movingAnchorName &&
@ -1028,10 +1019,6 @@ export class Transformer extends Group {
this._anchorDragOffset.x -= offset.x;
this._anchorDragOffset.y -= offset.y;
newAttrs.height += this.padding() * 2;
if (!allowNegativeScale) {
this.update();
return;
}
} else if (
this._movingAnchorName &&
newAttrs.height < 0 &&
@ -1045,10 +1032,6 @@ export class Transformer extends Group {
this._anchorDragOffset.x -= offset.x;
this._anchorDragOffset.y -= offset.y;
newAttrs.height += this.padding() * 2;
if (!allowNegativeScale) {
this.update();
return;
}
}
if (this.boundBoxFunc()) {
@ -1073,9 +1056,19 @@ export class Transformer extends Group {
oldTr.scale(oldAttrs.width / baseSize, oldAttrs.height / baseSize);
const newTr = new Transform();
newTr.translate(newAttrs.x, newAttrs.y);
newTr.rotate(newAttrs.rotation);
newTr.scale(newAttrs.width / baseSize, newAttrs.height / baseSize);
const newScaleX = newAttrs.width / baseSize;
const newScaleY = newAttrs.height / baseSize;
if (this.flipEnabled() === false) {
newTr.translate(
newAttrs.x + (newAttrs.width < 0 ? newAttrs.width : 0),
newAttrs.y + (newAttrs.height < 0 ? newAttrs.height : 0)
);
newTr.scale(Math.abs(newScaleX), Math.abs(newScaleY));
} else {
newTr.translate(newAttrs.x, newAttrs.y);
newTr.scale(newScaleX, newScaleY);
}
// now lets think we had [old transform] and n ow we have [new transform]
// Now, the questions is: how can we transform "parent" to go from [old transform] into [new transform]