/** 
  github: https://github.com/pengfeiw/miracle-canvas
  npm: https://www.npmjs.com/package/miracle-canvas
  demo: https://github.com/pengfeiw/miracle-canvas-demo
*/

const {
  Miracle,
  MiracleEntity,
  MiracleGraphic,
  MiracleControl
} = GlobalMiracle;
const { Circle, PolyShape, Image: MiracleImage } = MiracleEntity;
const { Point } = MiracleGraphic;
const { ImageControl, ControlBase } = MiracleControl;

const canvas = document.getElementById("canvas");

// create miracle
const miracle = new Miracle(canvas);

// create button
const button1 = new ImageControl(
  "https://cdn.jsdelivr.net/gh/pengfeiw/personal-image-cdn@1.0.0/image/delete.svg",
  { width: 115, height: 24 },
  ControlBase.lt,
  -124,
  0
);
const button2 = new ImageControl(
  "https://cdn.jsdelivr.net/gh/pengfeiw/personal-image-cdn@1.0.0/image/signature.svg",
  { width: 115, height: 24 },
  ControlBase.lt,
  -124,
  28
);

button1.mouseUpHandler = () => {
  alert("button1 click");
};
button2.mouseUpHandler = () => {
  alert("button2 click");
};

// create entity
const rect = new PolyShape(
  [
    new Point(150, 30),
    new Point(200, 30),
    new Point(200, 120),
    new Point(150, 120)
  ],
  false
);
rect.filled = false;
rect.closed = true;

rect.addControl(button1, button2);

const circle = new Circle(new Point(500, 400), 50);
circle.strokeStyle = "green";

const triangle = new PolyShape([
  new Point(100, 100),
  new Point(150, 150),
  new Point(100, 200)
]);
triangle.filled = true;
triangle.closed = true;
triangle.fillStyle = "gray";

const img = new MiracleImage(
  new Point(100, 300),
  "https://pengfeixc.com:3301/static/avatar/1617161027894.jpg",
  {
    height: 300,
    width: 300
  }
);

miracle.addEntity(circle, rect, triangle, img);