基於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 這兩個函數到底有什麼做用呢？

下文繼續分享。