shalu-system-designer/apps/designer/src/events/flowEvent.ts

import { Graph, Node } from "@antv/x6";
export const handleGraphEvent = (graph: Graph) => {
  const sourceArrowhead = {
    name: "source-arrowhead",
    args: {
      attrs: {
        d: 'M -5,-5 5,-5 5,5 -5,5 Z',
        fill: '#fff',
        stroke: '#239edd',
        'stroke-width': 1,
      },
    }
  }
  const targetArrowhead = {
    name: "target-arrowhead",
    args: {
      attrs: {
        d: 'M -5,-5 5,-5 5,5 -5,5 Z',
        fill: '#fff',
        stroke: '#239edd',
        'stroke-width': 1,
      },
    }
  }
  // 边选中
  graph.on("edge:selected", (args) => {
    args.edge.addTools(['edge-editor', sourceArrowhead, targetArrowhead]);
  });
  // 边取消选中
  graph.on("edge:unselected", (args) => {
    args.edge.removeTools(['edge-editor', sourceArrowhead, targetArrowhead]);
  });

  // 控制连接桩显示/隐藏
  const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
    for (let i = 0, len = ports.length; i < len; i += 1) {
      ports[i].style.visibility = show ? "visible" : "hidden";
    }
  };
  graph.on(
    "node:mouseenter",
    ({
      _e,
      node,
    }: {
      _e: React.MouseEvent<HTMLDivElement, MouseEvent>;
      node: Node.Metadata;
    }) => {
      if (node.data?.isPage) return;

      const container = document.querySelector(`[data-cell-id="${node.id}"]`)!;
      if (!container) return;
      const ports = container.querySelectorAll(
        ".x6-port-body"
      ) as NodeListOf<SVGElement>;
      showPorts(ports, true);
    }
  );
  graph.on(
    "node:mouseleave",
    ({
      _e,
      node,
    }: {
      _e: React.MouseEvent<HTMLDivElement, MouseEvent>;
      node: Node.Metadata;
    }) => {
      if (node.data?.isPage) return;

      const container = document.querySelector("#graph-container")!;
      if (!container) return;
      const ports = container.querySelectorAll(
        ".x6-port-body"
      ) as NodeListOf<SVGElement>;
      showPorts(ports, false);
    }
  );

  // 处理添加节点事件 noCreate为不用创建节点
  graph.on("node:added", ({ node }) => {
    if(node.getData()?.noCreate) {
      setTimeout(() => {
        graph.removeNode(node.id);
      }, 50);
    }
  })
};