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