# PCUI Graph API: All Pages

> The API reference of `@playcanvas/pcui-graph` 5.2.5: the `Graph` component, a node-graph editor built on PCUI.

Index: https://api.playcanvas.com/pcui-graph/llms.txt
Total Pages: 1
Generated: 2026-10-08

================================================================================

URL: https://api.playcanvas.com/pcui-graph/classes/Graph.md

# Graph

Class · extends `Element`

Source: https://github.com/playcanvas/pcui-graph/blob/365fae3285dc4125d4bd66338bc4e6d90628770b/src/index.ts#L64

Represents a new Graph.

## Constructors

### constructor

```ts
new Graph(schema: GraphSchema, options?: GraphOptions)
```

Creates a new Graph.

**Parameters**

- `schema` (`GraphSchema`): The graph schema.
- `options` (`GraphOptions`, optional, default `{}`): The graph configuration. Optional.

## Accessors

### data

```ts
get data(): GraphData
```

The current graph data. Contains an object with any nodes and edges present in the graph.
This can be passed into the graph constructor to reload the current graph.

### selectedItem

```ts
get selectedItem(): { edgeId: string | number; id: string | number; type: string }
```

The currently selected item in the graph, or null if nothing is selected.

## Methods

### createEdge

```ts
createEdge(edge: EdgeData, edgeId: string | number, _batching?: boolean): void
```

Add an edge to the graph.

**Parameters**

- `edge` (`EdgeData`): The edge to add.
- `edgeId` (`string | number`): The edge id for the new edge.
- `_batching` (`boolean`, optional): Internal flag, unused.

### createNode

```ts
createNode(node: NodeData, _nodeSchema?: NodeSchema, _batching?: boolean): void
```

Add a node to the graph.

**Parameters**

- `node` (`NodeData`): The node to add.
- `_nodeSchema` (`NodeSchema`, optional): Internal, unused.
- `_batching` (`boolean`, optional): Internal, unused.

### deleteEdge

```ts
deleteEdge(edgeId: Id): void
```

Delete an edge from the graph.

**Parameters**

- `edgeId` (`Id`): The edge to delete.

### deleteNode

```ts
deleteNode(nodeId: string | number): void
```

Delete a node from the graph.

**Parameters**

- `nodeId` (`string | number`): The node to delete.

### deselectItem

```ts
deselectItem(): void
```

Deselect the currently selected item in the graph.

### destroy

```ts
destroy(): void
```

Destroy the graph. Clears the graph from the DOM and removes all event listeners associated
with the graph.

### getGraphPosition

```ts
getGraphPosition(): { x: number; y: number }
```

Get the current center position of the viewport in the graph.

**Returns** `{ x: number; y: number }`: The current center position of the viewport in the graph as an object
containing x and y.

### getGraphScale

```ts
getGraphScale(): number
```

Get the current scale of the graph.

**Returns** `number`: The current scale of the graph.

### getWindowToGraphPosition

```ts
getWindowToGraphPosition(pos: object): { x: number; y: number }
```

Convert a position in window space to a position in graph space.

**Parameters**

- `pos` (`object`): A position in the window, as an object containing x and y.
    - `pos.x` (`number`): The x position.
    - `pos.y` (`number`): The y position.

**Returns** `{ x: number; y: number }`: The position in the graph based on the given window position, as an object
containing x and y.

### on

```ts
on<K extends string>(eventName: K, callback: (detail: K extends keyof GraphEventMap ? GraphEventMap[K] : unknown) => void): void
```

Add an event listener to the graph.

**Parameters**

- `eventName` ([`K`](https://api.playcanvas.com/pcui-graph/classes/Graph.md#onk)): The name of the event to listen for.
- `callback` (`(detail: K extends keyof GraphEventMap ? GraphEventMap[K] : unknown) => void`): The callback to call when the event is triggered.

### selectEdge

```ts
selectEdge(edge: EdgeData, edgeId: string | number): void
```

Select an edge in the current graph.

**Parameters**

- `edge` (`EdgeData`): The edge to select
- `edgeId` (`string | number`): The edge id of the edge to select

### selectNode

```ts
selectNode(node: NodeData): void
```

Select a node in the current graph.

**Parameters**

- `node` (`NodeData`): The node to select

### setGraphPosition

```ts
setGraphPosition(posX: number, posY: number): void
```

Set the center of the viewport to the given position.

**Parameters**

- `posX` (`number`): The x position to set the center of the viewport to.
- `posY` (`number`): The y position to set the center of the viewport to.

### setGraphScale

```ts
setGraphScale(scale: number): void
```

Set the scale of the graph.

**Parameters**

- `scale` (`number`): The new scale of the graph.

### setNodeAttributeErrorState

```ts
setNodeAttributeErrorState(nodeId: string | number, attributeName: string, value: boolean): void
```

Set the error state of a node attribute.

**Parameters**

- `nodeId` (`string | number`): The node to update.
- `attributeName` (`string`): The name of the attribute to update.
- `value` (`boolean`): Whether the attribute should be set in the error state.

### updateNodeAttribute

```ts
updateNodeAttribute(nodeId: string | number, attributeName: string, value: unknown): void
```

Update the value of an attribute of a node.

**Parameters**

- `nodeId` (`string | number`): The node to update.
- `attributeName` (`string`): The name of the attribute to update.
- `value` (`unknown`): The new value for the attribute.

### updateNodePosition

```ts
updateNodePosition(nodeId: string | number, pos: object): void
```

Update the position of a node.

**Parameters**

- `nodeId` (`string | number`): The node to add.
- `pos` (`object`): The new position, given as an object containing x and y properties.
    - `pos.x` (`number`): The x position.
    - `pos.y` (`number`): The y position.

### updateNodeType

```ts
updateNodeType(nodeId: string | number, nodeType: string | number): void
```

Update the type of a node.

**Parameters**

- `nodeId` (`string | number`): The node to update.
- `nodeType` (`string | number`): The new type for the node.

--------------------------------------------------------------------------------