lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-22 21:02:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix double dragend, dragstart, dragmove triggers on Konva.Transformer

Browse Source
This commit is contained in:
Anton Lavrenov
2020-10-12 09:11:11 -05:00
parent 451b34d25d
commit f4d566e431
4 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/). This project adheres to [Semantic Versioning](http://semver.org/).
* Change events trigger flow, so adding new events INSIDE event callback will work correctly. * Change events trigger flow, so adding new events INSIDE event callback will work correctly.
* Fix double `dragend` trigger on `Konva.Transformer` * Fix double `dragend`, `dragstart`, `dragmove` triggers on `Konva.Transformer`
## 7.1.3 ## 7.1.3

18
konva.js
View File

@@ -7087,16 +7087,16 @@
height: size.height, height: size.height,
}; };
}; };
Shape.prototype.getClientRect = function (attrs) { Shape.prototype.getClientRect = function (config) {
attrs = attrs || {}; if (config === void 0) { config = {}; }
var skipTransform = attrs.skipTransform; var skipTransform = config.skipTransform;
var relativeTo = attrs.relativeTo; var relativeTo = config.relativeTo;
var fillRect = this.getSelfRect(); var fillRect = this.getSelfRect();
var applyStroke = !attrs.skipStroke && this.hasStroke(); var applyStroke = !config.skipStroke && this.hasStroke();
var strokeWidth = (applyStroke && this.strokeWidth()) || 0; var strokeWidth = (applyStroke && this.strokeWidth()) || 0;
var fillAndStrokeWidth = fillRect.width + strokeWidth; var fillAndStrokeWidth = fillRect.width + strokeWidth;
var fillAndStrokeHeight = fillRect.height + strokeWidth; var fillAndStrokeHeight = fillRect.height + strokeWidth;
var applyShadow = !attrs.skipShadow && this.hasShadow(); var applyShadow = !config.skipShadow && this.hasShadow();
var shadowOffsetX = applyShadow ? this.shadowOffsetX() : 0; var shadowOffsetX = applyShadow ? this.shadowOffsetX() : 0;
var shadowOffsetY = applyShadow ? this.shadowOffsetY() : 0; var shadowOffsetY = applyShadow ? this.shadowOffsetY() : 0;
var preWidth = fillAndStrokeWidth + Math.abs(shadowOffsetX); var preWidth = fillAndStrokeWidth + Math.abs(shadowOffsetX);
@@ -14038,6 +14038,12 @@
// do not bubble drag from the back shape // do not bubble drag from the back shape
// because we already "drag" whole transformer // because we already "drag" whole transformer
// so we don't want to trigger drag twice on transformer // so we don't want to trigger drag twice on transformer
back.on('dragstart', function (e) {
e.cancelBubble = true;
});
back.on('dragmove', function (e) {
e.cancelBubble = true;
});
back.on('dragend', function (e) { back.on('dragend', function (e) {
e.cancelBubble = true; e.cancelBubble = true;
}); });

6
src/shapes/Transformer.ts
View File

@@ -598,6 +598,12 @@ export class Transformer extends Group {
// do not bubble drag from the back shape // do not bubble drag from the back shape
// because we already "drag" whole transformer // because we already "drag" whole transformer
// so we don't want to trigger drag twice on transformer // so we don't want to trigger drag twice on transformer
back.on('dragstart', (e) => {
e.cancelBubble = true;
});
back.on('dragmove', (e) => {
e.cancelBubble = true;
});
back.on('dragend', (e) => { back.on('dragend', (e) => {
e.cancelBubble = true; e.cancelBubble = true;
}); });

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

@@ -4048,7 +4048,7 @@ suite('Transformer', function () {
assert.equal(click, 1); assert.equal(click, 1);
}); });
test('drag several nodes by transformer back', function () { test.only('drag several nodes by transformer back', function () {
var stage = addStage(); var stage = addStage();
var layer = new Konva.Layer(); var layer = new Konva.Layer();
stage.add(layer); stage.add(layer);
@@ -4102,6 +4102,12 @@ suite('Transformer', function () {
shouldOverdrawWholeArea: true, shouldOverdrawWholeArea: true,
}); });
tr.on('dragstart', () => {
dragstart += 1;
});
tr.on('dragmove', () => {
dragmove += 1;
});
tr.on('dragend', () => { tr.on('dragend', () => {
dragend += 1; dragend += 1;
}); });
@@ -4134,8 +4140,8 @@ suite('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, 2); assert.equal(dragstart, 3);
assert.equal(dragmove, 2); assert.equal(dragmove, 3);
assert.equal(dragend, 3); assert.equal(dragend, 3);
}); });