基于React 框架开发 DragScroll组件-(3)

在开发思维导图控件blink-mind-react的时候，有一个需求是：当点击展开和折叠某个节点的时候，需要展开和折叠的icon的位置（相对于视口的位置）不要发生变化。

image

这个思维导图组件是放在DragScroll组件里面的，因为思维导图需要可以拖动到视口的任何区域进行查看。在开发思维导图组件的时候，用的布局方式是Flex 布局。当点击展开或者折叠按钮时，整个控件的size会发生变化，而我想要的效果是点击按钮的位置在视觉效果上不能有移动，不然的话，如果点击了按钮之后，发现按钮移动到了另外一个位置（因为整个布局被重排了），用户体验会很差。

为了解决上述问题，想到一个方案是可以在点击按钮之后，调用一个函数让DragScroll控件里面的viewBox的scroll值调整到合适的位置，就可以让点击按钮在视觉上看上去位置没有发生改变。

基于上面的方案，在DragScroll组件里面封装了两个函数：

1. setViewBoxScroll是使用绝对坐标进行scroll值调整

2. setViewBoxScrollDelta是使用相对坐标进行scroll值调整

  setViewBoxScroll = (left: number, top: number) => {
    if (this.viewBox) {
      this.viewBox.scrollLeft = left;
      this.viewBox.scrollTop = top;
    }
  };

  setViewBoxScrollDelta = (deltaLeft: number, deltaTop: number) => {
    if (this.viewBox) {
      this.viewBox.scrollLeft += deltaLeft;
      this.viewBox.scrollTop += deltaTop;
    }
  };

通过render函数中的调用传递给子组件

{this.props.children(
              this.setViewBoxScroll,
              this.setViewBoxScrollDelta
            )}

这样子组件就可以通过props 拿到这两个函数，在需要的时候调用这两个函数中的任意一个进行自己所需要的scroll值调整。

比方说在思维导图的节点组件NodeWidget中，使用了setViewBoxScrollDelta函数来调整DragScroll组件的scroll 值，保证节点在展开或折叠过程中，视觉上位置不变。

  componentDidUpdate(
    prevProps: Readonly,
    prevState: Readonly,
    snapshot?: any
  ): void {
    if (this.needRelocation) {
      let newRect = this.collapseIcon.getBoundingClientRect();
      this.props.setViewBoxScrollDelta(
        newRect.left - this.oldCollapseIconRect.left,
        newRect.top - this.oldCollapseIconRect.top
      );
      this.needRelocation = false;
    }
    this.layoutSubLinks();
  }