安装

npm install @xenolithengine/graph-editor @xenolithengine/graph-core @xenolithengine/graph-theme-xen pixi.js

pixi.js 为 peer 依赖。

挂载

import { XenolithEditor } from '@xenolithengine/graph-editor'

const editor = await XenolithEditor.init('#app')

这一行调用：

加载包内 Inter 字体（Regular / SemiBold / Bold），不访问 Google Fonts。
创建 PIXI v8 Application，将 canvas 挂载到指定元素。
连接平移、缩放、拖动、选择、框选与节点交互。
返回可填充节点与连接的 editor 实例。

添加节点和连接

import { createNodeId, createPinId } from '@xenolithengine/graph-core'

const a = {
  id: createNodeId(),
  type: 'Source',
  position: { x: 100, y: 100 },
  size: { x: 150, y: 70 },
  state: {},
  pins: [
    { id: createPinId(), kind: 'data', direction: 'out', type: 'float', multiple: true, label: 'Output' },
  ],
}

editor.addNode(a, { category: 'logic', title: 'Source' })