dragmove will trigger on Transformer and when all nodes are moved. fix #928

src/DragAndDrop.ts

@@ -6,7 +6,7 @@ import { Util } from './Util';
 export const DD = {
   get isDragging() {
     var flag = false;
-    DD._dragElements.forEach(elem => {
+    DD._dragElements.forEach((elem) => {
       if (elem.dragStatus === 'dragging') {
         flag = true;
       }
@@ -17,7 +17,7 @@ export const DD = {
   get node() {
     // return first dragging node
     var node: Node | undefined;
-    DD._dragElements.forEach(elem => {
+    DD._dragElements.forEach((elem) => {
       node = elem.node;
     });
     return node;
@@ -40,6 +40,7 @@ export const DD = {
 
   // methods
   _drag(evt) {
+    const nodesToFireEvents: Array<Node> = [];
     DD._dragElements.forEach((elem, key) => {
       const { node } = elem;
       // we need to find pointer relative to that node
@@ -52,7 +53,7 @@ export const DD = {
         elem.pointerId = Util._getFirstPointerId(evt);
       }
       const pos = stage._changedPointerPositions.find(
-        pos => pos.id === elem.pointerId
+        (pos) => pos.id === elem.pointerId
       );
 
       // not related pointer
@@ -75,14 +76,16 @@ export const DD = {
         }
       }
       node._setDragPosition(evt, elem);
-
-      // execute ondragmove if defined
+      nodesToFireEvents.push(node);
+    });
+    // call dragmove only after ALL positions are changed
+    nodesToFireEvents.forEach((node) => {
       node.fire(
         'dragmove',
         {
           type: 'dragmove',
           target: node,
-          evt: evt
+          evt: evt,
         },
         true
       );
@@ -101,7 +104,7 @@ export const DD = {
       }
 
       const pos = stage._changedPointerPositions.find(
-        pos => pos.id === elem.pointerId
+        (pos) => pos.id === elem.pointerId
       );
 
       // that pointer is not related
@@ -132,7 +135,7 @@ export const DD = {
           {
             type: 'dragend',
             target: elem.node,
-            evt: evt
+            evt: evt,
           },
           true
         );
@@ -141,7 +144,7 @@ export const DD = {
         DD._dragElements.delete(key);
       }
     });
-  }
+  },
 };
 
 if (Konva.isBrowser) {

src/Node.ts

@@ -3002,8 +3002,8 @@ addGetterSetter(Node, 'listening', true, getBooleanValidator());
  * in that case you can set the property to false
  * @name Konva.Node#preventDefault
  * @method
- * @param {Number} preventDefault
- * @returns {Number}
+ * @param {Boolean} preventDefault
+ * @returns {Boolean}
  * @example
  * // get preventDefault
  * var shouldPrevent = shape.preventDefault();

src/shapes/Transformer.ts

@@ -316,7 +316,11 @@ export class Transformer extends Group {
     let lastPos;
     node.on(`dragstart.${EVENTS_NAME}`, (e) => {
       lastPos = node.getAbsolutePosition();
-      // this.fire('dragstart', e);
+      // actual dragging of Transformer doesn't make sense
+      // but we need to proxy drag events
+      if (!this.isDragging() && node !== this.findOne('.back')) {
+        this.startDrag();
+      }
     });
     node.on(`dragmove.${EVENTS_NAME}`, (e) => {
       if (!lastPos) {
@@ -339,9 +343,6 @@ export class Transformer extends Group {
         });
         otherNode.startDrag();
       });
-      // node.on(`dragend.${EVENTS_NAME}`, (e) => {
-      //   this.fire('dragend', e);
-      // });
       lastPos = null;
     });
   }