auto-tree-layout

A TypeScript library implementing 5 tree layout algorithms based on the Non-Layered Tidy Tree algorithm (van der Ploeg, 2014). Zero dependencies, O(n) time complexity, supports variable-size nodes.

Live Playground →

Install

pnpm add auto-tree-layout

Usage

import { createTree, layout, getNodes, getEdges, getBoundingBox } from "auto-tree-layout";

const data = {
  id: "root",
  width: 80,
  height: 40,
  children: [
    { id: "a", width: 60, height: 30 },
    {
      id: "b",
      width: 60,
      height: 30,
      children: [
        { id: "b1", width: 50, height: 25 },
        { id: "b2", width: 50, height: 25 },
      ],
    },
  ],
};

const root = createTree(data);
layout.downward(root);

const nodes = getNodes(root); // [{ id, x, y, width, height, ... }]
const edges = getEdges(root); // [{ source, target }]
const bb = getBoundingBox(root); // { left, top, width, height }

Layout Strategies

Layout	Description
layout.rightLogical(root)	Root on the left, children expand right
layout.leftLogical(root)	Root on the right, children expand left
layout.downward(root)	Root on top, children expand downward
layout.upward(root)	Root on bottom, children expand upward
layout.standard(root)	Root centered, children split left/right (mindmap)

API

createTree(data, options?)

Build a TidyNode tree from input data.

interface InputNode {
  id?: string;
  width?: number;
  height?: number;
  children?: InputNode[];
  collapsed?: boolean;
}

interface LayoutOptions {
  getId?: (data: InputNode) => string;
  getWidth?: (data: InputNode) => number;
  getHeight?: (data: InputNode) => number;
  getHGap?: (data: InputNode) => number;
  getVGap?: (data: InputNode) => number;
}

relayout(node, layoutFn)

Incremental relayout after toggling collapsed.

import { relayout } from "auto-tree-layout";

node.data.collapsed = true;
relayout(node, layout.downward);

Utilities

• getNodes(root) — flat array of NodeInfo with computed x, y, centerX, centerY
• getEdges(root) — array of { source, target } edges
• getBoundingBox(root) — { left, top, width, height }

Development

pnpm install        # install dependencies
vp test             # run tests (45 tests)
vp check            # lint + type check
vp pack             # build

Playground

cd example/playground
pnpm dev

Interactive Canvas 2D demo with layout switching, node count slider, H/V gap controls, pan/zoom, and node collapse/expand.

References

• A. van der Ploeg, "Drawing Non-layered Tidy Trees in Linear Time" (2014)
• zxch3n/tidy — Rust/WASM implementation
• leungwensen/mindmap-layouts — Original JS layouts

License

MIT