canvas-flow — Canvas 2D の高速ノードエディタライブラリ

できること

10,000 ノードでも軽量空間インデックスで表示範囲だけを描画・ヒットテスト。縮小時は文字やポートを省いた簡易描画に切り替わります。
ノード内の項目とポートノードに行（項目）を持たせ、項目ごとに入力／出力ポートを付けてコネクタで接続できます。接続数の上限も設定可。
コネクタの形を選べる曲線（ベジェ）／直線／直角の階段状から、全体の既定とコネクタ単位の両方で指定できます。
ノードの中に子ノードchilds を持たせるとノードの中に子ノードが入り、位置と幅は親が自動計算。何段でも入れ子にでき、子も外のノードと自由に接続できます。
編集操作ひと通り選択・範囲選択・ドラッグ移動・複製・コピー＆ペースト・削除・インライン編集・リサイズ・Undo/Redo。
自動整列と検索階層レイアウトでコネクタが左から右に流れるよう並べ直し。ノード検索と該当ノードへのセンタリングも内蔵。
JSON で保存・読み込みグラフ全体の入出力に加えて、複数ノードの JSON を指定位置に相対座標で差し込めます。

インストール

npm install @hidemikimura/canvas-flow lit

import	内容	lit
`@hidemikimura/canvas-flow`	コア + Web Component（読み込むと `<canvas-flow-editor>` が登録される）	必要
`@hidemikimura/canvas-flow/core`	`NodeEditor` などコアのみ（フレームワーク非依存）	不要
`@hidemikimura/canvas-flow/lit`	Web Component のみ	必要

npm には既存の canvasflow パッケージがあり、記号を無視した同名判定で canvas-flow を取得できないため、スコープ付きの名前で公開しています。カスタム要素名と JSON の format は canvas-flow のままです。

使い方

ビルドなしで試すなら、CDN から読み込むだけで動きます（このデモと同じ構成です）。

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@hidemikimura/canvas-flow/+esm';
</script>

<canvas-flow-editor id="editor" minimap style="width:100%;height:600px"></canvas-flow-editor>

<script type="module">
  const el = document.getElementById('editor');
  el.addEventListener('ready', () => {
    el.load({
      nodes: [
        { id: 'a', title: 'Source', x: 40,  y: 40,  output: true,
          items: [{ id: 'v', label: 'value', value: '10', output: true }] },
        { id: 'b', title: 'Sink',   x: 360, y: 120, input: true,
          items: [{ id: 'in', label: 'in', input: true }] },
      ],
      edges: [{ source: 'a', sourcePort: 'item:v:out', target: 'b', targetPort: 'item:in:in' }],
    });
  });
  el.addEventListener('item-click', (e) => console.log(e.detail.node.title, e.detail.item.label));
</script>

コアだけを使う場合は new NodeEditor(canvas, options) に <canvas> を渡します。メソッド・イベント・データモデルの詳細は API 仕様書を参照してください。