Relation Graph

Graph Options (`RGOptions`)

RGOptions defines global graph behavior, interaction mode, visual defaults, and layout defaults.

1. Important Runtime Rule

options on <RelationGraph> is treated as initial options.

If you need changes after graph initialization, update through graph instance APIs (such as setOptions / updateOptions, depending on package API surface).

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

// runtime update
const graphInstance = RGHooks.useGraphInstance();
graphInstance.updateOptions({
  wheelEventAction: 'zoom'
});

2. Interaction Options

Common interaction controls:

wheelEventAction?: 'zoom' | 'scroll' | 'none'
dragEventAction?: 'move' | 'selection' | 'none'
disableDragNode?: boolean
disableDragLine?: boolean
disableNodePointEvent?: boolean
disableLinePointEvent?: boolean
defaultExpandHolderPosition?: 'hide' | 'left' | 'top' | 'right' | 'bottom'

Typical editor-friendly setup:

const graphOptions = {
  wheelEventAction: 'scroll',
  dragEventAction: 'selection',
  disableLinePointEvent: false,
  defaultExpandHolderPosition: 'right'
};

3. Node Default Visual Options

defaultNodeColor
defaultNodeBorderColor
defaultNodeBorderWidth
defaultNodeBorderRadius
defaultNodeWidth
defaultNodeHeight
checkedItemBackgroundColor

Notes:

These defaults are applied when node-level fields are not explicitly set.
Some defaults are applied at node creation/import time; changing defaults later does not retroactively rewrite existing node data.

4. Line Default Visual Options

defaultLineColor
defaultLineWidth
defaultLineShape
defaultJunctionPoint
defaultLineJunctionOffset
defaultLineTextOnPath
defaultLineTextOffsetX
defaultLineTextOffsetY
lineTextMaxLength
multiLineDistance
defaultPolyLineRadius
defaultLineMarker

Notes:

Like node defaults, line defaults are mainly consumed when lines are created/imported without explicit per-line values.
For multiple arrow styles, define custom SVG markers in <defs> and reference them using startMarkerId / endMarkerId on line data.

5. Viewport, Performance, and System Options

showToolBar
toolBarDirection, toolBarPositionH, toolBarPositionV
backgroundColor
mouseWheelSpeed
minCanvasZoom, maxCanvasZoom
performanceMode
fullscreenElementXPath
instanceId (recommended in SSR to avoid hydration id mismatch)
debug

6. Layout in `RGOptions`

layout in RGOptions is used as default layout config when you call:

graphInstance.setJsonData(...)
graphInstance.doLayout()
or use initialData flow

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

7. Recommended Baseline Config

const graphOptions = {
  instanceId: 'my-graph-main',
  showToolBar: false,
  wheelEventAction: 'scroll',
  dragEventAction: 'move',
  defaultNodeColor: '#ffffff',
  defaultNodeBorderColor: '#666666',
  defaultNodeBorderWidth: 1,
  defaultLineColor: '#cccccc',
  defaultLineWidth: 2,
  minCanvasZoom: 5,
  maxCanvasZoom: 500,
  performanceMode: false,
  layout: {
    layoutName: 'center'
  }
};

8. Common Mistakes

Expecting reactive replacement of the options object to auto-apply at runtime.
Mixing manual node coordinates and auto layout without clear ownership.
Using global defaults as if they were guaranteed retroactive updates for all existing items.

Graph Options (RGOptions)