Relation Graph

Layout Concepts

The layout engine is responsible for assigning node coordinates (x, y) so graph structures are readable.

1. What Layout Actually Does

At runtime, layout mainly means:

compute node positions from graph relationships
keep structure readable (direction, spacing, hierarchy)
support recentering/fit workflow after coordinates are ready

2. Two Main Ways to Use Layout

A. Configure `RGOptions.layout` (default layout)

This works with:

graphInstance.setJsonData(...)
graphInstance.doLayout()
initialData initialization flow

const graphOptions = {
  layout: {
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 150,
    treeNodeGapV: 10
  }
};

B. Build a layouter explicitly via `createLayout(...)`

Use this when you want to layout a specific node subset or custom flow.

const layouter = graphInstance.createLayout({
  layoutName: 'tree',
  from: 'left',
  treeNodeGapH: 150,
  treeNodeGapV: 10
});
layouter.placeNodes(networkNodes, rootNode);

3. Typical Manual Layout Flow

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

setTimeout(() => {
  const layouter = graphInstance.createLayout({ layoutName: 'tree', from: 'left' });
  const root = graphInstance.getNodeById('root');
  const networkNodes = graphInstance.getNetworkNodesByNode(root);
  layouter.placeNodes(networkNodes, root);
  graphInstance.moveToCenter();
  graphInstance.zoomToFit();
}, 300);

The delay is commonly used when node size is measured from rendered DOM.

4. Core Layout APIs

createLayout(layoutOptions)
doLayout()
setJsonData(jsonData)
startAutoLayout() / stopAutoLayout() (force-like auto layout scenarios)
moveToCenter()
zoomToFit()

5. Choosing a Strategy

Fast initial full render: setJsonData + RGOptions.layout
Fine-grained dynamic editor flow: add/update + createLayout
Manual coordinate mode/editor boards: layoutName: 'fixed' or no auto relayout

6. Important Notes

Layout works on node coordinates; lines follow node geometry.
If you manually manage x/y, avoid conflicting auto layout passes.
For large graphs, choose layout type and iteration settings carefully for performance.