【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>

相关内容： 

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