NodeEditor API 仕様書

type同梱の型定義

手書きの型定義を同梱しているため、追加のインストールや設定なしで型が付きます。エントリごとに types/core.d.ts / types/lit.d.ts / types/index.d.ts が対応します。

import { NodeEditor, type Node, type EdgeType } from '@hidemikimura/canvas-flow/core';
import '@hidemikimura/canvas-flow/lit';

constructornew NodeEditor(canvas, options?)

オプションは editor.options に保持され、wheelMode / dragMode / readOnly / edgeDeleteIcon は実行中に書き換えても次の操作から反映されます。

methodsetTheme(patch)

テーマを部分的に上書きします。node.headerHeight / itemHeight / padding / width / edge.curvature / edge.type / edge.stepOffset はレイアウトにも反映され、空間インデックスが再構築されます。

editor.setTheme({ background: '#0f172a', node: { fill: '#1e293b', titleColor: '#f1f5f9' }, lodZoom: 0.25 });

methodsetRules(rules)

接続ルール { maxInputs, maxOutputs, onFull } を変更します（editor.graph.rules に反映）。

methodsetEdgeType(type, edgeIds?) / getter/setteredgeType / methodsetSelectedEdgeType(type)

コネクタの描画方法を変えます。type は 'bezier'（三次ベジェ曲線・既定）、'straight'（直線）、'step'（90 度にだけ曲がる階段状の折れ線）。edgeIds を省略すると全体の既定（theme.edge.type / graph.layout.edgeType）を変え、edge.type を持たないすべてのコネクタが切り替わります。edgeIds を渡すとそのコネクタの edge.type を更新します（Undo 可、JSON にも保存）。setSelectedEdgeType は選択中のコネクタだけ（選択が無ければ全体の既定）。いずれも 'edge-type:change' を発火します。

editor.setEdgeType('step');                 // 全体
editor.setEdgeType('straight', ['e1']);     // e1 だけ
editor.graph.addEdge({ source: 'a', sourcePort: 'out', target: 'b', targetPort: 'in', type: 'step' });

ドラッグ中の仮コネクタ・ヒットテスト・削除アイコンの位置（形状の中点）・簡易表示（LOD）も同じ形に従います。'line' → 'straight'、'orthogonal' / 'smoothstep' → 'step' の別名は normalizeEdgeType() が丸めます。

methodsetFocusMode(mode, options?) / getter/setterfocusMode

選択ノードと同じ流れにある要素だけをはっきり描き、それ以外を薄くします。選択が空のときは自動的に解除されます。 対象が変わると 'focus:change'（{ mode, direction, nodes, edges }）が発火します。

editor.setFocusMode('connected');                              // 同じ流れ全部（既定）
editor.setFocusMode('neighbors', { depth: 2 });                // 2 段まで
editor.setFocusMode('connected', { direction: 'downstream' }); // 進める先だけ
editor.focusMode = 'off';

methodfocusSet() → { nodes: Set, edges: Set } | null

現在の強調対象。無効なとき・選択が空のときは null（= 全部を通常描画）。選択とグラフの変更でキャッシュが破棄されます。

methodselectFocused(options?) → { nodes, edges } | null

いま強調表示されている要素（focusSet() の中身）をそのまま選択します。選んだ流れをまとめて移動・複製・削除したいときに使います。ツールバーの「強調を選択」ボタンと Ctrl/Cmd + Shift + A からも呼べます。

editor.selectFocused();                            // 強調されている要素で選択を置き換える
editor.selectFocused({ additive: true });          // いまの選択に加える
editor.selectFocused({ direction: 'downstream' }); // 向きを指定して辿り直す

強調表示が無効（focusMode: 'off'）のときは focusDirection / focusDepth の設定どおりに繋がりを辿って選択します。選択ノードが無ければ何もせず null。実行すると 'focus:select'（{ mode, nodes, edges }）が発火します。選択操作なので readOnly でも使えます。

methodUndo 可selectConnected(options?) → { nodes, edges } | null

繋がっている要素を選択に加えます（まとめて移動・削除したいとき）。探索だけしたい場合は graph.connectedTo(startIds, { depth, direction, includeStart }) を直接呼べます。

methodregisterNodeType(type, { style })

ノード種別を登録します。スタイルの優先順位は node.style > nodeTypes[node.type].style > theme.node です。

setternodeRenderer = (ctx, node, rect, api) => boolean | void
setteredgeRenderer = (ctx, edge, geometry, api) => boolean | void

独自の描画関数を設定します（null で既定に戻す）。true を返すと既定描画を省略、それ以外は既定描画にフォールバックします。api には selected, hover, style, lod, zoom, theme, graph, roundRect(), fitText() が入ります。geometry は { type, x1, y1, x2, y2, points }（points は折れ線の頂点列。type === 'bezier' のときは制御点 c1x, c1y, c2x, c2y も入る）です。

setter/getteroverlayRenderer = (ctx, api) => void

ノードとコネクタを描いたあとに 1 回だけ呼ばれる追加描画です（null で解除）。ノードの上に重ねたいもの（分析用のバーやバッジ、注釈）はここで描きます。nodeRenderer と違い既定描画を置き換えないので、縮小時の一括簡易描画もそのまま使われます。

api は { visible, lod, zoom, nodes, edges, theme, graph, roundRect(), fitText() }。nodes / edges は表示範囲内の要素（子ノードも含む）です。ワールド座標系のまま呼ばれるので、画面上で一定の大きさにしたいものは zoom で割ります。

editor.overlayRenderer = (ctx, api) => {
  if (api.lod) return;
  for (const node of api.nodes) {
    const r = api.graph.nodeRect(node);
    ctx.fillStyle = '#3b82f6';
    api.roundRect(r.x + 8, r.y + r.h - 6, (r.w - 16) * 0.42, 4, 2);
    ctx.fill();
  }
};

methodresize(width, height, dpr?) / resizeMinimap(width, height, dpr?)

表示サイズ（CSS px）を設定します。dpr 省略時は devicePixelRatio。コンテナのサイズが変わるたびに呼んでください。

methodrequestRender() / render()

requestRender() は次の requestAnimationFrame で 1 回だけ描画を予約します（複数回呼んでも 1 フレームにまとまる）。render() は即時描画し、'render' イベントで統計を通知します。モデルやビューの変更は内部で自動的に requestRender() されるため、通常は呼ぶ必要はありません。

methodclientToWorld(clientX, clientY) → {x, y}

マウスイベントのクライアント座標をワールド座標に変換します。

methodworldRectToScreen(rect) → {x, y, w, h}

ワールド矩形を canvas 基準のスクリーン矩形に変換します（インライン編集 UI の配置などに）。

methodviewCenter() → {x, y}

表示中の画面中央のワールド座標。

methodgetPointer() → { world, screen, inside } | null

最後に観測したポインタ位置。inside はポインタが canvas 上にあるか。一度も観測していなければ null。

methodhitTest(wx, wy) → Hit

ワールド座標にある要素を返します。判定の優先順位は 削除アイコン > リサイズグリップ > ポート > ノード（ヘッダ／項目／本体）> コネクタ です。

methodedgeAt(wx, wy) → Edge | null

点に最も近いコネクタ（しきい値内）。

methodedgeDeleteIconAt(wx, wy) → Edge | null / deleteIconEdges() → Edge[]

削除アイコンの当たり判定と、現在アイコンを表示しているコネクタ一覧（ホバー中 + 選択中。readOnly / LOD 時は空）。

methodselect({ nodes?, edges? }, { additive? })

ID 配列を選択します。additive: true で既存の選択に追加。'selection:change' を発火します。

methodtoggleSelect({ nodes?, edges? })

指定 ID の選択状態を反転します。

methodclearSelection() / selectAll()

methodselectInRect(rect, { additive? })

ワールド矩形に完全に含まれるノードと、その間のコネクタを選択します（範囲選択と同じ挙動）。

editor.select({ nodes: ['a', 'b'] });
editor.select({ edges: ['e1'] }, { additive: true });
console.log(editor.selectedNodes.map(n => n.title));

methodUndo 可deleteSelection()

選択中のノードとコネクタを削除します。ノードに繋がるコネクタも一緒に削除され、1 回の Undo で戻ります。

methodUndo 可deleteSelectedEdges({ scope = 'between' }) → string[]

選択範囲内のコネクタだけを削除し、ノードは残します。戻り値は削除したコネクタ ID。'edges:delete' を発火します。Shift + Delete、Lit 版ツールバーの「コネクタ削除」に対応。

methodselectedEdgeIds({ scope = 'between' }) → string[]

deleteSelectedEdges と同じ規則で対象になるコネクタ ID を返します（削除はしない）。

methodUndo 可removeNode(id) / removeEdge(id)

methodUndo 可duplicateSelection(offset = {x: 40, y: 40}) → { nodes, edges, idMap } | null

選択中のノードと、その内部で閉じているコネクタを複製し、複製側を選択状態にします。

methodUndo 可duplicateNode(id, offset?) → Node | null

methodcopySelection() → boolean

選択内容を内部クリップボードに保存します。キーボードの Ctrl/Cmd+C はこれに加えてシステムのクリップボードへ JSON を書き込みます。

methodUndo 可paste(at?) → { nodes, edges } | null

内部クリップボードの内容を貼り付けます。at（ワールド座標）を渡すと貼り付け内容の左上をそこに置き、省略時は元の位置から 40px ずらします。

methodUndo 可moveSelection(dx, dy)

選択中ノードをワールド座標で相対移動します（移動単位は適用しない）。

methodUndo 可nudgeSelection(stepsX, stepsY, { pixels = 1 })

選択中ノードを移動単位で動かします（矢印キーの実装）。moveSnap 未設定なら pixels × steps。設定時は先頭の選択ノードが目盛りに乗っていなければ進む方向の次の目盛りが 1 歩目になり、動かす軸だけ揃えます。

methodUndo 可resizeNode(id, width) → Node | null

ノードの幅を変更します（minNodeWidth 未満は切り上げ）。高さは項目数で決まるため変更できません。

methodUndo 可setPortVisible(nodeId, portKey, visible) → boolean

1 つのポートの表示／非表示。ポートが存在しなければ false。

methodUndo 可setPortsVisible(nodeId, visible, itemId?) → boolean

ノード（itemId 指定時はその項目）の全ポートの表示／非表示（showPorts を設定）。

methodsetMoveSnap(step) / gettermoveSnap

ノードの移動単位（ワールド px）を設定・取得します。0 で無効。設定するとドラッグ中はクリックしたノードの左上が単位に揃い、他の選択ノードは相対位置を保って追従します。addNodeAt / insertJSON の snap 既定値も true になります。

methodsnapValue(v) → number / snapPoint({x, y}) → {x, y}

値・座標を移動単位に丸めます（無効時はそのまま）。

methodUndo 可snapNodes(ids?) → string[]

ノードの左上を移動単位に揃えます。ids 省略時は選択中ノード、選択が無ければ全ノード。戻り値は動かしたノード ID。

methodUndo 可addNodeAt(spec, options?) → Node | null

位置を指定してノードを追加し、選択状態にします。spec は Node 定義（x, y は計算で上書き）。

methodUndo 可addNodeAtPointer(spec, options?) / addNodeAtCenter(spec, options?)

それぞれ「ポインタ位置（canvas 外なら画面中央）」「画面中央」に追加する省略形です。

document.addEventListener('keydown', (e) => {
  if (e.key === 'n') editor.addNodeAtPointer({ title: '新規', input: true, output: true, items: [] }, { avoidOverlap: true });
});
editor.on('canvas:dblclick', ({ x, y }) => editor.addNodeAt({ title: '新規' }, { at: { x, y }, anchor: 'header' }));

位置をそのまま使いたい場合は editor.graph.addNode(node) を使います。

ノードに childs を持たせると、その中に子ノードが入ります。子ノードは親の項目の下に上から順に縦に積まれ、位置（x / y）と幅は親が自動計算します。入れ子は何段でも可能です。

editor.graph.addNode({
  id: 'n0', title: '親ノード', x: 100, y: 50, input: true, output: true,
  items: [{ id: 'p0', label: 'value', input: true, output: true }],
  childs: [
    {
      id: 'n1', title: '子ノード', input: true, output: true,
      items: [{ id: 'p1', label: 'value', input: true, output: true }],
      childs: [{ id: 'n2', title: '孫ノード', input: true, output: true }],
    },
  ],
});

methodUndo 可addChild(parentId, child, index?) → Node | null

子ノードを追加します。index を渡すとその位置に挿入します（省略時は末尾）。

methodUndo 可removeChild(id, { x?, y? }) → Node | null

子を親から外して独立したノードに戻します。x / y を渡すとその位置に置きます。子ノードでなければ null。Lit 版では DOM の予約名を避けて detachChild(id, position?) という名前です。

methodUndo 可setParent(id, parentId | null, index?) → boolean

親を付け替えます。parentId に null を渡すと独立させます。自分の子孫を親にするような循環は false を返して拒否します。

methodchildrenOf(node) → Node[] / rootNodeOf(node) → Node | null

子ノードの配列（表示順）と、一番外側の親（自分が子でなければ自分自身）。引数はノードでも ID でも渡せます。さらに細かい問い合わせは Graph 側の isChild / parentOf / rootOf / depthOf / descendantIds / rootNodes を使います。

「この選択肢を選んだらこのノードへ」という遷移を、コネクタを引かずにノード ID で指定できます。ノードにも項目にも goto を書けて、コネクタと混ぜて使えます。

graph.addNode({
  id: 'menu', title: 'メニュー', x: 300, y: 0, input: true,
  items: [
    { id: 'm1', label: '料金を知りたい', goto: 'price' },                          // ID だけ
    { id: 'm2', label: '使い方を知りたい', goto: { to: 'howto', label: '使い方' } },  // ラベル付き
    { id: 'm3', label: 'その他', goto: ['faq', 'agent'] },                         // 複数
  ],
  goto: 'survey',   // ノード本体に書くと「この画面のあと進む先」
});

typeGotoSpec

'n1' / ['n1','n2'] / { to: 'n1', label?: string } / その配列。normalizeGoto(value) で [{to, label?}] に正規化できます。

methodUndo 可setGoto(nodeOrId, value, { itemId })

設定・解除（null で解除）。itemId を渡すとその項目に設定します。内部では updateNode / updateItem なので 1 回の Undo で戻ります。

methodgotoLinks(nodeOrId?) → GotoLink[] / gotoSources(nodeOrId) → GotoLink[] / gotoTargets(nodeOrId) → Node[]

gotoLinks は出ていく遷移（引数を省略するとグラフ全体）、gotoSources は「このノードを指しているリンク」、gotoTargets は存在する遷移先ノードです。GotoLink は { key, from, itemId, to, label, exists }（key は goto:<from>:<itemId|->:<index> という安定した識別子で、強調表示の links に入るのもこのキー）。

editor.setGoto('menu', 'price', { itemId: 'm1' });
editor.gotoLinks('menu');     // → [{ key, from, itemId: 'm1', to: 'price', label: null, exists: true }, ...]
editor.gotoSources('price');  // → price へ入ってくるリンク
editor.on('focus:change', ({ links }) => console.log('辿った goto', links));

右クリックすると、対象（ノード／項目／コネクタ／空白）に応じたメニューが出ます。ブラウザ既定のメニューは常に抑制されます。未選択のものを右クリックした場合はそれを選択してからメニューを出し、選択中のノードを右クリックしたときは複数選択を保ちます（まとめて複製・削除できる）。readOnly のときと context-menu="false" のときはメニューを出しません（イベントだけ発火）。

event'context:menu'（Lit: context-menu）

コアが出すのはこのイベントだけで、メニューの描画は Lit 版が担当します。detail は { type, node, item, edge, port, x, y, screen, client, selection, originalEvent }。type は hitTest と同じ（none / node / item / port / resize / edge / edge-delete）、x / y はワールド座標、screen は canvas 基準、client はビューポート基準です。

// 自前のメニューを出す（内蔵メニューは抑止）
el.addEventListener('context-menu', (e) => {
  e.preventDefault();
  myMenu.open(e.detail.client.x, e.detail.client.y, e.detail);
});

propertycontextMenuItems

内蔵メニューの項目。配列を渡すと常に同じメニュー、関数を渡すと対象ごとに組み立てられます。ctx はイベントの detail に el / editor / graph / defaultItems を足したものです。

el.contextMenuItems = (ctx) => [
  ...ctx.defaultItems.filter((i) => i.id !== 'export'),
  { type: 'separator' },
  { id: 'log', label: 'ID をログ出力', shortcut: 'Ctrl+L', run: (c) => console.log(c.node?.id) },
];

既定の項目は defaultContextMenuItems(ctx) として公開しています（@hidemikimura/canvas-flow / /lit から import）。対象ごとの内容は次のとおりです。

methodcloseContextMenu() / openContextMenuAt(x, y, detail?)

閉じる・任意の位置（要素内の px）に出す。ツールバーの「…」ボタンから同じメニューを出したいときなどに使います。

methodUndo 可autoLayout(options?) → string[]

階層レイアウト（Sugiyama 方式の簡略版）で並べ直します。コネクタは左から右へ流れ、層をまたぐコネクタは途中の層で場所を確保するため他のノードの上を横切りません。2 つ以上のノードを選択していればその範囲だけ、なければ全ノードが対象です。戻り値は移動対象になったノード ID。

位置だけを計算したい場合は import { layeredLayout } from '@hidemikimura/canvas-flow' の layeredLayout(graph, nodeIds, options) → Map<id, {x, y}> を使います。

methodundo() → boolean / redo() → boolean

履歴を 1 段戻す／進めます。存在しなくなった要素は選択から外れます。canUndo / canRedo で可否を確認できます。

editor.graph.batch(() => {
  editor.graph.addNode({ id: 'x', title: 'X' });
  editor.graph.addNode({ id: 'y', title: 'Y', x: 300 });
  editor.graph.addEdge({ source: 'x', sourcePort: 'out', target: 'y', targetPort: 'in' });
});
editor.undo();   // 3 つまとめて消える

methodzoomIn(factor = 1.2) / zoomOut(factor = 1.2) / setZoom(zoom)

画面中央を基準にズームします。範囲は viewport.minZoom（0.05）〜 maxZoom（4）。

methodresetZoom() / resetView()

resetZoom() は縮尺を 1 に戻し（中心は維持）、resetView() は縮尺 1 で原点を左上に戻します。

methodfitView(padding = 40, { animate = false })

全ノードが収まるようにズーム・位置を合わせます。

methodcenterOnNode(id, { zoom?, animate = true, duration = 300 }) → boolean

ノードが画面中央に来るようにスクロールします（既定でアニメーション）。

methodcenterOn(wx, wy, { zoom?, animate = false, duration = 300 })

ビューの変更後は 'viewport:change' が発火します。直接 editor.viewport を操作した場合は requestRender() を呼んでください。

methodsearch(query) → Node[]

タイトル・ID・項目ラベル・項目値を部分一致（大文字小文字無視）で検索します。query は文字列、RegExp、または (node) => boolean。

methodsearchAndFocus(query, index = 0) → Node[]

検索して index 番目の一致（循環）を選択し、中央へアニメーションで移動します。

methodexportData({ selectionOnly = false, includeViewport = true }) → object

JSON フォーマットのオブジェクトを返します。selectionOnly で選択中のノードとその間のコネクタだけを出力（このとき viewport は含まれない）。'export' イベントを発火します。

methodexportJSON({ pretty = true, ...exportDataOptions }) → string

methoddownloadJSON(filename = 'canvas-flow.json', options?)

ブラウザでファイルとしてダウンロードさせます。

methodtoJSON() → object

JSON.stringify(editor) で使われます。exportData() と同じ形式（イベントは発火しない）。

methodimportData(input, options?) → { ok: true, mode, nodes, edges, warnings } | { ok: false, errors }

JSON 文字列またはオブジェクトを検証して読み込みます。importJSON() は別名です。

検証で構文エラー・構造エラー・未対応 format/version は errors、存在しないノード／ポートを指すコネクタは除外して warnings に記録します。成功時は 'import' イベントを発火します。

methodUndo 可insertJSON(input, options?) → result

複数のノード・コネクタを含む JSON を指定位置に追加します（既存の内容は残す）。JSON 内のノード座標は追加位置からの相対位置として扱われ（既定 anchor: 'origin'）、(0, 0) のノードが追加位置にそのまま置かれます。衝突する ID は付け替え、コネクタの参照も追従します。戻り値は importData と同じで、成功時に 'insert' イベントを発火します。

const template = { nodes: [{ id: 'a', title: 'A', x: 0, y: 0, output: true }, { id: 'b', title: 'B', x: 300, y: 80, input: true }],
                   edges: [{ source: 'a', sourcePort: 'out', target: 'b', targetPort: 'in' }] };
editor.insertJSON(template, { at: { x: 500, y: 200 } });   // A → (500,200), B → (800,280)

methodUndo 可insertJSONAtPointer(input, options?)

insertJSON をポインタ位置で実行します（canvas 外なら画面中央）。

methodimportFromFile(file | string, options?) → Promise

methodopenImportDialog(options?) → Promise<result | null>

ファイル選択ダイアログを開いて読み込みます。キャンセル時は null。

methodload(data)

検証なしで内容を置き換えます（{ nodes, edges, viewport? }）。信頼できるデータ向け。

methodon(type, handler) → unsubscribe / off(type, handler)

イベント購読。戻り値の関数で解除できます。

methoddestroy()

イベントリスナ（canvas / document）とアニメーションを解除します。canvas を DOM から外す前に呼んでください。

event状態・モデルの変化

eventユーザー操作

クリック系の共通 payload: x, y（ワールド）, screen: {x, y}, button, shiftKey, ctrlKey, metaKey, altKey, pointerType, originalEvent。選択の更新はクリックイベントより前に行われ、readOnly でも発火します。

typeNode

typeNodeItem

typePortSpec = false | true | number | { max?: number, visible?: boolean }

output の上限は「そのポートから開始できるコネクタ数」、input は「そのポートに終了できるコネクタ数」です。上限に達したポートは theme.port.fullFill（橙）で描かれます。

typeポートキー

portKey(itemId, dir) / parsePortKey(key)（canvas-flow から export）で生成・分解できます。

typeEdge

向きが逆（in → out）で渡された場合、addEdge() が正規化します。同一ノード間・同じポート組の重複・存在しないポート・上限超過は追加されず null を返します。

{
  "format": "canvas-flow",
  "version": 1,
  "nodes":  [ { "id": "a", "title": "A", "x": 0, "y": 0, "output": true, "items": [],
                "childs": [ { "id": "a1", "title": "子", "input": true, "items": [] } ] } ],
  "edges":  [ { "id": "e1", "source": "a", "sourcePort": "out", "target": "b", "targetPort": "in" } ],
  "viewport": { "tx": 0, "ty": 0, "zoom": 1 }
}

format / version / viewport は省略可能で、プレーンな { nodes, edges } も読み込めます。未対応の format や version > 1 はエラーになります。

子ノードは nodes の中に childs として入れ子で書き出されます（トップレベルの nodes に並ぶのは親を持たないノードだけ）。子ノードの座標と幅は親が決めるため出力されず、読み込み時に指定されていても無視されます。edges は入れ子にならず、子ノードの ID をそのまま参照します。

モデル操作の中心です。変更系はすべて Undo 可（load / clear を除く）。

Graph 自身も on(type, handler) を持ち、change, node:add などに加えて Undo 用の op、load, clear を発火します。

{
  background: '#f6f7f9',
  grid: { color: '#e0e3e8', size: 32, majorEvery: 4, majorColor: '#cfd4db' },
  font: '13px system-ui, …', titleFont: 'bold 13px system-ui, …',
  node: { fill, stroke, strokeWidth: 1, radius: 8, headerFill, headerHeight: 30, titleColor, textColor,
          itemHeight: 26, itemSeparator, padding: 8, width: 200,
          childIndent: 10,  // 子ノードの左右インデント
          childGap: 6,      // 子ノードどうしの縦の間隔
          selectedStroke, selectedStrokeWidth: 2, hoverStroke, shadow },
  port: { radius: 5, fill, stroke, strokeWidth: 1.5, hoverFill, connectedFill, fullFill: '#f59e0b' },
  edge: { stroke, strokeWidth: 2, selectedStroke, selectedStrokeWidth: 3, hoverStroke, pendingStroke,
          type: 'bezier',   // 'bezier' | 'straight' | 'step'
          curvature: 0.5,   // bezier の曲がり具合
          stepOffset: 24,   // step の水平突き出し量
          deleteIcon: { radius: 9, fill, stroke, color, hoverFill, hoverColor } },
  goto: { stroke: '#94a3b8', strokeWidth: 1.5, dash: [6, 4], arrow: 9,   // ID 指定の遷移の点線
          labelColor, labelFont, labelBg },
  focus: { dimOpacity: 0.12, dimOpacityLod: 0.25, edgeStroke: null, edgeWidth: null },
  selectionBox: { fill, stroke },
  minimap: { background, border, node, selectedNode, viewportFill, viewportStroke },
  lodZoom: 0.3      // この拡大率以下で文字・ポート・影を省いた簡易描画
}

setTheme(patch) で部分上書きします。deleteIcon.radius は画面ピクセル単位（ズームに影響されない）。node.shadow は拡大率 50% 未満では省略されます。

コアを包む Web Component。el.editor で NodeEditor に触れます。ツールバー（検索・ズーム・Undo/Redo・複製・削除・コネクタ削除・整列・読み込み・書き出し）、インライン編集、ミニマップ、.json ドロップ、ResizeObserver による自動リサイズを内蔵します。

委譲メソッド: addNode, addNodeAt, addNodeAtPointer, addNodeAtCenter, getPointer, addEdge, removeNode, removeEdge, updateNode, updateItem, duplicateSelection, deleteSelection, deleteSelectedEdges, autoLayout, setPortVisible, setPortsVisible, setMoveSnap, snapNodes, addChild, detachChild, setParent, childrenOf, rootNodeOf, setEdgeType, setSelectedEdgeType, setFocusMode, selectFocused, selectConnected, setGoto, gotoLinks, gotoSources, closeContextMenu, openContextMenuAt, undo, redo, canUndo, canRedo, zoomIn, zoomOut, resetZoom, fitView, search, focusNode, exportData, exportJSON, downloadJSON, importJSON, insertJSON, insertJSONAtPointer, importFromFile, openImportDialog, toJSON, load。追加イベント: ready（{ editor }）, import-error（{ errors }）。スロット: 既定（canvas 上に重ねる要素）と toolbar（ツールバー末尾）。

キーボードは document で受け、keyboardScope 内を最後にポインタ操作していて入力欄にフォーカスが無いときだけ処理します。