使用工具

创建节点/边时可以通过 tools 选项来添加工具：

graph.addNode({
  tools: [
    {
      name: 'button-remove', // 工具名称
      args: {
        // 工具参数
        x: 10,
        y: 10,
      },
    },
  ],
})

// 如果无需参数，可以简写为：
graph.addNode({
  tools: ['button-remove'],
})

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

节点/边创建后可以调用 hasTool(name)、addTools(...)、removeTools() 等方法以添加或移除工具。

内置工具

工具是渲染在节点/边上的小部件，用于增强交互能力。我们分别为节点和边提供以下内置工具：

节点

• button 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
• button-remove 在指定的位置处，渲染一个删除按钮，点击时删除对应的节点。
• boundary 根据节点的包围盒渲染一个包围节点的矩形。注意：该工具仅用于可视化，不带任何交互。

边

• vertices 在路径点位置渲染小圆点；拖动小圆点可修改位置，双击可删除；在边上单击可添加路径点。
• segments 在线段中心渲染一个工具条；拖动工具条可调整线段两端路径点的位置。
• boundary 根据边的包围盒渲染一个包围边的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
• button 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
• button-remove 在指定的位置处，渲染一个删除按钮，点击时删除对应的边。
• source-arrowhead 和 target-arrowhead 在边的起点或终点渲染一个图形（默认箭头）；可拖动该图形修改边的起点/终点。