Creating Nodes
Node creation by clicking
or tapping
on an empty canvas location is handled by GraphEditorInputMode. You can disable this feature by setting GraphEditorInputMode’s
allowCreateNode property to false.
You can customize the node creation process by providing a custom
nodeCreator callback.
The default node creator creates a node with a default style and size in the
given graph at the specified location and assigns it to the given parent group node.
A custom node creator can be used to create a node differently. Note that it can also return null to prevent
node creation.
// set a custom node creator which creates a label on the new node
graphEditorInputMode.nodeCreator = (context, graph, location, parent) => {
// create a node at the location with the given parent and the default size
const node = graph.createNode(
parent,
Rect.fromCenter(location, graph.nodeDefaults.size)
)
// add a label
graph.addLabel(node, 'A new node')
// return the new node
return node
}
// set a custom node creator which creates a label on the new node
graphEditorInputMode.nodeCreator = (
context: IInputModeContext,
graph: IGraph,
location: Point,
parent: INode | null
): INode => {
// create a node at the location with the given parent and the default size
const node = graph.createNode(
parent,
Rect.fromCenter(location, graph.nodeDefaults.size)
)
// add a label
graph.addLabel(node, 'A new node')
// return the new node
return node
}
The node creator will only be called if allowCreateNode is true.
By default, it is called with the topmost group node at the click location as the parent. If the node creator returns
a node, an event is raised, and the new node is set as the current item. You can customize this behavior by
overriding createNode.
| Event | Occurs when … |
|---|---|