Relation Graph

Using Svelte

This page is the Svelte quick start for relation-graph, aligned with ai-prompts/relation-graph-guide.md.

1. Install

npm install --save @relation-graph/svelte

Legacy package name relation-graph-svelte may still appear in existing projects.

2. Core Components

RGProvider: provides graph context.
RelationGraph: renders graph content.
RGHooks: provides graph instance and state in Svelte components.

3. Minimal Svelte Setup

MyGraphComponent.svelte

<script lang="ts">
  import { RGProvider } from '@relation-graph/svelte';
  import MyGraph from './MyGraph.svelte';
</script>

<RGProvider>
  <MyGraph />
</RGProvider>

MyGraph.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { RelationGraph, RGHooks } from '@relation-graph/svelte';
  import type { JsonNode, JsonLine, RGOptions } from '@relation-graph/svelte';

  const graphInstance = RGHooks.useGraphInstance();

  const graphOptions: RGOptions = {
    showToolBar: false,
    wheelEventAction: 'scroll',
    dragEventAction: 'move',
    layout: {
      layoutName: 'tree',
      from: 'left',
      treeNodeGapH: 150,
      treeNodeGapV: 10
    }
  };

  const initializeGraph = () => {
    const nodes: JsonNode[] = [
      { id: '1', text: 'Root' },
      { id: '2', text: 'Svelte App' },
      { id: '3', text: 'Graph Engine' }
    ];
    const lines: JsonLine[] = [
      { from: '1', to: '2', text: 'uses' },
      { from: '1', to: '3', text: 'drives' }
    ];

    graphInstance.clearGraph();
    graphInstance.addNodes(nodes);
    graphInstance.addLines(lines);

    setTimeout(() => {
      const layouter = graphInstance.createLayout({
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 150,
        treeNodeGapV: 10
      });
      const allNodes = graphInstance.getNodes();
      const rootNode = graphInstance.getNodeById('1');
      if (rootNode) {
        layouter.placeNodes(allNodes, rootNode);
      }
      graphInstance.moveToCenter();
      graphInstance.zoomToFit();
    }, 300);
  };

  onMount(() => {
    initializeGraph();
  });

  const onNodeClick = (event) => {
    const [nodeObject, nativeEvent] = event.detail;
    console.log('node click:', nodeObject && nodeObject.id, nativeEvent);
  };

  const onLineClick = (event) => {
    const [lineObject, linkObject, nativeEvent] = event.detail;
    console.log('line click:', lineObject && lineObject.from, lineObject && lineObject.to, linkObject, nativeEvent);
  };
</script>

<div style="width: 100vw; height: 100vh; background-color: #ffffff;">
  <RelationGraph
    options={graphOptions}
    on:onNodeClick={onNodeClick}
    on:onLineClick={onLineClick}
  />
</div>

4. Data Input Strategies

Incremental APIs (addNodes, addLines, update/remove methods).
One-shot setJsonData.
Initial initialData prop.

4.1 `setJsonData`

graphInstance.setJsonData({
  rootId: '1',
  nodes,
  lines
});

5. Access Runtime State in 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;

6. Practical Notes

Parent container size controls graph viewport size.
Use instance APIs for runtime option updates.
For dynamic editors, prefer incremental updates over frequent full resets.