Source

// Lays a diagram out with dagre: node sizes from their labels, then positions in layers top to
// bottom (or left to right). Used to draw diagrams on boards and the template pages' previews.
import dagre from "@dagrejs/dagre";
import type { Color, Graph, Shape } from "../../functions/lib/canvas";

export interface LaidNode { id: string; label: string; shape: Shape; color: Color; x: number; y: number; width: number; height: number }

const CHAR_W = 11;
const LINE_H = 25;
const MAX_W = 260;

function size(label: string, shape: Shape) {
  const chars = Math.max(4, label.length);
  const width = Math.min(MAX_W, Math.max(150, chars * CHAR_W + 40));
  const lines = Math.max(1, Math.ceil((chars * CHAR_W) / (width - 40)));
  const height = Math.max(70, lines * LINE_H + 40);
  // Ellipses and diamonds hold their text in a smaller inner box.
  const grow = shape === "diamond" ? 1.6 : shape === "ellipse" ? 1.3 : 1;
  return { width: Math.round(width * grow), height: Math.round(height * grow) };
}

export function layoutGraph(graph: Graph): { nodes: LaidNode[]; width: number; height: number } {
  const g = new dagre.graphlib.Graph({ multigraph: true });
  g.setGraph({ rankdir: graph.direction === "right" ? "LR" : "TB", nodesep: 60, ranksep: 80, marginx: 0, marginy: 0 });
  g.setDefaultEdgeLabel(() => ({}));
  for (const n of graph.nodes) g.setNode(n.id, size(n.label, n.shape ?? "rectangle"));
  graph.edges.forEach((e, i) => g.setEdge(e.from, e.to, e.label ? { width: e.label.length * 9 + 16, height: 24, labelpos: "c" } : {}, `e${i}`));
  dagre.layout(g);
  const nodes = graph.nodes.map((n) => {
    const p = g.node(n.id);
    return {
      id: n.id, label: n.label, shape: n.shape ?? "rectangle", color: n.color ?? "white",
      x: Math.round(p.x - p.width / 2), y: Math.round(p.y - p.height / 2), width: p.width, height: p.height,
    };
  });
  const box = g.graph();
  return { nodes, width: box.width ?? 0, height: box.height ?? 0 };
}

/** Where a line from a node's center towards (tx, ty) leaves its outline, a little outside it. */
export function edgePoint(n: LaidNode, tx: number, ty: number, gap = 8) {
  const cx = n.x + n.width / 2;
  const cy = n.y + n.height / 2;
  const dx = tx - cx;
  const dy = ty - cy;
  const a = n.width / 2;
  const b = n.height / 2;
  if (!dx && !dy) return { x: cx, y: cy };
  const t = n.shape === "ellipse" ? 1 / Math.sqrt((dx / a) ** 2 + (dy / b) ** 2)
    : n.shape === "diamond" ? 1 / (Math.abs(dx) / a + Math.abs(dy) / b)
    : Math.min(Math.abs(a / (dx || 1e-9)), Math.abs(b / (dy || 1e-9)));
  const len = Math.hypot(dx, dy);
  return { x: cx + dx * t + (dx / len) * gap, y: cy + dy * t + (dy / len) * gap };
}