JavaScript is required
relation-graph 关系数据可视化与编辑解决方案
登录 English GitHub

图谱状态管理（RGHooks）

RGHooks 用于获取 relation-graph 的运行时响应式状态。

它可以帮助你构建工具栏、属性面板、侧边栏等“随图谱状态实时变化”的 UI。

1. 可获取的状态类型

常见状态包括：

  • 图谱实例
  • 正在创建的连线状态
  • 正在创建的节点状态
  • 正在编辑的节点状态
  • 正在编辑的连线状态
  • 正在连接节点状态
  • 当前视图信息（缩放与偏移）
  • 框选区域视图状态
  • 当前选中图形对象状态

2. React 用法

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

const graphInstance = RGHooks.useGraphInstance();
const creatingLine = RGHooks.useCreatingLine();
const creatingNode = RGHooks.useCreatingNode();
const editingNodes = RGHooks.useEditingNodes();
const editingLine = RGHooks.useEditingLine();
const connectingNode = RGHooks.useConnectingNode();
const viewInformation = RGHooks.useViewInformation();
const selectionView = RGHooks.useSelectionView();
const checkedItem = RGHooks.useCheckedItem();

3. Vue3 用法

import { RGHooks } from '@relation-graph/vue';

const graphInstance = RGHooks.useGraphInstance();
const creatingLine = RGHooks.useCreatingLine();
const creatingNode = RGHooks.useCreatingNode();
const editingNodes = RGHooks.useEditingNodes();
const editingLine = RGHooks.useEditingLine();
const connectingNode = RGHooks.useConnectingNode();
const viewInformation = RGHooks.useViewInformation();
const selectionView = RGHooks.useSelectionView();
const checkedItem = RGHooks.useCheckedItem();

4. Svelte 用法

import { RGHooks } from '@relation-graph/svelte';

const graphInstance = RGHooks.useGraphInstance();
const { creatingLineStore } = RGHooks.useHookStore();
const { creatingNodeStore } = RGHooks.useHookStore();
const { editingNodesStore } = RGHooks.useHookStore();
const { editingLineStore } = RGHooks.useHookStore();
const { connectingNodeStore } = RGHooks.useHookStore();
const { viewInformationStore } = RGHooks.useHookStore();
const { selectionViewStore } = RGHooks.useHookStore();
const { checkedItemStore } = RGHooks.useHookStore();

$: creatingLine = $creatingLineStore;
$: creatingNode = $creatingNodeStore;
$: editingNodes = $editingNodesStore;
$: editingLine = $editingLineStore;
$: connectingNode = $connectingNodeStore;
$: viewInformation = $viewInformationStore;
$: selectionView = $selectionViewStore;
$: checkedItem = $checkedItemStore;

5. Vue2 等价方案（graphStoreMixin）

Vue2 不使用 Hooks 语法，而是通过 graphStoreMixin 获取：

  • this.graphInstance
  • this.creatingLine
  • this.creatingNode
  • this.editingNodes
  • this.editingLine
  • this.connectingNode
  • this.viewInformation
  • this.selectionView
  • this.checkedItem

6. 常见 UI 场景

  • 根据 checkedItem 控制工具按钮可用状态。
  • 根据 editingNodes 决定是否展示节点属性面板。
  • 根据 editingLine 展示连线属性编辑器。
  • 根据 selectionView 显示框选范围提示。
  • 根据 viewInformation 显示当前缩放比例和偏移。

7. 实践建议

  • Hooks/Store 状态用于驱动 UI 展示，不建议直接作为持久化数据。
  • 数据修改优先走图谱实例 API，让 hooks 状态自然反映结果。
  • 所有依赖 hooks 的组件应位于同一个 RGProvider 作用域内。

8. 下一步阅读