perf fixes, transformer events

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v6.0.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Wed Jun 10 2020
+   * Date: Tue Jun 16 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3277,24 +3277,27 @@
        * });
        */
       Node.prototype.setAttrs = function (config) {
-          var key, method;
-          if (!config) {
-              return this;
-          }
-          for (key in config) {
-              if (key === CHILDREN) {
-                  continue;
+          var _this = this;
+          this._batchTransformChanges(function () {
+              var key, method;
+              if (!config) {
+                  return _this;
               }
-              method = SET$1 + Util._capitalize(key);
-              // use setter if available
-              if (Util._isFunction(this[method])) {
-                  this[method](config[key]);
+              for (key in config) {
+                  if (key === CHILDREN) {
+                      continue;
+                  }
+                  method = SET$1 + Util._capitalize(key);
+                  // use setter if available
+                  if (Util._isFunction(_this[method])) {
+                      _this[method](config[key]);
+                  }
+                  else {
+                      // otherwise set directly
+                      _this._setAttr(key, config[key]);
+                  }
               }
-              else {
-                  // otherwise set directly
-                  this._setAttr(key, config[key]);
-              }
-          }
+          });
           return this;
       };
       /**
@@ -14801,10 +14804,11 @@
       Transformer.prototype._proxyDrag = function (node) {
           var _this = this;
           var lastPos;
-          node.on("dragstart." + EVENTS_NAME, function () {
+          node.on("dragstart." + EVENTS_NAME, function (e) {
               lastPos = node.getAbsolutePosition();
+              _this.fire('dragstart', e);
           });
-          node.on("dragmove." + EVENTS_NAME, function () {
+          node.on("dragmove." + EVENTS_NAME, function (e) {
               if (!lastPos) {
                   return;
               }
@@ -14824,6 +14828,11 @@
                       y: otherAbs.y + dy,
                   });
                   otherNode.startDrag();
+                  // TODO: how to trigger event after all nodes are dragged?
+                  _this.fire('dragmove', e);
+              });
+              node.on("dragend." + EVENTS_NAME, function (e) {
+                  _this.fire('dragend', e);
               });
               lastPos = null;
           });

src/Node.ts

@@ -961,24 +961,26 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * });
    */
   setAttrs(config: any) {
-    var key, method;
+    this._batchTransformChanges(() => {
+      var key, method;
+      if (!config) {
+        return this;
+      }
+      for (key in config) {
+        if (key === CHILDREN) {
+          continue;
+        }
+        method = SET + Util._capitalize(key);
+        // use setter if available
+        if (Util._isFunction(this[method])) {
+          this[method](config[key]);
+        } else {
+          // otherwise set directly
+          this._setAttr(key, config[key]);
+        }
+      }
+    });
 
-    if (!config) {
-      return this;
-    }
-    for (key in config) {
-      if (key === CHILDREN) {
-        continue;
-      }
-      method = SET + Util._capitalize(key);
-      // use setter if available
-      if (Util._isFunction(this[method])) {
-        this[method](config[key]);
-      } else {
-        // otherwise set directly
-        this._setAttr(key, config[key]);
-      }
-    }
     return this;
   }
   /**

src/shapes/Transformer.ts

@@ -314,10 +314,11 @@ export class Transformer extends Group {
 
   _proxyDrag(node: Node) {
     let lastPos;
-    node.on(`dragstart.${EVENTS_NAME}`, () => {
+    node.on(`dragstart.${EVENTS_NAME}`, (e) => {
       lastPos = node.getAbsolutePosition();
+      this.fire('dragstart', e);
     });
-    node.on(`dragmove.${EVENTS_NAME}`, () => {
+    node.on(`dragmove.${EVENTS_NAME}`, (e) => {
       if (!lastPos) {
         return;
       }
@@ -337,6 +338,11 @@ export class Transformer extends Group {
           y: otherAbs.y + dy,
         });
         otherNode.startDrag();
+        // TODO: how to trigger event after all nodes are dragged?
+        this.fire('dragmove', e);
+      });
+      node.on(`dragend.${EVENTS_NAME}`, (e) => {
+        this.fire('dragend', e);
       });
       lastPos = null;
     });

test/performance/bunnies.html

@@ -10,7 +10,7 @@
   </head>
   <body>
     <div id="container"></div>
-    <script src="../../konva.min.js"></script>
+    <script src="../../konva.js"></script>
     <!-- <script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script> -->
     <script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
     <script defer="defer">

test/unit/shapes/Transformer-test.js

@@ -3829,6 +3829,18 @@ suite('Transformer', function () {
     var tr = new Konva.Transformer({
       nodes: [rect1, rect2],
     });
+
+    // make sure drag also triggers on the transformer.
+    tr.on('dragstart', () => {
+      dragstart += 1;
+    });
+    tr.on('dragmove', () => {
+      dragmove += 1;
+    });
+    tr.on('dragend', () => {
+      dragend += 1;
+    });
+
     layer.add(tr);
     layer.draw();
 
@@ -3849,9 +3861,9 @@ suite('Transformer', function () {
     // proxy drag to other nodes
     assert.equal(rect2.x(), 105);
     assert.equal(rect2.y(), 105);
-    assert.equal(dragstart, 1);
-    assert.equal(dragmove, 1);
-    assert.equal(dragend, 1);
+    assert.equal(dragstart, 2);
+    assert.equal(dragmove, 2);
+    assert.equal(dragend, 2);
   });
 
   test('reattach from several and drag one', function () {