new property hitStrokeWidth for shapes

konva.js

@@ -1896,7 +1896,7 @@
           this.restore();
       };
       HitContext.prototype._stroke = function (shape) {
-          if (shape.hasStroke() && shape.strokeHitEnabled()) {
+          if (shape.hasStroke() && shape.hitStrokeWidth()) {
               // ignore strokeScaleEnabled for Text
               var strokeScaleEnabled = shape.getStrokeScaleEnabled();
               if (!strokeScaleEnabled) {
@@ -1905,7 +1905,9 @@
                   this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
               }
               this._applyLineCap(shape);
-              this.setAttr('lineWidth', shape.strokeWidth());
+              var hitStrokeWidth = shape.hitStrokeWidth();
+              var strokeWidth = hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
+              this.setAttr('lineWidth', strokeWidth);
               this.setAttr('strokeStyle', shape.colorKey);
               shape._strokeFuncHit(this);
               if (!strokeScaleEnabled) {
@@ -6837,6 +6839,22 @@
               this.hasStroke() &&
               this.getStage());
       };
+      Shape.prototype.setStrokeHitEnabled = function (val) {
+          if (val) {
+              this.hitStrokeWidth('auto');
+          }
+          else {
+              this.hitStrokeWidth(0);
+          }
+      };
+      Shape.prototype.getStrokeHitEnabled = function () {
+          if (this.hitStrokeWidth() === 0) {
+              return false;
+          }
+          else {
+              return true;
+          }
+      };
       /**
        * return self rectangle (x, y, width, height) of shape.
        * This method are not taken into account transformation and styles.
@@ -7118,15 +7136,32 @@
    * var strokeWidth = shape.strokeWidth();
    *
    * // set stroke width
-   * shape.strokeWidth();
+   * shape.strokeWidth(10);
    */
+  Factory.addGetterSetter(Shape, 'hitStrokeWidth', 'auto', getNumberOrAutoValidator());
+  /**
+   * get/set stroke width for hit detection. Default value is "auto", it means it will be equals to strokeWidth
+   * @name Konva.Shape#hitStrokeWidth
+   * @method
+   * @param {Number} hitStrokeWidth
+   * @returns {Number}
+   * @example
+   * // get stroke width
+   * var hitStrokeWidth = shape.hitStrokeWidth();
+   *
+   * // set hit stroke width
+   * shape.hitStrokeWidth(20);
+   * // set hit stroke width always equals to scene stroke width
+   * shape.hitStrokeWidth('auto');
+   */
+  // TODO: probably we should deprecate it
   Factory.addGetterSetter(Shape, 'strokeHitEnabled', true, getBooleanValidator());
   /**
    * get/set strokeHitEnabled property. Useful for performance optimization.
    * You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area
    * of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false`
    * will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)
-   * Default value is true
+   * Default value is true.
    * @name Konva.Shape#strokeHitEnabled
    * @method
    * @param {Boolean} strokeHitEnabled

src/Context.ts

@@ -642,7 +642,7 @@ export class HitContext extends Context {
     this.restore();
   }
   _stroke(shape) {
-    if (shape.hasStroke() && shape.strokeHitEnabled()) {
+    if (shape.hasStroke() && shape.hitStrokeWidth()) {
       // ignore strokeScaleEnabled for Text
       var strokeScaleEnabled = shape.getStrokeScaleEnabled();
       if (!strokeScaleEnabled) {
@@ -651,7 +651,12 @@ export class HitContext extends Context {
         this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
       }
       this._applyLineCap(shape);
-      this.setAttr('lineWidth', shape.strokeWidth());
+
+      var hitStrokeWidth = shape.hitStrokeWidth();
+      var strokeWidth =
+        hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
+
+      this.setAttr('lineWidth', strokeWidth);
       this.setAttr('strokeStyle', shape.colorKey);
       shape._strokeFuncHit(this);
       if (!strokeScaleEnabled) {

src/Shape.ts

@@ -3,6 +3,7 @@ import { Factory } from './Factory';
 import { Node, NodeConfig } from './Node';
 import {
   getNumberValidator,
+  getNumberOrAutoValidator,
   getStringValidator,
   getBooleanValidator
 } from './Validators';
@@ -45,6 +46,7 @@ export interface ShapeConfig extends NodeConfig {
   fillPriority?: string;
   stroke?: string;
   strokeWidth?: number;
+  hitStrokeWidth?: number;
   strokeScaleEnabled?: boolean;
   strokeHitEnabled?: boolean;
   strokeEnabled?: boolean;
@@ -398,6 +400,20 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
       this.getStage()
     );
   }
+  setStrokeHitEnabled(val: number) {
+    if (val) {
+      this.hitStrokeWidth('auto');
+    } else {
+      this.hitStrokeWidth(0);
+    }
+  }
+  getStrokeHitEnabled() {
+    if (this.hitStrokeWidth() === 0) {
+      return false;
+    } else {
+      return true;
+    }
+  }
   /**
    * return self rectangle (x, y, width, height) of shape.
    * This method are not taken into account transformation and styles.
@@ -750,6 +766,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
   strokeScaleEnabled: GetSet<boolean, this>;
   strokeHitEnabled: GetSet<boolean, this>;
   strokeWidth: GetSet<number, this>;
+  hitStrokeWidth: GetSet<number | 'auto', this>;
   strokeLinearGradientColorStops: GetSet<Array<number | string>, this>;
 }
 
@@ -801,9 +818,33 @@ Factory.addGetterSetter(Shape, 'strokeWidth', 2, getNumberValidator());
  * var strokeWidth = shape.strokeWidth();
  *
  * // set stroke width
- * shape.strokeWidth();
+ * shape.strokeWidth(10);
  */
 
+Factory.addGetterSetter(
+  Shape,
+  'hitStrokeWidth',
+  'auto',
+  getNumberOrAutoValidator()
+);
+
+/**
+ * get/set stroke width for hit detection. Default value is "auto", it means it will be equals to strokeWidth
+ * @name Konva.Shape#hitStrokeWidth
+ * @method
+ * @param {Number} hitStrokeWidth
+ * @returns {Number}
+ * @example
+ * // get stroke width
+ * var hitStrokeWidth = shape.hitStrokeWidth();
+ *
+ * // set hit stroke width
+ * shape.hitStrokeWidth(20);
+ * // set hit stroke width always equals to scene stroke width
+ * shape.hitStrokeWidth('auto');
+ */
+
+// TODO: probably we should deprecate it
 Factory.addGetterSetter(Shape, 'strokeHitEnabled', true, getBooleanValidator());
 
 /**
@@ -811,7 +852,7 @@ Factory.addGetterSetter(Shape, 'strokeHitEnabled', true, getBooleanValidator());
  * You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area
  * of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false`
  * will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)
- * Default value is true
+ * Default value is true.
  * @name Konva.Shape#strokeHitEnabled
  * @method
  * @param {Boolean} strokeHitEnabled

test/unit/Shape-test.js

@@ -1057,6 +1057,7 @@ suite('Shape', function() {
 
     rect.strokeHitEnabled(false);
     assert.equal(rect.strokeHitEnabled(), false);
+
     layer.add(rect);
     stage.add(layer);
 
@@ -1072,6 +1073,56 @@ suite('Shape', function() {
     );
   });
 
+  test('hitStrokeWidth', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var rect = new Konva.Rect({
+      x: 10,
+      y: 10,
+      width: 100,
+      height: 100,
+      stroke: 'red',
+      strokeWidth: 2
+    });
+    // default value
+    layer.add(rect);
+    stage.add(layer);
+
+    // default value is auto
+    assert.equal(rect.hitStrokeWidth(), 'auto');
+
+    // 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);
+
+    rect.strokeHitEnabled(false);
+
+    assert.equal(rect.hitStrokeWidth(), 0);
+
+    rect.strokeHitEnabled(true);
+
+    assert.equal(rect.hitStrokeWidth(), 'auto');
+
+    rect.hitStrokeWidth(0);
+
+    assert.equal(rect.strokeHitEnabled(), false);
+
+    // var trace = layer
+    //   .getHitCanvas()
+    //   .getContext()
+    //   .getTrace(true);
+    // assert.equal(
+    //   trace,
+    //   'clearRect();save();transform();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();'
+    // );
+  });
+
   test('cache shadow color rgba', function() {
     var circle = new Konva.Circle({
       fill: 'green',