插槽系统概览
relation-graph 提供完整的插槽体系,用于深度定制节点、连线、画布与视图层内容。
1. 为什么用插槽
插槽可以让你:
- 自定义节点/连线视觉表达
- 在画布坐标系中放置自定义图形元素
- 在视图层挂载固定工具 UI
- 快速搭建编辑器类应用
2. 插槽类型总览
- 节点插槽:
#node/<RGSlotOnNode>/slot="node" - 连线插槽:
#line/<RGSlotOnLine>/slot="line" - 画布插槽:
#canvas/<RGSlotOnCanvas>/slot="canvas" - 画布前景插槽:
#canvas-above/<RGSlotOnCanvasAbove>/slot="canvas-above" - 视图插槽:
#view/<RGSlotOnView>/slot="view" - 背景插槽:
#background/<RGBackground>或等价写法
3. 坐标与运动规则
canvas/canvas-above内容会随画布平移与缩放。view内容固定在视口,不随画布变化。background位于画布之下,可作为导出图片背景。
4. 推荐分层策略
- 用数据字段(如
node.color、line.color)定义核心视觉语义。 - 用插槽组织复杂结构与动态内容。
- 用 CSS 做主题和状态细节。
- 用图谱实例 API/事件承接交互逻辑。
5. 场景速查
- 自定义卡片节点:
slot-node - 高级连线路径与文本:
slot-line - 分组/泳道/网格:
slot-canvas - 浮动工具栏/缩略图/控制器:
slot-view - 水印与导出背景:
#background