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

CHANGELOG.md

@@ -5,13 +5,15 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
-* `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listening(false);` then whole group and all its children will be removed from the hitgraph (and they will not listen to events);
+* **BREAKING** `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listening(false);` then whole group and all its children will be removed from the hitGraph (and they will not listen to events). Probably 99% `Konva` applications will be not affected by this *breaking change*.
 * `layer.hitGraphEnabled()` is deprecated. Just use `layer.listening(false)` instead
-* Some performance fixes and code size optimizations
+* Many performance fixes and code size optimizations
 * Better support for font families with spaces inside (like `Font Awesome 5`).
-* Fix possible `dblclick` and `dbltap` triggers
+* Fix wrong `dblclick` and `dbltap` triggers
 * Deprecate `Konva.FastLayer`. Use `new Konva.Layer({ listening: false });` instead.
 * Up to 20% performance boost for many moving nodes.
+* `dragmove` event will be fired on `Konva.Transformer` too when you drag a node.
+* `dragmove` triggers only after ALL positions of dragging nodes are changed
 
 
 ## 6.0.0 - 2020-05-08

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v6.0.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Jun 16 2020
+   * Date: Thu Jun 18 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2459,6 +2459,7 @@
       _dragElements: new Map(),
       // methods
       _drag: function (evt) {
+          var nodesToFireEvents = [];
           DD._dragElements.forEach(function (elem, key) {
               var node = elem.node;
               // we need to find pointer relative to that node
@@ -2487,11 +2488,14 @@
                   }
               }
               node._setDragPosition(evt, elem);
-              // execute ondragmove if defined
+              nodesToFireEvents.push(node);
+          });
+          // call dragmove only after ALL positions are changed
+          nodesToFireEvents.forEach(function (node) {
               node.fire('dragmove', {
                   type: 'dragmove',
                   target: node,
-                  evt: evt
+                  evt: evt,
               }, true);
           });
       },
@@ -2529,14 +2533,14 @@
                   elem.node.fire('dragend', {
                       type: 'dragend',
                       target: elem.node,
-                      evt: evt
+                      evt: evt,
                   }, true);
               }
               if (elem.dragStatus !== 'dragging') {
                   DD._dragElements.delete(key);
               }
           });
-      }
+      },
   };
   if (Konva.isBrowser) {
       window.addEventListener('mouseup', DD._endDragBefore, true);
@@ -5047,8 +5051,8 @@
    * in that case you can set the property to false
    * @name Konva.Node#preventDefault
    * @method
-   * @param {Number} preventDefault
+   * @param {Boolean} preventDefault
-   * @returns {Number}
+   * @returns {Boolean}
    * @example
    * // get preventDefault
    * var shouldPrevent = shape.preventDefault();
@@ -14847,7 +14851,11 @@
           var lastPos;
           node.on("dragstart." + EVENTS_NAME, function (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, function (e) {
               if (!lastPos) {
@@ -14870,9 +14878,6 @@
                   });
                   otherNode.startDrag();
               });
-              // node.on(`dragend.${EVENTS_NAME}`, (e) => {
-              //   this.fire('dragend', e);
-              // });
               lastPos = null;
           });
       };

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);
-
+      nodesToFireEvents.push(node);
-      // execute ondragmove if defined
+    });
+    // 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
+ * @param {Boolean} preventDefault
- * @returns {Number}
+ * @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;
     });
   }

test/unit/shapes/Transformer-test.js

@@ -3853,17 +3853,22 @@ suite('Transformer', function () {
       y: 80,
     });
 
+    stage.simulateMouseMove({
+      x: 85,
+      y: 85,
+    });
+
     stage.simulateMouseUp({
       x: 80,
       y: 80,
     });
 
     // proxy drag to other nodes
-    assert.equal(rect2.x(), 105);
+    assert.equal(rect2.x(), 110);
-    assert.equal(rect2.y(), 105);
+    assert.equal(rect2.y(), 110);
-    assert.equal(dragstart, 1);
+    assert.equal(dragstart, 2);
-    assert.equal(dragmove, 1);
+    assert.equal(dragmove, 3);
-    assert.equal(dragend, 1);
+    assert.equal(dragend, 2);
   });
 
   test('reattach from several and drag one', function () {
@@ -4025,6 +4030,13 @@ suite('Transformer', function () {
       x: 110,
       y: 90,
     });
+
+    // move mouse twice
+    // because first move will jus trigger start dragging
+    stage.simulateMouseMove({
+      x: 120,
+      y: 90,
+    });
     stage.simulateMouseMove({
       x: 120,
       y: 90,