change events order for transformer. fix #1724

This commit is contained in:
Anton Lavrenov 2024-03-03 11:45:55 +07:00
parent fe8b7e0fc3
commit b09ceb34f3
2 changed files with 79 additions and 2 deletions

View File

@ -1109,11 +1109,14 @@ export class Transformer extends Group {
const attrs = newLocalTransform.decompose();
node.setAttrs(attrs);
this._fire('transform', { evt: evt, target: node });
node._fire('transform', { evt: evt, target: node });
node.getLayer()?.batchDraw();
});
this.rotation(Util._getRotation(newAttrs.rotation));
// trigger transform event AFTER we update rotation
this._nodes.forEach((node) => {
this._fire('transform', { evt: evt, target: node });
node._fire('transform', { evt: evt, target: node });
});
this._resetTransformCache();
this.update();
this.getLayer()!.batchDraw();

View File

@ -4929,4 +4929,78 @@ describe('Transformer', function () {
assertAlmostEqual(rect.scaleX(), 1);
assertAlmostEqual(rect.scaleY(), 1);
});
it('should be able to prevent rotation in transform event', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 55,
y: 55,
draggable: true,
width: 100,
height: 100,
fill: 'yellow',
});
layer.add(rect);
var tr = new Konva.Transformer({
nodes: [rect],
});
layer.add(tr);
layer.draw();
tr.on('transform', function (e) {
tr.rotation(0);
});
simulateMouseDown(tr, {
x: 100,
y: 2,
});
simulateMouseMove(tr, {
x: 110,
y: 2,
});
assert.equal(tr.rotation(), 0);
simulateMouseUp(tr, { x: 110, y: 2 });
});
// it('skip render on hit graph while transforming', function () {
// var stage = addStage();
// var layer = new Konva.Layer();
// stage.add(layer);
// var rect = new Konva.Rect({
// x: 55,
// y: 55,
// draggable: true,
// width: 100,
// height: 100,
// fill: 'yellow',
// });
// layer.add(rect);
// var tr = new Konva.Transformer({
// nodes: [rect],
// });
// layer.add(tr);
// layer.draw();
// simulateMouseDown(tr, {
// x: 100,
// y: 2,
// });
// simulateMouseMove(tr, {
// x: 110,
// y: 2,
// });
// const shape = layer.getIntersection({
// x: 100,
// y: 100,
// });
// assert.equal(shape, null);
// simulateMouseUp(tr, { x: 110, y: 2 });
// });
});