Relation Graph

Using HTML / Web Components

This page explains how to use relation-graph in plain HTML or non-framework environments via Web Components.

1. Install / Import

You can use either CDN or package-based usage.

CDN (quickest)

<script src="https://unpkg.com/relation-graph-webcomponents@latest/lib/relation-graph-webcomponents.min.js"></script>

ESM in browser

<script type="module">
  import * as rg from 'https://unpkg.com/relation-graph-webcomponents@latest/lib/relation-graph-webcomponents.mjs';
</script>

2. Key Differences vs Framework Versions

No RGProvider/RGHooks context.
Get graph instance from the onReady event.
Use graphInstance APIs directly for data/state updates.

3. Minimal HTML Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RelationGraph Web Components</title>
  </head>
  <body>
    <div style="width: 100vw; height: 100vh; background-color: #ffffff;">
      <relation-graph id="my-graph"></relation-graph>
    </div>

    <script type="module">
      import * as rg from 'https://unpkg.com/relation-graph-webcomponents@latest/lib/relation-graph-webcomponents.mjs';

      const rgElement = document.getElementById('my-graph');
      let graphInstance;

      const graphOptions = {
        showToolBar: false,
        wheelEventAction: 'scroll',
        dragEventAction: 'move'
      };

      const jsonData = {
        rootId: 'node-a',
        nodes: [
          { id: 'node-a', text: 'Alpha' },
          { id: 'node-b', text: 'Beta' },
          { id: 'node-c', text: 'Gamma' }
        ],
        lines: [
          { from: 'node-a', to: 'node-b', text: 'A -> B' },
          { from: 'node-b', to: 'node-c', text: 'B -> C' }
        ]
      };

      const initializeGraph = () => {
        graphInstance.setJsonData(jsonData);
        graphInstance.moveToCenter();
        graphInstance.zoomToFit();
      };

      rgElement.addEventListener('onReady', (event) => {
        graphInstance = event.detail[0];
        graphInstance.updateOptions(graphOptions);
        initializeGraph();
      });

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

      rgElement.addEventListener('onLineClick', (event) => {
        const [line] = event.detail;
        console.log('line click:', line && line.from, line && line.to);
      });
    </script>
  </body>
</html>

4. Data Input Strategies

One-shot: setJsonData(...).
Incremental: addNodes(...), addLines(...), update/remove APIs.
Runtime options: graphInstance.updateOptions(...).

5. Slots and Built-in UI Subcomponents

In Web Components mode, you can use slots and built-in elements directly in HTML, for example:

slot="view", slot="canvas"
<rg-mini-view>
<rg-editing-node-controller>
<rg-editing-reference-line>
<rg-editing-connect-controller>
<rg-connect-target>

These elements enable editor-style experiences in plain HTML.

6. Practical Notes

The size of <relation-graph> depends on its parent container.
Always wait for onReady before using instance APIs.
Web Components mode is suitable for Angular/jQuery/plain JS projects.