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

suite('Path', function() {
  // ======================================================
  test('add simple path', function() {
    var stage = addStage();

    var layer = new Konva.Layer();

    var path = new Konva.Path({
      data: 'M200,100h100v50z',
      fill: '#ccc',
      stroke: '#333',
      strokeWidth: 2,
      shadowColor: 'black',
      shadowBlur: 2,
      shadowOffset: { x: 10, y: 10 },
      shadowOpacity: 0.5,
      draggable: true
    });

    path.on('mouseover', function() {
      this.setFill('red');
      layer.draw();
    });

    path.on('mouseout', function() {
      this.setFill('#ccc');
      layer.draw();
    });

    layer.add(path);

    stage.add(layer);

    assert.equal(path.getData(), 'M200,100h100v50z');
    assert.equal(path.dataArray.length, 4);

    path.setData('M200');

    assert.equal(path.getData(), 'M200');
    assert.equal(path.dataArray.length, 1);

    path.setData('M200,100h100v50z');

    assert.equal(path.getClassName(), 'Path');
  });

  // ======================================================
  test('add path with line cap and line join', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var path = new Konva.Path({
      data: 'M200,100h100v50',
      stroke: '#333',
      strokeWidth: 20,
      draggable: true,
      lineCap: 'round',
      lineJoin: 'round'
    });

    layer.add(path);

    stage.add(layer);
  });

  //=======================================================
  test('add path with double closed path and releative moveto', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var path = new Konva.Path({
      data:
        'm 4.114181,28.970898 8.838835,50.205 22.980968,-48.4372 z m -4.59619304,13.7887 0,18.385 c 14.10943004,-12.211 24.57748204,-6.2149 35.00178204,0 l 2.304443,-8.6004 -13.264598,0 c 2.227131,-5.4642 7.171257,-11.834 -6.858423,-11.8792 -3.920218,12.899 -9.493066,14.6427 -17.18320404,2.0946 z',
      stroke: '#000',
      strokeWidth: 1,
      lineCap: 'round',
      lineJoin: 'round'
    });

    layer.add(path);

    stage.add(layer);
  });

  //=======================================================
  test('complex path made of many different closed and open paths (Sopwith Camel)', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var path = new Konva.Path({
      data:
        'm 15.749277,58.447629 8.495831,-0.05348 m 0.319898,-15.826548 -0.202438,17.295748 0.942206,0.941911 1.345933,-1.816987 0.20211,-11.642611 z m 77.458374,28.680768 c 0,5.308829 -4.303525,9.612686 -9.612485,9.612686 -5.30873,0 -9.612194,-4.303857 -9.612194,-9.612686 0,-5.308829 4.303464,-9.61226 9.612194,-9.61226 5.30896,0 9.612485,4.303431 9.612485,9.61226 z m -3.520874,0 c 0,3.364079 -2.72763,6.091348 -6.091611,6.091348 -3.364243,0 -6.091119,-2.727269 -6.091119,-6.091348 0,-3.363719 2.726876,-6.090791 6.091119,-6.090791 3.363981,0 6.091611,2.727072 6.091611,6.090791 z m -3.997576,0 c 0,1.156718 -0.937743,2.093937 -2.094035,2.093937 -1.156062,0 -2.093871,-0.937219 -2.093871,-2.093937 0,-1.156357 0.937809,-2.093773 2.093871,-2.093773 1.156292,0 2.094035,0.937416 2.094035,2.093773 z m 45.77821,4.283023 c -0.24607,1.90039 5.06492,3.680204 7.61403,5.520093 0.50662,0.514199 0.27889,0.975967 -0.0984,1.427532 l 3.9019,-1.141987 c -0.59258,-0.121397 -1.85951,0.01969 -1.71294,-0.380038 -0.85894,-1.950525 -3.68693,-2.761261 -5.61518,-4.092495 -1.06971,-1.03496 0.0997,-1.60766 0.76126,-2.284203 z M 43.206396,42.60133 55.578964,74.008743 58.71987,73.910313 47.203939,44.40726 c -1.109013,-0.737406 -1.174108,-2.1004 -3.997543,-1.808752 z m -18.654022,-0.570632 12.467721,31.692335 3.140643,0.09843 -12.467656,-31.692927 z m 2.285318,42.353106 -2.636648,-0.06431 0.163066,0.734584 3.709372,9.956142 2.357927,-1.168202 z m 19.411934,0.566268 -6.370726,9.901284 2.090163,1.615665 7.13671,-11.417403 0.303821,-0.4347 -2.942667,-0.02953 z m -12.091915,8.286013 c -5.729323,0 -10.367941,4.560169 -10.367941,10.184405 0,5.62429 4.638618,10.18489 10.367941,10.18489 5.729424,0 10.37654,-4.5606 10.37654,-10.18489 0,-5.624236 -4.647083,-10.184405 -10.37654,-10.184405 z m 0,2.473319 c 4.310029,0 7.811352,3.453552 7.811352,7.711086 0,4.25776 -3.50129,7.71167 -7.811352,7.71167 -4.310157,0 -7.803016,-3.45391 -7.803016,-7.71167 0,-4.257534 3.492859,-7.711086 7.803016,-7.711086 z m 3.528526,-21.795876 c -1.29032,-0.0066 -2.97525,0.03839 -3.402437,1.45155 l -0.01969,7.494437 c 0.586775,0.761915 1.42432,0.688978 2.236565,0.71411 l 26.529545,-0.14502 8.636784,0.761324 0,-7.518487 C 71.56989,75.908478 71.09444,75.467051 70.239377,75.338961 61.126027,73.734287 49.244756,73.929146 37.690371,73.911166 z M 20.959576,41.269176 c -0.0098,0.603377 0.575258,0.881409 0.575258,0.881409 L 58.95771,42.33629 c -4.893946,-0.985482 -16.592629,-2.859625 -32.835015,-2.783473 -1.570354,0.107617 -5.151439,1.109571 -5.163119,1.712718 z m 3.353022,14.276273 c -2.79955,0.01312 -5.595489,0.02953 -8.382964,0.05545 l 0,9.9e-5 0.0033,1.447677 -1.173484,0.01312 0.0066,1.244485 1.184048,0.05807 c -1.34298,0.220812 -2.956414,1.305807 -3.054779,3.476618 0.0098,3.269061 0.01312,6.538943 0.01312,9.808103 l -1.21197,0.0033 -0.01969,-2.361569 -4.6851755,0.0033 0,5.901969 4.6323185,0.0066 -0.02953,-1.7556 1.308596,-0.02297 0.0098,9.180447 c -0.0066,1.315781 2.739048,3.634336 4.542583,3.634336 l 4.811756,-2.995032 c 1.616583,-0.107617 1.758126,0.482078 1.884346,1.076924 l 35.667571,0.318914 6.909664,-0.81031 m 4.994738,-0.585889 85.216614,-9.991675 c 4.93952,-0.487623 14.9162,-22.255511 -3.75098,-25.556727 -5.12814,-0.887479 -15.53194,4.839613 -21.44018,9.104984 -2.31314,1.954593 -1.74166,4.084194 0.0263,5.982879 l -72.209399,-8.111923 -2.12281,-0.0012 c -0.966453,1.390128 -3.158262,3.260465 -4.554559,4.053123 M 49.36027,58.361483 c -1.699757,-1.038536 -2.965602,-2.804438 -4.533856,-2.875275 -3.903936,0.0011 -7.904399,0.0066 -11.882849,0.01312 m -3.081192,0.0066 c -1.043195,0.0033 -2.082715,0.0066 -3.116396,0.0098',
      stroke: '#000',
      strokeWidth: 1,
      lineCap: 'round',
      lineJoin: 'round'
    });

    layer.add(path);

    stage.add(layer);
  });

  //=======================================================
  test('complex path made of many different closed and open paths (Sopwith Camel) cached', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var path = new Konva.Path({
      data:
        'm 15.749277,58.447629 8.495831,-0.05348 m 0.319898,-15.826548 -0.202438,17.295748 0.942206,0.941911 1.345933,-1.816987 0.20211,-11.642611 z m 77.458374,28.680768 c 0,5.308829 -4.303525,9.612686 -9.612485,9.612686 -5.30873,0 -9.612194,-4.303857 -9.612194,-9.612686 0,-5.308829 4.303464,-9.61226 9.612194,-9.61226 5.30896,0 9.612485,4.303431 9.612485,9.61226 z m -3.520874,0 c 0,3.364079 -2.72763,6.091348 -6.091611,6.091348 -3.364243,0 -6.091119,-2.727269 -6.091119,-6.091348 0,-3.363719 2.726876,-6.090791 6.091119,-6.090791 3.363981,0 6.091611,2.727072 6.091611,6.090791 z m -3.997576,0 c 0,1.156718 -0.937743,2.093937 -2.094035,2.093937 -1.156062,0 -2.093871,-0.937219 -2.093871,-2.093937 0,-1.156357 0.937809,-2.093773 2.093871,-2.093773 1.156292,0 2.094035,0.937416 2.094035,2.093773 z m 45.77821,4.283023 c -0.24607,1.90039 5.06492,3.680204 7.61403,5.520093 0.50662,0.514199 0.27889,0.975967 -0.0984,1.427532 l 3.9019,-1.141987 c -0.59258,-0.121397 -1.85951,0.01969 -1.71294,-0.380038 -0.85894,-1.950525 -3.68693,-2.761261 -5.61518,-4.092495 -1.06971,-1.03496 0.0997,-1.60766 0.76126,-2.284203 z M 43.206396,42.60133 55.578964,74.008743 58.71987,73.910313 47.203939,44.40726 c -1.109013,-0.737406 -1.174108,-2.1004 -3.997543,-1.808752 z m -18.654022,-0.570632 12.467721,31.692335 3.140643,0.09843 -12.467656,-31.692927 z m 2.285318,42.353106 -2.636648,-0.06431 0.163066,0.734584 3.709372,9.956142 2.357927,-1.168202 z m 19.411934,0.566268 -6.370726,9.901284 2.090163,1.615665 7.13671,-11.417403 0.303821,-0.4347 -2.942667,-0.02953 z m -12.091915,8.286013 c -5.729323,0 -10.367941,4.560169 -10.367941,10.184405 0,5.62429 4.638618,10.18489 10.367941,10.18489 5.729424,0 10.37654,-4.5606 10.37654,-10.18489 0,-5.624236 -4.647083,-10.184405 -10.37654,-10.184405 z m 0,2.473319 c 4.310029,0 7.811352,3.453552 7.811352,7.711086 0,4.25776 -3.50129,7.71167 -7.811352,7.71167 -4.310157,0 -7.803016,-3.45391 -7.803016,-7.71167 0,-4.257534 3.492859,-7.711086 7.803016,-7.711086 z m 3.528526,-21.795876 c -1.29032,-0.0066 -2.97525,0.03839 -3.402437,1.45155 l -0.01969,7.494437 c 0.586775,0.761915 1.42432,0.688978 2.236565,0.71411 l 26.529545,-0.14502 8.636784,0.761324 0,-7.518487 C 71.56989,75.908478 71.09444,75.467051 70.239377,75.338961 61.126027,73.734287 49.244756,73.929146 37.690371,73.911166 z M 20.959576,41.269176 c -0.0098,0.603377 0.575258,0.881409 0.575258,0.881409 L 58.95771,42.33629 c -4.893946,-0.985482 -16.592629,-2.859625 -32.835015,-2.783473 -1.570354,0.107617 -5.151439,1.109571 -5.163119,1.712718 z m 3.353022,14.276273 c -2.79955,0.01312 -5.595489,0.02953 -8.382964,0.05545 l 0,9.9e-5 0.0033,1.447677 -1.173484,0.01312 0.0066,1.244485 1.184048,0.05807 c -1.34298,0.220812 -2.956414,1.305807 -3.054779,3.476618 0.0098,3.269061 0.01312,6.538943 0.01312,9.808103 l -1.21197,0.0033 -0.01969,-2.361569 -4.6851755,0.0033 0,5.901969 4.6323185,0.0066 -0.02953,-1.7556 1.308596,-0.02297 0.0098,9.180447 c -0.0066,1.315781 2.739048,3.634336 4.542583,3.634336 l 4.811756,-2.995032 c 1.616583,-0.107617 1.758126,0.482078 1.884346,1.076924 l 35.667571,0.318914 6.909664,-0.81031 m 4.994738,-0.585889 85.216614,-9.991675 c 4.93952,-0.487623 14.9162,-22.255511 -3.75098,-25.556727 -5.12814,-0.887479 -15.53194,4.839613 -21.44018,9.104984 -2.31314,1.954593 -1.74166,4.084194 0.0263,5.982879 l -72.209399,-8.111923 -2.12281,-0.0012 c -0.966453,1.390128 -3.158262,3.260465 -4.554559,4.053123 M 49.36027,58.361483 c -1.699757,-1.038536 -2.965602,-2.804438 -4.533856,-2.875275 -3.903936,0.0011 -7.904399,0.0066 -11.882849,0.01312 m -3.081192,0.0066 c -1.043195,0.0033 -2.082715,0.0066 -3.116396,0.0098',
      stroke: '#000',
      strokeWidth: 1,
      lineCap: 'round',
      lineJoin: 'round',
      draggable: true
    });

    layer.add(path);

    stage.add(layer);

    path.cache();
    layer.draw();
    //        layer.draw();
    cloneAndCompareLayer(layer, 230);
    showHit(layer);
  });

  // ======================================================
  test('moveTo with implied lineTos and trailing comma', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var path = new Konva.Path({
      data: 'm200,100,100,0,0,50,-100,0z',
      fill: '#fcc',
      //            stroke: '#333',
      //            strokeWidth: 2,
      shadowColor: 'maroon',
      shadowBlur: 2,
      shadowOffset: { x: 10, y: 10 },
      shadowOpacity: 1,
      draggable: true
    });

    path.on('mouseover', function() {
      this.setFill('red');
      layer.draw();
    });

    path.on('mouseout', function() {
      this.setFill('#ccc');
      layer.draw();
    });

    layer.add(path);

    stage.add(layer);

    assert.equal(path.getData(), 'm200,100,100,0,0,50,-100,0z');
    assert.equal(path.dataArray.length, 5);

    assert.equal(path.dataArray[1].command, 'L');

    var canvas = createCanvas();
    var context = canvas.getContext('2d');
    // stroke
    context.beginPath();
    context.moveTo(200, 100);
    context.lineTo(300, 100);
    context.lineTo(300, 150);
    context.lineTo(200, 150);
    context.closePath();
    context.fillStyle = '#fcc';
    context.shadowColor = 'maroon';
    context.shadowBlur = 2 * canvas.ratio;
    context.shadowOffsetX = 10 * canvas.ratio;
    context.shadowOffsetY = 10 * canvas.ratio;
    context.fill();
    //        context.stroke();
    compareLayerAndCanvas(layer, canvas, 20);
  });

  // ======================================================
  test('add map path', function() {
    var stage = addStage();
    var mapLayer = new Konva.Layer();

    for (var key in worldMap.shapes) {
      var c = worldMap.shapes[key];

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

      if (key === 'US') {
        assert.equal(path.dataArray[0].command, 'M');
      }

      path.on('mouseover', function() {
        this.setFill('red');
        mapLayer.drawScene();
      });

      path.on('mouseout', function() {
        this.setFill('#ccc');
        mapLayer.drawScene();
      });

      mapLayer.add(path);
    }

    stage.add(mapLayer);

    //document.body.appendChild(mapLayer.bufferCanvas.element);
  });

  // ======================================================
  test('curved arrow path', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c =
      'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z';

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

    path.on('mouseover', function() {
      this.setFill('red');
      layer.draw();
    });

    path.on('mouseout', function() {
      this.setFill('#ccc');
      layer.draw();
    });

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

  // ======================================================
  test('Quadradic Curve test from SVG w3c spec', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M200,300 Q400,50 600,300 T1000,300';

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

    layer.add(path);

    layer.add(
      new Konva.Circle({
        x: 200,
        y: 300,
        radius: 10,
        fill: 'black'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 600,
        y: 300,
        radius: 10,
        fill: 'black'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 1000,
        y: 300,
        radius: 10,
        fill: 'black'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 400,
        y: 50,
        radius: 10,
        fill: '#888'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 800,
        y: 550,
        radius: 10,
        fill: '#888'
      })
    );

    layer.add(
      new Konva.Path({
        data: 'M200,300 L400,50L600,300L800,550L1000,300',
        stroke: '#888',
        strokeWidth: 2
      })
    );

    stage.add(layer);
  });

  // ======================================================
  test('Cubic Bezier Curve test from SVG w3c spec using setData', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M100,200 C100,100 250,100 250,200 S400,300 400,200';

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

    path.setData(c);

    layer.add(path);

    layer.add(
      new Konva.Circle({
        x: 100,
        y: 200,
        radius: 10,
        stroke: '#888'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 250,
        y: 200,
        radius: 10,
        stroke: '#888'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 400,
        y: 200,
        radius: 10,
        stroke: '#888'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 100,
        y: 100,
        radius: 10,
        fill: '#888'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 250,
        y: 100,
        radius: 10,
        fill: '#888'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 400,
        y: 300,
        radius: 10,
        fill: '#888'
      })
    );

    layer.add(
      new Konva.Circle({
        x: 250,
        y: 300,
        radius: 10,
        stroke: 'blue'
      })
    );

    stage.add(layer);
  });

  // ======================================================
  test('path arc', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c =
      'M100,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25';

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

    path.on('mouseover', function() {
      this.setFill('red');
      layer.draw();
    });

    path.on('mouseout', function() {
      this.setFill('none');
      layer.draw();
    });

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

  // ======================================================
  test('Tiger (RAWR!)', function() {
    this.timeout(5000);
    var stage = addStage();
    var layer = new Konva.Layer();
    var group = new Konva.Group();

    for (var i = 0; i < tiger.length; i++) {
      var path = new Konva.Path(tiger[i]);
      group.add(path);
    }

    group.setDraggable(true);
    layer.add(group);
    stage.add(layer);

    showHit(layer);
  });

  // ======================================================
  test('Tiger (RAWR!) cached', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    var group = new Konva.Group();

    for (var i = 0; i < tiger.length; i++) {
      var path = new Konva.Path(tiger[i]);
      group.add(path);
    }

    group.setDraggable(true);
    layer.add(group);
    stage.add(layer);
    group.cache();
    layer.draw();

    showHit(layer);

    cloneAndCompareLayer(layer, 200);
  });

  // ======================================================
  test('Able to determine point on line some distance from another point on line', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M10,10 210,160';
    // i.e., from a 3-4-5 triangle

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

    path.setData(c);
    layer.add(path);

    layer.add(
      new Konva.Circle({
        x: 10,
        y: 10,
        radius: 10,
        fill: 'black'
      })
    );

    var p1 = Konva.Path.getPointOnLine(125, 10, 10, 210, 160);
    // should be 1/2 way, or (110,85)
    assert.equal(Math.round(p1.x), 110);
    assert.equal(Math.round(p1.y), 85);

    layer.add(
      new Konva.Circle({
        x: p1.x,
        y: p1.y,
        radius: 10,
        fill: 'blue'
      })
    );

    stage.add(layer);
  });

  // ======================================================
  test('Able to determine points on Cubic Bezier Curve', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M100,200 C100,100 250,100 250,200 S400,300 400,200';

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

    path.setData(c);

    layer.add(path);
    c = 'M 100 200';

    for (t = 0.25; t <= 1; t += 0.25) {
      var p1 = Konva.Path.getPointOnCubicBezier(
        t,
        100,
        200,
        100,
        100,
        250,
        100,
        250,
        200
      );
      c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
    }

    for (t = 0.25; t <= 1; t += 0.25) {
      var p1 = Konva.Path.getPointOnCubicBezier(
        t,
        250,
        200,
        250,
        300,
        400,
        300,
        400,
        200
      );
      c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
    }

    var testPath = new Konva.Path({
      stroke: 'black',
      strokewidth: 2,
      data: c
    });

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

  // ======================================================
  test('Able to determine points on Quadratic Curve', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M200,300 Q400,50 600,300 T1000,300';

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

    path.setData(c);

    layer.add(path);
    c = 'M 200 300';

    for (t = 0.333; t <= 1; t += 0.333) {
      var p1 = Konva.Path.getPointOnQuadraticBezier(
        t,
        200,
        300,
        400,
        50,
        600,
        300
      );
      c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
    }

    for (t = 0.333; t <= 1; t += 0.333) {
      var p1 = Konva.Path.getPointOnQuadraticBezier(
        t,
        600,
        300,
        800,
        550,
        1000,
        300
      );
      c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
    }

    var testPath = new Konva.Path({
      stroke: 'black',
      strokewidth: 2,
      data: c
    });

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

  // ======================================================
  test('Able to determine points on Elliptical Arc with clockwise stroke', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M 50,100 A 100 50 0 1 1 150 150';

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

    path.setData(c);

    layer.add(path);

    var centerParamPoints = Konva.Path.convertEndpointToCenterParameterization(
      50,
      100,
      150,
      150,
      1,
      1,
      100,
      50,
      0
    );

    var start = centerParamPoints[4];
    // 4 = theta
    var dTheta = centerParamPoints[5];
    // 5 = dTheta
    var end = centerParamPoints[4] + dTheta;
    var inc = Math.PI / 6.0;
    // 30 degree resolution

    var p1 = Konva.Path.getPointOnEllipticalArc(
      centerParamPoints[0],
      centerParamPoints[1],
      centerParamPoints[2],
      centerParamPoints[3],
      start,
      0
    );
    c = 'M ' + p1.x.toString() + ' ' + p1.y.toString();

    if (
      dTheta < 0 // clockwise
    ) {
      for (t = start - inc; t > end; t -= inc) {
        p1 = Konva.Path.getPointOnEllipticalArc(
          centerParamPoints[0],
          centerParamPoints[1],
          centerParamPoints[2],
          centerParamPoints[3],
          t,
          0
        );
        c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
      }
    } else {
      // counter-clockwise
      for (t = start + inc; t < end; t += inc) {
        p1 = Konva.Path.getPointOnEllipticalArc(
          centerParamPoints[0],
          centerParamPoints[1],
          centerParamPoints[2],
          centerParamPoints[3],
          t,
          0
        );
        c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
      }
    }
    p1 = Konva.Path.getPointOnEllipticalArc(
      centerParamPoints[0],
      centerParamPoints[1],
      centerParamPoints[2],
      centerParamPoints[3],
      end,
      0
    );
    c += ' ' + p1.x.toString() + ' ' + p1.y.toString();

    var testpath = new Konva.Path({
      stroke: 'black',
      strokeWidth: 2,
      data: c
    });

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

  // ======================================================
  test('Able to determine points on Elliptical Arc with counter-clockwise stroke', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var c = 'M 250,100 A 100 50 0 1 0 150 150';

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

    path.setData(c);

    layer.add(path);

    var centerParamPoints = Konva.Path.convertEndpointToCenterParameterization(
      250,
      100,
      150,
      150,
      1,
      0,
      100,
      50,
      0
    );

    var start = centerParamPoints[4];
    // 4 = theta
    var dTheta = centerParamPoints[5];
    // 5 = dTheta
    var end = centerParamPoints[4] + dTheta;
    var inc = Math.PI / 6.0;
    // 30 degree resolution

    var p1 = Konva.Path.getPointOnEllipticalArc(
      centerParamPoints[0],
      centerParamPoints[1],
      centerParamPoints[2],
      centerParamPoints[3],
      start,
      0
    );
    c = 'M ' + p1.x.toString() + ' ' + p1.y.toString();

    if (
      dTheta < 0 // clockwise
    ) {
      for (t = start - inc; t > end; t -= inc) {
        p1 = Konva.Path.getPointOnEllipticalArc(
          centerParamPoints[0],
          centerParamPoints[1],
          centerParamPoints[2],
          centerParamPoints[3],
          t,
          0
        );
        c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
      }
    } else {
      // counter-clockwise
      for (t = start + inc; t < end; t += inc) {
        p1 = Konva.Path.getPointOnEllipticalArc(
          centerParamPoints[0],
          centerParamPoints[1],
          centerParamPoints[2],
          centerParamPoints[3],
          t,
          0
        );
        c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
      }
    }
    p1 = Konva.Path.getPointOnEllipticalArc(
      centerParamPoints[0],
      centerParamPoints[1],
      centerParamPoints[2],
      centerParamPoints[3],
      end,
      0
    );
    c += ' ' + p1.x.toString() + ' ' + p1.y.toString();

    var testpath = new Konva.Path({
      stroke: 'black',
      strokeWidth: 2,
      data: c
    });

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

  // ======================================================
  test('Able to determine points on Elliptical Arc when rotated', 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: 3
    });

    path.setData(c);

    layer.add(path);

    var centerParamPoints = Konva.Path.convertEndpointToCenterParameterization(
      250,
      100,
      150,
      150,
      1,
      0,
      100,
      50,
      30
    );

    var start = centerParamPoints[4];
    // 4 = theta
    var dTheta = centerParamPoints[5];
    // 5 = dTheta
    var end = centerParamPoints[4] + dTheta;
    var inc = Math.PI / 6.0;
    // 30 degree resolution
    var psi = centerParamPoints[6];
    // 6 = psi radians

    var p1 = Konva.Path.getPointOnEllipticalArc(
      centerParamPoints[0],
      centerParamPoints[1],
      centerParamPoints[2],
      centerParamPoints[3],
      start,
      psi
    );
    c = 'M ' + p1.x.toString() + ' ' + p1.y.toString();

    if (
      dTheta < 0 // clockwise
    ) {
      for (t = start - inc; t > end; t -= inc) {
        p1 = Konva.Path.getPointOnEllipticalArc(
          centerParamPoints[0],
          centerParamPoints[1],
          centerParamPoints[2],
          centerParamPoints[3],
          t,
          psi
        );
        c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
      }
    } else {
      // counter-clockwise
      for (t = start + inc; t < end; t += inc) {
        p1 = Konva.Path.getPointOnEllipticalArc(
          centerParamPoints[0],
          centerParamPoints[1],
          centerParamPoints[2],
          centerParamPoints[3],
          t,
          psi
        );
        c += ' ' + p1.x.toString() + ' ' + p1.y.toString();
      }
    }
    p1 = Konva.Path.getPointOnEllipticalArc(
      centerParamPoints[0],
      centerParamPoints[1],
      centerParamPoints[2],
      centerParamPoints[3],
      end,
      psi
    );
    c += ' ' + p1.x.toString() + ' ' + p1.y.toString();

    var testpath = new Konva.Path({
      stroke: 'black',
      strokeWidth: 2,
      data: c
    });

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

  // ======================================================
  test('getPointOnLine for different directions', function() {
    var origo = {
      x: 0,
      y: 0
    };

    var p, point;

    //point up left
    p = {
      x: -10,
      y: -10
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(point.x < 0 && point.y < 0, 'The new point should be up left');

    //point up right
    p = {
      x: 10,
      y: -10
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(point.x > 0 && point.y < 0, 'The new point should be up right');

    //point down right
    p = {
      x: 10,
      y: 10
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(point.x > 0 && point.y > 0, 'The new point should be down right');

    //point down left
    p = {
      x: -10,
      y: 10
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(point.x < 0 && point.y > 0, 'The new point should be down left');

    //point left
    p = {
      x: -10,
      y: 0
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(point.x == -10 && point.y == 0, 'The new point should be left');

    //point up
    p = {
      x: 0,
      y: -10
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(
      Math.abs(point.x) < 0.0000001 && point.y == -10,
      'The new point should be up'
    );

    //point right
    p = {
      x: 10,
      y: 0
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(point.x == 10 && point.y == 0, 'The new point should be right');

    //point down
    p = {
      x: 0,
      y: 10
    };
    point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y);
    assert(
      Math.abs(point.x) < 0.0000001 && point.y == 10,
      'The new point should be down'
    );
  });

  // ======================================================
  test('get path length', function() {
    var path = new Konva.Path({ data: 'M 10,10 L 20,10 L 20,20' });
    assert.equal(path.getLength(), 20);
  });

  // ======================================================

  test('get point at path', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var path = new Konva.Path({
      stroke: 'red',
      strokeWidth: 3,
      data:
        'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150'
    });
    layer.add(path);

    var points = [];
    for (var i = 0; i < path.getLength(); i += 20) {
      var p = path.getPointAtLength(i);
      points.push(p);
      var circle = new Konva.Circle({
        x: p.x,
        y: p.y,
        radius: 2,
        fill: 'black',
        stroke: 'black'
      });
      layer.add(circle);
    }

    assert.deepEqual(points, [
      { x: 300, y: 10 },
      { x: 290.2871413779118, y: 27.48314552325543 },
      { x: 280.57428275582356, y: 44.96629104651086 },
      { x: 270.86142413373534, y: 62.4494365697663 },
      { x: 261.1485655116471, y: 79.93258209302172 },
      { x: 251.43570688955887, y: 97.41572761627717 },
      { x: 230.89220826660141, y: 87.23996356219386 },
      { x: 207.0639321224534, y: 74.08466390481559 },
      { x: 182.87529785963875, y: 63.52674972743341 },
      { x: 159.56025996483157, y: 56.104820499018956 },
      { x: 138.30820744216845, y: 52.197497135977514 },
      { x: 120.20328854394192, y: 52.00410710518156 },
      { x: 106.16910423342256, y: 55.53451596967142 },
      { x: 96.92159177720502, y: 62.60862410865827 },
      { x: 92.93250205472883, y: 72.86555428606191 },
      { x: 94.40533374670959, y: 85.78206137467119 },
      { x: 101.26495209131289, y: 100.69922508568548 },
      { x: 113.1614217949117, y: 116.85606400569954 },
      { x: 129.4878585660311, y: 133.42835616090537 },
      { x: 149.41138859764925, y: 149.5706857234721 },
      { x: 157.23649735164412, y: 135.43198059754286 },
      { x: 171.63472376239991, y: 124.16936108372946 },
      { x: 191.0783332798296, y: 116.67529781728555 },
      { x: 213.53990876948748, y: 112.94979079821127 },
      { x: 236.99203309692777, y: 112.99284002650663 },
      { x: 259.4072891277046, y: 116.80444550217156 },
      { x: 278.75825972737204, y: 124.3846072252061 },
      { x: 293.0175277614844, y: 135.7333251956102 }
    ]);

    stage.add(layer);
  });

  // ======================================================
  test('Borneo Map (has scientific notation: -10e-4)', function() {
    var stage = addStage();
    var layer = new Konva.Layer();

    var borneo = new Konva.Path({
      data:
        'm 136.68513,236.08861 c -0.63689,-0.67792 -0.75417,-1.28099 -1.03556,-5.32352 -0.26489,-3.80589 -0.4465,-4.81397 -1.09951,-6.1026 -0.51169,-1.00981 -0.98721,-1.54361 -1.375,-1.54361 -0.8911,0 -3.48931,-1.22828 -3.80975,-1.80103 -0.16294,-0.29089 -0.87295,-0.56825 -1.68693,-0.65886 -1.13423,-0.12629 -1.91094,0.0661 -4.02248,0.99633 -4.0367,1.77835 -5.46464,1.87106 -6.79674,0.44127 -0.51948,-0.55765 -0.64763,-1.12674 -0.64763,-2.87683 l 0,-2.18167 -0.87832,0.20996 c -0.48312,0.11549 -1.12041,0.33383 -1.41635,0.4852 -1.52799,0.78172 -4.61534,-0.0398 -5.55846,-1.47906 -0.30603,-0.46718 -1.06518,-1.19501 -1.68667,-1.61739 -1.27136,-0.86387 -1.62607,-0.6501 -1.63439,0.98494 -0.007,1.00822 -0.76687,2.38672 -1.31885,2.38672 -0.17579,0 -1.27182,0.66553 -2.4356,1.47895 -4.016775,2.8076 -6.006455,3.29182 -7.693525,1.87231 -0.52348,-0.44054 -1.43004,-1.00203 -2.01445,-1.24775 -1.35902,-0.57143 -2.10139,-0.21496 -5.36296,2.57523 -2.00259,1.71315 -2.55857,2.02869 -3.57441,2.02869 -0.66172,0 -1.31931,-0.17966 -1.46135,-0.39925 -0.27734,-0.42865 -0.75823,-5.15099 -0.87007,-8.54399 -0.0708,-2.14922 -0.41754,-3.83281 -0.78935,-3.83281 -0.1176,0 -0.45993,0.28746 -0.76078,0.63881 -0.66657,0.77849 -3.4572,0.87321 -4.70537,0.15969 -1.29782,-0.7419 -2.38029,-0.55672 -5.01545,0.85797 -2.16783,1.16385 -2.75945,1.33971 -4.5666,1.35746 -1.66762,0.0163 -2.276,-0.12217 -3.09174,-0.70405 -0.61985,-0.44211 -1.09397,-0.5977 -1.21663,-0.39925 -0.32993,0.53385 -2.25686,0.37294 -2.80642,-0.23436 -0.27856,-0.30774 -0.65658,-0.95453 -0.8401,-1.43731 -0.42448,-1.11632 -0.91809,-1.10316 -3.01531,0.0804 -0.93379,0.52702 -2.13107,0.9582 -2.66054,0.9582 -1.46554,0 -1.97734,-0.82307 -2.19476,-3.52955 -0.10515,-1.30865 -0.4137,-2.90864 -0.68575,-3.55553 -0.37975,-0.90312 -0.41736,-1.39768 -0.16196,-2.13038 0.35544,-1.01957 -0.24711,-3.50377 -1.40121,-5.77657 -0.48023,-0.94578 -0.50724,-1.33822 -0.19445,-2.82926 0.40575,-1.93441 -0.0409,-3.36568 -1.16059,-3.72114 -0.3255,-0.10331 -0.93466,-0.55279 -1.35374,-0.99885 -1.12569,-1.19829 -1.03821,-2.92553 0.22088,-4.35957 0.85079,-0.96896 1.01308,-1.45348 1.2082,-3.60666 l 0.22545,-2.48734 -1.16949,-1.19763 c -0.64324,-0.65869 -1.26203,-1.64897 -1.37517,-2.20061 -0.13388,-0.6528 -0.56813,-1.23242 -1.24372,-1.66009 l -1.03807,-0.65709 0,1.0782 c 0,0.59301 -0.21786,1.38922 -0.48413,1.76937 -0.68007,0.97099 -4.56312,2.96438 -5.77445,2.96438 -1.55729,0 -1.88611,-0.67097 -1.88611,-3.84837 0,-3.52819 0.41663,-4.13666 2.83284,-4.13666 1.49279,0 1.57631,-0.0396 1.09598,-0.51996 -0.4316,-0.43155 -0.69566,-0.4587 -1.55343,-0.15971 -0.56839,0.19815 -1.3354,0.35443 -1.70442,0.34729 -0.86278,-0.0167 -2.61563,-1.51607 -3.02205,-2.58498 -0.3513,-0.92403 -0.12267,-3.38466 0.34119,-3.67132 0.16474,-0.1018 -0.39367,-0.50661 -1.24085,-0.89959 -2.032471,-0.94281 -2.321421,-1.35146 -2.487701,-3.51839 -0.0772,-1.00533 -0.30119,-2.31552 -0.4979,-2.91152 -0.48076,-1.45668 -0.16499,-2.30832 0.90163,-2.43139 0.843711,-0.0974 0.860511,-0.14171 0.748911,-1.97594 -0.0696,-1.14269 0.0236,-1.96143 0.23793,-2.09396 0.47223,-0.29188 -2.501621,-3.97433 -3.330171,-4.12358 -0.34456,-0.062 -0.75956,-0.23921 -0.92229,-0.39365 -0.3459,-0.32835 -0.78945,-2.83658 -0.98794,-5.58637 -0.0769,-1.06517 -0.35848,-2.55647 -0.62576,-3.31402 -0.71739,-2.03331 -0.61465,-2.55112 0.76687,-3.86532 l 1.25273,-1.19173 -0.46915,-1.36178 c -0.53343,-1.54826 -0.33638,-2.99085 0.48923,-3.5815 0.65547,-0.46898 1.32731,-2.61652 1.52388,-4.87126 0.13191,-1.51252 0.2658,-1.7153 2.531131,-3.83281 2.21127,-2.06705 2.41106,-2.36144 2.64687,-3.89989 0.31881,-2.07979 0.74608,-2.60075 2.34208,-2.85597 0.69615,-0.11132 1.66359,-0.53718 2.14988,-0.94636 1.89204,-1.59201 4.16695,-1.77416 4.16695,-0.33363 0,0.40454 -0.23171,1.4157 -0.51499,2.24703 -0.28322,0.83134 -0.45486,1.57164 -0.38139,1.64512 0.0735,0.0735 1.32057,0.92807 2.77127,1.89909 2.57827,1.72574 2.68847,1.7655 4.89522,1.7655 1.74495,0 2.50706,-0.15424 3.35669,-0.67937 0.91121,-0.56315 1.2344,-0.61779 1.88934,-0.3194 0.43449,0.19798 1.19684,0.35997 1.69411,0.35997 1.03354,0 1.51204,0.45563 1.67033,1.59058 0.10938,0.78459
      fill: 'blue'
    });
    layer.add(borneo);
    stage.add(layer);
  });

  // ======================================================
  test('Stroke and fill when no closed', function() {
    // https://github.com/konvajs/konva/issues/150

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

    var path = new Konva.Path({
      data: 'M 50 0 C 50 150 170 170 200 170',
      stroke: 'black',
      fill: '#ff0000'
    });

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

    //console.log(trace);

    var hitTrace = layer.hitCanvas.getContext().getTrace();
    //console.log(hitTrace);

    assert.equal(
      trace,
      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);fillStyle=#ff0000;fill();lineWidth=2;strokeStyle=black;stroke();restore();'
    );
    assert.equal(
      hitTrace,
      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);save();fillStyle=black;fill();restore();lineWidth=2;strokeStyle=black;stroke();restore();'
    );
  });

  // ======================================================
  // 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

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

    var path = new Konva.Path({
      data: 'M10.5.5l10 10',
      stroke: 'black'
    });
    layer.add(path);

    stage.add(layer);

    var trace = layer.getContext().getTrace();

    assert.equal(
      trace,
      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(10.5,0.5);lineTo(20.5,10.5);lineWidth=2;strokeStyle=black;stroke();restore();'
    );
  });

  test('getClientRect', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var path = new Konva.Path({
      data: 'M61.55,184.55 60.55,280.55 164.55,284.55 151.55,192.55 Z',
      fill: 'black',
      stroke: 'red'
    });
    layer.add(path);
    var rect = path.getClientRect();
    assert.deepEqual(rect, { x: 60, y: 184, width: 106, height: 102 });
  });

  test('getClientRect of complex path', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var path = new Konva.Path({
      data:
        'M9.9,104.71l2.19-1.27a2,2,0,0,1,1.94,0l.5.29a.5.5,0,0,1,.21.67s0,0,0,0a.5.5,0,0,1-.19.19l-2.2,1.27a1.92,1.92,0,0,1-1.94,0l-.5-.29a.51.51,0,0,1-.21-.68l0,0A.52.52,0,0,1,9.9,104.71Zm4.85-1.9.5.29a1.92,1.92,0,0,0,1.94,0l2.19-1.27a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0l-2.2,1.27a.5.5,0,0,0-.21.67s0,0,0,0a.5.5,0,0,0,.19.19Zm4.86-2.8.5.29a1.92,1.92,0,0,0,1.94,0L24.25,99a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0l-2.19,1.27a.5.5,0,0,0-.21.67s0,0,0,0a.5.5,0,0,0,.19.19Zm4.85-2.8.5.29a2,2,0,0,0,2,0l2.21-1.27a.52.52,0,0,0,.21-.68s0,0,0,0a.57.57,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0L24.51,96.3a.5.5,0,0,0-.25.66s0,0,0,0a.49.49,0,0,0,.18.2Zm4.86-2.8.5.29a2,2,0,0,0,1.94,0L34,93.43a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0L29.32,93.5a.52.52,0,0,0-.18.72A.47.47,0,0,0,29.32,94.41Zm4.85-2.81.5.29a1.92,1.92,0,0,0,1.94,0l2.2-1.26A.52.52,0,0,0,39,90s0,0,0,0a.57.57,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0l-2.2,1.26a.5.5,0,0,0-.22.67l0,0A.5.5,0,0,0,34.17,91.6ZM39,88.8l.5.29a1.92,1.92,0,0,0,1.94,0l2.21-1.26a.53.53,0,0,0,.18-.73.77.77,0,0,0-.18-.18l-.5-.29a2,2,0,0,0-1.94,0L39,87.9a.5.5,0,0,0-.23.67l0,0a.52.52,0,0,0,.19.2ZM43.88,86l.5.29a1.92,1.92,0,0,0,1.94,0L48.52,85a.52.52,0,0,0,.21-.68l0,0a.57.57,0,0,0-.19-.19l-.5-.29a2,2,0,0,0-2,0L43.83,85.1a.49.49,0,0,0-.17.69h0a.44.44,0,0,0,.2.18Zm4.85-2.8.5.29a1.92,1.92,0,0,0,1.94,0l2.19-1.27a.52.52,0,0,0,.21-.68l0,0a.57.57,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0L48.73,82.3a.5.5,0,0,0-.2.68l0,0a.47.47,0,0,0,.18.19Zm4.86-2.8.5.29a1.92,1.92,0,0,0,1.94,0l2.2-1.27a.52.52,0,0,0,.21-.68s0,0,0,0a.57.57,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0L53.6,79.5a.5.5,0,0,0-.21.68l0,0a.58.58,0,0,0,.19.19Zm4.85-2.8.5.29a2,2,0,0,0,2,0l2.19-1.27a.52.52,0,0,0,.21-.68s0,0,0,0a.57.57,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0l-2.2,1.27a.49.49,0,0,0-.25.66.08.08,0,0,0,0,0,.49.49,0,0,0,.18.2Zm4.86-2.8.5.29a2,2,0,0,0,1.94,0l2.2-1.27a.52.52,0,0,0,.21-.68s0,0,0,0a.57.57,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0l-2.19,1.26a.53.53,0,0,0-.19.73h0a.52.52,0,0,0,.18.18ZM68.15,72l.5.29a1.92,1.92,0,0,0,1.94,0L72.79,71a.52.52,0,0,0,.21-.68l0,0a.57.57,0,0,0-.19-.19l-.5-.29a1.92,1.92,0,0,0-1.94,0l-2.2,1.26a.5.5,0,0,0-.22.67l0,0A.5.5,0,0,0,68.15,72ZM73,69.19l.5.29a1.92,1.92,0,0,0,1.94,0l2.19-1.26a.53.53,0,0,0,.18-.73.7.7,0,0,0-.15-.19l-.5-.29a2,2,0,0,0-1.94,0L73,68.3a.49.49,0,0,0-.22.67s0,0,0,0a.5.5,0,0,0,.19.19ZM12.94,107.37l2.2,1.27a2,2,0,0,0,1.94,0l2.2-1.27a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-2.2-1.27a1.92,1.92,0,0,0-1.94,0l-2.2,1.27a.5.5,0,0,0-.21.67s0,0,0,0A.5.5,0,0,0,12.94,107.37Zm4.86-2.8L20,105.83a1.92,1.92,0,0,0,1.94,0l2.2-1.26a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-2.2-1.27a1.92,1.92,0,0,0-1.94,0l-2.19,1.27a.5.5,0,0,0-.17.69s0,0,0,0a.54.54,0,0,0,.15.15Zm4.85-2.8,2.2,1.26a1.92,1.92,0,0,0,1.94,0L29,101.77a.54.54,0,0,0,.19-.73.66.66,0,0,0-.19-.18L26.79,99.6a1.92,1.92,0,0,0-1.94,0l-2.18,1.26a.52.52,0,0,0-.19.72.58.58,0,0,0,.19.19ZM27.51,99l2.19,1.27a1.92,1.92,0,0,0,1.94,0L33.84,99a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19L31.67,96.8a1.92,1.92,0,0,0-1.94,0l-2.19,1.26a.5.5,0,0,0-.22.67l0,0a.5.5,0,0,0,.19.19Zm4.85-2.8,2.2,1.27a1.92,1.92,0,0,0,1.94,0l2.19-1.27a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19L36.5,94a2,2,0,0,0-1.94,0l-2.2,1.27a.5.5,0,0,0-.21.67s0,0,0,0A.5.5,0,0,0,32.36,96.16Zm4.86-2.8,2.19,1.27a1.92,1.92,0,0,0,1.94,0l2.2-1.27a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-2.2-1.27a2,2,0,0,0-1.94,0l-2.19,1.27a.5.5,0,0,0-.21.67l0,0A.5.5,0,0,0,37.22,93.36Zm4.85-2.8,2.2,1.27a2,2,0,0,0,1.94,0l2.19-1.27a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-2.19-1.27a1.92,1.92,0,0,0-1.94,0l-2.2,1.27a.5.5,0,0,0-.2.68.48.48,0,0,0,.2.2Zm4.85-2.8L49.12,89a2,2,0,0,0,1.94,0l2.2-1.27a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19l-2.2-1.27a1.92,1.92,0,0,0-1.94,0l-2.2,1.27a.5.5,0,0,0-.21.67s0,0,0,0A.5.5,0,0,0,46.92,87.76ZM51.78,85,54,86.22a1.94,1.94,0,0,0,2,0L58.16,85a.51.51,0,0,0,.21-.68l0,0a.44.44,0,0,0-.19-.19L56,82.8a1.94,1.94,0,0,0-2,0l-2.19,1.27a.5.5,0,0,0-.21.67s0,0,0,0a.5.5,0,0,0,.19.
      fill: 'black',
      stroke: 'red'
    });
    layer.add(path);
    var rect = path.getClientRect();

    var back = new Konva.Rect({
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height,
      stroke: 'red'
    });
    layer.add(back);
    layer.draw();

    assert.deepEqual(rect, { x: 9, y: 66, width: 95, height: 55 });
  });

  test('getClientRect of another complex path', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var path = new Konva.Path({
      x: 50,
      y: 50,
      data:
        'M0,29 C71,-71,142,128,213,29 L213,207 C142,307,71,108,0,207 L0,29 Z',
      fill: 'black',
      stroke: 'red',
      scaleY: 0.3
    });
    layer.add(path);
    var rect = path.getClientRect();

    var back = new Konva.Rect({
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height,
      stroke: 'red'
    });
    layer.add(back);
    layer.draw();

    assert.deepEqual(rect, {
      x: 49,
      y: 49.7,
      width: 215,
      height: 71.39999999999999
    });
  });

  test('getClientRect of one more path', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var path = new Konva.Path({
      x: 50,
      y: 50,
      data:
        'M25.21,2.36C22.11,6.1,19,10.17,22.1,15.52a2.14,2.14,0,0,1,.22.69c.18,1.09-.52,1.31-1.31,1.11C19.88,17,19.29,16,18.55,15.21a12.71,12.71,0,0,0-7.82-4.28c-3.24-.42-7.9,1.26-9,3.68-2.24,5-2.64,10.23.66,14.94a26,26,0,0,0,11.57,9c6.17,2.56,12.6,4.45,18.67,7.28,1.33.62,1.67-.14,2.11-1.12,3.84-8.44,5.64-17.32,6-28.25.53-3.82-1.37-8.64-4.3-13.12C33.91-.58,28.2-1.24,25.21,2.36Z',
      fill: 'black',
      stroke: 'red'
    });
    layer.add(path);
    var rect = path.getClientRect();

    var back = new Konva.Rect({
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height,
      stroke: 'red'
    });
    layer.add(back);
    layer.draw();

    assert.deepEqual(rect, { x: 49, y: 49, width: 43, height: 48 });
  });

  test('getClientRect for arc', function() {
    var stage = addStage();
    var layer = new Konva.Layer();
    stage.add(layer);

    var path = new Konva.Path({
      data:
        'M -12274.95703125 17975.16015625 C -12271.4072265625 17975.16015625 -12268.017578125 17974.345703125 -12264.8837890625 17972.740234375 C -12261.892578125 17971.208984375 -12259.24609375 17968.97265625 -12257.2314453125 17966.2734375 L -12256.775390625 17965.662109375 L -12256.0654296875 17965.939453125 C -12253.494140625 17966.947265625 -12250.7783203125 17967.45703125 -12247.9921875 17967.45703125 C -12245.01171875 17967.45703125 -12242.1201171875 17966.873046875 -12239.396484375 17965.720703125 C -12236.765625 17964.607421875 -12234.4013671875 17963.013671875 -12232.3701171875 17960.982421875 C -12230.3388671875 17958.953125 -12228.7431640625 17956.587890625 -12227.62890625 17953.95703125 C -12226.4755859375 17951.232421875 -12225.890625 17948.337890625 -12225.890625 17945.35546875 C -12225.890625 17941.30859375 -12226.99609375 17937.349609375 -12229.0888671875 17933.90625 C -12231.12109375 17930.5625 -12234.01171875 17927.802734375 -12237.447265625 17925.927734375 L -12237.849609375 17925.708984375 L -12237.9462890625 17925.26171875 C -12238.99609375 17920.408203125 -12241.708984375 17915.994140625 -12245.5830078125 17912.83203125 C -12247.5146484375 17911.2578125 -12249.6748046875 17910.029296875 -12252.0068359375 17909.18359375 C -12254.41796875 17908.306640625 -12256.9541015625 17907.86328125 -12259.54296875 17907.86328125 C -12263.171875 17907.86328125 -12266.7568359375 17908.75390625 -12269.9111328125 17910.44140625 L -12270.556640625 17910.78515625 L -12271.0810546875 17910.275390625 C -12275.2353515625 17906.2265625 -12280.7138671875 17903.99609375 -12286.5078125 17903.99609375 C -12288.9462890625 17903.99609375 -12291.34375 17904.390625 -12293.630859375 17905.171875 C -12295.84375 17905.92578125 -12297.916015625 17907.0234375 -12299.791015625 17908.4375 C -12301.646484375 17909.8359375 -12303.2646484375 17911.509765625 -12304.599609375 17913.41015625 C -12305.9541015625 17915.3359375 -12306.984375 17917.44921875 -12307.6640625 17919.69140625 L -12307.8193359375 17920.203125 L -12308.3310546875 17920.359375 C -12310.5712890625 17921.0390625 -12312.6826171875 17922.068359375 -12314.6044921875 17923.421875 C -12316.501953125 17924.755859375 -12318.1708984375 17926.37109375 -12319.56640625 17928.224609375 C -12322.466796875 17932.078125 -12324 17936.671875 -12324 17941.51171875 C -12324 17944.498046875 -12323.416015625 17947.392578125 -12322.2646484375 17950.1171875 C -12321.15234375 17952.75 -12319.55859375 17955.11328125 -12317.529296875 17957.142578125 C -12315.5 17959.171875 -12313.1376953125 17960.765625 -12310.505859375 17961.876953125 C -12307.7822265625 17963.029296875 -12304.8876953125 17963.61328125 -12301.90234375 17963.61328125 C -12299.7900390625 17963.61328125 -12297.71875 17963.322265625 -12295.744140625 17962.74609375 L -12294.95703125 17962.517578125 L -12294.578125 17963.24609375 C -12292.7373046875 17966.78125 -12289.9716796875 17969.759765625 -12286.580078125 17971.861328125 C -12283.095703125 17974.01953125 -12279.076171875 17975.16015625 -12274.95703125 17975.16015625 M -12274.95703125 17976.16015625 C -12283.8671875 17976.16015625 -12291.609375 17971.11328125 -12295.46484375 17963.70703125 C -12297.50390625 17964.30078125 -12299.66796875 17964.61328125 -12301.90234375 17964.61328125 C -12314.6640625 17964.61328125 -12325 17954.27734375 -12325 17941.51171875 C -12325 17931.08203125 -12318.1015625 17922.27734375 -12308.62109375 17919.40234375 C -12305.74609375 17909.91015625 -12296.92578125 17902.99609375 -12286.5078125 17902.99609375 C -12280.234375 17902.99609375 -12274.54296875 17905.50390625 -12270.3828125 17909.55859375 C -12267.15234375 17907.83203125 -12263.46484375 17906.86328125 -12259.54296875 17906.86328125 C -12248.48046875 17906.86328125 -12239.21875 17914.65234375 -12236.96875 17925.05078125 C -12229.78125 17928.97265625 -12224.890625 17936.58984375 -12224.890625 17945.35546875 C -12224.890625 17958.11328125 -12235.25 17968.45703125 -12247.9921875 17968.45703125 C -12250.96875 17968.45703125 -12253.81640625 17967.89453125 -12256.4296875 17966.87109375 C -12260.640625 17
      fill: 'black',
      stroke: 'blue',
      strokeWidth: 10
    });
    layer.add(path);
    var rect = path.getClientRect();

    var scale = stage.height() / rect.height / 2;

    path.x(-rect.x * scale);
    path.y(-rect.y * scale);
    path.scaleX(scale);
    path.scaleY(scale);

    rect = path.getClientRect();

    var back = new Konva.Rect({
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height,
      stroke: 'red'
    });
    layer.add(back);
    layer.draw();

    assert.deepEqual(rect, {
      x: 0,
      y: 0,
      width: 132.53012048192795,
      height: 100
    });
  });
});