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",
                },
              },
            },
          },
        },
      });
    },
相关推荐
遂心_7 分钟前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit8 分钟前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天14 分钟前
ts中的函数重载
前端
卓伊凡29 分钟前
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
前端
前端Hardy29 分钟前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy32 分钟前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼43 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍44 分钟前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc