documentationfor yFiles for HTML 2.6
Zooming, Panning, and ScrollingCreating Edges

Creating Nodes

Node creation by clicking or tapping on an empty canvas location is handled by GraphEditorInputMode. You can turn it off by setting GraphEditorInputMode’s allowCreateNode property to false.

You can customize the actual node creation by providing a custom nodeCreator callback. The default node creator creates a node with default style and size in the given graph at the given location with the given parent. A custom node creator can be used to create a node a different way. 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
  let node
  if (parent !== null) {
    node = graph.createNode(parent, Rect.fromCenter(location, graph.nodeDefaults.size))
  } else {
    node = graph.createNode(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
  let node: INode
  if (parent !== null) {
    node = graph.createNode(parent, Rect.fromCenter(location, graph.nodeDefaults.size))
  } else {
    node = graph.createNode(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 parent. If the node creator returns a node an event is raised and the new node is set as current item. You can customize this behavior by overriding createNode.

Related events
Event Occurs when …​
NodeCreated…​ a node has been created by GraphEditorInputMode
Zooming, Panning, and ScrollingCreating Edges