Using Tools

When creating nodes/edges, you can add tools through the tools option:

graph.addNode({
  tools: [
    {
      name: 'button-remove', // Tool name
      args: {
        // Parameters corresponding to the tool
        x: 10,
        y: 10,
      },
    },
  ],
})

// If the parameters are empty, it can be abbreviated as:
graph.addNode({
  tools: ['button-remove'],
})

graph.addEdge({
  source,
  target,
  vertices: [
    {
      x: 90,
      y: 160,
    },
    {
      x: 210,
      y: 160,
    },
  ],
  tools: ['vertices', 'segments'],
})

After nodes/edges are created, you can call methods like hasTool(name), addTools(...), and removeTools() to add or remove tools.

Built-in Tools

Tools are widgets rendered on nodes/edges to enhance their interactivity. We provide the following built-in tools for nodes and edges:

Nodes:

• button Renders a button at a specified position, supporting custom click interactions for the button.
• button-remove Renders a delete button at a specified position, which deletes the corresponding node when clicked.
• boundary Renders a rectangle surrounding the node based on its bounding box. Note that this tool only renders a rectangle without any interaction.

Edges:

• vertices Path point tool that renders a small dot at the path point position. You can drag the dot to modify the path point position, double-click the dot to delete the path point, and click on the edge to add a path point.
• segments Segment tool that renders a toolbar at the center of each line segment of the edge. You can drag the toolbar to adjust the positions of the path points at both ends of the segment.
• boundary Renders a rectangle surrounding the edge based on its bounding box. Note that this tool only renders a rectangle without any interaction.
• button Renders a button at a specified position, supporting custom click interactions for the button.
• button-remove Renders a delete button at a specified position, which deletes the corresponding edge when clicked.
• source-arrowhead and target-arrowhead Renders a shape (default is an arrow) at the start or end of the edge, allowing you to drag the shape to modify the start or end of the edge.