API 参考

本页提供 RelationGraphInstance API 的完整参考。实例对象暴露了用于操作图数据、控制布局、管理用户交互以及渲染的方法。此处记录的所有方法，都可在通过组件 refs 或 useGraphInstance() hook 获取到的图实例上使用。

关于组件 props 与 UI 自定义信息，请参阅入门。关于响应式数据系统的细节，请参阅响应式数据集成。关于事件处理模式，请参阅事件系统架构。

实例访问

RelationGraphInstance 是以编程方式控制图的主要接口。可通过以下方式访问：

Vue 2/3:

const graphRef = ref<RelationGraphExpose>();
const instance = graphRef.value?.getInstance();

React:

const { graphInstance } = useGraphInstance();

Svelte:

let graphInstance: RelationGraphInstance;

来源: packages/types.ts:19-30, packages/types.ts:743-745

API 组织方式

API 表面通过渐进增强模式构建，其中每个 RelationGraphWithX 类都会增加一层功能。完整实例会从该层级结构继承所有方法：

graph TB
    Base["RelationGraphBase
事件系统，UUID 生成"]
    View["RelationGraphWith1View
坐标变换"]
    Data["RelationGraphWith2Data
框架特定的响应式设置"]
    Data1["RelationGraphWith2Data1Getter
查询: getNodes, getLines, getNodeById"]
    Data2["RelationGraphWith2Data2Analysis
图遍历与分析"]
    Data3["RelationGraphWith2Data3Update
CRUD: addNodes, removeNodes, updateNode"]
    Data4["RelationGraphWith2Data4ConnectTarget
连接点管理"]
    Data5["RelationGraphWith2Data5LineConfig
假线配置"]
    Options1["RelationGraphWith3Options1Update
setJsonData, updateOptions"]
    Options2["RelationGraphWith3Options2API
公开配置 API"]
    Line["RelationGraphWith4Line
createLineDrawInfo, generateLinePath"]
    Zoom["RelationGraphWith5Zoom
zoom, setZoom, moveToCenter"]
    Effect["RelationGraphWith6Effect
fitContentHeight, zoomToFit"]
    Layout["RelationGraphWith6Layout
doLayout, startAutoLayout"]
    Event["RelationGraphWith7Event
onNodeClick, startCreatingLinePlot"]
    EasyView["RelationGraphWith9EasyView
为性能而进行的 Canvas 渲染"]
    Editing["RelationGraphWith91Editing
setEditingNodes, setEditingLine"]
    MiniView["RelationGraphWith92MiniView
小地图控制"]
    Image["RelationGraphWith93Image
导出为 PNG/SVG"]
    Dom["RelationGraphWith95Dom
DOM 观察器"]
    API["RelationGraphWith99API
附加工具方法"]
    Core["RelationGraphCore
最终完整实例"]

    Base --> View
    View --> Data
    Data --> Data1
    Data1 --> Data2
    Data2 --> Data3
    Data3 --> Data4
    Data4 --> Data5
    Data5 --> Options1
    Options1 --> Options2
    Options2 --> Line
    Line --> Zoom
    Zoom --> Effect
    Effect --> Layout
    Layout --> Event
    Event --> EasyView
    EasyView --> Editing
    Editing --> MiniView
    MiniView --> Image
    Image --> Dom
    Dom --> API
    API --> Core

来源: packages/relation-graph-models/models/RelationGraphCore.ts:1-50, ai-prompt/wiki/relation-graph-instance-architect/RelationGraphInstance.md:6-32

数据查询与访问

节点查询

方法	参数	返回值	说明
`getNodes()`	-	`RGNode[]`	获取图中的所有节点
`getNodeById(nodeId)`	`nodeId: string`	`RGNode \| undefined`	按 ID 获取节点
`getShouldRenderNodes(nodes?)`	`nodes?: RGNode[]`	`RGNode[]`	获取可见/可渲染节点（会考虑视口裁剪）

连线查询

方法	参数	返回值	说明
`getLines()`	-	`RGLine[]`	获取所有普通连线
`getLineById(lineId)`	`lineId: string`	`RGLine \| undefined`	按 ID 获取连线
`getFakeLines()`	-	`RGFakeLine[]`	获取所有假线（非节点连接）
`getFakeLineById(lineId)`	`lineId: string`	`RGFakeLine \| undefined`	按 ID 获取假线
`getShouldRenderLines(lines?)`	`lines?: RGLine[]`	`RGLine[]`	获取可见/可渲染连线

链路查询

方法	参数	返回值	说明
`getLinks()`	-	`RGLink[]`	获取所有 link 对象（line + fromNode + toNode）
`getLinkByLineId(lineId)`	`lineId: string`	`RGLink \| undefined`	按连线 ID 获取 link
`getLinkByLine(line)`	`line: RGLine`	`RGLink \| undefined`	从 line 对象获取 link

配置查询

方法	参数	返回值	说明
`getOptions()`	-	`RGOptionsFull`	获取完整运行时配置
`getConnectTargets()`	-	`RGLineTarget[]`	获取所有连接目标点

来源: packages/relation-graph-models/models/RelationGraphWith2Data1Getter.ts:1-150

图分析

关系遍历

graph LR
    A["节点 A"]
    B["节点 B"]
    C["节点 C"]
    X["节点 X"]
    F["节点 F"]
    M["节点 M"]

    A -->|line1| X
    B -->|line2| X
    C -->|line3| X
    X -->|line4| F
    X -->|line5| M

    style X fill:#fff

方法	返回值	说明	示例结果（以上面的节点 X 为例）
`getRelatedLinesByNode(node)`	`RGLine[]`	与节点相连的所有连线	`[line1, line2, line3, line4, line5]`
`getNodeIncomingNodes(node)`	`RGNode[]`	连接到该节点的节点（指向该节点）	`[A, B, C]`
`getNodeOutgoingNodes(node)`	`RGNode[]`	该节点连接到的节点（该节点指向）	`[F, M]`
`getNodeRelatedNodes(node)`	`RGNode[]`	所有直接相连的节点	`[A, B, C, F, M]`
`getLinksBetweenNodes(nodes)`	`RGLink[]`	两端点都在给定集合中的 links	-
`getLinesBetweenNodes(nodes)`	`RGLine[]`	两端点都在给定集合中的连线	-

网络分析

方法	参数	返回值	说明
`getNetworkNodesByNode(node)`	`node: RGNode`	`RGNode[]`	获取同一连通分量中的所有节点
`getDescendantNodes(node)`	`node: RGNode`	`RGNode[]`	基于布局层级获取所有后代节点

空间查询

方法	参数	返回值	说明
`getNodesRectBox(nodes?)`	`nodes?: RGNode[]`	`RGNodesRectBox`	计算节点的包围盒
`getNodesCenter(nodes?)`	`nodes?: RGNode[]`	`{x: number, y: number}`	获取节点簇的中心点
`getNodesInSelectionView(selectionView)`	`selectionView: RGSelectionView`	`RGNode[]`	获取选择矩形内的节点

RGNodesRectBox 结构:

{
  width: number,
  height: number,
  minX: number,
  minY: number,
  maxX: number,
  maxY: number
}

来源: packages/relation-graph-models/models/RelationGraphWith2Data2Analysis.ts:1-300

数据修改（CRUD）

添加数据

sequenceDiagram
    participant User
    participant Instance["RelationGraphInstance"]
    participant Provider["RGDataProvider"]
    participant UI["响应式 UI"]

    User->>Instance: addNodes([nodeJson1, nodeJson2])
    Instance->>Instance: _addNodes(jsonNodes)
    Instance->>Instance: 触发 beforeAddNodes 事件
    Instance->>Provider: 将 JsonNode 转换为 RGNode
    Provider->>Provider: commitChanges()
    Provider->>UI: 触发重新渲染
    UI-->>User: 更新后的图可见

    User->>Instance: addLines([lineJson1, lineJson2])
    Instance->>Instance: _addLines(jsonLines)
    Instance->>Instance: 触发 beforeAddLines 事件
    Instance->>Provider: 将 JsonLine 转换为 RGLine
    Provider->>Provider: commitChanges()
    Provider->>UI: 触发重新渲染

方法	参数	说明
`addNode(node)`	`node: JsonNode`	添加单个节点
`addNodes(nodes)`	`nodes: JsonNode[]`	添加多个节点
`addLine(line)`	`line: JsonLine`	添加单条连线
`addLines(lines)`	`lines: JsonLine[]`	添加多条连线（自动区分假线）
`addFakeLines(lines)`	`lines: JsonLine[]`	显式添加假线

删除数据

方法	参数	说明
`removeNode(node)`	`node: RGNode`	删除单个节点
`removeNodeById(nodeId)`	`nodeId: string`	按 ID 删除节点
`removeNodes(nodes)`	`nodes: RGNode[]`	删除多个节点
`removeNodesByIds(nodeIds)`	`nodeIds: string[]`	按 ID 数组删除节点
`removeLine(line)`	`line: RGLine`	删除单条连线
`removeLineById(lineId)`	`lineId: string`	按 ID 删除连线
`removeLines(lines)`	`lines: RGLine[]`	删除多条连线
`removeLineByIds(lineIds)`	`lineIds: string[]`	按 ID 数组删除连线
`removeFakeLine(line)`	`line: RGFakeLine`	删除假线
`removeFakeLineById(lineId)`	`lineId: string`	按 ID 删除假线

更新数据

方法	参数	说明
`updateNode(nodeId, properties)`	`nodeId: string, properties: Partial<RGNode>`	更新节点属性（部分更新）
`updateNodeData(nodeId, data)`	`nodeId: string, data: Record<string, any>`	更新 `node.data` 对象（快捷方式）
`updateLine(lineId, properties)`	`lineId: string, properties: Partial<RGLine>`	更新连线属性（部分更新）
`updateLineData(lineId, data)`	`lineId: string, data: Record<string, any>`	更新 `line.data` 对象（快捷方式）
`updateFakeLine(lineId, properties)`	`lineId: string, properties: Partial<RGFakeLine>`	更新假线属性

示例:

// 部分更新 - 只改变颜色和文本
graphInstance.updateNode('node1', {
  color: '#ff0000',
  text: 'Updated Node'
});

// 更新自定义数据
graphInstance.updateNodeData('node1', {
  customField: 'value',
  timestamp: Date.now()
});

批量操作

方法	参数	说明
`setJsonData(jsonData, resetViewSize?)`	`jsonData: RGJsonData, resetViewSize?: boolean`	清空图并加载新数据
`clearFakeLines()`	-	删除所有假线
`flatNodeData(nodes, parent, collect_nodes, collect_lines)`	树转平转换	将层级节点结构拍平

来源: packages/relation-graph-models/models/RelationGraphWith2Data3Update.ts:1-800

布局管理

触发布局

方法	参数	说明
`doLayout()`	-	执行一次布局算法
`startAutoLayout(options?)`	`options?: {times?: number}`	启动自动布局（用于 force/center 布局）
`stopAutoLayout()`	-	停止自动布局动画
`resetLayoutAndRefreshGraph()`	-	重置布局状态并重新布局

布局配置

布局行为通过 options.layout 控制。可通过以下方式更新：

graphInstance.updateOptions({
  layout: {
    layoutName: 'tree',
    layoutDirection: 'v',
    from: 'top'
  }
});
graphInstance.doLayout();

可用布局: 'tree', 'center', 'circle', 'force', 'fixed', 'smart-tree', 'io-tree', 'folder'

详细布局选项请参阅布局架构与基础类。

来源: packages/relation-graph-models/models/RelationGraphWith6Layout.ts:1-200

视图与坐标变换

图使用三种坐标系统：

graph TD
    subgraph "浏览器窗口"
        Client["客户端坐标
(clientX, clientY)
相对于视口"]
    end

    subgraph "RelationGraph 组件"
        View["视图坐标
(viewX, viewY)
相对于组件容器"]
    end

    subgraph "图画布"
        Canvas["画布坐标
(canvasX, canvasY)
逻辑节点位置
受缩放与平移影响"]
    end

    Client -->|"getViewXyByEvent(e)"| View
    View -->|"getCanvasXyByViewXy(xy)"| Canvas
    Canvas -->|"getViewXyByCanvasXy(xy)"| View
    Client -->|"getCanvasXyByClientXy(xy)"| Canvas

坐标转换方法

方法	参数	返回值	说明
`getViewXyByEvent(e)`	`e: RGUserEvent`	`RGCoordinate`	鼠标/触摸事件 → 视图坐标
`getCanvasXyByViewXy(viewXy)`	`viewXy: RGCoordinate`	`RGCoordinate`	视图 → 画布（考虑缩放/偏移）
`getViewXyByCanvasXy(canvasXy)`	`canvasXy: RGCoordinate`	`RGCoordinate`	画布 → 视图
`getCanvasXyByClientXy(clientXy)`	`clientXy: RGCoordinate`	`RGCoordinate`	客户端 → 画布（直接转换）
`getViewBoundingClientRect()`	-	`DOMRect`	获取组件容器边界

元素检测

方法	参数	返回值	说明
`isNode(el)`	`el: HTMLElement`	`RGNode \| undefined`	检查 DOM 元素是否为节点，并返回节点对象
`isLine(el)`	`el: HTMLElement`	`RGLine \| undefined`	检查 DOM 元素是否为连线，并返回连线对象

来源: packages/relation-graph-models/models/RelationGraphWith1View.ts:1-250

缩放与平移控制

缩放方法

方法	参数	说明
`zoom(zoomPercent, targetXYOnView?)`	`zoomPercent: number, targetXY?: RGCoordinate`	缩放到指定百分比（例如 150 表示 150%）
`setZoom(zoomPercent, targetXYOnView?)`	`zoomPercent: number, targetXY?: RGCoordinate`	`zoom()` 的别名
`zoomIn()`	-	放大 20%
`zoomOut()`	-	缩小 20%
`zoomToFit()`	-	缩放以使所有节点适配视口

平移/移动方法

方法	参数	说明
`moveToCenter()`	-	移动画布，使 (0,0) 位于视口中心
`moveToCenterByNode(node, options?)`	`node: RGNode, options?: {x?: number, y?: number}`	将视口中心对准指定节点
`focusRootNode()`	-	居中并缩放到根节点
`focusNodeById(nodeId, options?)`	`nodeId: string, options?: {x?: number, y?: number}`	居中并缩放到节点

动画控制

方法	参数	说明
`disableCanvasTransformAnimation()`	-	临时禁用平移/缩放动画
`enableCanvasTransformAnimation()`	-	重新启用平移/缩放动画

来源: packages/relation-graph-models/models/RelationGraphWith5Zoom.ts:1-300

交互式创建与事件

创建节点

startCreatingNodePlot 方法会启动一个交互式节点放置工作流：

sequenceDiagram
    participant User
    participant Instance["graphInstance"]
    participant Canvas["Canvas DOM"]

    User->>Instance: startCreatingNodePlot(e, {
  templateNode: {...},
  onCreateNode: callback
})
    Instance->>Canvas: 监听 mousemove
    Canvas-->>Instance: 鼠标移动
    Instance->>Canvas: 更新模板节点位置
    Canvas-->>Instance: 用户点击
    Instance->>User: 调用 onCreateNode(x, y, template)
    User->>Instance: addNodes([newNode])
    Instance->>Canvas: 移除监听器

方法签名:

startCreatingNodePlot(e: RGUserEvent, setting: {
  templateNode: Partial<JsonNode>,  // 放置时的视觉模板
  onCreateNode: (x: number, y: number, template: RGNode) => void,
  templateMove?: (x: number, y: number) => void  // 可选跟踪回调
})

创建连线

sequenceDiagram
    participant User
    participant Instance["graphInstance"]

    User->>Instance: startCreatingLinePlot(e, {
  fromNode?: node,
  template: {...},
  onCreateLine: callback
})
    Instance->>Instance: 设置 creatingLinePlot 状态
    Instance->>Instance: 显示连接控制器
    User->>Instance: 点击目标节点
    Instance->>User: 调用 onCreateLine(from, to)
    User->>Instance: addLines([newLine])
    Instance->>Instance: stopCreatingLinePlot()

方法签名:

startCreatingLinePlot(e: RGUserEvent, setting: {
  fromNode?: RGNode,            // 可选起始节点
  template?: Partial<JsonLine>, // 连线样式
  isReverse?: boolean,          // 创建反向方向
  onCreateLine: (from: RGNode, to: RGNode | RGPosition) => void
})

stopCreatingLinePlot()  // 取消连线创建

节点展开/折叠

方法	参数	说明
`expandOrCollapseNode(node, e)`	`node: RGNode, e: RGUserEvent`	切换节点展开状态
`expandNode(node, e?)`	`node: RGNode, e?: RGUserEvent`	展开节点（显示子节点）
`collapseNode(node, e?)`	`node: RGNode, e?: RGUserEvent`	折叠节点（隐藏子节点）

来源: packages/relation-graph-models/models/RelationGraphWith7Event.ts:1-900

编辑状态管理

节点编辑

编辑控制器支持多节点选择与操作：

方法	参数	说明
`setEditingNodes(nodes)`	`nodes: RGNode[] \| null`	设置正在编辑的节点（显示控制器 UI）
`addEditingNode(node)`	`node: RGNode`	将节点加入编辑集合
`removeEditingNode(node)`	`node: RGNode`	从编辑集合移除节点
`toggleEditingNode(node)`	`node: RGNode`	在编辑集合中切换该节点
`updateEditingControllerView()`	-	手动更新控制器边界

编辑控制器会自动：

为选中节点显示缩放/调整大小手柄
拖拽时显示对齐参考线
为选中节点启用批量操作

连线编辑

方法	参数	说明
`setEditingLine(line)`	`line: RGLine \| null`	设置正在编辑的连线（显示顶点/控制点 UI）
`updateEditingLineView()`	-	手动更新连线编辑器
`hideEditingLineView()`	-	临时隐藏连线编辑器（用于预览）

当使用 lineShape: 44 (StandardOrthogonal) 或 lineShape: 49 (HardOrthogonal) 编辑连线时，会出现用于调整路径段的控制点。

来源: packages/relation-graph-models/models/RelationGraphWith91Editing.ts:1-1000

连线渲染 API

连线路径生成

核心连线渲染方法主要用于内部实现，但也可用于自定义渲染：

方法	参数	返回值	说明
`createLineDrawInfo(link, line)`	`link: RGLink \| RGElementLine, line: RGLine`	`RGLinePathInfo`	生成完整的连线绘制数据
`generateLinePath(config)`	`config: RGGenerateLineConfig`	`RGLinePathInfo`	根据配置生成连线路径
`getArrowMarkerId(line, isStartArrow?)`	`line: RGLine, isStartArrow?: boolean`	`string \| undefined`	获取箭头的 SVG marker ID

RGLinePathInfo 结构:

{
  pathCommands: RGLinePathCommands,  // 结构化路径数据
  pathData: string,                  // SVG path 的 'd' 属性
  textPosition: {x, y, rotate},      // 连线标签的位置
  points: RGCoordinate[]             // 控制点/顶点
}

连线文本样式

方法	参数	返回值	说明
`generateLineTextStyle(config, pathInfo)`	`config: RGGenerateLineConfig, pathInfo: RGLinePathInfo`	`{text, cssStyles}`	生成文本变换样式
`generateLineTextStyle4TextOnPath(config)`	`config: RGGenerateLineConfig`	`{text, textOffset, textAnchor, ...}`	生成 textPath 专用样式

连线形状

支持的 lineShape 值（来自 RGLineShape enum）：

值	名称	说明
1	`StandardStraight`	直接直线
6	`StandardCurve`	平滑贝塞尔曲线
4	`SimpleOrthogonal`	简单 L 形路径
44	`StandardOrthogonal`	多段正交路径（圆角）
49	`HardOrthogonal`	用户可编辑的正交路径
2, 3, 5, 7, 8	`Curve2-8`	多种贝塞尔曲线样式

来源: packages/relation-graph-models/models/RelationGraphWith4Line.ts:1-572

假线与连接目标

假线支持连接到非节点目标（DOM 元素、画布点等）：

graph LR
    subgraph "普通连线"
        N1["节点 A"]
        N2["节点 B"]
        N1 -->|"RGLine
from: 'A'
to: 'B'"| N2
    end

    subgraph "假线"
        N3["节点 C"]
        DOM["DOM 元素
#target-div"]
        PT["画布点
(x: 500, y: 300)"]

        N3 -->|"RGFakeLine
fromType: 'node'
toType: 'HTMLElementId'"| DOM
        N3 -->|"RGFakeLine
fromType: 'node'
toType: 'CanvasPoint'"| PT
    end

假线管理

方法	参数	说明
`addFakeLines(lines)`	`lines: JsonLine[]`	添加假线
`removeFakeLineById(lineId)`	`lineId: string`	删除假线
`updateFakeLine(lineId, properties)`	`lineId: string, properties: Partial<RGFakeLine>`	更新假线
`clearFakeLines()`	-	删除所有假线

连接目标类型

来自 RGInnerConnectTargetType 的内置目标类型：

Node - 连接到节点（默认）
NodePoint - 节点上的指定点
HTMLElementId - 按 ID 的 DOM 元素
CanvasPoint - 绝对画布坐标
ViewPoint - 相对视口的坐标

自定义目标渲染器

注册自定义目标类型处理器：

graphInstance.setFakeLineTargetRender(
  'myCustomType',
  (targetId: string) => {
    // 返回带有位置/大小的 RGRectTarget
    return {
      x: 100,
      y: 200,
      el_W: 50,
      el_H: 50,
      nodeShape: RGNodeShape.rect
    };
  }
);

来源: packages/relation-graph-models/models/RelationGraphWith2Data4ConnectTarget.ts:1-200, packages/relation-graph-models/models/RelationGraphWith2Data5LineConfig.ts:1-150

配置与选项

更新选项

方法	参数	说明
`updateOptions(options)`	`options: Partial<RGOptions>`	更新配置（部分合并）
`setOptions(options)`	`options: Partial<RGOptions>`	`updateOptions` 的别名
`getOptions()`	-	获取当前完整选项

常见配置更新:

// 更改布局
graphInstance.updateOptions({
  layout: {
    layoutName: 'tree',
    layoutDirection: 'h',
    treeNodeGapH: 80,
    treeNodeGapV: 60
  }
});

// 更改外观
graphInstance.updateOptions({
  defaultNodeColor: '#e0e0e0',
  defaultLineColor: '#999',
  defaultLineShape: RGLineShape.StandardCurve,
  canvasZoom: 120
});

// 启用性能模式
graphInstance.updateOptions({
  performanceMode: true
});

关键选项参考

分类	选项	类型	说明
布局	`layout.layoutName`	`'tree' \| 'center' \| 'force' \| ...`	布局算法
	`layout.layoutDirection`	`'h' \| 'v'`	水平或垂直
外观	`defaultNodeColor`	`string`	默认节点背景
	`defaultLineColor`	`string`	默认连线颜色
	`defaultLineShape`	`RGLineShape`	默认连线形状
	`backgroundColor`	`string`	画布背景
交互	`disableDragNode`	`boolean`	禁止拖动节点
	`disableDragLine`	`boolean`	禁止拖动连线
	`disableWheelEvent`	`boolean`	禁用鼠标滚轮
	`wheelEventAction`	`'zoom' \| 'scroll' \| 'none'`	滚轮行为
性能	`performanceMode`	`boolean`	启用高性能模式
	`minCanvasZoom`	`number`	最小缩放（默认 20）
	`maxCanvasZoom`	`number`	最大缩放（默认 300）

完整选项参考请参阅配置与选项。

来源: packages/relation-graph-models/models/RelationGraphWith3Options1Update.ts:1-200, packages/types.ts:581-703

工具方法

ID 生成

方法	参数	返回值	说明
`generateNewUUID(length?)`	`length?: number` (默认 5)	`string`	生成随机唯一 ID
`generateNewNodeId(idLength?)`	`idLength?: number` (默认 5)	`string`	生成唯一节点 ID（检查现有节点）

调试

方法	参数	说明
`enableDebugLog(enable)`	`enable: boolean`	启用/禁用控制台日志

事件系统

方法	参数	说明
`addEventHandler(handler)`	`handler: RGEventHandler`	添加自定义事件处理器
`removeEventHandler(handler)`	`handler: RGEventHandler`	移除事件处理器
`setEventEmitHook(hook)`	`hook: RGEventEmitHook`	设置框架特定的 emit hook（仅 Vue）

图片导出

方法	参数	返回值	说明
`exportAsImage(options?)`	`options?: {type: 'png' \| 'svg', quality?: number}`	`Promise<string>`	导出图为图片 data URL

全屏

方法	参数	说明
`toggleFullscreen()`	-	进入/退出全屏模式

来源: packages/relation-graph-models/models/RelationGraphBase.ts:1-300, packages/relation-graph-models/models/RelationGraphWith93Image.ts:1-150

类型参考

核心数据类型

类型	说明	关键属性
`JsonNode`	输入节点格式	`id`, `text`, `x`, `y`, `color`, `data`
`RGNode`	带布局信息的运行时节点	所有 `JsonNode` + `lot`, `rgShouldRender`, `rgCalcedVisibility`
`JsonLine`	输入连线格式	`from`, `to`, `text`, `lineShape`, `color`
`RGLine`	运行时连线	所有 `JsonLine` + `isReverse`
`RGFakeLine`	非节点连接的连线	所有 `RGLine` + `fromType`, `toType`
`RGLink`	连线 + 连接的节点	`line`, `fromNode`, `toNode`, `totalLinesBetweenNodes`

配置类型

类型	说明
`RGOptions`	用户配置（部分）
`RGOptionsFull`	完整运行时配置
`RGLayoutOptions`	布局特定设置（联合类型）

几何类型

类型	结构	用途
`RGCoordinate`	`{x: number, y: number}`	点、位置
`RGNodesRectBox`	`{width, height, minX, minY, maxX, maxY}`	包围盒
`RGRectTarget`	`{x, y, el_W, el_H, nodeShape}`	带形状的矩形
`RGLineTarget`	`RGRectTarget + {id, targetType, targetData}`	连接目标

枚举类型

枚举	值	用途
`RGNodeShape`	`circle=0`, `rect=1`	节点形状
`RGLineShape`	`StandardStraight=1`, `StandardCurve=6`, `StandardOrthogonal=44`, etc.	连线渲染样式
`RGJunctionPoint`	`border`, `ltrb`, `tb`, `lr`, `left`, `right`, `top`, `bottom`	连线连接点
`RGInnerConnectTargetType`	`Node`, `NodePoint`, `HTMLElementId`, `CanvasPoint`, `ViewPoint`	假线的目标类型

完整类型定义请参阅Relation Graph Types Definitions。

来源: packages/types.ts:1-1000, ai-prompt/wiki/relation-graph-instance-architect/Relation Graph Types Definitions.md:1-1000

常见工作流

工作流 1：添加并定位数据

sequenceDiagram
    participant App
    participant Instance["graphInstance"]
    participant Provider["RGDataProvider"]
    participant Layout["布局引擎"]

    App->>Instance: addNodes([...nodes])
    Instance->>Provider: 存储节点
    App->>Instance: addLines([...lines])
    Instance->>Provider: 存储连线并创建 links
    App->>Instance: updateOptions({layout: {...}})
    App->>Instance: doLayout()
    Instance->>Layout: placeNodes(nodes, rootNode)
    Layout->>Provider: 更新 node.x, node.y
    Provider->>App: 触发 UI 更新

工作流 2：交互式编辑

sequenceDiagram
    participant User
    participant Instance["graphInstance"]
    participant Editor["编辑控制器"]

    User->>Instance: 按住 Shift 点击节点
    Instance->>Editor: addEditingNode(node)
    Editor->>User: 显示选择手柄
    User->>Instance: 拖动调整大小手柄
    Instance->>Editor: onResizing(...)
    Editor->>Instance: updateNode(id, {width, height})
    User->>Instance: 释放鼠标
    Instance->>Editor: onResizeEnd(...)
    Instance->>User: 触发 'onResizeEnd' 事件

工作流 3：自定义连线渲染

graph TB
    GetLink["getLinks()"]
    CreateInfo["createLineDrawInfo(link, line)"]
    PathInfo["RGLinePathInfo
{pathData, textPosition, points}"]
    Render["自定义 SVG/Canvas 渲染"]

    GetLink --> CreateInfo
    CreateInfo --> PathInfo
    PathInfo --> Render

来源: packages/relation-graph-models/models/RelationGraphWith2Data3Update.ts:1-800, packages/relation-graph-models/models/RelationGraphWith91Editing.ts:1-1000, packages/relation-graph-models/models/RelationGraphWith4Line.ts:80-114