Question

我有一个组件，它将利用context来注册dom节点并将其添加到QuadTree中。

export default class SelectableGroup extends React.PureComponent {
  getChildContext() {
    return {
      register: this.register,
      unregister: this.unregister,
    };
  }

  private tree: QuadTree<string, HTMLElement> = new QuadTree();

  registerNode = (key: string, node: HTMLElement) => {
    const { left, top, height, width } = node.getBoundingClientRect();
    this.tree.set(key, {
      minX: left,
      maxX: left + width,
      minY: top,
      maxY: top + height,
    });
  }

  unregisterNode = (key: string) => {
    this.tree.delete(key);
  }

  public render() {
    return (<div>{this.props.children}</div>);
  }
}

这将在componentDidMount上运行，这意味着它只会注册一次。但是，我必须保持位置最新 - 无论何时节点移动或更改位置（无论是通过滚动，调整大小等），我都希望收到该更改的通知并更新其在QuadTree中的位置。

理想情况下，我想要做的是观察节点的更改并适当更新registry。这是我的目标的“草图”：

registerNode = (key: string, node: HTMLElement) => {
  node.observe(({ left, width, top, height }) => {
    this.tree.set(key, {
      minX: left,
      maxX: left + width,
      minY: top,
      maxY: top + height,
    });
  }));
}

也就是说，每当ClientRect的{{1}}发生变化时，都会触发一个回调函数，以便在商店中对其进行更新。

javascript中是否存在任何API？

观察对DOM节点的ClientRect

0 个答案: