JavaScript is required

插槽系统概览

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. 推荐分层策略

  1. 用数据字段(如 node.colorline.color)定义核心视觉语义。
  2. 用插槽组织复杂结构与动态内容。
  3. 用 CSS 做主题和状态细节。
  4. 用图谱实例 API/事件承接交互逻辑。

5. 场景速查

  • 自定义卡片节点:slot-node
  • 高级连线路径与文本:slot-line
  • 分组/泳道/网格:slot-canvas
  • 浮动工具栏/缩略图/控制器:slot-view
  • 水印与导出背景:#background

6. 下一步阅读