如何自定义一个动态高度和宽度的 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();
    });
  }
}

[Rey-Wang]

update: 可实现的方案 1：

• 在drawKeyShape和animate结束都去更新节点的 size

export class CustomReactNode extends ReactNode {
  protected getKeyStyle(attributes: Required<HTMLStyleProps>): GHTMLStyleProps {
    return { ...super.getKeyStyle(attributes) };
  }

  private getReactNodeSize(): Size | undefined {
    const { fixedHeight, fixedWidth } = this.attributes as unknown as OwlReactNodeStyleProps;
    const originalSize = this.getSize(this.attributes);
    if (this.getShape('key')) {
      const childNode = this.getDomElement().children[0] as HTMLElement;
      if (childNode) {
        this.getSize;
        const expectedWidth = fixedWidth ? originalSize[0] : childNode.offsetWidth;
        const expectedHeight = fixedHeight ? originalSize[1] : childNode.offsetHeight;
        return [expectedWidth, expectedHeight];
      }
    }
  }

  protected drawKeyShape(attributes: Required<HTMLStyleProps>, container: Group) {
    const { size } = attributes;
    const expectedSize = this.getReactNodeSize();

    return super.drawKeyShape({ ...attributes, size: expectedSize || size }, container);
  }

  public animate(keyframes: Keyframe[], options?: number | KeyframeAnimationOptions | undefined) {
    const animate = super.animate(keyframes, options);
    animate?.finished.then(() => {
      const expectedSize = this.getReactNodeSize();
      expectedSize && this.update({ size: expectedSize });
    });

    return animate;
  }
}

[Rey-Wang]

文档里有解释，自定义节点可以访问三个钩子函数：onCreate, onUpdate, 以及 onDestroy，经过测试在 onCreate 中是可以拿到HTML 节点的大小的，如何去修改 size？this.update可以修改，但是 onUpdate 又会重置 size，难道是在这两个钩子函数中都要做update size 的操作吗？

[Rey-Wang]

所以代码比较少的版本是利用 onUpdate钩子，但是 onUpdate 在每次节点操作都会被执行，放在这里更新 size 就不是很合理了，是否有某个 API 可以 update size，这样就可以在 onCreate 时候被调用，而且不被 onUpdate 覆盖？

export class CustomReactNode extends ReactNode {
  private getReactNodeSize(): Size | undefined {
    const { fixedHeight, fixedWidth } = this.attributes as unknown as OwlReactNodeStyleProps;
    const originalSize = this.getSize(this.attributes);
    if (this.getShape('key')) {
      const childNode = this.getDomElement().children[0] as HTMLElement;
      if (childNode) {
        this.getSize;
        const expectedWidth = fixedWidth ? originalSize[0] : childNode.offsetWidth;
        const expectedHeight = fixedHeight ? originalSize[1] : childNode.offsetHeight;
        return [expectedWidth, expectedHeight];
      }
    }
  }

  onUpdate() {
    const expectedSize = this.getReactNodeSize();
    expectedSize && this.update({ size: expectedSize });
  }
}