vue使用antv-x6 绘制流程图DAG图

小贵子的博客2023-11-03 11:49

注册节点两种方法：

import { Graph, Node, Path, Cell, Addon } from "@antv/x6";

import { register } from "@antv/x6-vue-shape";

1.x 的写法：

javascript 复制代码

registerCustomNode() {
      // demo
      Graph.registerNode(
        "custom-polygon",
        {
          inherit: "polygon",
          width: 66,
          height: 36,
          markup: [
            {
              tagName: "polygon",
              selector: "body",
            },
            {
              tagName: "text",
              selector: "label",
            },
          ],
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
          ports: {
            ...ports,
            // items: [ // 这里是限制连接点多少个的地方
            //   {
            //     group: 'top',
            //   },
            //   {
            //     group: 'bottom',
            //   },
            // ],
          },
        },
        true
      );

      Graph.registerNode(
        "custom-circle",
        {
          inherit: "circle",
          width: 45,
          height: 45,
          markup: [
            {
              tagName: "circle",
              selector: "body",
            },
            {
              tagName: "text",
              selector: "label",
            },
          ],
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "#5F95FF",
              fill: "#EFF4FF",
            },
            text: {
              fontSize: 12,
              fill: "#262626",
            },
          },
          ports: { ...ports },
        },
        true
      );

      // 自定义节点
      Graph.registerNode(
        "dag-node",
        {
          inherit: "rect",
          width: 180,
          height: 36,
          markup: [
            {
              tagName: "rect", // 标签名称
              selector: "body", // 选择器
            },
            {
              tagName: "image",
              selector: "image1",
            },
            {
              tagName: "text",
              selector: "label",
            },
            {
              tagName: "image",
              selector: "image2",
            },
          ],
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: "rgba(255, 255, 255, 0.3)",
              fill: "#1D2035",
            },
            image1: {
              "xlink:href": imgCot.logo,
              width: 16,
              height: 16,
              x: 12,
              y: 12,
            },
            label: {
              fontSize: 12,
              fill: "rgba(255, 255, 255, 0.9)",
            },
            image2: {
              "xlink:href": imgCot.logo,
              width: 16,
              height: 16,
              x: 12,
              y: 12,
              refX: "80%",
            },
          },
          ports: {
            groups: {
              top: {
                position: "top",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#C2C8D5",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
              bottom: {
                position: "bottom",
                attrs: {
                  circle: {
                    r: 4,
                    magnet: true,
                    stroke: "#C2C8D5",
                    strokeWidth: 1,
                    fill: "#fff",
                  },
                },
              },
            },
          },
        },
        true
      );
   },

2.x 的写法：注册vue组件节点

javascript 复制代码

registerCustomVueNode() {
      register({
        shape: "dag-node",
        width: 185,
        height: 40,
        component: DataBase,
        ports: {
          groups: {
            top: {
              position: "top",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            bottom: {
              position: "bottom",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
          },
        },
      });
    },