konva/test/unit/FastLayer-test.js

suite('FastLayer', function () {
  // ======================================================
  test('basic render', function () {
    var stage = addStage();

    var layer = new Konva.FastLayer();

    var circle = new Konva.Circle({
      x: 100,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4,
    });

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

  test('should not throw on shape render', function () {
    var stage = addStage();

    var layer = new Konva.FastLayer();

    var circle = new Konva.Circle({
      x: 100,
      y: stage.getHeight() / 2,
      radius: 70,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4,
    });

    layer.add(circle);
    stage.add(layer);

    circle.draw();
  });

  test('transform', function () {
    var stage = addStage();

    var fastLayer = new Konva.FastLayer({
      x: stage.width() / 2,
      y: stage.height() / 2,
    });

    var layer = new Konva.Layer({
      x: stage.width() / 2,
      y: stage.height() / 2,
    });

    var circle = new Konva.Circle({
      radius: 70,
      fill: 'green',
    });

    fastLayer.add(circle);
    layer.add(circle.clone());
    stage.add(layer, fastLayer);

    compareLayers(fastLayer, layer);
  });

  test('cache shape on fast layer', function () {
    var stage = addStage();
    var layer = new Konva.FastLayer();

    var circle = new Konva.Circle({
      x: 74,
      y: 74,
      radius: 70,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 4,
      name: 'myCircle',
    });

    layer.add(circle);
    stage.add(layer);

    circle
      .cache({
        x: -74,
        y: -74,
        width: 148,
        height: 148,
      })
      .offset({
        x: 74,
        y: 74,
      });

    layer.draw();
  });
});