渲染系统
本页对应英文版 Rendering System，用于说明 relation-graph 如何把运行时图数据转换为实际可见的节点、连线、文本和交互层，并在不同渲染模式间切换。
渲染架构概览
- 渲染系统以统一数据模型为输入。
- 根据当前模式选择 SVG / DOM 或 Canvas / EasyView 等不同渲染方式。
- 节点、连线、文字、连接点、编辑层和辅助层会在统一坐标系下协同工作。
渲染模式
标准 SVG / DOM 渲染
- 适合普通图和需要高度可定制插槽的场景。
- 优点是结构清晰、便于调试和样式定制。
EasyView / Canvas 模式
- 适合节点和连线数量较多的大图。
- 通过减少 DOM 数量提升渲染性能。
组件层级
- 顶层图组件负责组织整体结构。
RGCanvas及其子层负责绘制图内容。- 节点、连线、文字、连接点、工具栏、小地图和编辑控制器按层组合。
渲染流水线
- 从 provider 读取当前图数据
- 结合布局结果和视图变换计算坐标
- 决定当前需要渲染的节点与连线
- 分发到对应渲染层
- 挂载事件与交互辅助元素
节点与连线渲染
- 节点渲染负责节点主体、插槽内容、尺寸与交互区域。
- 连线渲染负责路径、连接点、箭头、文本、控制点与多线偏移。
多层渲染系统
- 背景层
- 图内容层
- 插槽层
- 编辑辅助层
- 顶层浮动交互层
这种分层方式能减少复杂交互时的相互干扰。
视口裁剪与性能
- 大图场景下会优先结合可见性判断只渲染当前需要显示的元素。
- 这是标准模式与性能模式都依赖的重要能力。
平台实现
- Vue、React、Svelte 与 Web Components 的渲染外壳不同。
- 但节点、连线、插槽与交互层的语义尽量保持一致。