Graph

Class · extends Element

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

Represents a new Graph.

Constructors

constructor

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

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

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

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

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

deleteEdge(edgeId: Id): void

Delete an edge from the graph.

Parameters

• edgeId (Id): The edge to delete.

deleteNode

deleteNode(nodeId: string | number): void

Delete a node from the graph.

Parameters

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

deselectItem

deselectItem(): void

Deselect the currently selected item in the graph.

destroy

destroy(): void

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

getGraphPosition

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

getGraphScale(): number

Get the current scale of the graph.

Returns number: The current scale of the graph.

getWindowToGraphPosition

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

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): 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

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

selectNode(node: NodeData): void

Select a node in the current graph.

Parameters

• node (NodeData): The node to select

setGraphPosition

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

setGraphScale(scale: number): void

Set the scale of the graph.

Parameters

• scale (number): The new scale of the graph.

setNodeAttributeErrorState

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

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

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

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.