基于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时

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

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

因此在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 区域以外

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

{this.props.children(
              this.setViewBoxScroll,
              this.setViewBoxScrollDelta
            )}
复制代码

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

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

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

下文继续分享。