events fixes

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+
+* Slightly changed `mousemove` event flow. It triggers for first `mouseover` event too
+* Better `Konva.hitOnDragEnabled` support for mouse inputs
+
 ## [4.0.2][2019-08-08]
 
 * Fixed `node.startDrag()` behavior. We can call it at any time.

src/Stage.ts

@@ -433,11 +433,12 @@ export class Stage extends Container<BaseLayer> {
     this.setPointersPositions(evt);
     var targetShape = this.targetShape;
 
-    if (targetShape && !DD.isDragging) {
+    var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled;
+    if (targetShape && eventsEnabled) {
       targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
       targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });
       this.targetShape = null;
-    } else if (!DD.isDragging) {
+    } else if (eventsEnabled) {
       this._fire(MOUSELEAVE, {
         evt: evt,
         target: this,
@@ -463,11 +464,12 @@ export class Stage extends Container<BaseLayer> {
     var pointerId = Util._getFirstPointerId(evt);
     var shape: Shape;
 
-    if (!DD.isDragging) {
+    var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled;
+    if (eventsEnabled) {
       shape = this.getIntersection(this.getPointerPosition());
       if (shape && shape.isListening()) {
         var differentTarget = !this.targetShape || this.targetShape !== shape;
-        if (!DD.isDragging && differentTarget) {
+        if (eventsEnabled && differentTarget) {
           if (this.targetShape) {
             this.targetShape._fireAndBubble(
               MOUSEOUT,
@@ -490,6 +492,7 @@ export class Stage extends Container<BaseLayer> {
             { evt: evt, pointerId },
             this.targetShape
           );
+          shape._fireAndBubble(MOUSEMOVE, { evt: evt, pointerId });
           this.targetShape = shape;
         } else {
           shape._fireAndBubble(MOUSEMOVE, { evt: evt, pointerId });
@@ -499,7 +502,7 @@ export class Stage extends Container<BaseLayer> {
          * if no shape was detected, clear target shape and try
          * to run mouseout from previous target shape
          */
-        if (this.targetShape && !DD.isDragging) {
+        if (this.targetShape && eventsEnabled) {
           this.targetShape._fireAndBubble(MOUSEOUT, { evt: evt, pointerId });
           this.targetShape._fireAndBubble(MOUSELEAVE, { evt: evt, pointerId });
           this._fire(MOUSEOVER, {
@@ -701,7 +704,8 @@ export class Stage extends Container<BaseLayer> {
   }
   _touchmove(evt) {
     this.setPointersPositions(evt);
-    if (!DD.isDragging || Konva.hitOnDragEnabled) {
+    var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled;
+    if (eventsEnabled) {
       var triggeredOnShape = false;
       var processedShapesIds = {};
       this._changedPointerPositions.forEach(pos => {

test/functional/MouseEvents-test.js

@@ -513,7 +513,7 @@ suite('MouseEvents', function() {
       });
 
       assert(mouseover, '1) mouseover should be true');
-      assert(!mousemove, '1) mousemove should be true');
+      assert(mousemove, '1) mousemove should be true');
       assert(!mousedown, '1) mousedown should be false');
       assert(!mouseup, '1) mouseup should be false');
       assert(!click, '1) click should be false');
@@ -2053,4 +2053,47 @@ suite('MouseEvents', function() {
 
     assert.equal(mouseenter, 1, 'mouseenter should be 1');
   });
+
+  test('should trigger mouse events if we set Konva.hitOnDragEnabled = true', function() {
+    Konva.hitOnDragEnabled = true;
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      width: 50,
+      height: 50,
+      fill: 'red',
+      draggable: true
+    });
+    layer.add(rect);
+
+    layer.draw();
+
+    var mousemove = 0;
+    rect.on('mousemove', () => {
+      mousemove += 1;
+    });
+
+    stage.simulateMouseDown({
+      x: 10,
+      y: 10
+    });
+
+    stage.simulateMouseMove({
+      x: 20,
+      y: 20
+    });
+    stage.simulateMouseMove({
+      x: 30,
+      y: 30
+    });
+    stage.simulateMouseUp({
+      x: 30,
+      y: 30
+    });
+
+    assert.equal(mousemove, 2, 'mousemove should be 2');
+    Konva.hitOnDragEnabled = false;
+  });
 });