# HG changeset patch # User drewp@bigasterisk.com # Date 2022-05-16 06:37:19 # Node ID 905cf827d7504609ad35f34a60e409f4999d287b # Parent 1d50165c73b8a6fc990e96277035316c336f20c6 port to ts (aside from exporting the funcs correctly) diff --git a/light9/web/timeline/drawing.coffee b/light9/web/timeline/drawing.ts rename from light9/web/timeline/drawing.coffee rename to light9/web/timeline/drawing.ts --- a/light9/web/timeline/drawing.coffee +++ b/light9/web/timeline/drawing.ts @@ -1,35 +1,65 @@ +(window as any).Drawing = {}; -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 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)); +}; -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() +// 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(); +};