loading canvas: dual ring

Dual Ring.js

class Canvas {
  constructor(options) {
    this.baseInterval = 1 / 60;
    Object.assign(this, options);
    this.draw = (view, ctx) => {
      ctx.strokeColor = this.tintColor;
      const radius = Math.min(view.frame.width, view.frame.height);
      ctx.setLineWidth(20);
      ctx.setLineCap(1);
      ctx.setLineJoin(1);
      ctx.addArc(
        radius / 2,
        radius / 2,
        radius / 2 - 20,
        this.startAngle,
        this.startAngle + (Math.PI * 2 * 1) / 4
      );
      ctx.strokePath()
      
    };
    this.ready = async sender => {
      while (sender.super) {
        this.startAngle += Math.PI * this.baseInterval * this.times;
        sender.runtimeValue().invoke("setNeedsDisplay");
        await $wait(this.baseInterval);
      }
    };
    this.layout = $layout.fill;
  }

  get definition() {
    return {
      type: "canvas",
      props: {
        id: this.id,
        alpha: 1
      },
      layout: this.layout,
      events: {
        draw: this.draw,
        ready: this.ready
      }
    };
  }
}

function defineWedges(layout) {
  const canvas1 = new Canvas({
    id: "canvas1",
    tintColor: $color("#f5542e"),
    times: 2,
    startAngle: -Math.PI * 3 / 4
  });
  const canvas2 = new Canvas({
    id: "canvas2",
    tintColor: $color("#f2c327"),
    times: 2,
    startAngle: Math.PI / 4
  });
  const wedges = {
    type: "view",
    views: [
      canvas1.definition,
      canvas2.definition
    ],
    layout
  };
  return wedges;
}

module.exports = defineWedges;

// example
const wedges = defineWedges((make, view) => {
  make.size.equalTo($size(200, 200));
  make.center.equalTo(view.super);
});

$ui.render({
  props: {
    title: ""
  },
  views: [wedges]
});


// aa