如何自定义一个动态高度和宽度的 react 节点？

[Rey-Wang]

我尝试了几种方法：

• 在 DrawKeyShape和 connectCallback中，在这个阶段没法拿到Dom 元素获取真实的高度和宽度，
• 在animate中，animate?.finished后调用，可以拿到真实的高度和宽度，并且通过调用 update 更新，
  • 但是不知道为什么只生效第一次渲染，一旦拖动节点，size 就变回去了

要么在 react 节点的 effect 中更新？这样每个 react 节点还要 access graph 对象，通常 graph 也存在 ref 中，还有更新的问题。

有什么比较好的解决办法吗？

[Rey-Wang]

export class CustomReactNode extends ReactNode {
  public connectedCallback(): void {
    super.connectedCallback();
    this.getDomElement().style.width = 'auto'; // 只是样式变了，并没有让 Line 和 node 知道他的 size 变了
    this.getDomElement().style.height = 'auto';
  }

  public animate(keyframes: Keyframe[], options?: number | KeyframeAnimationOptions | undefined): IAnimation | null {
    const animate = super.animate(keyframes, options);
    animate?.finished.then(() => {
      const childNode = this.getDomElement().children[0] as HTMLElement;
      const expectedWidth = childNode.offsetWidth;
      const expectedHeight = childNode.offsetHeight;
      console.log(childNode.offsetWidth, childNode.offsetHeight);
      this.getShape('key').attr({ size: [expectedWidth, expectedHeight] });
      this.update({ size: [expectedWidth, expectedHeight] });
      this.render();
    });
  }
}