工具 Tools

graph.addNode({
  x: 180,
  y: 60,
  width: 100,
  height: 40,
  attrs: {
    body: {
      fill: '#f5f5f5',
      stroke: '#d9d9d9',
      strokeWidth: 1,
    },
  },
  tools: [
    {
      name: 'button',
      args: {
        markup: [
          {
            tagName: 'circle',
            selector: 'button',
            attrs: {
              r: 7,
              stroke: '#fe854f',
              strokeWidth: 1,
              fill: 'white',
              cursor: 'pointer',
            },
          },
          {
            tagName: 'text',
            textContent: '+',
            selector: 'icon',
            attrs: {
              fill: '#fe854f',
              fontSize: 10,
              textAnchor: 'middle',
              pointerEvents: 'none',
              y: '0.3em',
            },
          },
        ],
        x: '120%',
        y: '100%',
        offset: { x: -20, y: -20 },
        onClick({ cell }: { cell: Cell }) {
          const fill = Color.randomHex()
          cell.attr({
            body: {
              fill,
            },
            label: {
              fill: Color.invert(fill, true),
            },
          })
        },
      },
    },
  ],
})

注册工具

import { Graph } from '@antv/x6'
Graph.registerNodeTool('custom-button-remove-node', {
  inherit: 'button-remove'
})
Graph.registerEdgeTool('custom-button-remove-edge', {
  inherit: 'button-remove'
})

lineGraph.on('node:mouseenter', ({ cell }) => {
  cell.addTools(TOOL.nodeToolRemove)
  // cell.addTools({
  //   name: 'custom-button-remove-node',
  //   args: {
  //     x: 0,
  //     y: 0,
  //     onClick({ cell }) {
  //       console.log(cell)
  //       let connectedEdges = lineGraph.getConnectedEdges(cell.id)
  //       // 删除与节点相连的边
  //       if (connectedEdges.length > 0) {
  //         connectedEdges.forEach((item) => {
  //           deleteEdgeInLayoutData(
  //             layoutData.edges,
  //             item.source.cell,
  //             item.target.cell,
  //             item.id
  //           )
  //         })
  //       }
  //       deleteNodeInLayoutData(cell.id)
  //       pushUndoStack()
  //     }
  //   }
  // })
})

 lineGraph.on('edge:mouseenter', ({ cell }) => {
   cell.addTools(TOOL.edgeTool)
   // cell.addTools([
   //   {
   //     name: 'custom-button-remove-edge',
   //     args: {
   //       distance: '50%',
   //       offset: { x: 30, y: 0 },
   //       onClick({ cell }) {
   //         console.log('🚀on ~ edge:removed==>', cell)
   //         let sourceId = cell.source.cell
   //         let targetId = cell.target.cell
   //         deleteEdgeInLayoutData(
   //           layoutData.edges,
   //           sourceId,
   //           targetId,
   //           cell.id
   //         )
   //         pushUndoStack()
   //       }
   //     }
   //   }
   // ])
 })