API Reference

This page provides a comprehensive reference for the RelationGraphInstance API. The instance object exposes methods for manipulating graph data, controlling layout, managing user interactions, and rendering. All methods documented here are available on the graph instance obtained via component refs or the useGraphInstance() hook.

For information about component props and UI customization, see Getting Started. For details about the reactive data system, see Reactive Data Integration. For event handling patterns, see Event System Architecture.

Instance Access

The RelationGraphInstance is the main interface for programmatic control of the graph. Access it through:

Vue 2/3:

const graphRef = ref<RelationGraphExpose>();
const instance = graphRef.value?.getInstance();

React:

const { graphInstance } = useGraphInstance();

Svelte:

let graphInstance: RelationGraphInstance;

API Organization

The API surface is built through a progressive enhancement pattern where each RelationGraphWithX class adds a layer of functionality. The complete instance inherits all methods from this hierarchy:

graph TB
    Base["RelationGraphBase
Event system, UUID generation"]
    View["RelationGraphWith1View
Coordinate transformations"]
    Data["RelationGraphWith2Data
Framework-specific reactive setup"]
    Data1["RelationGraphWith2Data1Getter
Query: getNodes, getLines, getNodeById"]
    Data2["RelationGraphWith2Data2Analysis
Graph traversal & analysis"]
    Data3["RelationGraphWith2Data3Update
CRUD: addNodes, removeNodes, updateNode"]
    Data4["RelationGraphWith2Data4ConnectTarget
Connection point management"]
    Data5["RelationGraphWith2Data5LineConfig
Fake line configuration"]
    Options1["RelationGraphWith3Options1Update
setJsonData, updateOptions"]
    Options2["RelationGraphWith3Options2API
Public configuration API"]
    Line["RelationGraphWith4Line
createLineDrawInfo, generateLinePath"]
    Zoom["RelationGraphWith5Zoom
zoom, setZoom, moveToCenter"]
    Effect["RelationGraphWith6Effect
fitContentHeight, zoomToFit"]
    Layout["RelationGraphWith6Layout
doLayout, startAutoLayout"]
    Event["RelationGraphWith7Event
onNodeClick, startCreatingLinePlot"]
    EasyView["RelationGraphWith9EasyView
Canvas rendering for performance"]
    Editing["RelationGraphWith91Editing
setEditingNodes, setEditingLine"]
    MiniView["RelationGraphWith92MiniView
Minimap control"]
    Image["RelationGraphWith93Image
Export to PNG/SVG"]
    Dom["RelationGraphWith95Dom
DOM observers"]
    API["RelationGraphWith99API
Additional utilities"]
    Core["RelationGraphCore
Final complete instance"]

    Base --> View
    View --> Data
    Data --> Data1
    Data1 --> Data2
    Data2 --> Data3
    Data3 --> Data4
    Data4 --> Data5
    Data5 --> Options1
    Options1 --> Options2
    Options2 --> Line
    Line --> Zoom
    Zoom --> Effect
    Effect --> Layout
    Layout --> Event
    Event --> EasyView
    EasyView --> Editing
    Editing --> MiniView
    MiniView --> Image
    Image --> Dom
    Dom --> API
    API --> Core

Data Query & Access

Node Queries

Method	Parameters	Returns	Description
`getNodes()`	-	`RGNode[]`	Get all nodes in the graph
`getNodeById(nodeId)`	`nodeId: string`	`RGNode \| undefined`	Get node by ID
`getShouldRenderNodes(nodes?)`	`nodes?: RGNode[]`	`RGNode[]`	Get visible/renderable nodes (considers viewport culling)

Line Queries

Method	Parameters	Returns	Description
`getLines()`	-	`RGLine[]`	Get all normal lines
`getLineById(lineId)`	`lineId: string`	`RGLine \| undefined`	Get line by ID
`getFakeLines()`	-	`RGFakeLine[]`	Get all fake lines (non-node connections)
`getFakeLineById(lineId)`	`lineId: string`	`RGFakeLine \| undefined`	Get fake line by ID
`getShouldRenderLines(lines?)`	`lines?: RGLine[]`	`RGLine[]`	Get visible/renderable lines

Link Queries

Method	Parameters	Returns	Description
`getLinks()`	-	`RGLink[]`	Get all link objects (line + fromNode + toNode)
`getLinkByLineId(lineId)`	`lineId: string`	`RGLink \| undefined`	Get link by line ID
`getLinkByLine(line)`	`line: RGLine`	`RGLink \| undefined`	Get link from line object

Configuration Queries

Method	Parameters	Returns	Description
`getOptions()`	-	`RGOptionsFull`	Get complete runtime configuration
`getConnectTargets()`	-	`RGLineTarget[]`	Get all connection target points

Graph Analysis

Relationship Traversal

graph LR
    A["Node A"]
    B["Node B"]
    C["Node C"]
    X["Node X"]
    F["Node F"]
    M["Node M"]
    
    A -->|line1| X
    B -->|line2| X
    C -->|line3| X
    X -->|line4| F
    X -->|line5| M
    
    style X fill:#fff

Method	Returns	Description	Example Result (for Node X above)
`getRelatedLinesByNode(node)`	`RGLine[]`	All lines connected to node	`[line1, line2, line3, line4, line5]`
`getNodeIncomingNodes(node)`	`RGNode[]`	Nodes that connect TO this node	`[A, B, C]`
`getNodeOutgoingNodes(node)`	`RGNode[]`	Nodes this node connects TO	`[F, M]`
`getNodeRelatedNodes(node)`	`RGNode[]`	All directly connected nodes	`[A, B, C, F, M]`
`getLinksBetweenNodes(nodes)`	`RGLink[]`	Links with both endpoints in given set	-
`getLinesBetweenNodes(nodes)`	`RGLine[]`	Lines with both endpoints in given set	-

Network Analysis

Method	Parameters	Returns	Description
`getNetworkNodesByNode(node)`	`node: RGNode`	`RGNode[]`	Get all nodes in same connected component
`getDescendantNodes(node)`	`node: RGNode`	`RGNode[]`	Get all descendant nodes based on layout hierarchy

Spatial Queries

Method	Parameters	Returns	Description
`getNodesRectBox(nodes?)`	`nodes?: RGNode[]`	`RGNodesRectBox`	Calculate bounding box of nodes
`getNodesCenter(nodes?)`	`nodes?: RGNode[]`	`{x: number, y: number}`	Get center point of node cluster
`getNodesInSelectionView(selectionView)`	`selectionView: RGSelectionView`	`RGNode[]`	Get nodes within selection rectangle

RGNodesRectBox structure:

{
  width: number,
  height: number,
  minX: number,
  minY: number,
  maxX: number,
  maxY: number
}

Data Modification (CRUD)

Adding Data

sequenceDiagram
    participant User
    participant Instance["RelationGraphInstance"]
    participant Provider["RGDataProvider"]
    participant UI["Reactive UI"]

    User->>Instance: addNodes([nodeJson1, nodeJson2])
    Instance->>Instance: _addNodes(jsonNodes)
    Instance->>Instance: Emit beforeAddNodes event
    Instance->>Provider: Convert JsonNode to RGNode
    Provider->>Provider: commitChanges()
    Provider->>UI: Trigger re-render
    UI-->>User: Updated graph visible

    User->>Instance: addLines([lineJson1, lineJson2])
    Instance->>Instance: _addLines(jsonLines)
    Instance->>Instance: Emit beforeAddLines event
    Instance->>Provider: Convert JsonLine to RGLine
    Provider->>Provider: commitChanges()
    Provider->>UI: Trigger re-render

Method	Parameters	Description
`addNode(node)`	`node: JsonNode`	Add single node
`addNodes(nodes)`	`nodes: JsonNode[]`	Add multiple nodes
`addLine(line)`	`line: JsonLine`	Add single line
`addLines(lines)`	`lines: JsonLine[]`	Add multiple lines (auto-distinguishes fake lines)
`addFakeLines(lines)`	`lines: JsonLine[]`	Add fake lines explicitly

Removing Data

Method	Parameters	Description
`removeNode(node)`	`node: RGNode`	Remove single node
`removeNodeById(nodeId)`	`nodeId: string`	Remove node by ID
`removeNodes(nodes)`	`nodes: RGNode[]`	Remove multiple nodes
`removeNodesByIds(nodeIds)`	`nodeIds: string[]`	Remove nodes by ID array
`removeLine(line)`	`line: RGLine`	Remove single line
`removeLineById(lineId)`	`lineId: string`	Remove line by ID
`removeLines(lines)`	`lines: RGLine[]`	Remove multiple lines
`removeLineByIds(lineIds)`	`lineIds: string[]`	Remove lines by ID array
`removeFakeLine(line)`	`line: RGFakeLine`	Remove fake line
`removeFakeLineById(lineId)`	`lineId: string`	Remove fake line by ID

Updating Data

Method	Parameters	Description
`updateNode(nodeId, properties)`	`nodeId: string, properties: Partial<RGNode>`	Update node properties (partial update)
`updateNodeData(nodeId, data)`	`nodeId: string, data: Record<string, any>`	Update `node.data` object (shortcut)
`updateLine(lineId, properties)`	`lineId: string, properties: Partial<RGLine>`	Update line properties (partial update)
`updateLineData(lineId, data)`	`lineId: string, data: Record<string, any>`	Update `line.data` object (shortcut)
`updateFakeLine(lineId, properties)`	`lineId: string, properties: Partial<RGFakeLine>`	Update fake line properties

Example:

// Partial update - only change color and text
graphInstance.updateNode('node1', {
  color: '#ff0000',
  text: 'Updated Node'
});

// Update custom data
graphInstance.updateNodeData('node1', {
  customField: 'value',
  timestamp: Date.now()
});

Bulk Operations

Method	Parameters	Description
`setJsonData(jsonData, resetViewSize?)`	`jsonData: RGJsonData, resetViewSize?: boolean`	Clear graph and load new data
`clearFakeLines()`	-	Remove all fake lines
`flatNodeData(nodes, parent, collect_nodes, collect_lines)`	Tree to flat conversion	Flatten hierarchical node structure

Layout Management

Triggering Layout

Method	Parameters	Description
`doLayout()`	-	Execute layout algorithm once
`startAutoLayout(options?)`	`options?: {times?: number}`	Start auto-layout (for force/center layouts)
`stopAutoLayout()`	-	Stop auto-layout animation
`resetLayoutAndRefreshGraph()`	-	Reset layout state and re-layout

Layout Configuration

The layout behavior is controlled through options.layout. Update it via:

graphInstance.updateOptions({
  layout: {
    layoutName: 'tree',
    layoutDirection: 'v',
    from: 'top'
  }
});
graphInstance.doLayout();

Available layouts: 'tree', 'center', 'circle', 'force', 'fixed', 'smart-tree', 'io-tree', 'folder'

See Layout Architecture & Base Classes for detailed layout options.

View & Coordinate Transformations

The graph uses three coordinate systems:

graph TD
    subgraph "Browser Window"
        Client["Client Coordinates
(clientX, clientY)
Relative to viewport"]
    end
    
    subgraph "RelationGraph Component"
        View["View Coordinates
(viewX, viewY)
Relative to component container"]
    end
    
    subgraph "Graph Canvas"
        Canvas["Canvas Coordinates
(canvasX, canvasY)
Logical node positions
Affected by zoom & pan"]
    end
    
    Client -->|"getViewXyByEvent(e)"| View
    View -->|"getCanvasXyByViewXy(xy)"| Canvas
    Canvas -->|"getViewXyByCanvasXy(xy)"| View
    Client -->|"getCanvasXyByClientXy(xy)"| Canvas

Coordinate Conversion Methods

Method	Parameters	Returns	Description
`getViewXyByEvent(e)`	`e: RGUserEvent`	`RGCoordinate`	Mouse/touch event → view coordinates
`getCanvasXyByViewXy(viewXy)`	`viewXy: RGCoordinate`	`RGCoordinate`	View → canvas (considers zoom/offset)
`getViewXyByCanvasXy(canvasXy)`	`canvasXy: RGCoordinate`	`RGCoordinate`	Canvas → view
`getCanvasXyByClientXy(clientXy)`	`clientXy: RGCoordinate`	`RGCoordinate`	Client → canvas (direct conversion)
`getViewBoundingClientRect()`	-	`DOMRect`	Get component container bounds

Element Detection

Method	Parameters	Returns	Description
`isNode(el)`	`el: HTMLElement`	`RGNode \| undefined`	Check if DOM element is a node, return node object
`isLine(el)`	`el: HTMLElement`	`RGLine \| undefined`	Check if DOM element is a line, return line object

Zoom & Pan Control

Zoom Methods

Method	Parameters	Description
`zoom(zoomPercent, targetXYOnView?)`	`zoomPercent: number, targetXY?: RGCoordinate`	Zoom to specific percentage (e.g., 150 for 150%)
`setZoom(zoomPercent, targetXYOnView?)`	`zoomPercent: number, targetXY?: RGCoordinate`	Alias for `zoom()`
`zoomIn()`	-	Zoom in by 20%
`zoomOut()`	-	Zoom out by 20%
`zoomToFit()`	-	Zoom to fit all nodes in viewport

Pan/Move Methods

Method	Parameters	Description
`moveToCenter()`	-	Move canvas so (0,0) is at viewport center
`moveToCenterByNode(node, options?)`	`node: RGNode, options?: {x?: number, y?: number}`	Center viewport on specific node
`focusRootNode()`	-	Center and zoom to root node
`focusNodeById(nodeId, options?)`	`nodeId: string, options?: {x?: number, y?: number}`	Center and zoom to node

Animation Control

Method	Parameters	Description
`disableCanvasTransformAnimation()`	-	Disable pan/zoom animations temporarily
`enableCanvasTransformAnimation()`	-	Re-enable pan/zoom animations

Interactive Creation & Events

Creating Nodes

The startCreatingNodePlot method initiates an interactive node placement workflow:

sequenceDiagram
    participant User
    participant Instance["graphInstance"]
    participant Canvas["Canvas DOM"]
    
    User->>Instance: startCreatingNodePlot(e, {
  templateNode: {...},
  onCreateNode: callback
})
    Instance->>Canvas: Listen for mousemove
    Canvas-->>Instance: Mouse moves
    Instance->>Canvas: Update template node position
    Canvas-->>Instance: User clicks
    Instance->>User: Call onCreateNode(x, y, template)
    User->>Instance: addNodes([newNode])
    Instance->>Canvas: Remove listeners

Method signature:

startCreatingNodePlot(e: RGUserEvent, setting: {
  templateNode: Partial<JsonNode>,  // Visual template while placing
  onCreateNode: (x: number, y: number, template: RGNode) => void,
  templateMove?: (x: number, y: number) => void  // Optional tracking
})

Creating Lines

sequenceDiagram
    participant User
    participant Instance["graphInstance"]
    
    User->>Instance: startCreatingLinePlot(e, {
  fromNode?: node,
  template: {...},
  onCreateLine: callback
})
    Instance->>Instance: Set creatingLinePlot state
    Instance->>Instance: Show connection controller
    User->>Instance: Click target node
    Instance->>User: Call onCreateLine(from, to)
    User->>Instance: addLines([newLine])
    Instance->>Instance: stopCreatingLinePlot()

Method signature:

startCreatingLinePlot(e: RGUserEvent, setting: {
  fromNode?: RGNode,            // Optional starting node
  template?: Partial<JsonLine>, // Line styling
  isReverse?: boolean,          // Create reverse direction
  onCreateLine: (from: RGNode, to: RGNode | RGPosition) => void
})

stopCreatingLinePlot()  // Cancel line creation

Node Expansion/Collapse

Method	Parameters	Description
`expandOrCollapseNode(node, e)`	`node: RGNode, e: RGUserEvent`	Toggle node expansion
`expandNode(node, e?)`	`node: RGNode, e?: RGUserEvent`	Expand node (show children)
`collapseNode(node, e?)`	`node: RGNode, e?: RGUserEvent`	Collapse node (hide children)

Editing State Management

Node Editing

The editing controller enables multi-node selection and manipulation:

Method	Parameters	Description
`setEditingNodes(nodes)`	`nodes: RGNode[] \| null`	Set nodes being edited (shows controller UI)
`addEditingNode(node)`	`node: RGNode`	Add node to editing set
`removeEditingNode(node)`	`node: RGNode`	Remove node from editing set
`toggleEditingNode(node)`	`node: RGNode`	Toggle node in editing set
`updateEditingControllerView()`	-	Manually update controller bounds

The editing controller automatically:

Displays resize handles for selected nodes
Shows alignment reference lines during drag
Enables batch operations on selected nodes

Line Editing

Method	Parameters	Description
`setEditingLine(line)`	`line: RGLine \| null`	Set line being edited (shows vertex/control point UI)
`updateEditingLineView()`	-	Manually update line editor
`hideEditingLineView()`	-	Temporarily hide line editor (for preview)

When editing lines with lineShape: 44 (StandardOrthogonal) or lineShape: 49 (HardOrthogonal), control points appear for adjusting path segments.

Line Rendering API

Line Path Generation

The core line rendering methods are used internally but can be called for custom rendering:

Method	Parameters	Returns	Description
`createLineDrawInfo(link, line)`	`link: RGLink \| RGElementLine, line: RGLine`	`RGLinePathInfo`	Generate complete line drawing data
`generateLinePath(config)`	`config: RGGenerateLineConfig`	`RGLinePathInfo`	Generate line path from configuration
`getArrowMarkerId(line, isStartArrow?)`	`line: RGLine, isStartArrow?: boolean`	`string \| undefined`	Get SVG marker ID for arrow

RGLinePathInfo structure:

{
  pathCommands: RGLinePathCommands,  // Structured path data
  pathData: string,                  // SVG path 'd' attribute
  textPosition: {x, y, rotate},      // Position for line label
  points: RGCoordinate[]             // Control/vertex points
}

Line Text Styling

Method	Parameters	Returns	Description
`generateLineTextStyle(config, pathInfo)`	`config: RGGenerateLineConfig, pathInfo: RGLinePathInfo`	`{text, cssStyles}`	Generate text transform styles
`generateLineTextStyle4TextOnPath(config)`	`config: RGGenerateLineConfig`	`{text, textOffset, textAnchor, ...}`	Generate textPath-specific styles

Line Shapes

Supported lineShape values (from RGLineShape enum):

Value	Name	Description
1	`StandardStraight`	Direct straight line
6	`StandardCurve`	Smooth bezier curve
4	`SimpleOrthogonal`	Simple L-shaped path
44	`StandardOrthogonal`	Multi-segment orthogonal with rounded corners
49	`HardOrthogonal`	User-editable orthogonal path
2, 3, 5, 7, 8	`Curve2-8`	Various bezier curve styles

Fake Lines & Connection Targets

Fake lines enable connections to non-node targets (DOM elements, canvas points, etc.):

graph LR
    subgraph "Normal Lines"
        N1["Node A"]
        N2["Node B"]
        N1 -->|"RGLine
from: 'A'
to: 'B'"| N2
    end
    
    subgraph "Fake Lines"
        N3["Node C"]
        DOM["DOM Element
#target-div"]
        PT["Canvas Point
(x: 500, y: 300)"]
        
        N3 -->|"RGFakeLine
fromType: 'node'
toType: 'HTMLElementId'"| DOM
        N3 -->|"RGFakeLine
fromType: 'node'
toType: 'CanvasPoint'"| PT
    end

Fake Line Management

Method	Parameters	Description
`addFakeLines(lines)`	`lines: JsonLine[]`	Add fake lines
`removeFakeLineById(lineId)`	`lineId: string`	Remove fake line
`updateFakeLine(lineId, properties)`	`lineId: string, properties: Partial<RGFakeLine>`	Update fake line
`clearFakeLines()`	-	Remove all fake lines

Connection Target Types

Built-in target types from RGInnerConnectTargetType:

Node - Connect to node (default)
NodePoint - Specific point on node
HTMLElementId - DOM element by ID
CanvasPoint - Absolute canvas coordinates
ViewPoint - Viewport-relative coordinates

Custom Target Renderers

graphInstance.setFakeLineTargetRender(
  'myCustomType',
  (targetId: string) => {
    // Return RGRectTarget with position/size
    return {
      x: 100,
      y: 200,
      el_W: 50,
      el_H: 50,
      nodeShape: RGNodeShape.rect
    };
  }
);

Configuration & Options

Updating Options

Method	Parameters	Description
`updateOptions(options)`	`options: Partial<RGOptions>`	Update configuration (partial merge)
`setOptions(options)`	`options: Partial<RGOptions>`	Alias for `updateOptions`
`getOptions()`	-	Get current complete options

Common configuration updates:

// Change layout
graphInstance.updateOptions({
  layout: {
    layoutName: 'tree',
    layoutDirection: 'h',
    treeNodeGapH: 80,
    treeNodeGapV: 60
  }
});

// Change appearance
graphInstance.updateOptions({
  defaultNodeColor: '#e0e0e0',
  defaultLineColor: '#999',
  defaultLineShape: RGLineShape.StandardCurve,
  canvasZoom: 120
});

// Enable performance mode
graphInstance.updateOptions({
  performanceMode: true
});

Key Options Reference

Category	Option	Type	Description
Layout	`layout.layoutName`	`'tree' \| 'center' \| 'force' \| ...`	Layout algorithm
	`layout.layoutDirection`	`'h' \| 'v'`	Horizontal or vertical
Appearance	`defaultNodeColor`	`string`	Default node background
	`defaultLineColor`	`string`	Default line color
	`defaultLineShape`	`RGLineShape`	Default line shape
	`backgroundColor`	`string`	Canvas background
Interaction	`disableDragNode`	`boolean`	Prevent node dragging
	`disableDragLine`	`boolean`	Prevent line dragging
	`disableWheelEvent`	`boolean`	Disable mouse wheel
	`wheelEventAction`	`'zoom' \| 'scroll' \| 'none'`	Wheel behavior
Performance	`performanceMode`	`boolean`	Enable high-performance mode
	`minCanvasZoom`	`number`	Minimum zoom (default 20)
	`maxCanvasZoom`	`number`	Maximum zoom (default 300)

See Configuration & Options for complete options reference.

Utility Methods

ID Generation

Method	Parameters	Returns	Description
`generateNewUUID(length?)`	`length?: number` (default 5)	`string`	Generate random unique ID
`generateNewNodeId(idLength?)`	`idLength?: number` (default 5)	`string`	Generate unique node ID (checks existing nodes)

Debugging

Method	Parameters	Description
`enableDebugLog(enable)`	`enable: boolean`	Enable/disable console logging

Event System

Method	Parameters	Description
`addEventHandler(handler)`	`handler: RGEventHandler`	Add custom event handler
`removeEventHandler(handler)`	`handler: RGEventHandler`	Remove event handler
`setEventEmitHook(hook)`	`hook: RGEventEmitHook`	Set framework-specific emit hook (Vue only)

Image Export

Method	Parameters	Returns	Description
`exportAsImage(options?)`	`options?: {type: 'png' \| 'svg', quality?: number}`	`Promise<string>`	Export graph as image data URL

Fullscreen

Method	Parameters	Description
`toggleFullscreen()`	-	Enter/exit fullscreen mode

Type Reference

Core Data Types

Type	Description	Key Properties
`JsonNode`	Input node format	`id`, `text`, `x`, `y`, `color`, `data`
`RGNode`	Runtime node with layout info	All `JsonNode` + `lot`, `rgShouldRender`, `rgCalcedVisibility`
`JsonLine`	Input line format	`from`, `to`, `text`, `lineShape`, `color`
`RGLine`	Runtime line	All `JsonLine` + `isReverse`
`RGFakeLine`	Non-node connection line	All `RGLine` + `fromType`, `toType`
`RGLink`	Line + connected nodes	`line`, `fromNode`, `toNode`, `totalLinesBetweenNodes`

Configuration Types

Type	Description
`RGOptions`	User configuration (partial)
`RGOptionsFull`	Complete runtime configuration
`RGLayoutOptions`	Layout-specific settings (union type)

Geometry Types

Type	Structure	Usage
`RGCoordinate`	`{x: number, y: number}`	Points, positions
`RGNodesRectBox`	`{width, height, minX, minY, maxX, maxY}`	Bounding boxes
`RGRectTarget`	`{x, y, el_W, el_H, nodeShape}`	Rectangle with shape
`RGLineTarget`	`RGRectTarget + {id, targetType, targetData}`	Connection target

Enum Types

Enum	Values	Usage
`RGNodeShape`	`circle=0`, `rect=1`	Node shapes
`RGLineShape`	`StandardStraight=1`, `StandardCurve=6`, `StandardOrthogonal=44`, etc.	Line rendering styles
`RGJunctionPoint`	`border`, `ltrb`, `tb`, `lr`, `left`, `right`, `top`, `bottom`	Line connection points
`RGInnerConnectTargetType`	`Node`, `NodePoint`, `HTMLElementId`, `CanvasPoint`, `ViewPoint`	Target types for fake lines

For complete type definitions, see Relation Graph Types Definitions.

Common Workflows

Workflow 1: Adding and Positioning Data

sequenceDiagram
    participant App
    participant Instance["graphInstance"]
    participant Provider["RGDataProvider"]
    participant Layout["Layout Engine"]
    
    App->>Instance: addNodes([...nodes])
    Instance->>Provider: Store nodes
    App->>Instance: addLines([...lines])
    Instance->>Provider: Store lines & create links
    App->>Instance: updateOptions({layout: {...}})
    App->>Instance: doLayout()
    Instance->>Layout: placeNodes(nodes, rootNode)
    Layout->>Provider: Update node.x, node.y
    Provider->>App: Trigger UI update

Workflow 2: Interactive Editing

sequenceDiagram
    participant User
    participant Instance["graphInstance"]
    participant Editor["Editing Controller"]
    
    User->>Instance: Click node with Shift
    Instance->>Editor: addEditingNode(node)
    Editor->>User: Show selection handles
    User->>Instance: Drag resize handle
    Instance->>Editor: onResizing(...)
    Editor->>Instance: updateNode(id, {width, height})
    User->>Instance: Release mouse
    Instance->>Editor: onResizeEnd(...)
    Instance->>User: Emit 'onResizeEnd' event

Workflow 3: Custom Line Rendering

graph TB
    GetLink["getLinks()"]
    CreateInfo["createLineDrawInfo(link, line)"]
    PathInfo["RGLinePathInfo
{pathData, textPosition, points}"]
    Render["Custom SVG/Canvas Rendering"]
    
    GetLink --> CreateInfo
    CreateInfo --> PathInfo
    PathInfo --> Render