--- a/light9/web/timeline/drawing.coffee	Fri May 13 22:25:46 2022 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,35 +0,0 @@
-
-window.Drawing = {}
-  
-window.Drawing.svgPathFromPoints = (pts) ->
-  out = ''
-  pts.forEach (p) ->
-    p = p.elements if p.elements # for vec2
-    if out.length == 0
-      out = 'M '
-    else
-      out += 'L '
-    out += '' + p[0] + ',' + p[1] + ' '
-    return
-  out
-
-window.Drawing.line = (ctx, p1, p2) ->
-  ctx.moveTo(p1.e(1), p1.e(2))
-  ctx.lineTo(p2.e(1), p2.e(2))
-
-# http://stackoverflow.com/a/4959890
-window.Drawing.roundRect = (ctx, sx,sy,ex,ey,r) ->
-  d2r = Math.PI/180
-  r = ( ( ex - sx ) / 2 ) if ( ex - sx ) - ( 2 * r ) < 0 # ensure that the radius isn't too large for x
-  r = ( ( ey - sy ) / 2 ) if ( ey - sy ) - ( 2 * r ) < 0 # 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)
-  ctx.closePath()

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/timeline/drawing.ts	Sun May 15 23:37:19 2022 -0700
@@ -0,0 +1,65 @@
+(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();
+};