konva/test/unit/RegularPolygon-test.ts

import { assert } from 'chai';

import {
  addStage,
  Konva,
  cloneAndCompareLayer,
  assertAlmostEqual,
  createCanvas,
  compareLayerAndCanvas,
} from './test-utils';

describe('RegularPolygon', function () {
  // ======================================================
  it('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');
  });

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

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

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

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

  it('polygon cache', 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: '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);
  });

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

    assertAlmostEqual(box.width, 91.60254037844388);
    assertAlmostEqual(box.height, 80.00000000000003);
  });

  // ======================================================
  it('limit corner radius', function () {
    var stage = addStage();
    var layer = new Konva.Layer();
    var sides = 5;
    var radius = 50;

    var poly = new Konva.RegularPolygon({
      x: 100,
      y: 100,
      sides: sides,
      radius: radius,
      fill: 'black',
      cornerRadius: 25,
    });
    var resultCircleRadius = radius * Math.cos(Math.PI / sides);
    
    layer.add(poly);
    stage.add(layer);
   
    // corner radius creates perfect circle at 1/2 radius
    var canvas = createCanvas();
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(100, 100, resultCircleRadius, 0, Math.PI * 2);
    context.fillStyle = 'black';
    context.fill();
    compareLayerAndCanvas(layer, canvas, 200);
  });

  // ======================================================
  it('negative polygon radius with cornerRadius', function () {
    var stage = addStage();
    var layer = new Konva.Layer();

    var poly = new Konva.RegularPolygon({
      x: 100,
      y: 100,
      sides: 5,
      radius: -100,
      fill: 'black',
      cornerRadius: 20,
    });

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

    var trace = layer.getContext().getTrace();
    assert.equal(
      trace,
      'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();moveTo(26.18,80.979);arcTo(0,100,-26.18,80.979,32.361);lineTo(-68.925,49.923);arcTo(-95.106,30.902,-85.106,0.125,32.361);lineTo(-68.779,-50.125);arcTo(-58.779,-80.902,-26.418,-80.902,32.361);lineTo(26.418,-80.902);arcTo(58.779,-80.902,68.779,-50.125,32.361);lineTo(85.106,0.125);arcTo(95.106,30.902,68.925,49.923,32.361);closePath();fillStyle=black;fill();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();moveTo(26.18,80.979);arcTo(0,100,-26.18,80.979,32.361);lineTo(-68.925,49.923);arcTo(-95.106,30.902,-85.106,0.125,32.361);lineTo(-68.779,-50.125);arcTo(-58.779,-80.902,-26.418,-80.902,32.361);lineTo(26.418,-80.902);arcTo(58.779,-80.902,68.779,-50.125,32.361);lineTo(85.106,0.125);arcTo(95.106,30.902,68.925,49.923,32.361);closePath();fillStyle=black;fill();restore();'
    );
  });
});