@yanqirenshi/d3.pad

プログラムコード（JavaScript / TypeScript）を PAD（Problem Analysis Diagram / 問題分析図） に変換・描画するライブラリです。

C:\Users\yanqi\prj\PAD.js（pnpm モノレポ）の @pad/core を移行したものです（フロントエンド app と Rust バックエンドは対象外）。

提供 API

import { parse_js_code, calculateLayout, PadNodeRenderer, D3PadRenderer } from '@yanqirenshi/d3.pad';
import type { PadNode, LayoutNode } from '@yanqirenshi/d3.pad';

• parse_js_code(code: string): string — JS コードを acorn で解析し、PadNode の JSON 文字列を返す（JSON.parse して使う）。
• calculateLayout(node: PadNode): LayoutNode — PadNode のレイアウト（位置・サイズ）を計算。
• PadNodeRenderer — d3 セレクション（SVG の <g>）に PAD を描画するクラス。new PadNodeRenderer(rootG).render([layout])。
• D3PadRenderer — フルスクリーン表示用の React コンポーネント（{ node } を受け取り、パン/ズーム付きで全画面描画）。
• PadNode — 制御構造の型（sequence / block / if / loop / command / error）。

使い方（埋め込み描画）

import * as d3 from 'd3';
import { parse_js_code, calculateLayout, PadNodeRenderer } from '@yanqirenshi/d3.pad';

const node = JSON.parse(parse_js_code(code));
const layout = calculateLayout(node);

const svg = d3.select(el).append('svg').attr('width', 800).attr('height', 600);
const rootG = svg.append('g').attr('transform', 'translate(20,20)');
new PadNodeRenderer(rootG).render([layout]);

コマンド

npm run build -w @yanqirenshi/d3.pad   # tsc で dist/ へ出力
npm run docs  -w @yanqirenshi/d3.pad   # TypeDoc で HTML ドキュメント生成