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

上文说到当可拖动的实际内容的大小发生变化时，

比方说可拖动内容content的size是width:100px, height:100px,

视口viewBox的size是width:600px,height:600px,

可拖动的大视图bigView的size可以通过计算算出来是width：1400px,height:1400px

(600+100)*2 = 1400

那么在content的size发生变化，假设变成600px时，假设viewBox 的size 一直保持不变，视口区域的size保持不变是一个很常见的情况，如果bigView的size 还是1400x1400的话，

就会导致在拖动过程中移动到某个位置时就无法再继续拖动，不能够将content 完全移除viewBox视口区域，

用动图来展示这两种情况

最开始content的size是width:100px, height:100px, bigView的size为width：1400px,height:1400px时

image

当content的size是width:400px, height:400px, bigView的size保持不变还为width：1400px,height:1400px时

image

移动到某一位置时就无法继续移动。

所以在content的size 发生变化时，bigView的size 必须也需要能够同步发生改变。

代码中通过引入ResizeObserver 来对content的size的变化进行观察，

  contentResizeCallback = (
    entries: ResizeObserverEntry[],
    observer: ResizeObserver
  ) => {
    if (this.oldContentRect) {
      let widgetStyle = {
        width: this.content.clientWidth + this.viewBox.clientWidth * 2,
        height: this.content.clientHeight + this.viewBox.clientHeight * 2
      };
      this.bigView.style.width = widgetStyle.width + "px";
      this.bigView.style.height = widgetStyle.height + "px";
    }
    this.oldContentRect = entries[0].contentRect;
  };

  contentResizeObserver = new ResizeObserver(this.contentResizeCallback);

这样就可以保证在content的size发生变化时，content 依然可以完全移出 viewBox 区域之外

image

在上文说到组件的render函数最里面是一个函数调用

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

这就要求组件的使用者在写代码过程中要用函数返回的形式传递实际的content 进入组件。

为什么不直接传入一个React.Element 对象呢？

setViewBoxScroll和setViewBoxScrollDelta 这两个函数到底有什么作用呢？

下文继续分享。