konva/test/unit/TextPath-test.ts

import { assert } from 'chai';

import { addStage, Konva, cloneAndCompareLayer, isBrowser } from './test-utils';

describe('TextPath', function () {
  // ======================================================
  it('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.fill('blue');
      layer.drawScene();
    });
    textpath.on('mouseout', function () {
      this.fill('orange');
      layer.drawScene();
    });

    layer.add(textpath);
    stage.add(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();'
    );
  });

  // ======================================================
  it('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();
    assert.equal(trace.indexOf('NaN') === -1, true, 'No NaNs');
  });

  // ======================================================
  it('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.data(), undefined);
    path.data(c);
    assert.equal(path.data(), c);

    layer.draw();
  });

  // ======================================================
  it('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);

    assert.equal(
      layer.getContext().getTrace(true),
      '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();'
    );
  });

  // ======================================================
  it('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);

    assert.equal(
      layer.getContext().getTrace(true),
      '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();'
    );
  });

  // ======================================================
  it('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);

    assert.equal(
      layer.getContext().getTrace(true),
      '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();'
    );
  });

  // ======================================================
  it('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);

    assert.equal(
      layer.getContext().getTrace(true),
      '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();'
    );
  });

  // ======================================================
  it('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, 10);
  });

  it('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, 30);
  });

  it('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);
  });

  it('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);

    assert.equal(
      layer.getContext().getTrace(true),
      'clearRect();save();transform();font;textBaseline;textAlign;save();save();translate();rotate();fillStyle;fillText();restore();restore();restore();'
    );
  });

  it('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);

    assert.equal(
      layer.getContext().getTrace(true),
      'clearRect();save();transform();font;textBaseline;textAlign;save();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();save();transform();beginPath();moveTo();translate();rotate();scale();arc();scale();rotate();translate();lineWidth;strokeStyle;stroke();restore();'
    );
  });

  it('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);

    assert.equal(
      layer.getContext().getTrace(true),
      '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();'
    );
  });

  it('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);
  });

  it('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);
  });

  it('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.fill('blue');
      layer.drawScene();
    });
    textpath.on('mouseout', function () {
      this.fill('orange');
      layer.drawScene();
    });

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

    assert.equal(
      layer.getContext().getTrace(true),
      '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();'
    );
  });

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

    // simulate lack of kerning support
    stage.content && (stage.container().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'
    );
  });

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

    // simulate lack of kerning support
    stage.content && (stage.container().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'
    );
  });

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

    // simulate lack of kerning support
    stage.content && (stage.container().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);
  });

  it.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,
      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();
  });

  it('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();

    assert.equal(
      layer.getContext().getTrace(true),
      'save();translate();rotate();fillStyle;fillText();restore();save();translate();rotate();fillStyle;fillText();restore();restore();restore();save();transform();font;textBaseline;textAlign;translate();save();fillStyle;fillText();restore();restore();save();transform();font;textBaseline;textAlign;save();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();'
    );
  });

  it('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');
  });

  it('check bad calculations', function () {
    var stage = addStage();
    stage.draggable(true);

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

    var textpath = new Konva.TextPath({
      fill: '#333',
      fontSize: 16,
      scaleX: 0.8,
      scaleY: 0.8,
      text: '__________________________________________________________________________________________________________________________________________________________________________________________________________________',
      data: 'M 109.98618090452261 138.6656132223618 C 135.94577638190955 48.80547503140701 149.91187876884422 79.79800957914573 151.40954773869348 117.23973382537689 S 123.00811620603017 419.616741991206 122.84170854271358 460.0538041771357 S 134.33883542713568 469.8304329459799 149.98115577889448 464.33898005653265 S 245.4620163316583 411.5856081972362 257.1105527638191 412.91686950376885 S 239.31850251256282 474.434854428392 249.96859296482413 475.76611573492465 S 338.21036306532665 425.67526648869347 348.5276381909548 424.3440051821608 S 337.3640408291457 461.1772344535176 338.5288944723618 464.33898005653265 S 346.8778454773869 466.79295744346734 358.52638190954775 451.4834524183417',
    });
    layer.add(textpath);
    var path = new Konva.Path({
      stroke: 'red',
      scaleX: 0.8,
      scaleY: 0.8,
      data: 'M 109.98618090452261 138.6656132223618 C 135.94577638190955 48.80547503140701 149.91187876884422 79.79800957914573 151.40954773869348 117.23973382537689 S 123.00811620603017 419.616741991206 122.84170854271358 460.0538041771357 S 134.33883542713568 469.8304329459799 149.98115577889448 464.33898005653265 S 245.4620163316583 411.5856081972362 257.1105527638191 412.91686950376885 S 239.31850251256282 474.434854428392 249.96859296482413 475.76611573492465 S 338.21036306532665 425.67526648869347 348.5276381909548 424.3440051821608 S 337.3640408291457 461.1772344535176 338.5288944723618 464.33898005653265 S 346.8778454773869 466.79295744346734 358.52638190954775 451.4834524183417',
    });
    layer.add(path);
    layer.draw();

    var rect = textpath.getClientRect();

    // just different results in different envs
    if (isBrowser) {
      assert.equal(Math.round(rect.height), 331, 'check height');
    } else {
      assert.equal(Math.round(rect.height), 333, 'check height');
    }

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

  it('check bad calculations 2', function () {
    var stage = addStage();

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

    var textpath = new Konva.TextPath({
      x: 0,
      y: 0,
      fill: '#333',
      fontSize: 10,
      // strokeWidth: 100,
      stroke: 'black',
      scaleX: 0.4,
      scaleY: 0.4,
      text: '....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................',
      data: 'M 117.12814070351759 108.66938206658291 C 79.18719346733668 277.73956799623113 75.85761180904522 379.96743797110554 82.84673366834171 395.7761659861809 S 148.83130025125627 280.47708118718595 177.12060301507537 244.36661824748745 S 326.1725898241206 61.02036887562815 325.67336683417085 85.815110709799 S 174.998726758794 435.7304316896985 172.8354271356784 457.1970202575377 S 273.65633103015074 310.01551271984926 307.1042713567839 270.07767352386935 S 466.09929459798997 92.08432302135678 459.9422110552764 114.3829499057789 S 266.23512060301505 435.5226006595478 254.2537688442211 461.4821961369347 S 328.1430565326633 368.1639210113065 357.09798994974875 337.2120956344221 S 486.31961118090453 207.61623570979899 502.79396984924625 195.8012916143216 S 511.48859170854274 200.85065719221106 498.50879396984925 235.79626648869348 S 379.73086055276383 489.4401119660804 391.37939698492465 495.76360317211055 S 573.2022663316583 313.03941849874377 598.4962311557789 290.0751609610553 S 608.3285672110553 288.6610529208543 608.4949748743719 298.64551271984925 S 604.9168530150754 352.64801334799 599.9246231155779 375.778678548995 S 540.6820665829146 508.5077162374372 565.643216080402 497.19199513190955 S 690.3761155778894 408.77881799623117 814.1834170854271 278.6480252826633',
    });
    var path = new Konva.Path({
      x: 0,
      y: 0,
      stroke: 'red',
      scaleX: 0.4,
      scaleY: 0.4,
      data: 'M 117.12814070351759 108.66938206658291 C 79.18719346733668 277.73956799623113 75.85761180904522 379.96743797110554 82.84673366834171 395.7761659861809 S 148.83130025125627 280.47708118718595 177.12060301507537 244.36661824748745 S 326.1725898241206 61.02036887562815 325.67336683417085 85.815110709799 S 174.998726758794 435.7304316896985 172.8354271356784 457.1970202575377 S 273.65633103015074 310.01551271984926 307.1042713567839 270.07767352386935 S 466.09929459798997 92.08432302135678 459.9422110552764 114.3829499057789 S 266.23512060301505 435.5226006595478 254.2537688442211 461.4821961369347 S 328.1430565326633 368.1639210113065 357.09798994974875 337.2120956344221 S 486.31961118090453 207.61623570979899 502.79396984924625 195.8012916143216 S 511.48859170854274 200.85065719221106 498.50879396984925 235.79626648869348 S 379.73086055276383 489.4401119660804 391.37939698492465 495.76360317211055 S 573.2022663316583 313.03941849874377 598.4962311557789 290.0751609610553 S 608.3285672110553 288.6610529208543 608.4949748743719 298.64551271984925 S 604.9168530150754 352.64801334799 599.9246231155779 375.778678548995 S 540.6820665829146 508.5077162374372 565.643216080402 497.19199513190955 S 690.3761155778894 408.77881799623117 814.1834170854271 278.6480252826633',
    });
    layer.add(path);
    // emulate different size function:
    // I found the app with custom font
    // we calculations were not correct
    // so I just coppied text size from that app
    textpath._getTextSize = () => {
      return { height: 10, width: 5.9399871826171875 };
    };
    layer.add(textpath);

    layer.draw();

    var rect = textpath.getClientRect();
    assert.equal(Math.round(rect.width), 299);
    assert.equal(Math.round(rect.height), 171);
  });

  it.skip('check vertical text path', function () {
    var stage = addStage();

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

    var textpath = new Konva.TextPath({
      x: -280,
      y: -190,
      fill: 'black',
      fontSize: 10,
      fontFamily: 'Arial',
      align: 'right',
      text: '&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&',
      data: 'M 283 383 L 283 187',
    });
    layer.add(textpath);
    layer.draw();

    var rect = textpath.getClientRect();

    assert.equal(rect.height, 200, 'check height');
  });
});