Fix double dragend trigger on Konva.Transformer. close #988

CHANGELOG.md

@@ -3,6 +3,8 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+* Fix double `dragend` trigger on `Konva.Transformer`
+
 ## 7.1.3
 
 * Text rendering fixes

konva-node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva-node",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "Konva framework for NodeJS env",
   "main": "index.js",
   "files": [
@@ -26,6 +26,6 @@
   "license": "MIT",
   "dependencies": {
     "canvas": "^2.5.0",
-    "konva": "^3.3.3"
+    "konva": "^7"
   }
 }

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.1.3
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu Sep 17 2020
+   * Date: Fri Sep 25 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -15230,6 +15230,12 @@
           });
           this.add(back);
           this._proxyDrag(back);
+          // do not bubble drag from the back shape
+          // because we already "drag" whole transformer
+          // so we don't want to trigger drag twice on transformer
+          back.on('dragend', function (e) {
+              e.cancelBubble = true;
+          });
       };
       Transformer.prototype._handleMouseDown = function (e) {
           this._movingAnchorName = e.target.name().split(' ')[0];

src/shapes/Transformer.ts

@@ -595,6 +595,12 @@ export class Transformer extends Group {
     });
     this.add(back);
     this._proxyDrag(back);
+    // do not bubble drag from the back shape
+    // because we already "drag" whole transformer
+    // so we don't want to trigger drag twice on transformer
+    back.on('dragend', (e) => {
+      e.cancelBubble = true;
+    });
   }
   _handleMouseDown(e) {
     this._movingAnchorName = e.target.name().split(' ')[0];

test/unit/shapes/Transformer-test.js

@@ -4101,6 +4101,10 @@ suite('Transformer', function () {
       nodes: [rect1, rect2],
       shouldOverdrawWholeArea: true,
     });
+
+    tr.on('dragend', () => {
+      dragend += 1;
+    });
     layer.add(tr);
     layer.draw();
 
@@ -4132,7 +4136,7 @@ suite('Transformer', function () {
     assert.equal(rect2.y(), 100);
     assert.equal(dragstart, 2);
     assert.equal(dragmove, 2);
-    assert.equal(dragend, 2);
+    assert.equal(dragend, 3);
   });
 
   test('reattach to several nodes', function () {