fix non-closed hit for Konva.Path. close #867

CHANGELOG.md

@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 * Add `rotationSnapTolerance` property to `Konva.Transformer`.
 * Add `getActiveAnchor()` method to `Konva.Transformer`
+* Fix hit for non-closed `Konva.Path`
 
 ## 4.1.6 - 2020-02-25
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.1.6
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Mar 03 2020
+   * Date: Thu Mar 12 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -11546,6 +11546,7 @@
           var ca = this.dataArray;
           // context position
           context.beginPath();
+          var isClosed = false;
           for (var n = 0; n < ca.length; n++) {
               var c = ca[n].command;
               var p = ca[n].points;
@@ -11576,11 +11577,17 @@
                       context.translate(-cx, -cy);
                       break;
                   case 'z':
+                      isClosed = true;
                       context.closePath();
                       break;
               }
           }
-          context.fillStrokeShape(this);
+          if (!isClosed && !this.hasFill()) {
+              context.strokeShape(this);
+          }
+          else {
+              context.fillStrokeShape(this);
+          }
       };
       Path.prototype.getSelfRect = function () {
           var points = [];

src/shapes/Path.ts

@@ -53,6 +53,7 @@ export class Path extends Shape<PathConfig> {
 
     // context position
     context.beginPath();
+    var isClosed = false;
     for (var n = 0; n < ca.length; n++) {
       var c = ca[n].command;
       var p = ca[n].points;
@@ -93,12 +94,17 @@ export class Path extends Shape<PathConfig> {
 
           break;
         case 'z':
+          isClosed = true;
           context.closePath();
           break;
       }
     }
 
-    context.fillStrokeShape(this);
+    if (!isClosed && !this.hasFill()) {
+      context.strokeShape(this);
+    } else {
+      context.fillStrokeShape(this);
+    }
   }
   getSelfRect() {
     var points = [];

test/unit/shapes/Path-test.js

@@ -1117,6 +1117,51 @@ suite('Path', function() {
     );
   });
 
+  // ======================================================
+  // do we need to fill hit, when it is not closed?
+  test('Stroke when no closed', function() {
+    // https://github.com/konvajs/konva/issues/867
+
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var path = new Konva.Path({
+      data: 'M 0 0 L 100 100 L 100 0',
+      stroke: 'black'
+    });
+
+    // override color key so that we can test the context trace
+    path.colorKey = 'black';
+
+    path.on('mouseover', function() {
+      this.setStroke('#f00');
+      layer.draw();
+    });
+
+    path.on('mouseout', function() {
+      this.setStroke('#000');
+      layer.draw();
+    });
+
+    layer.add(path);
+    stage.add(layer);
+
+    showHit(layer);
+
+    var trace = layer.getContext().getTrace();
+
+    var hitTrace = layer.hitCanvas.getContext().getTrace();
+
+    assert.equal(
+      trace,
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(0,0);lineTo(100,100);lineTo(100,0);lineWidth=2;strokeStyle=black;stroke();restore();'
+    );
+    assert.equal(
+      hitTrace,
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(0,0);lineTo(100,100);lineTo(100,0);lineWidth=2;strokeStyle=black;stroke();restore();'
+    );
+  });
+
   // ======================================================
   test('draw path with no space in numbers', function() {
     // https://github.com/konvajs/konva/issues/329