X6节点如何根据内容自适应高度

使用的方法是，把内容放入一个类似的div容器中，计算出div的宽度和高度，再给这个节点的宽度和高度重新赋值

<template>
  <div class="container">
    <div :class="['container-title', { 'node-text-padding': data }]">
      <div class="circle-container">
        <svg-icon icon-class="components" />
      </div>
      <div class="flow-title">组件节点</div>
    </div>
    <div :class="['Node-text', { 'node-text-border': data }]">
      <div class="content" v-html="data"></div>
    </div>
  </div>
</template>

<script setup lang="ts" name="rectangle">
import { Node } from '@antv/x6';

const getNode = inject<() => Node | undefined>('getNode');
const data = ref<any>();

const getSize = (node: any) => {
  let dom = document.querySelector(`.x6-node[data-cell-id="${node.id}"] foreignObject`);
  let container = dom.querySelector('.container');
  // container.style.textAlign = 'left';
  const { width, height } = wrapAndMeasure(container);
  nextTick(() => {
    node.resize(width, height);
  });
};

const changeData = () => {
  const node = getNode?.();
  data.value = node.data.label;
  node.on('change:data', ({ current }) => {
    console.log(current);
    const { label } = current;
    data.value = label;
    nextTick(() => {
      // if (data.value.length <= 10) return;
      getSize(node);
    });
  });
};

const wrapAndMeasure = (container: any) => {
  // 创建新的 div 元素
  let newDiv = document.createElement('div');

  // 将获取到的 container 元素原封不动地放入新的 div 中
  newDiv.appendChild(container.cloneNode(true));

  // 设置新 div 的样式
  newDiv.style.maxWidth = '200px';
  newDiv.style.minWidth = '100px';
  newDiv.style.visibility = 'hidden'; // 隐藏新 div

  // 将新 div 插入文档流中，这样才能计算出其高度和宽度
  document.body.appendChild(newDiv);

  // 计算新 div 的高度和宽度
  let height = newDiv.clientHeight;
  let width = newDiv.clientWidth;
  console.log(newDiv);
  // 从文档流中移除新 div
  newDiv.remove();
  console.log(width, height);

  // 返回计算结果
  return { height, width };
};

onMounted(() => {
  changeData();
});
</script>

<style scoped>
.container {
  border-radius: 4px;
  padding: 10px; /* 内边距 */
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
  background-color: #ffffff;
  box-shadow: var(--el-box-shadow-light); /* 浅色投影 */
}

.container-title {
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
}

.flow-title {
  margin-left: 10px;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
}

.content {
  color: #5a5e66;
  text-align: left; /* 文本居中 */
  overflow: auto; /* 滚动条 */
}

.circle-container {
  width: 25px; /* 设置圆形容器的宽度 */
  height: 25px; /* 设置圆形容器的高度 */
  background-color: #209fff; /* 设置背景颜色为蓝色 */
  border-radius: 50%; /* 将容器的边框半径设置为容器宽度的一半，从而创建圆形 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 0 !important;
}

.circle-container .svg-icon {
  width: 18px !important;
  height: 18px !important;
}

/*.node-text-border {
  border-top: 1px solid #f3f3f3;
}*/

/*.node-text-padding {
  padding-bottom: 10px;
}*/
</style>

当我使用这种方法时，是因为在没有找到其他解决方案的情况下，不得不采取这种方式。如果您有更有效的方法，请告诉我如何改进。