Fix shape.intersects() behavior when a node is dragged

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 `shape.intersects()` behavior when a node is dragged
+
 ## 7.2.1
 
 * Fix correct rendering of `Konva.Label` when heigh of text is changed

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.2.1
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Dec 07 2020
+   * Date: Fri Dec 11 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3401,7 +3401,8 @@
               return true;
           }
       };
-      Node.prototype.shouldDrawHit = function (top) {
+      Node.prototype.shouldDrawHit = function (top, skipDragCheck) {
+          if (skipDragCheck === void 0) { skipDragCheck = false; }
           if (top) {
               return this._isVisible(top) && this._isListening(top);
           }
@@ -3418,7 +3419,7 @@
                   layerUnderDrag = true;
               }
           });
-          var dragSkip = !Konva.hitOnDragEnabled && layerUnderDrag;
+          var dragSkip = !skipDragCheck && !Konva.hitOnDragEnabled && layerUnderDrag;
           return this.isListening() && this.isVisible() && !dragSkip;
       };
       /**
@@ -7156,7 +7157,7 @@
       Shape.prototype.intersects = function (point) {
           var stage = this.getStage(), bufferHitCanvas = stage.bufferHitCanvas, p;
           bufferHitCanvas.getContext().clear();
-          this.drawHit(bufferHitCanvas);
+          this.drawHit(bufferHitCanvas, null, true);
           p = bufferHitCanvas.context.getImageData(Math.round(point.x), Math.round(point.y), 1, 1).data;
           return p[3] > 0;
       };
@@ -7335,8 +7336,9 @@
           context.restore();
           return this;
       };
-      Shape.prototype.drawHit = function (can, top) {
-          if (!this.shouldDrawHit(top)) {
+      Shape.prototype.drawHit = function (can, top, skipDragCheck) {
+          if (skipDragCheck === void 0) { skipDragCheck = false; }
+          if (!this.shouldDrawHit(top, skipDragCheck)) {
               return this;
           }
           var layer = this.getLayer(), canvas = can || layer.hitCanvas, context = canvas && canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit;

src/Node.ts

@@ -1050,7 +1050,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       return true;
     }
   }
-  shouldDrawHit(top?: Node) {
+  shouldDrawHit(top?: Node, skipDragCheck = false) {
     if (top) {
       return this._isVisible(top) && this._isListening(top);
     }
@@ -1067,7 +1067,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       }
     });
 
-    var dragSkip = !Konva.hitOnDragEnabled && layerUnderDrag;
+    var dragSkip = !skipDragCheck && !Konva.hitOnDragEnabled && layerUnderDrag;
     return this.isListening() && this.isVisible() && !dragSkip;
   }
 

src/Shape.ts

@@ -421,7 +421,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
       p;
 
     bufferHitCanvas.getContext().clear();
-    this.drawHit(bufferHitCanvas);
+    this.drawHit(bufferHitCanvas, null, true);
     p = bufferHitCanvas.context.getImageData(
       Math.round(point.x),
       Math.round(point.y),
@@ -643,8 +643,8 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
     context.restore();
     return this;
   }
-  drawHit(can?: HitCanvas, top?: Node) {
-    if (!this.shouldDrawHit(top)) {
+  drawHit(can?: HitCanvas, top?: Node, skipDragCheck = false) {
+    if (!this.shouldDrawHit(top, skipDragCheck)) {
       return this;
     }
 

test/unit/Shape-test.js

@@ -893,6 +893,32 @@ suite('Shape', function () {
     assert.equal(rect.intersects({ x: 45, y: 45 }), false);
   });
 
+  // ======================================================
+  test('shape intersect while dragging', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var rect = new Konva.Rect({
+      fill: '#ff0000',
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 200,
+      draggable: true,
+      shadowColor: '#000', // if all shadow properties removed, works fine
+    });
+    layer.add(rect);
+    stage.add(layer);
+
+    stage.simulateMouseDown({ x: 55, y: 55 });
+    stage.simulateMouseMove({ x: 65, y: 65 });
+
+    //error here
+    assert.equal(rect.intersects({ x: 65, y: 65 }), true);
+    stage.simulateMouseUp({ x: 65, y: 65 });
+  });
+
   // ======================================================
   test('overloaded getters and setters', function () {
     var stage = addStage();