(window as any).Drawing = {};

(window as any).Drawing.svgPathFromPoints = function (pts: { forEach: (arg0: (p: any) => void) => void }) {

  let out = "";

  pts.forEach(function (p: Number[] | { elements: Number[] }) {

    let x, y;

    if ((p as any).elements) {

      // for vec2

      [x, y] = (p as any).elements;

    } else {

      [x, y] = p as Number[];

    }

    if (out.length === 0) {

      out = "M ";

    } else {

      out += "L ";

    }

    out += "" + x + "," + y + " ";

  });

  return out;

};

(window as any).Drawing.line = function (

  ctx: { moveTo: (arg0: any, arg1: any) => void; lineTo: (arg0: any, arg1: any) => any },

  p1: { e: (arg0: number) => any },

  p2: { e: (arg0: number) => any }

) {

  ctx.moveTo(p1.e(1), p1.e(2));

  return ctx.lineTo(p2.e(1), p2.e(2));

};

// http://stackoverflow.com/a/4959890

(window as any).Drawing.roundRect = function (

  ctx: {

    beginPath: () => void;

    moveTo: (arg0: any, arg1: any) => void;

    lineTo: (arg0: number, arg1: number) => void;

    arc: (arg0: number, arg1: number, arg2: any, arg3: number, arg4: number, arg5: boolean) => void;

    closePath: () => any;

  },

  sx: number,

  sy: number,

  ex: number,

  ey: number,

  r: number

) {

  const d2r = Math.PI / 180;

  if (ex - sx - 2 * r < 0) {

    r = (ex - sx) / 2;

  } // ensure that the radius isn't too large for x

  if (ey - sy - 2 * r < 0) {

    r = (ey - sy) / 2;

  } // ensure that the radius isn't too large for y

  ctx.beginPath();

  ctx.moveTo(sx + r, sy);

  ctx.lineTo(ex - r, sy);

  ctx.arc(ex - r, sy + r, r, d2r * 270, d2r * 360, false);

  ctx.lineTo(ex, ey - r);

  ctx.arc(ex - r, ey - r, r, d2r * 0, d2r * 90, false);

  ctx.lineTo(sx + r, ey);

  ctx.arc(sx + r, ey - r, r, d2r * 90, d2r * 180, false);

  ctx.lineTo(sx, sy + r);

  ctx.arc(sx + r, sy + r, r, d2r * 180, d2r * 270, false);

  return ctx.closePath();

};