Relation Graph

核心组件说明

本页说明 relation-graph 的核心组件体系，以及这些组件如何协同工作。

1. 组件架构

relation-graph 的组件体系可以概括为三层：

RGProvider：图谱上下文提供者。
RelationGraph：图谱渲染与交互核心组件。
内置 UI 子组件：按需挂载的编辑器能力组件。

在大多数业务中，RGProvider + RelationGraph 是必选组合，其他组件按需求逐步添加。

2. `RGProvider`

RGProvider 用于提供图谱实例、图谱数据和运行时状态上下文。

在被 RGProvider 包裹的组件中，可通过 RGHooks 获取：

图谱实例（useGraphInstance）
当前选中对象（useCheckedItem）
视图信息与框选状态
连线/节点创建与编辑状态

React 示例

import React from 'react';
import { RGProvider, RGHooks } from '@relation-graph/react';

const MyGraph: React.FC = () => {
  const graphInstance = RGHooks.useGraphInstance();
  const checkedItem = RGHooks.useCheckedItem();
  return null;
};

export default function Page() {
  return (
    <RGProvider>
      <MyGraph />
    </RGProvider>
  );
}

3. `RelationGraph`

RelationGraph 是核心可视化组件，负责画布与视口渲染、布局执行、交互事件处理。

关键点：

图谱可视区域大小由父容器尺寸决定。
通过 RGOptions 配置交互行为和样式。
节点/连线/画布事件在该组件上注册。
通过 slots（不同框架语法不同）扩展节点、连线、画布和视图层。

最小使用示意（Vue3）

<template>
  <RGProvider>
    <div style="width: 100vw; height: 100vh; background-color: #fff;">
      <RelationGraph :options="graphOptions" @onNodeClick="onNodeClick" />
    </div>
  </RGProvider>
</template>

4. 常用内置子组件（可选）

relation-graph 提供一组用于编辑器场景的可复用子组件，常用包括：

RGToolBar：工具栏。
RGMiniView：缩略图。
RGEditingReferenceLine：节点拖拽对齐参考线。
RGEditingNodeController：节点编辑控制器容器。
RGEditingResize：当前编辑节点的缩放控制点。
RGEditingLineController：连线编辑控制器。
RGEditingConnectController：连接控制器（创建连线）。
RGConnectTarget：让任意元素成为可连接目标（常与 fake line 搭配）。

这些组件通常放在 view 插槽（或各框架对应插槽 API）中，以组合成完整编辑器能力。

5. 典型组合方式

用 RGProvider 包裹图谱区域。
渲染 RelationGraph，配置 options 与事件。
通过实例 API 初始化/更新图数据。
按需挂载 RGMiniView、编辑控制器等子组件。

6. 平台差异

Vue3 / React / Svelte / Vue2：都支持 RGProvider + RelationGraph 模式。
Vue2：状态访问通常通过 graphStoreMixin。
Web Components：没有 RGProvider/RGHooks，通过 onReady 获取实例并直接调用实例 API。