allow hitStrokeWidth usage, even if a shape has not stroke visible. fix #782

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.16
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Oct 21 2019
+   * Date: Fri Nov 08 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2175,7 +2175,7 @@
           this.restore();
       };
       HitContext.prototype._stroke = function (shape) {
-          if (shape.hasStroke() && shape.hitStrokeWidth()) {
+          if (shape.hasHitStroke()) {
               // ignore strokeScaleEnabled for Text
               var strokeScaleEnabled = shape.getStrokeScaleEnabled();
               if (!strokeScaleEnabled) {
@@ -5855,7 +5855,9 @@
           return this;
       };
       /**
-       * get pointer position which can be a touch position or mouse position
+       * returns absolute pointer position which can be a touch position or mouse position
+       * pointer position doesn't include any transforms (such as scale) of the stage
+       * it is just a plain position of pointer relative to top-left corner of the stage container
        * @method
        * @name Konva.Stage#getPointerPosition
        * @returns {Vector2d|null}
@@ -7182,6 +7184,13 @@
           // this.getStrokeRadialGradientColorStops()
           );
       };
+      Shape.prototype.hasHitStroke = function () {
+          var width = this.hitStrokeWidth();
+          // we should enable hit stroke we stroke is enabled
+          // and we have some value from width
+          return (this.strokeEnabled() &&
+              (width || this.strokeWidth() && width === 'auto'));
+      };
       /**
        * determines if point is in the shape, regardless if other shapes are on top of it.  Note: because
        *  this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times

src/Context.ts

@@ -826,7 +826,7 @@ export class HitContext extends Context {
     this.restore();
   }
   _stroke(shape) {
-    if (shape.hasStroke() && shape.hitStrokeWidth()) {
+    if (shape.hasHitStroke()) {
       // ignore strokeScaleEnabled for Text
       var strokeScaleEnabled = shape.getStrokeScaleEnabled();
       if (!strokeScaleEnabled) {

src/Shape.ts

@@ -370,6 +370,16 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
       // this.getStrokeRadialGradientColorStops()
     );
   }
+  hasHitStroke() {
+    const width = this.hitStrokeWidth();
+
+    // we should enable hit stroke we stroke is enabled
+    // and we have some value from width
+    return (
+      this.strokeEnabled() &&
+      (width || this.strokeWidth() && width === 'auto')
+    );
+  }
   /**
    * determines if point is in the shape, regardless if other shapes are on top of it.  Note: because
    *  this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times

src/Stage.ts

@@ -241,7 +241,9 @@ export class Stage extends Container<BaseLayer> {
     return this;
   }
   /**
-   * get pointer position which can be a touch position or mouse position
+   * returns absolute pointer position which can be a touch position or mouse position
+   * pointer position doesn't include any transforms (such as scale) of the stage
+   * it is just a plain position of pointer relative to top-left corner of the stage container
    * @method
    * @name Konva.Stage#getPointerPosition
    * @returns {Vector2d|null}

test/unit/Shape-test.js

@@ -1122,6 +1122,31 @@ suite('Shape', function() {
     // );
   });
 
+
+  test('enable hitStrokeWidth even if we have no stroke on scene', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var rect = new Konva.Rect({
+      x: 10,
+      y: 10,
+      width: 100,
+      height: 100
+    });
+    // default value
+    layer.add(rect);
+    stage.add(layer);
+
+    // try to hit test near edge
+    assert.equal(stage.getIntersection({ x: 5, y: 5 }), null);
+
+    rect.hitStrokeWidth(20);
+    layer.draw();
+    // no we should hit the rect
+    assert.equal(stage.getIntersection({ x: 5, y: 5 }), rect);
+  });
+
   test('cache shadow color rgba', function() {
     var circle = new Konva.Circle({
       fill: 'green',