Relation Graph

Core Components

This page explains the core component model of relation-graph and how these components collaborate.

1. Component Architecture

relation-graph is built around a small set of core components:

RGProvider: graph context provider.
RelationGraph: graph rendering and interaction view.
Built-in UI subcomponents: optional editor/interaction widgets mounted in graph view slots.

In most applications, RGProvider + RelationGraph are always used; other subcomponents are enabled based on product needs.

2. `RGProvider`

RGProvider provides shared context for graph instance, reactive graph data, and runtime status.

Inside components wrapped by RGProvider, you can use RGHooks to access:

graph instance (useGraphInstance)
checked item state (useCheckedItem)
view and selection state
editing/creating line and node states

React Example

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 is the main visual component. It renders canvas + viewport and handles layout/interaction.

Key points:

Parent container size determines graph viewport size.
Graph behavior and visuals are configured through RGOptions.
Events (node/line/canvas) are registered on this component.
Slots are used to inject custom node/line/canvas/view/background content.

Minimal usage (Vue3 style)

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

4. Core UI Subcomponents (Optional)

relation-graph provides reusable subcomponents for editor-like UIs. Common ones include:

RGToolBar: built-in toolbar.
RGMiniView: minimap / overview.
RGEditingReferenceLine: drag alignment guides.
RGEditingNodeController: node editing controller host.
RGEditingResize: resize handles for the currently edited node.
RGEditingLineController: line editing controller.
RGEditingConnectController: connect-point controller for creating lines.
RGConnectTarget: makes any element a connectable target (useful with fake lines).

These are usually rendered in view slot (or framework-equivalent slot APIs) to compose visual editor capabilities.

5. Typical Composition Pattern

Wrap graph area with RGProvider.
Render RelationGraph with options and event handlers.
Initialize and update data via graph instance APIs.
Add optional subcomponents (RGMiniView, editing controllers, etc.) when advanced editing is needed.

6. Platform Differences

Vue3 / React / Svelte / Vue2: all support RGProvider + RelationGraph pattern.
Vue2: state access typically uses graphStoreMixin.
Web Components: no RGProvider/RGHooks; get graphInstance from onReady and operate directly through instance APIs.