Relation Graph

Using Vue2

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

1. Install

npm install --save @relation-graph/vue2

Legacy package name relation-graph-vue2 is also widely used.

2. Core Components and Pattern

RGProvider: provides graph context.
RelationGraph: renders graph content.
graphStoreMixin: Vue2 pattern to access graph instance and reactive graph state.

3. Minimal Vue2 Setup

MyGraphComponent.vue

<template>
  <RGProvider>
    <MyGraph />
  </RGProvider>
</template>

<script>
import { RGProvider } from '@relation-graph/vue2';
import MyGraph from './MyGraph.vue';

export default {
  name: 'MyGraphComponent',
  components: { RGProvider, MyGraph }
};
</script>

MyGraph.vue

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

<script>
import { RelationGraph, graphStoreMixin } from '@relation-graph/vue2';

export default {
  name: 'MyGraph',
  components: { RelationGraph },
  mixins: [graphStoreMixin],
  data() {
    return {
      graphOptions: {
        showToolBar: false,
        wheelEventAction: 'scroll',
        dragEventAction: 'move',
        layout: {
          layoutName: 'tree',
          from: 'left',
          treeNodeGapH: 150,
          treeNodeGapV: 10
        }
      }
    };
  },
  mounted() {
    this.initializeGraph();
  },
  methods: {
    initializeGraph() {
      const graphInstance = this.graphInstance;
      const nodes = [
        { id: '1', text: 'Root' },
        { id: '2', text: 'Vue2 App' },
        { id: '3', text: 'Graph Engine' }
      ];
      const lines = [
        { 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);
    },
    onNodeClick(nodeObject, event) {
      console.log('node click:', nodeObject && nodeObject.id, event);
    },
    onLineClick(lineObject, linkObject, event) {
      console.log('line click:', lineObject && lineObject.from, lineObject && lineObject.to, linkObject, event);
    }
  }
};
</script>

4. Data Input Strategies

Incremental: addNodes, addLines, update/remove APIs.
One-shot: setJsonData (includes layout/center/zoom flow).
Initial data: initialData on <RelationGraph> for initial rendering/SSR style usage.

4.1 `setJsonData`

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

4.2 `initialData`

<RelationGraph :options="graphOptions" :initialData="{ rootId: '1', nodes, lines }" />

5. Access Graph State in Vue2

With graphStoreMixin, you can access:

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

These are reactive state objects intended for your editor UI logic.

6. Practical Notes

The graph viewport size depends on the parent container size.
For runtime option changes, use instance APIs (updateOptions) instead of replacing initial options.
If RGProvider remains mounted between view switches, call clearGraph() before loading a new graph.