fix path parse. close #851

CHANGELOG.md

@@ -13,6 +13,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Better typescript support. Now every module has its own `*.d.ts` file.
 - New method `layer.getNativeCanvasElement()`
 - Removed `Konva.UA`, `Konva._parseUA` (it was used for old browser detection)
+- Fixed Arrow head position when an arrow has tension
+- `textPath.getKerning()` is removed
 
 ## 7.2.5
 

src/shapes/Path.ts

@@ -492,6 +492,11 @@ export class Path extends Shape<PathConfig> {
       var p = [];
 
       for (var j = 0, jlen = coords.length; j < jlen; j++) {
+        // extra case for merged flags
+        if (coords[j] === '00') {
+          p.push(0, 0);
+          continue;
+        }
         var parsed = parseFloat(coords[j]);
         if (!isNaN(parsed)) {
           p.push(parsed);

src/shapes/TextPath.ts

@@ -14,6 +14,7 @@ export interface TextPathConfig extends ShapeConfig {
   fontFamily?: string;
   fontSize?: number;
   fontStyle?: string;
+  letterSpacing?: number;
 }
 
 var EMPTY_STRING = '',
@@ -33,14 +34,13 @@ function _strokeFunc(context) {
  * @memberof Konva
  * @augments Konva.Shape
  * @param {Object} config
- * @param {String} [config.fontFamily] default is Calibri
+ * @param {String} [config.fontFamily] default is Arial
  * @param {Number} [config.fontSize] default is 12
  * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
  * @param {String} [config.fontVariant] can be normal or small-caps.  Default is normal
  * @param {String} [config.textBaseline] Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'. Default is middle
  * @param {String} config.text
  * @param {String} config.data SVG data string
- * @param {Function} config.getKerning a getter for kerning values for the specified characters
  * @param {Function} config.kerningFunc a getter for kerning values for the specified characters
  * @@shapeParams
  * @@nodeParams
@@ -102,13 +102,6 @@ export class TextPath extends Shape<TextPathConfig> {
       this._setTextData
     );
 
-    if (config && config['getKerning']) {
-      Util.warn(
-        'getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'
-      );
-      this.kerningFunc(config['getKerning']);
-    }
-
     this._setTextData();
   }
 

test/unit/Path-test.ts

@@ -1424,4 +1424,44 @@ describe('Path', function () {
       height: 100,
     });
   });
+
+  it('check arc parsing', function () {
+    var stage = addStage();
+    var layer1 = new Konva.Layer();
+    stage.add(layer1);
+
+    const weirdPath = new Konva.Path({
+      x: 40,
+      y: 40,
+      scale: { x: 5, y: 5 },
+      data:
+        'M16 5.095c0-2.255-1.88-4.083-4.2-4.083-1.682 0-3.13.964-3.8 2.352' +
+        'a4.206 4.206 0 00-3.8-2.352' + // Merged arc command flags (00)
+        'C1.88 1.012 0 2.84 0 5.095c0 .066.007.13.01.194H.004c.001.047.01.096.014.143l.013.142c.07.8.321 1.663.824 2.573C2.073 10.354 4.232 12.018 8 15c3.767-2.982 5.926-4.647 7.144-6.854.501-.905.752-1.766.823-2.562.007-.055.012-.11.016-.164.003-.043.012-.088.013-.13h-.006c.003-.066.01-.13.01-.195z',
+      fill: 'red',
+    });
+    layer1.add(weirdPath);
+    layer1.draw();
+
+    const layer2 = new Konva.Layer();
+    stage.add(layer2);
+
+    const normalPath = new Konva.Path({
+      x: 40,
+      y: 40,
+      scale: { x: 5, y: 5 },
+      data:
+        'M16 5.095c0-2.255-1.88-4.083-4.2-4.083-1.682 0-3.13.964-3.8 2.352' +
+        'a4.206 4.206 0 0 0-3.8-2.352' + // Spaced arc command flags (0 0)
+        'C1.88 1.012 0 2.84 0 5.095c0 .066.007.13.01.194H.004c.001.047.01.096.014.143l.013.142c.07.8.321 1.663.824 2.573C2.073 10.354 4.232 12.018 8 15c3.767-2.982 5.926-4.647 7.144-6.854.501-.905.752-1.766.823-2.562.007-.055.012-.11.016-.164.003-.043.012-.088.013-.13h-.006c.003-.066.01-.13.01-.195z',
+      fill: 'red',
+    });
+    layer2.add(normalPath);
+    layer2.draw();
+
+    var trace1 = layer1.getContext().getTrace();
+    var trace2 = layer2.getContext().getTrace();
+
+    assert.equal(trace1, trace2);
+  });
 });

test/unit/test-utils.ts

@@ -27,6 +27,8 @@ afterEach(function () {
     clearTimeout(stage.dblTimeout);
   });
 
+  console.log(isFailed);
+
   if (!isFailed && !isManual) {
     Konva.stages.forEach(function (stage) {
       stage.destroy();