【vue2+antvx6】vue节点高度改变，连接桩跟着改变

第一种情况 ：连接桩左右各一个，且是在中心点的位置

    

这个方法是不使用图形变换的情况下，进行改变的。

第一步：antv.vue（只写主要代码）

<template>
  <div class="antv-wrapper">
     <div
          ref="container"
          id="container"
          class="wrapper-canvas"
          @drop="drop($event)"
          @dragover.prevent
       ></div>
   </div>
</template>

<script>
import { Graph, Shape } from "@antv/x6";
import {
  configSetting,
  configNodeShape,
  configNodePorts,
  configEdgeLabel,
  graphBindKey,
  registerVueComponent,
} from "@/utils/antvset";

export default {
   mounted() {
     this.initGraph();
   },
   beforeDestroy() {
     graph.dispose();
   },
   methods: {
     // 初始化画布
    initGraph(options) {
      // 渲染画布
      graph = new Graph({
        container: document.getElementById("container"),
        width: container.offsetWidth, // 画布宽
        height: container.offsetHeight, // 画布高
        ...configSetting(Shape),
      });
      // 获取结束
      this.chushi();
      graph.centerContent();
    },

     // 创建开始结束
    chushi() {
      const a = configNodeShape("End-node");
      // 然后再添加
      const nodeItem1 = {
        ...a,
        x: -300,
        y: -240,
        ports: {
          groups: {
            left: {
              position: "left",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#5F95FF",
                  strokeWidth: 1,
                  fill: "#fff",
                  style: {
                    visibility: "hidden",
                  },
                },
              },
            },
          },
          items: [
            {
              group: "left",
            },
          ],
        },
      };
      // 创建节点
      graph.addNode(nodeItem1);
    },
   }
}

第二步：antvset.js（只写主要代码）

// 自定义组件
import { register } from "@antv/x6-vue-shape";
import End from "../views/antv/components/End.vue";

// 基本设置
export const configSetting = (Shape) => {
  return {
    //......配置内容
  };
};

// 节点预设类型 （圆角矩形: defaultYSquare)
export const configNodeShape = (type, num) => {
  const nodeShapeList = [
     {
      label: "结束",
      data: {
        type: "End-node",
      },
      shape: "End-node",
      width: 384,
      height: 200,
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          fill: "#fff",
          stroke: "#333",
        },
        label: {
          text: "结束",
          fontSize: 16,
          fill: "#333",
        },
      },
    },
    }
  ];
  if (type) {
    const obj = nodeShapeList.find((item) => {
      return item.data.type === type;
    });
    return obj || nodeShapeList;
  }
  return nodeShapeList;
};

// 节点是组件注册
export const registerVueComponent = () => {
  return (
    register({
      shape: "End-node",
      width: 384,
      // height: 200,
      component: End,
      ports: { ...configNodePorts },
    }),
  );
};

第三步：end.vue（只写主要代码）

<template>
  <div class="end com_box" ref="end">
        <el-collapse
          v-model="active"
          accordion
          class="collapseEnd"
          @change="collapse"
        >
          <el-collapse-item name="1">
             <!-- 内容 -->
          </el-collapse-item>
        </el-collapse>
  </div>
</template>

<script>
export default {
  name: "End",
  inject: ["getGraph", "getNode"],
  data() {
    return {
      active: "1",
      node: {}, //节点信息
      nodeData: {}, //获取节点信息 
    };
  },
  mounted() {
    this.node = this.getNode(); //当前节点
    this.getGraph1 = this.getGraph(); //Graph实例
    //初始化
    this.$nextTick(() => {
      this.getsize();
    });
  },
  methods: {
    // 改变节点的高度
    getsize() {
      // 再赋值当前边框颜色
      let ee = document.querySelector(
        `.x6-node[data-cell-id="${this.node.id}"] foreignObject body div`
      );
      this.node.resize(ee.offsetWidth, ee.offsetHeight);
      const ports = document.querySelectorAll(".x6-port-body");
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = "visible";
      }
    },
    //点击折叠面板
    collapse() {
      setTimeout(() => {
        this.getsize();
      }, 300);
    },
  },
};
</script>

第二种情况：连接桩一个在中心点，一个固定位置

这个方法同样是不使用图形变换的情况下，进行改变的。

这里我就只写主要代码了，其余和上面的是一致的，只不过改改组件之类的就行

antvset.js（只写主要代码）

// 自定义组件
import { register } from "@antv/x6-vue-shape";
import Selector from "../views/antv/components/selector.vue";

// 节点预设类型 （圆角矩形: defaultYSquare)
export const configNodeShape = (type, num) => {
  const nodeShapeList = [
    {
      label: "选择器",
      data: {
        type: "selector-node",
        nodedatas: {
          inputList: [
            // {
            //   parameter_name: "",
            //   parameter_type: "1",
            //   description: "",
            //   value: "",
            //   customfields: "",
            // },
          ],
          outputList: [
            {
              parameter_name: "", //否则连接的的节点id
              parameter_type: "String",
              description: "下一个节点",
              value: "",
              customfields: "",
            },
          ],
          IFlist: [
            {
              parameter_name: "",
              parameter_type: "1",
              description: "",
              value: "",
              customfields: "",
            },
          ], //如果的数据
        },
      },
      shape: "selector-node",
      width: 684,
      height: 200,
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          fill: "#fff",
          stroke: "#333",
        },
        label: {
          text: "选择器",
          fontSize: 16,
          fill: "#333",
        },
      },
    }, 
  ];
  if (type) {
    const obj = nodeShapeList.find((item) => {
      return item.data.type === type;
    });
    return obj || nodeShapeList;
  }
  return nodeShapeList;
};

// 节点是组件注册
export const registerVueComponent = () => {
  return (
    register({
      shape: "selector-node",
      width: 684,
      //   height: 50,
      component: Selector,
      ports: {
        groups: {
          right: {
            position: "right",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
          left: {
            position: "left",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
          group1: {
            position: {
              name: "absolute",
            },
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
              text: {
                fontSize: 12,
                fill: "#888",
              },
            },
          },
        },
        items: [
          {
            group: "right",
          },
          {
            group: "left",
          },
          {
            id: "port3",
            group: "group1",
            // args: { dy: 120 },
            args: {
              x: "100%",
              y: 280,
              // angle: 45,
            },
            attrs: {
              // text: { text: "{ x: '100%', y: '100%' }" },
            },
            label: {
              position: {
                name: "bottom-right",
              },
            },
          },
        ],
      },
    }),
  );
};

selector.vue（只写主要代码）

// 改变节点的高度
    getsize() {
      // 再赋值当前边框颜色
      let ee = document.querySelector(
        `.x6-node[data-cell-id="${this.node.id}"] foreignObject body div`
      );
      // 动态更新连接桩位置
      const port = this.node.getPort("port3");
      if (port) {
        this.node.setPortProp("port3", "args", {
          x: "100%",
          y: ee.offsetHeight - 40,
        });
      }
      this.node.resize(ee.offsetWidth, ee.offsetHeight);
      setTimeout(() => {
        const ports = document.querySelectorAll(".x6-port-body");
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = "visible";
        }
      }, 100);
    },

相关内容： 

【vue2+antvx6】报错Cannot read properties of undefined (reading ‘toUpperCase‘)