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

fix transformer bad behavior when back is dragged. close #1141

Browse Source
This commit is contained in:
Anton Lavrenov 2021-07-01 12:39:22 +07:00
parent c4937c46ba
commit 0679643389
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/shapes/Transformer.ts
View File

@ -328,7 +328,7 @@ export class Transformer extends Group {
node.on(`dragstart.${EVENTS_NAME}`, (e) => { node.on(`dragstart.${EVENTS_NAME}`, (e) => {
lastPos = node.getAbsolutePosition(); lastPos = node.getAbsolutePosition();
// actual dragging of Transformer doesn't make sense // actual dragging of Transformer doesn't make sense
// but we need to proxy drag events // but we need to make sure it also has all drag events
if (!this.isDragging() && node !== this.findOne('.back')) { if (!this.isDragging() && node !== this.findOne('.back')) {
this.startDrag(e, false); this.startDrag(e, false);
} }
@ -614,6 +614,10 @@ export class Transformer extends Group {
back.on('dragend', (e) => { back.on('dragend', (e) => {
e.cancelBubble = true; e.cancelBubble = true;
}); });
// force self update when we drag with shouldOverDrawWholeArea setting
this.on('dragmove', (e) => {
this.update();
});
} }
_handleMouseDown(e) { _handleMouseDown(e) {
this._movingAnchorName = e.target.name().split(' ')[0]; this._movingAnchorName = e.target.name().split(' ')[0];

16
test/unit/Transformer-test.ts
View File

@ -36,7 +36,7 @@ function simulateMouseUp(tr: Transformer, pos = { x: 0, y: 0 }) {
su(tr.getStage(), pos || { x: 1, y: 1 }); su(tr.getStage(), pos || { x: 1, y: 1 });
} }
describe('Transformer', function () { describe.only('Transformer', function () {
// ====================================================== // ======================================================
it('init transformer on simple rectangle', function () { it('init transformer on simple rectangle', function () {
var stage = addStage(); var stage = addStage();
@ -4025,6 +4025,7 @@ describe('Transformer', function () {
// make sure drag also triggers on the transformer. // make sure drag also triggers on the transformer.
tr.on('dragstart', (e) => { tr.on('dragstart', (e) => {
assert.equal(!!e.evt, true); assert.equal(!!e.evt, true);
console.log('transfomer');
dragstart += 1; dragstart += 1;
}); });
tr.on('dragmove', () => { tr.on('dragmove', () => {
@ -4039,6 +4040,7 @@ describe('Transformer', function () {
stage.on('dragstart', (e) => { stage.on('dragstart', (e) => {
assert.equal(!!e.evt, true); assert.equal(!!e.evt, true);
dragstart += 1; dragstart += 1;
console.log('stage', e.target);
}); });
layer.add(tr); layer.add(tr);
@ -4066,9 +4068,9 @@ describe('Transformer', function () {
// proxy drag to other nodes // proxy drag to other nodes
assert.equal(rect2.x(), 110); assert.equal(rect2.x(), 110);
assert.equal(rect2.y(), 110); assert.equal(rect2.y(), 110);
assert.equal(dragstart, 4); assert.equal(dragstart, 4, 'dragstart');
assert.equal(dragmove, 3); assert.equal(dragmove, 3, 'dragmove');
assert.equal(dragend, 2); assert.equal(dragend, 2, 'dragend');
}); });
it('reattach from several and drag one', function () { it('reattach from several and drag one', function () {
@ -4262,9 +4264,9 @@ describe('Transformer', function () {
assert.equal(rect1.y(), 50); assert.equal(rect1.y(), 50);
assert.equal(rect2.x(), 110); assert.equal(rect2.x(), 110);
assert.equal(rect2.y(), 100); assert.equal(rect2.y(), 100);
assert.equal(dragstart, 3); assert.equal(dragstart, 3, 'dragstart');
assert.equal(dragmove, 3); assert.equal(dragmove, 3, 'dragmove');
assert.equal(dragend, 3); assert.equal(dragend, 3, 'dragend');
}); });
it('reattach to several nodes', function () { it('reattach to several nodes', function () {