konva/test/unit/shapes/TextPath-test.js

suite('TextPath', function () {
  // ======================================================
  test('Render Text Along Line', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M 10,10 300,150';

    var path = new Konva.Path({
      stroke: 'red',
      strokeWidth: 1,
      data: c,
    });

    layer.add(path);

    var textpath = new Konva.TextPath({
      fill: 'orange',
      fontSize: 24,
      fontFamily: 'Arial',
      text: "The quick brown fox jumped over the lazy dog's back",
      data: c,
    });
    textpath.on('mouseover', function () {
      this.setFill('blue');
      layer.drawScene();
    });
    textpath.on('mouseout', function () {
      this.setFill('orange');
      layer.drawScene();
    });

    layer.add(textpath);
    stage.add(layer);
    showHit(layer);

    assert.equal(
      textpath.getClassName(),
      'TextPath',
      'getClassName should be TextPath'
    );

    var trace = layer.getContext().getTrace(true);
    //console.log(trace);
    assert.equal(
      trace,
      'restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();restore();restore();'
    );
  });

  // ======================================================
  test.skip('Find Next Segment when Arc is in Path', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 C0,0 10,150 100,100 S300,150 40,130';
    var path = new Konva.Path({
      x: 0,
      y: 50,
      stroke: 'green',
      strokeWidth: 1,
      data: c,
    });

    layer.add(path);

    var textpath = new Konva.TextPath({
      x: 0,
      y: 50,
      fill: '#333',
      fontSize: 50,
      fontFamily: 'Arial',
      text:
        "All mhe world's a smage, and all mhe men and women merely players.",
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);

    var trace = layer.getContext().getTrace();
    console.log(trace);
    assert.equal(trace.indexOf('NaN') === -1, true, 'No NaNs');
    throw '';
  });

  // ======================================================
  test('Check getter and setter', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M 50 50 l 250 0';
    var path = new Konva.TextPath({
      text: 'some text',
      stroke: 'red',
      strokeWidth: 1,
    });

    layer.add(path);
    stage.add(layer);

    assert.equal(path.getData(), undefined);
    path.data(c);
    assert.equal(path.getData(), c);

    layer.draw();
  });

  // ======================================================
  test('Render Text Along Vertical Line', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    // Top Down
    var c = 'M 50,10 50,150';

    var path = new Konva.Path({
      stroke: 'red',
      strokeWidth: 1,
      data: c,
    });

    layer.add(path);

    var textpath = new Konva.TextPath({
      stroke: 'black',
      strokeWidth: 1,
      fill: 'orange',
      fontSize: 18,
      fontFamily: 'Arial',
      text: "The quick brown fox jumped over the lazy dog's back",
      data: c,
    });

    layer.add(textpath);

    // Bottom up
    c = 'M 150,150 150,10';

    path = new Konva.Path({
      stroke: 'red',
      strokeWidth: 1,
      data: c,
    });

    layer.add(path);

    textpath = new Konva.TextPath({
      stroke: 'black',
      strokeWidth: 1,
      fill: 'orange',
      fontSize: 18,
      fontFamily: 'Arial',
      text: "The quick brown fox jumped over the lazy dog's back",
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);
  });

  // ======================================================
  test('Render Text Along two connected Bezier', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 C0,0 10,150 100,100 S300,150 400,50';
    var path = new Konva.Path({
      stroke: 'red',
      strokeWidth: 1,
      data: c,
    });

    layer.add(path);

    var textpath = new Konva.TextPath({
      stroke: 'black',
      strokeWidth: 1,
      fill: 'orange',
      fontSize: 8,
      fontFamily: 'Arial',
      text:
        "All the world's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.",
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);
  });

  // ======================================================
  test('Render Text Along Elliptical Arc', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M 250,100 A 100 50 30 1 0 150 150';
    var path = new Konva.Path({
      stroke: 'red',
      strokeWidth: 1,
      data: c,
    });

    layer.add(path);

    var textpath = new Konva.TextPath({
      fill: 'black',
      fontSize: 10,
      text:
        "All the world's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.",
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);
  });

  // ======================================================
  test('Render Text Along complex path', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c =
      'M 955.92249,-42.126952 L 955.92249,-42.126952 L 955.92249,-42.126952 L 961.93262,212.9279 C 961.72797,213.3372 961.22315,215.2234 960.80572,215.5574 C 957.45077,218.2413 956.9054,218.3026 953.66869,216.6843 C 952.62164,216.1607 951.67338,214.3658 949.91236,214.8061 C 947.3405,215.4491 948.09281,215.8744 946.53166,217.4355 C 945.22315,218.744 943.52659,219.8744 943.52659,222.3188 C 943.52659,225.6087 944.62943,224.7909 946.15603,226.8264 C 947.55965,228.6979 948.18154,229.6696 948.78546,232.0852 C 949.37174,234.4304 951.2918,235.2197 952.16616,236.9685 C 953.11809,238.8723 956.44837,240.9001 955.17122,242.6029 C 955.17122,242.8772 955.27602,243.9657 955.17122,244.1055 C 954.37248,245.1705 952.25782,247.1195 951.79052,248.9887 C 951.25154,251.1447 951.97226,252.3937 951.41489,254.6232 C 950.9178,256.6116 949.53672,257.6472 949.53672,259.8821 C 949.53672,261.2894 949.87203,263.5578 950.66362,265.1409 C 951.32462,266.4629 953.24159,268.3158 953.66869,270.0242 C 954.03114,271.474 954.12634,273.8281 953.66869,275.6587 C 953.20033,277.5321 952.16616,278.7427 952.16616,280.9175 C 952.16616,281.7694 952.66216,286.9313 952.16616,287.3033 C 950.55129,287.3033 950.38215,287.5144 949.16109,288.4302 C 947.74898,289.4893 945.57047,291.4095 944.65349,292.9378 C 943.57061,294.7426 942.86906,296.6011 942.3997,298.9479 C 941.97063,301.0933 941.32659,303.0261 940.1459,304.2068 C 938.60102,305.7517 939.019,307.4128 939.019,309.8413 C 939.019,311.6467 939.44296,314.3005 938.26773,315.4758 C 937.15545,316.5881 934.88703,318.5361 934.88703,320.7346 C 934.88703,322.7058 934.79432,324.8714 935.26267,326.7448 C 935.72373,328.589 935.6383,330.6902 935.6383,332.7549 C 935.6383,334.5937 936.08895,337.1125 935.26267,338.765 C 933.38787,342.5146 935.26267,342.5858 935.26267,345.5264 C 935.61053,346.9179 935.6383,348.2383 935.6383,350.034 C 935.6383,351.5752 934.96036,354.5783 932.63323,353.4147 C 932.09123,353.1437 928.92886,348.8032 927.75,351.1609 C 926.64231,353.3763 926.87972,354.3829 928.12564,356.0442 C 929.10471,357.3496 930.01787,360.3569 928.12564,361.303 C 926.67006,362.0308 924.24963,362.5828 924.74494,365.0593 C 925.21304,367.3998 926.19847,367.8684 926.6231,369.567 C 926.7781,370.1869 927.80544,374.5783 926.24747,375.2014 C 924.2456,376.0022 920.63857,376.64 919.86171,378.5821 C 918.7844,381.2754 918.89909,381.8572 921.36424,383.0897 C 922.93947,383.8774 923.65296,384.6272 925.12057,386.0948 C 925.4026,386.3768 928.41848,391.3951 926.99874,392.1049 C 926.6231,392.2301 926.22599,392.3035 925.87184,392.4806 C 924.02717,393.4029 922.07311,394.7556 920.61297,395.4856 C 918.19436,396.6949 919.66034,398.0609 920.23734,400.3689 C 920.66358,402.0738 920.9143,404.1809 919.48607,405.2521 C 918.27148,406.163 916.40598,407.9567 914.60284,407.5059 C 912.7458,407.0416 911.06841,406.8699 909.71961,407.8815 C 908.08698,409.106 906.39997,410.6424 905.96328,412.3891 C 905.46424,414.3853 903.5041,416.8116 901.83132,417.648 C 900.14443,418.4914 897.73682,419.2163 895.82119,420.6531 C 894.39644,421.7216 891.99114,423.3808 890.93796,424.785 C 889.59804,426.5716 888.40557,428.0687 886.80599,429.6682 C 885.18365,431.2906 883.35936,432.8052 882.29839,434.9271 C 881.56876,436.3864 879.95545,436.9836 879.29333,438.3078 C 878.57656,439.7413 877.73542,441.3406 876.28826,442.0641 C 874.75553,442.8305 873.35007,443.456 871.40503,443.9423 C 867.75936,444.8537 869.30342,446.1864 868.7756,448.8255 C 868.7756,449.4008 868.88599,450.1518 868.7756,450.7037 C 868.4147,452.5082 867.97176,454.46 866.14617,454.46 C 863.87643,454.46 863.13519,452.5202 860.51167,452.9575 C 858.30041,453.326 855.7288,453.4708 853.75028,454.46 C 851.66578,455.5023 850.88183,456.6114 849.24268,457.8407 C 848.34172,458.5165 844.59521,461.2214 842.85692,461.2214 C 841.06194,461.2214 838.75283,461.625 837.59805,460.4702 C 836.02546,458.8976 834.59299,457.0331 834.59299,454.8357 C 834.59299,452.5753 834.44046,450.9268 833.09045,449.5768 C 831.22582,447.7122 830.88608,448.6344 829.33412,450.7037 C 827.57516,453.049 826.50225,455.876 824.07526,457.0895 C 820.97109,458.6416 819.33963,458.3772 818.440

    var textpath = new Konva.TextPath({
      y: 50,
      fill: 'black',
      fontSize: 24,
      text: Array(4).join(
        "All the world's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts."
      ),
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);
  });

  // ======================================================
  test('Render Text Along complex path cached', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 C0,0 10,150 100,100 S300,150 400,50';

    var textpath = new Konva.TextPath({
      stroke: 'black',
      strokeWidth: 1,
      fill: 'orange',
      fontSize: 10,
      fontFamily: 'Arial',
      text:
        "All the world's a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.",
      data: c,
      draggable: true,
    });

    textpath.cache();

    layer.add(textpath);
    stage.add(layer);

    cloneAndCompareLayer(layer, 200);
    showHit(layer);
  });

  test('Text path with letter spacing', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 C0,0 10,150 100,100 S300,150 400,50';

    var textpath = new Konva.TextPath({
      stroke: 'black',
      strokeWidth: 1,
      fill: 'orange',
      fontSize: 10,
      fontFamily: 'Arial',
      letterSpacing: 5,
      text:
        "All the world's a stage, and all the men and women merely players.",
      data: c,
    });

    textpath.cache();

    layer.add(textpath);
    stage.add(layer);
    cloneAndCompareLayer(layer, 200);
    showHit(layer);
  });

  test('Text path with align', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 300, 10';

    var textpath = new Konva.TextPath({
      fill: 'black',
      fontSize: 10,
      fontFamily: 'Arial',
      letterSpacing: 5,
      text: "All the world's a stage.",
      align: 'center',
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);

    var trace =
      'restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();restore();restore();';

    assert.equal(layer.getContext().getTrace(true), trace);
  });

  test('Text path with emoji', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 300, 10';

    var textpath = new Konva.TextPath({
      fill: 'black',
      fontSize: 10,
      fontFamily: 'Arial',
      letterSpacing: 5,
      text: '😬',
      align: 'center',
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);

    var trace =
      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 10px Arial;textBaseline=middle;textAlign=left;save();save();translate(144.438,10);rotate(0);fillStyle=black;fillText(😬,0,0);restore();restore();restore();';

    assert.equal(layer.getContext().getTrace(), trace);
  });

  test.skip('Text path with center align - arc', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var textpath = new Konva.TextPath({
      fill: '#333',
      fontSize: 20,
      text: 'Hello  World',
      align: 'right',
      data: 'M 50 200 a 100 100 0 0 1 200 0',
    });
    layer.add(textpath);

    var path = new Konva.Path({
      stroke: '#000',
      data: 'M 50 200 a 100 100 0 0 1 200 0',
    });
    layer.add(path);
    stage.add(layer);

    var trace =
      'restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();restore();restore();';

    assert.equal(layer.getContext().getTrace(true), trace);
  });

  test('Text path with align right', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 300, 10';

    var path = new Konva.Path({
      stroke: 'red',
      data: c,
    });

    layer.add(path);

    var textpath = new Konva.TextPath({
      fill: 'black',
      fontSize: 10,
      fontFamily: 'Arial',
      text: "All the world's a stage.",
      align: 'right',
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);

    var trace =
      "restore();save();translate(228.335,10);rotate(0);fillStyle=black;fillText(w,0,0);restore();save();translate(235.557,10);rotate(0);fillStyle=black;fillText(o,0,0);restore();save();translate(241.118,10);rotate(0);fillStyle=black;fillText(r,0,0);restore();save();translate(244.448,10);rotate(0);fillStyle=black;fillText(l,0,0);restore();save();translate(246.67,10);rotate(0);fillStyle=black;fillText(d,0,0);restore();save();translate(252.231,10);rotate(0);fillStyle=black;fillText(',0,0);restore();save();translate(254.141,10);rotate(0);fillStyle=black;fillText(s,0,0);restore();save();translate(259.141,10);rotate(0);fillStyle=black;fillText( ,0,0);restore();save();translate(261.919,10);rotate(0);fillStyle=black;fillText(a,0,0);restore();save();translate(267.48,10);rotate(0);fillStyle=black;fillText( ,0,0);restore();save();translate(270.259,10);rotate(0);fillStyle=black;fillText(s,0,0);restore();save();translate(275.259,10);rotate(0);fillStyle=black;fillText(t,0,0);restore();save();translate(278.037,10);rotate(0);fillStyle=black;fillText(a,0,0);restore();save();translate(283.599,10);rotate(0);fillStyle=black;fillText(g,0,0);restore();save();translate(289.16,10);rotate(0);fillStyle=black;fillText(e,0,0);restore();save();translate(294.722,10);rotate(0);fillStyle=black;fillText(.,0,0);restore();restore();restore();";

    assert.equal(layer.getContext().getTrace(), trace);
  });

  test('Text path with justify align', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 C0,0 10,150 100,100 S300,150 400,50';

    var textpath = new Konva.TextPath({
      stroke: 'black',
      strokeWidth: 1,
      fill: 'orange',
      fontSize: 10,
      fontFamily: 'Arial',
      letterSpacing: 5,
      text: 'All the worlds a stage.',
      align: 'justify',
      data: c,
    });

    layer.add(textpath);
    stage.add(layer);

    var trace =
      'rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();save();translate();rotate();fillStyle;fillText();lineWidth;strokeStyle;strokeText();restore();restore();restore();';

    assert.equal(layer.getContext().getTrace(true), trace);
  });

  test('Text path with underline', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 C0,0 10,150 100,100 S300,150 400,50';

    var textpath = new Konva.TextPath({
      fill: 'orange',
      fontSize: 10,
      fontFamily: 'Arial',
      letterSpacing: 5,
      text: 'All the worlds a stage.',
      textDecoration: 'underline',
      data: c,
      draggable: true,
    });

    layer.add(textpath);
    stage.add(layer);

    var trace =
      'rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();save();translate();rotate();fillStyle;fillText();lineTo();restore();stroke();restore();restore();';

    assert.equal(layer.getContext().getTrace(true), trace);
  });

  test('Text with baseline', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M 10,10 300,10';

    var path = new Konva.Path({
      stroke: 'red',
      strokeWidth: 1,
      data: c,
    });

    layer.add(path);

    var textpath = new Konva.TextPath({
      fill: 'orange',
      fontSize: 24,
      fontFamily: 'Arial',
      text: "The quick brown fox jumped over the lazy dog's back",
      data: c,
      textBaseline: 'top',
    });
    textpath.on('mouseover', function () {
      this.setFill('blue');
      layer.drawScene();
    });
    textpath.on('mouseout', function () {
      this.setFill('orange');
      layer.drawScene();
    });

    layer.add(textpath);
    stage.add(layer);
    showHit(layer);
  });

  test('Text with kerning', function () {
    var stage = addStage();

    // simulate lack of kerning support
    stage.getContainer().style.fontKerning = 'none';

    var layer = new Konva.Layer();
    var pairs = {
      A: {
        V: -0.07421875,
      },
      V: {
        A: -0.07421875,
      },
    };

    const kernedText = new Konva.TextPath({
      x: 0,
      y: 30,
      fill: 'black',
      text: 'AV',
      fontSize: 60,
      data: 'M0,0 L200,0',
      kerningFunc: function (leftChar, rightChar) {
        return pairs.hasOwnProperty(leftChar)
          ? pairs[leftChar][rightChar] || 0
          : 0;
      },
    });

    const unkernedText = new Konva.TextPath({
      x: 0,
      y: 90,
      fill: 'black',
      text: 'AV',
      fontSize: 60,
      data: 'M0,0 L200,0',
    });

    layer.add(kernedText);
    layer.add(unkernedText);
    stage.add(layer);

    assert(
      kernedText.getTextWidth() < unkernedText.getTextWidth(),
      'kerned text lenght must be less then unkerned text length'
    );
  });

  test('Text with invalid kerning getter should not fail (fallback to unkerned)', function () {
    var stage = addStage();

    // simulate lack of kerning support
    stage.getContainer().style.fontKerning = 'none';

    var layer = new Konva.Layer();

    const kernedText = new Konva.TextPath({
      x: 0,
      y: 30,
      fill: 'black',
      text: 'AV',
      fontSize: 60,
      data: 'M0,0 L200,0',
      kerningFunc: function (leftChar, rightChar) {
        // getter that fails
        throw new Error('something went wrong');
      },
    });

    const unkernedText = new Konva.TextPath({
      x: 0,
      y: 90,
      fill: 'black',
      text: 'AV',
      fontSize: 60,
      data: 'M0,0 L200,0',
    });

    layer.add(kernedText);
    layer.add(unkernedText);
    stage.add(layer);

    assert.equal(
      kernedText.getTextWidth(),
      unkernedText.getTextWidth(),
      'should gracefully fallback to unkerned text'
    );
  });

  test('can set kerning after initialization', function () {
    var stage = addStage();

    // simulate lack of kerning support
    stage.getContainer().style.fontKerning = 'none';

    var layer = new Konva.Layer();
    stage.add(layer);

    const kernedText = new Konva.TextPath({
      x: 0,
      y: 30,
      fill: 'black',
      text: 'AV',
      fontSize: 60,
      data: 'M0,0 L200,0',
    });
    layer.add(kernedText);
    layer.draw();

    var called = false;
    kernedText.kerningFunc(function () {
      called = true;
      return 1;
    });

    layer.draw();
    assert.equal(called, true);
  });

  test.skip('linear gradient for path', function () {
    var stage = addStage();

    var layer = new Konva.Layer();
    stage.add(layer);

    const text = new Konva.TextPath({
      x: 0,
      y: 30,
      text: 'AV',
      fontSize: 20,
      data: 'M0,0 L200,0',
      fillLinearGradientStartPoint: { x: 0, y: 0 },
      fillLinearGradientEndPoint: { x: 200, y: 0 },
      fillLinearGradientColorStops: [0, 'yellow', 1, 'red'],
      text: 'Text with gradient!!',
    });
    layer.add(text);
    layer.draw();

    var trace = layer.getContext().getTrace();
    console.log(trace);
  });

  test('visual check for text path', function () {
    var stage = addStage();

    var layer = new Konva.Layer();
    stage.add(layer);

    layer.add(
      new Konva.TextPath({
        fill: '#333',
        fontSize: 20,
        x: 80,
        y: 300,
        fontFamily: 'Calibri',
        text: 'Hello World',
        align: 'center',
        textBaseline: 'bottom',
        data:
          'M -80.34441853748636 -247.27469423673992 A 260 260 0 0 1 80.34441853748628 -247.27469423673995',
      })
    );

    layer.add(
      new Konva.TextPath({
        fill: '#333',
        fontSize: 20,
        x: 80,
        y: 350,
        fontFamily: 'Calibri',
        text: 'Hello World',
        align: 'center',
        // textBaseline: 'bottom',
        data:
          'M -80.34441853748636 -247.27469423673992 A 260 260 0 0 1 80.34441853748628 -247.27469423673995',
      })
    );

    layer.add(
      new Konva.Text({
        text: 'Hello world',
      })
    );

    layer.add(
      new Konva.TextPath({
        fill: '#333',
        text: 'Hello world',
        y: 20,
        data: 'M 0 0 L100 0',
      })
    );
    layer.draw();
  });

  test('client rect calculations', function () {
    var stage = addStage();

    var layer = new Konva.Layer();
    stage.add(layer);

    var textpath = new Konva.TextPath({
      x: 100,
      y: 150,
      fill: '#333',
      fontSize: 16,
      fontFamily: 'Arial',
      align: 'right',
      text: 'test_path',
      data: 'M 0,10 L 300 10',
    });
    layer.add(textpath);
    layer.draw();

    var rect = textpath.getClientRect();

    assert.equal(rect.height, 16, 'check height');

    textpath.text('');
    rect = textpath.getClientRect();
    assert.equal(rect.height, 0, 'check height');
  });
});