antv/x6画流程图

• 加载antv/x6依赖包

1. "@antv/x6": "^2.5.5",

2. "@antv/x6-plugin-clipboard": "^2.1.4",
   

3. "@antv/x6-plugin-dnd": "^2.0.4",
   

4. "@antv/x6-plugin-export": "^2.1.5",
   

5. "@antv/x6-plugin-history": "^2.2.0",
   

6. "@antv/x6-plugin-selection": "^2.1.5",
   

7. "@antv/x6-plugin-snapline": "^2.1.6",
   

8. "@antv/x6-plugin-stencil": "^2.0.2",
   

• 导入包

import { Stencil } from "@antv/x6-plugin-stencil";
import { Dnd } from "@antv/x6-plugin-dnd";
import { Export } from "@antv/x6-plugin-export";
import { Selection } from '@antv/x6-plugin-selection';
import { History } from '@antv/x6-plugin-history';
import { Snapline } from '@antv/x6-plugin-snapline';
//复制
import { Clipboard } from '@antv/x6-plugin-clipboard'

• 初始化

    const container = document.querySelector(id);
    this.graph = new Graph({
      container: container,
      autoResize: container,
      // background: {
      //   color: "#F7F7FA"
      // },
      // width: 500,
      // height: 500,
      // 网格
      grid: {
        size: 10,
        visible: false,
        args: {
          color: "#a0a0a0",
          thickness: 1
        }
      },
      // 画布调整
      scroller: {
        enabled: true,
        pageVisible: true,
        pageBreak: true,
        pannable: true,
        // modifiers: "ctrl",
        autoResize: true
      },
      // 设置滚轮缩放画布
      mousewheel: true,
      snapline: true,
      history: true, // 历史
      clipboard: true, // 复制
      keyboard: true,
      // 按ctrl框选节点
      selecting: {
        multiple: true,
        enabled: true,
        rubberband: true,
        modifiers: "ctrl",
        strict: true,
        movable: true,
        showNodeSelectionBox: false,
        showEdgeSelectionBox: false
      },
      // 配置全局连线规则
      connecting: {
        anchor: "center",
        connectionPoint: "anchor",
        allowBlank: false,
        allowMulti: false,
        highlight: true,
        snap: {
          radius: 25
        },
        createEdge() {
          let newEdge = new Shape.Edge(cloneDeep(commonEdage));
          return newEdge;
        },
        validateConnection({
          sourceView,
          targetView,
          sourceMagnet,
          targetMagnet
        }) {
          if (sourceView === targetView) {
            return false;
          }
          if (!sourceMagnet) {
            return false;
          }
          // 只能连接到输入链接桩
          if (
            !targetMagnet ||
            targetMagnet.getAttribute("port-group") !== "in"
          ) {
            return false;
          }
          return true;
        },
        highlighting: {
          magnetAvailable: {
            name: "stroke",
            args: {
              padding: 4,
              attrs: {
                strokeWidth: 4,
                stroke: "#31a3ff" //rgba(223,234,255)  #e52e1a
              }
            }
          }
        }
      },
      // 节点拖拽到另一节点，形成父子节点关系
      embedding: {
        enabled: true,
        findParent({ node }) {
          const bbox = node.getBBox();
          return this.getNodes().filter((node) => {
            // 只有 data.parent 为 true 的节点才是父节点
            const data = node.getData();
            if (data && data.parent) {
              const targetBBox = node.getBBox();
              return bbox.isIntersectWithRect(targetBBox);
            }
            return false;
          });
        }
      }
    });
    // this.initStencil(stencilId);
    // this.initShape();
    this.initEvent();
    //使用插件：导出+Selection+Keyboard
    this.graph
      .use(new Export())
      .use(
        new Selection({
          enabled: true,
          rubberband: true,
          // showNodeSelectionBox: true,
        }),
      )
      .use(
        new History({
          enabled: true,
        }),
      )
      .use(
        new Snapline({
          enabled: true,
        }),
      )
      .use(
        new Clipboard({
          enabled: true,
        }),
      );
    // this.initAnimate();
    return this.graph;
  }

• 初始化事件

    const { graph } = this;
    // 选中节点/边  #31a3ff
    graph.on("cell:selected", ({ cell }) => {
      if (cell.isEdge()) {
        cell.attr("line/stroke", "#07f5f5");
        cell.attr("line/strokeWidth", 2.5);
      } else {
        // cell.attr("body/stroke", "#07f5f5");
        // cell.attr("body/strokeWidth", 2.5);
        cell.setAttrs({
          body: {
            fill: "#2cfeff",
            stroke: "#2cfeff",
            fillOpacity: "1",
            strokeOpacity: "1"
          },
          label: {
            fill: "#151B21"
          },
          path: {
            fill: "#151B21"
          },
          path2: {
            fill: "#151B21"
          }
        });
      }
    });
    // 取消选中节点/边时触发
    graph.on("cell:unselected", ({ cell }) => {
      if (cell.isEdge()) {
        cell.attr("line/stroke", "#2cfeff");
        cell.attr("line/strokeWidth", 1);
      } else {
        console.log("unselected");
        cell.setAttrs({
          body: {
            fill: "#2cfeff",
            stroke: "#2cfeff",
            fillOpacity: "0.15",
            strokeOpacity: "0.6"
          },
          label: {
            fill: "#2CFEFF"
          },
          path: {
            fill: "#2CFEFF"
          },
          path2: {
            fill: "#2CFEFF"
          }
        });
        // cell.attr("body/stroke", "#2cfeff");
        // cell.attr("body/strokeWidth", 1);
      }
    });
    // 给相应的边添加标签；
    graph.on("edge:connected", ({ isNew, edge }) => {
      if (isNew) {
        const source = edge.getSourceCell();
        const rightPorts = source.getPortsByGroup("out");
        if (rightPorts.length === 2) {
          const sourcePortId = edge.getSourcePortId();
          const portIndex = source.getPortIndex(sourcePortId);
          const label = portIndex == 1 ? "是" : "否";
          edge.setLabels(label);
        }
      }
    });
  }

• 获取当前节点位置 cell.position()