Conjure Code

Conjure Code is a CLI that turns a codebase (local, or a GitHub slug like sveltejs/kit) into a navigable node graph. It walks the project, uses ts-morph to statically analyze exports, functions, classes, and their references, and serves the result as an interactive canvas in the browser, with files and modules as nodes and imports and calls as edges between them.

Real codebases produce graphs with far more nodes than a browser can comfortably render at once, so the canvas does viewport culling on every pan and zoom: before drawing, it checks each node's screen-space position against the visible area (plus a padding margin) and skips anything outside it. Edges get the same treatment, but an edge only needs to survive if either endpoint is visible, or if the line between two off-screen endpoints still crosses the viewport:

export function isInView(
  graphX: number, graphY: number,
  transform: ViewTransform, viewWidth: number, viewHeight: number,
  padding = 80
): boolean {
  const screenX = graphX * transform.k + transform.x;
  const screenY = graphY * transform.k + transform.y;
  return (
    screenX >= -padding && screenX <= viewWidth + padding &&
    screenY >= -padding && screenY <= viewHeight + padding
  );
}

export function edgeInView(
  ax: number, ay: number, bx: number, by: number,
  transform: ViewTransform, viewWidth: number, viewHeight: number,
  padding = 80
): boolean {
  if (isInView(ax, ay, transform, viewWidth, viewHeight, padding)) return true;
  if (isInView(bx, by, transform, viewWidth, viewHeight, padding)) return true;

  const sax = ax * transform.k + transform.x, say = ay * transform.k + transform.y;
  const sbx = bx * transform.k + transform.x, sby = by * transform.k + transform.y;
  const minSX = Math.min(sax, sbx) - padding, maxSX = Math.max(sax, sbx) + padding;
  const minSY = Math.min(say, sby) - padding, maxSY = Math.max(say, sby) + padding;
  return !(maxSX < 0 || minSX > viewWidth || maxSY < 0 || minSY > viewHeight);
}

That bounding-box check on the edge's full span is what makes the "aperture" zoom feel continuous instead of glitchy. A long edge connecting two far-apart, off-screen nodes still gets drawn if it passes through what you're looking at, rather than popping in and out as its endpoints cross the frame.