JavaScript is required
relation-graph Relational Data Visualization and Editing
Sign in 中文 GitHub

State Management (RGHooks)

RGHooks provides reactive runtime state from relation-graph.

Use it to build toolbars, inspectors, side panels, and editing UI that stays synchronized with graph interactions.

1. What State Is Exposed

Common runtime state includes:

  • current graph instance
  • creating line state
  • creating node state
  • editing node(s) state
  • editing line state
  • connecting-node target state
  • viewport information
  • selection box view
  • checked (selected) item state

2. React Usage

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 Usage

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 Usage

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 Equivalent (graphStoreMixin)

Vue2 does not use hooks in the same way. Instead, inside components under RGProvider, use graphStoreMixin to access:

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

6. Typical UI Scenarios

  • Disable/enable toolbar actions based on checkedItem.
  • Show node editing panel when editingNodes is non-empty.
  • Show line inspector when editingLine exists.
  • Render selection overlay info from selectionView.
  • Display zoom/offset indicators from viewInformation.

7. Best Practices

  • Use hooks/store data for UI rendering only; keep domain persistence in your own state/store.
  • Prefer graph instance APIs for mutations; let hooks reflect runtime results.
  • Co-locate inspector UI with hooks consumers under the same RGProvider scope.

8. Next Reading