Use ECS to refactor current Shape mixins

[xiaoiver]

We use mixins now.

export const Shape = Shapable(Renderable(Sortable(Transformable(EventTarget))));
const shape = new Shape();

Bevy ECS makes Bevy’s API so elegant.

const shape = world.spawn(Renderable, Sortable, Transformable);

There're so many ECS architectural implementations for JS/TS. I found becsy is the most special one even if its multi-threading feature is not yet implemented.

Other options: https://github.com/pmndrs/koota

[xiaoiver]

The new API will look more like the following (bevy style):

const camera = this.commands.spawn(new Camera(), new Transform());

const parent = this.commands.spawn(
  new Transform(),
  new Renderable(),
  new FillSolid('red'),
  new Circle({ cx: 0, cy: 0, r: 100 }),
);
const child = this.commands.spawn(
  new Transform(),
  new Renderable(),
  new FillSolid('green'),
  new Stroke({
    color: 'black',
    width: 10,
    alignment: 'center',
    dasharray: [10, 10],
  }),
  new Wireframe(true),
  new Circle({ cx: 0, cy: 0, r: 50 }),
);
parent.appendChild(child);

camera.appendChild(parent);