TypeScript 类型定义
本页汇总 relation-graph 中最常用的类型体系，帮助你快速建立“数据层、配置层、交互层、组件层”的类型认知。
1. 类型体系总览
核心类型大致分为 6 组：
- 图数据类型：
JsonNode、JsonLine、RGNode、RGLine、RGLink - 配置类型：
RGOptions、RGOptionsFull、RGLayoutOptions - 交互事件类型：
RGListeners、RGEventNames、RGUserEvent - 布局与坐标类型：
RGCoordinate、RGPosition、RGNodesRectBox - 组件 Props 类型：
RelationGraphProps、RGToolBarProps、RGMiniViewProps - 运行时状态类型：
RGCreatingLine、RGEditingNodes、RGCheckedItem等
2. 数据模型类型
JsonNode / RGNode
JsonNode：输入/持久化用的节点 JSON 类型RGNode：运行时节点对象，除业务字段外还包含渲染计算字段
常见字段：
- 标识与文本：
id、text、type - 位置与尺寸：
x、y、width、height - 样式：
color、borderColor、fontSize、nodeShape - 业务扩展：
data
JsonLine / RGLine / RGLink
JsonLine：输入/持久化用的连线 JSON 类型RGLine：运行时线条对象（含渲染态字段）RGLink：节点对之间的连接关系对象（同一节点对可能有多条线）
常见字段：
- 端点：
from、to - 文字与样式：
text、color、lineWidth、lineShape - 高级连接点：
fromJunctionPoint、toJunctionPoint - 业务扩展：
data
3. 枚举与基础类型
高频类型包括：
RGNodeShape:circle/rectRGLineShape:StandardCurve、StandardOrthogonal等RGJunctionPoint:left/right/top/bottom/border/ltrb/tb/lrRGWidgetPosition:top/right/bottom/left/tl/tr/bl/brRGEventTargetType:'canvas' | 'node' | 'line'RGUserEvent:MouseEvent | TouchEvent
4. 配置类型
RGOptions（用户可配置）
常见配置字段：
- 交互：
wheelEventAction、dragEventAction - 显示：
showToolBar、backgroundColor - 默认样式：
defaultNodeColor、defaultLineColor、defaultLineShape - 布局：
layout（类型为RGLayoutOptions） - 缩放：
minCanvasZoom、maxCanvasZoom
RGOptionsFull（运行时完整配置）
RGOptionsFull 在 RGOptions 基础上包含运行时状态字段（例如当前 zoom、canvasOffset、编辑态信息）。
通常不建议直接持久化或人工构造该类型。
5. 布局类型
RGLayoutOptions 是联合类型，常见布局参数来自以下子类型：
RGForceLayoutOptionsRGCenterLayoutOptionsRGTreeLayoutOptions
常见公共字段：
layoutNamelayoutDirectionfixedRootNode- 对齐参数：
alignItemsX、alignItemsY
6. 事件类型
RGListeners
<RelationGraph /> 的事件集合，覆盖：
- 生命周期（
onReady） - 点击与拖拽（
onNodeClick、onNodeDragging等） - 缩放滚动（
beforeZoomStart、beforeScrollStart） - 编辑生命周期（
beforeCreateLine、onLineBeCreated等）
RGEventNames
事件名枚举，可用于事件总线或统一日志系统。
7. 组件 Props 类型
RelationGraphProps = RGListeners & { options: RGOptions; ... }RGToolBarProps：方向与水平/垂直定位RGMiniViewProps：位置、宽高、样式RGEditingLineControllerProps：textEditable、pathEditable、编辑回调
8. 坐标与几何类型
RGCoordinate:{ x, y }RGPosition: 等同坐标类型（语义更偏位置）RGNodesRectBox: 节点集合包围盒（minX/maxX/minY/maxY/width/height）RGSelectionView: 框选区域数据
9. 常见类型导入示例
import type {
RGOptions,
RGLayoutOptions,
JsonNode,
JsonLine,
RGNode,
RGLine,
RGLink,
RGListeners
} from "@relation-graph/vue3";
如果你使用 React / Vue2 / Svelte，请改为对应包名导入。
10. 实践建议
- 存储层用
JsonNode/JsonLine，渲染层用RGNode/RGLine。 data字段用于业务扩展，避免把业务字段散落在顶层。- 统一定义项目级别的节点/连线扩展类型（例如
MyNodeData、MyLineData）。 - 对外 API 层优先暴露
Json*类型，降低运行时字段耦合。