内置小组件指南
relation-graph 提供了一组可组合的内置 UI 小组件，用于快速搭建“可编辑关系图”能力，如工具栏、缩略图、节点编辑器、连线编辑器等。
1. 使用原则
- 图谱核心渲染由
RelationGraph负责。 - 内置小组件用于增强交互与编辑体验。
- 大多数小组件建议放在
view插槽中组合使用。
2. 常用小组件一览
| 组件 | 主要用途 | 常用参数/事件 |
|---|---|---|
RGToolBar |
工具栏（缩放、居中、全屏等） | direction、positionH、positionV |
RGMiniView |
缩略图/鹰眼图 | position、width、height |
RGEditingReferenceLine |
拖拽对齐参考线 | showText、adsorption |
RGEditingNodeController |
当前编辑节点的控制容器 | 默认插槽可放 RGEditingResize 等 |
RGEditingResize |
节点缩放控制点 | disableResizeWidth、disableResizeHeight |
RGEditingLineController |
连线编辑（端点、路径、文字） | textEditable、pathEditable、onLineTextChanged 等 |
RGEditingConnectController |
连线端点连接位置选择器 | 无必填参数 |
RGConnectTarget |
让任意元素成为可连接目标 | targetId、junctionPoint、targetData、lineTemplate 等 |
3. 典型挂载方式（Vue3）
<template>
<RelationGraph :options="graphOptions">
<template #view>
<RGToolBar direction="v" positionH="right" positionV="center" />
<RGMiniView position="br" width="180px" height="120px" />
<RGEditingReferenceLine :showText="true" :adsorption="true" />
<RGEditingNodeController>
<RGEditingResize />
</RGEditingNodeController>
<RGEditingLineController :textEditable="true" :pathEditable="true" />
<RGEditingConnectController />
</template>
</RelationGraph>
</template>
<script setup lang="ts">
const graphOptions = {
showToolBar: false // 关闭默认工具栏，改用自定义位置的 RGToolBar
};
</script>
4. RGToolBar 与默认工具栏
showToolBar: true 时，relation-graph 会显示默认工具栏。
如果你希望自定义位置、方向和组合方式，建议：
options.showToolBar = false- 在
view插槽手动放置RGToolBar
5. RGMiniView 布局建议
- 常见位置：
position="br"（右下角） - 推荐固定尺寸（例如
180x120） - 移动端建议适当减小尺寸，避免遮挡主画布
6. 编辑器场景建议组合
编辑器模式可按以下顺序叠加：
RGEditingReferenceLine（对齐辅助）RGEditingNodeController + RGEditingResize（节点编辑）RGEditingLineController（连线编辑）RGEditingConnectController（连接点选择）
7. RGConnectTarget 关键点
RGConnectTarget 可以把节点内部元素或画布任意元素升级为“连线目标/连线起点”：
- 用
targetId标识连接目标 - 用
junctionPoint指定连线连接方位（left/right/top/bottom/border/ltrb/tb/lr） - 可通过
lineTemplate为新线注入默认样式或业务字段
8. 与事件系统的联动
内置编辑组件通常与这些事件配合：
beforeCreateLine：连线创建前校验onLineBeCreated：连线真正入图onResizeStart/beforeNodeResize/onResizeEnd：节点缩放生命周期onLineVertexDropped：连线端点拖拽释放
9. 实践建议
- 小组件按需启用，避免一次性挂载过多编辑层。
- 把“可视交互”交给内置小组件，把“业务规则”放在事件回调中。
- 对复杂编辑器，将工具栏/属性面板与
RGHooks状态结合，保持 UI 与图谱状态同步。