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

suite('RegularPolygon', function () {
  // ======================================================
  test('add regular polygon triangle', function () {
    var stage = addStage();

    var layer = new Konva.Layer();

    var poly = new Konva.RegularPolygon({
      x: 200,
      y: 100,
      sides: 3,
      radius: 50,
      fill: 'green',
      stroke: 'blue',
      strokeWidth: 5,
      name: 'foobar',
      center: {
        x: 0,
        y: -50,
      },
    });

    layer.add(poly);
    stage.add(layer);

    assert.equal(poly.getClassName(), 'RegularPolygon');
  });

  // ======================================================
  test('add regular polygon square', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var poly = new Konva.RegularPolygon({
      x: 200,
      y: 100,
      sides: 4,
      radius: 50,
      fill: 'green',
      stroke: 'blue',
      strokeWidth: 5,
      name: 'foobar',
    });

    layer.add(poly);
    stage.add(layer);

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

    assert.equal(
      trace,
      'clearRect(0,0,578,200);save();transform(1,0,0,1,200,100);beginPath();moveTo(0,-50);lineTo(50,0);lineTo(0,50);lineTo(-50,0);closePath();fillStyle=green;fill();lineWidth=5;strokeStyle=blue;stroke();restore();'
    );
  });

  // ======================================================
  test('add regular polygon pentagon', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var poly = new Konva.RegularPolygon({
      x: 200,
      y: 100,
      sides: 5,
      radius: 50,
      fill: 'green',
      stroke: 'blue',
      strokeWidth: 5,
      name: 'foobar',
    });

    layer.add(poly);
    stage.add(layer);

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

    assert.equal(
      trace,
      'clearRect(0,0,578,200);save();transform(1,0,0,1,200,100);beginPath();moveTo(0,-50);lineTo(47.553,-15.451);lineTo(29.389,40.451);lineTo(-29.389,40.451);lineTo(-47.553,-15.451);closePath();fillStyle=green;fill();lineWidth=5;strokeStyle=blue;stroke();restore();'
    );
  });

  // ======================================================
  test('add regular polygon octogon', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var poly = new Konva.RegularPolygon({
      x: 200,
      y: 100,
      sides: 8,
      radius: 50,
      fill: 'green',
      stroke: 'blue',
      strokeWidth: 5,
      name: 'foobar',
    });

    layer.add(poly);
    stage.add(layer);

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

    assert.equal(
      trace,
      'clearRect(0,0,578,200);save();transform(1,0,0,1,200,100);beginPath();moveTo(0,-50);lineTo(35.355,-35.355);lineTo(50,0);lineTo(35.355,35.355);lineTo(0,50);lineTo(-35.355,35.355);lineTo(-50,0);lineTo(-35.355,-35.355);closePath();fillStyle=green;fill();lineWidth=5;strokeStyle=blue;stroke();restore();'
    );
  });

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

    var poly = new Konva.RegularPolygon({
      x: 200,
      y: 100,
      sides: 5,
      radius: 50,
      fill: 'green',
      stroke: 'blue',
      strokeWidth: 5,
      name: 'foobar',
    });

    layer.add(poly);
    stage.add(layer);

    assert.equal(poly.getWidth(), 100);
    assert.equal(poly.getHeight(), 100);

    poly.setWidth(120);
    assert.equal(poly.radius(), 60);
    assert.equal(poly.getHeight(), 120);

    poly.setHeight(140);
    assert.equal(poly.radius(), 70);
    assert.equal(poly.getHeight(), 140);
  });

  test('polygon cache', function () {
    Konva.pixelRatio = 1;
    var stage = addStage();
    var layer = new Konva.Layer();

    var poly = new Konva.RegularPolygon({
      x: 200,
      y: 100,
      sides: 5,
      radius: 50,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 5,
      name: 'foobar',
    });
    poly.cache();
    layer.add(poly);
    stage.add(layer);

    assert.deepEqual(poly.getSelfRect(), {
      x: -47.55282581475768,
      y: -50,
      height: 90.45084971874738,
      width: 95.10565162951536,
    });

    cloneAndCompareLayer(layer, 254);
    Konva.pixelRatio = undefined;
  });

  test('triangle - bounding box', function () {
    var stage = addStage();

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

    var poly = new Konva.RegularPolygon({
      x: 200,
      y: 100,
      sides: 3,
      radius: 50,
      fill: 'green',
      stroke: 'blue',
      strokeWidth: 5,
      name: 'foobar',
    });

    layer.add(poly);

    var tr = new Konva.Transformer({
      nodes: [poly],
    });
    layer.add(tr);

    layer.draw();

    var box = poly.getClientRect();

    assert.equal(box.width, 92.60254037844388);
    assert.equal(box.height, 81.00000000000003);
  });
});