Using Tools

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

graph.addNode({
  tools: [
    {
      name: 'button-remove', // Tool name
      args: {
        // Tool parameters
        x: 10,
        y: 10,
      },
    },
  ],
})

// If no parameters are needed, you can abbreviate 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 interactivity. We provide the following built-in tools for nodes and edges:

Nodes

• button Renders a button at a specified position; supports custom click interactions.
• button-remove Renders a delete button at a specified position; clicking deletes the node.
• boundary Renders a rectangle around the node based on its bounding box. Note: visualization only; no interaction.

Edges

• vertices Renders dots at path points. Drag to move; double-click to delete; click on the edge to add.
• segments Renders a handle at each segment’s center; drag to adjust the adjacent path points.
• boundary Renders a rectangle around the edge based on its bounding box. Note: visualization only; no interaction.
• button Renders a button at a specified position; supports custom click interactions.
• button-remove Renders a delete button at a specified position; clicking deletes the edge.
• source-arrowhead and target-arrowhead Renders a shape (arrow by default) at the source/target terminal; drag to adjust the terminal.