view web/drawing.ts @ 2405:69ca2b2fc133

overcomplicated attempt at persisting the pane layout in the rdf graph this was hard because we have to somehow wait for the graph to load before config'ing the panes
author drewp@bigasterisk.com
date Fri, 17 May 2024 16:58:26 -0700
parents 4556eebe5d73
children
line wrap: on
line source


export function svgPathFromPoints(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;
};

export function line(
  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
export function roundRect(
  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();
};