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

注册节点两种方法:

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",
                },
              },
            },
          },
        },
      });
    },
相关推荐
JarvanMo7 分钟前
Flutter. 适用于 GetX 5 的 CLI (命令行接口/工具)
前端
dyxal11 分钟前
VS Code 1.52.1 对应一些插件版本
前端·chrome
李剑一15 分钟前
vitepress中logo打包丢失
vue.js
融化的雪23 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript
Gazer_S34 分钟前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
鹏多多35 分钟前
前端IndexedDB数据库高效管理插件localForage的教程+案例
前端·javascript·vue.js
我血条子呢41 分钟前
[HTML]播放wav格式音频
前端·html·音视频
CodeSheep1 小时前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员1 小时前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc1 小时前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea