vscroll 1.4.0-beta.2 → 1.4.3

package/dist/bundles/vscroll.esm6.js

@@ -1,6 +1,6 @@
 /**
  * vscroll (https://github.com/dhilt/vscroll) FESM2015
- * Version: 1.4.0-beta.2 (2021-09-29T18:28:03.001Z)
+ * Version: 1.4.3 (2021-11-30T02:54:02.729Z)
  * Author: Denis Hilt
  * License: MIT
  */
@@ -328,7 +328,7 @@ const reactiveConfigStorage = new Map();
 
 var core = {
   name: 'vscroll',
-  version: '1.4.0-beta.2'
+  version: '1.4.3'
 };
 
 let instanceCount$1 = 0;
@@ -1276,10 +1276,10 @@ const BaseAdapterProcessFactory = (process) => { var _a; return _a = class BaseA
 const initProcesses = [CommonProcess.init, AdapterProcess.reset, AdapterProcess.reload];
 class Init extends BaseProcessFactory(CommonProcess.init) {
   static run(scroller, process) {
-    const { state: { cycle }, workflow } = scroller;
+    const { state, workflow } = scroller;
     const isInitial = initProcesses.includes(process);
     scroller.logger.logCycle(true);
-    cycle.start(isInitial, process);
+    state.startWorkflowCycle(isInitial, process);
     workflow.call({
       process: Init.process,
       status: ProcessStatus.next
@@ -1298,15 +1298,15 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
     Scroll.onThrottle(scroller, position, () => Scroll.onScroll(scroller, workflow));
   }
   static onSynthetic(scroller, position) {
-    const { scrollState } = scroller.state;
-    const synthPos = scrollState.syntheticPosition;
+    const { scroll } = scroller.state;
+    const synthPos = scroll.syntheticPosition;
     if (synthPos !== null) {
-      if (scrollState.syntheticFulfill) {
-        scrollState.syntheticPosition = null;
+      if (scroll.syntheticFulfill) {
+        scroll.syntheticPosition = null;
       }
-      if (!scrollState.syntheticFulfill || synthPos === position) {
+      if (!scroll.syntheticFulfill || synthPos === position) {
         scroller.logger.log(() => [
-          'skipping scroll', position, `[${scrollState.syntheticFulfill ? '' : 'pre-'}synthetic]`
+          'skipping scroll', position, `[${scroll.syntheticFulfill ? '' : 'pre-'}synthetic]`
         ]);
         return true;
       }
@@ -1317,13 +1317,13 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
     return false;
   }
   static onThrottle(scroller, position, done) {
-    const { state: { scrollState }, settings: { throttle }, logger } = scroller;
-    scrollState.current = Scroll.getScrollEvent(position, scrollState.previous);
-    const { direction, time } = scrollState.current;
-    const timeDiff = scrollState.previous ? time - scrollState.previous.time : Infinity;
+    const { state: { scroll }, settings: { throttle }, logger } = scroller;
+    scroll.current = Scroll.getScrollEvent(position, scroll.previous);
+    const { direction, time } = scroll.current;
+    const timeDiff = scroll.previous ? time - scroll.previous.time : Infinity;
     const delta = throttle - timeDiff;
     const shouldDelay = isFinite(delta) && delta > 0;
-    const alreadyDelayed = !!scrollState.scrollTimer;
+    const alreadyDelayed = !!scroll.scrollTimer;
     logger.log(() => [
       direction === Direction.backward ? '\u2934' : '\u2935',
       position,
@@ -1331,17 +1331,17 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
       shouldDelay ? (alreadyDelayed ? 'delayed' : `/ ${delta}ms delay`) : ''
     ]);
     if (!shouldDelay) {
-      if (scrollState.scrollTimer) {
-        clearTimeout(scrollState.scrollTimer);
-        scrollState.scrollTimer = null;
+      if (scroll.scrollTimer) {
+        clearTimeout(scroll.scrollTimer);
+        scroll.scrollTimer = null;
       }
       done();
       return;
     }
     if (!alreadyDelayed) {
-      scrollState.scrollTimer = setTimeout(() => {
+      scroll.scrollTimer = setTimeout(() => {
         logger.log(() => {
-          const curr = Scroll.getScrollEvent(scroller.viewport.scrollPosition, scrollState.current);
+          const curr = Scroll.getScrollEvent(scroller.viewport.scrollPosition, scroll.current);
           return [
             curr.direction === Direction.backward ? '\u2934' : '\u2935',
             curr.position,
@@ -1350,7 +1350,7 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
             position
           ];
         });
-        scrollState.scrollTimer = null;
+        scroll.scrollTimer = null;
         done();
       }, delta);
     }
@@ -1369,11 +1369,11 @@ class Scroll extends BaseProcessFactory(CommonProcess.scroll) {
     return { position, direction, time };
   }
   static onScroll(scroller, workflow) {
-    const { state: { scrollState, cycle } } = scroller;
-    scrollState.previous = Object.assign({}, scrollState.current);
-    scrollState.current = null;
+    const { state: { scroll, cycle } } = scroller;
+    scroll.previous = Object.assign({}, scroll.current);
+    scroll.current = null;
     if (cycle.busy.get()) {
-      scroller.logger.log(() => ['skipping scroll', scrollState.previous.position, '[pending]']);
+      scroller.logger.log(() => ['skipping scroll', scroll.previous.position, '[pending]']);
       return;
     }
     workflow.call({
@@ -1424,7 +1424,7 @@ class Reload extends BaseAdapterProcessFactory(AdapterProcess.reload) {
     viewport.reset(buffer.startIndex);
     const payload = {};
     if (state.cycle.busy.get()) {
-      state.scrollState.cleanupTimers();
+      state.scroll.stop();
       payload.finalize = true;
       state.cycle.interrupter = Reload.process;
     }
@@ -1475,6 +1475,10 @@ class Item {
       this.size = this.routines.getSize(this.element);
     }
   }
+  makeVisible() {
+    this.routines.makeElementVisible(this.element);
+    this.invisible = false;
+  }
   hide() {
     if (this.element) {
       this.routines.hideElement(this.element);
@@ -1535,47 +1539,65 @@ class Update extends BaseAdapterProcessFactory(AdapterProcess.update) {
   }
 }
 
-class Append extends BaseAdapterProcessFactory(AdapterProcess.append) {
-  static run(scroller, { process, options }) {
-    const { params } = Append.parseInput(scroller, options, false, process);
+class Insert extends BaseAdapterProcessFactory(AdapterProcess.insert) {
+  static run(scroller, options) {
+    const { params } = Insert.parseInput(scroller, options);
     if (!params) {
       return;
     }
-    const shouldAppend = Append.doAppend(scroller, params, process !== AdapterProcess.append);
+    const shouldInsert = Insert.doInsert(scroller, params);
     scroller.workflow.call({
-      process: Append.process,
-      status: shouldAppend ? ProcessStatus.next : ProcessStatus.done
+      process: Insert.process,
+      status: shouldInsert ? ProcessStatus.next : ProcessStatus.done
     });
   }
-  static doAppend(scroller, params, prepend) {
-    const { buffer } = scroller;
-    const { items, bof, eof, increase, decrease } = params;
-    const fixRight = (prepend && !increase) || (!prepend && !!decrease);
-    let result = false;
-    if ((prepend && bof && !buffer.bof.get()) || (!prepend && eof && !buffer.eof.get())) {
-      result = Append.doVirtual(scroller, items, prepend, fixRight);
-    }
-    else {
-      if (!buffer.size) {
-        result = Append.doEmpty(scroller, items, prepend, fixRight);
-      }
-      else {
-        result = Append.doRegular(scroller, items, prepend, fixRight);
+  static doInsert(scroller, params) {
+    if (!Insert.insertEmpty(scroller, params)) {
+      if (!Insert.insertInBuffer(scroller, params)) {
+        if (!Insert.insertVirtually(scroller, params)) {
+          return false;
+        }
       }
     }
-    return result;
+    return true;
   }
-  static doVirtual(scroller, items, prepend, fixRight) {
-    const { buffer, logger, viewport, state: { fetch } } = scroller;
-    const absIndexToken = fixRight ? 'absMinIndex' : 'absMaxIndex';
-    if (!isFinite(buffer[absIndexToken])) {
+  static insertEmpty(scroller, params) {
+    const { buffer, routines, state: { fetch } } = scroller;
+    if (buffer.size) {
       return false;
     }
-    if (prepend) {
-      buffer.prependVirtually(items.length, fixRight);
+    const { beforeIndex, afterIndex, items, decrease } = params;
+    if (!buffer.fillEmpty(items, beforeIndex, afterIndex, !!decrease, (index, data) => new Item(index, data, routines))) {
+      return false;
     }
-    else {
-      buffer.appendVirtually(items.length, fixRight);
+    fetch.fill(buffer.items, buffer.startIndex);
+    return true;
+  }
+  static insertInBuffer(scroller, params) {
+    const { before, after, beforeIndex, afterIndex, items, decrease } = params;
+    const indexToInsert = scroller.buffer.getIndexToInsert(before || after, beforeIndex, afterIndex);
+    if (isNaN(indexToInsert)) {
+      return false;
+    }
+    const isBackward = Number.isInteger(beforeIndex) || before;
+    const updateOptions = {
+      predicate: ({ $index, data }) => {
+        if (indexToInsert === $index) {
+          return isBackward ? [...items, data] : [data, ...items];
+        }
+        return true;
+      },
+      fixRight: decrease
+    };
+    return Update.doUpdate(scroller, updateOptions);
+  }
+  static insertVirtually(scroller, params) {
+    const { beforeIndex, afterIndex, items, decrease } = params;
+    const { buffer, state: { fetch }, viewport } = scroller;
+    const direction = Number.isInteger(beforeIndex) ? Direction.backward : Direction.forward;
+    const indexToInsert = (direction === Direction.backward ? beforeIndex : afterIndex);
+    if (!buffer.insertVirtually(items, indexToInsert, direction, !!decrease)) {
+      return false;
     }
     const { index, diff } = viewport.getEdgeVisibleItem(buffer.items, Direction.backward);
     fetch.firstVisible.index = index;
@@ -1583,46 +1605,41 @@ class Append extends BaseAdapterProcessFactory(AdapterProcess.append) {
       fetch.simulate = true;
       fetch.firstVisible.delta = -buffer.getSizeByIndex(index) + diff;
     }
-    logger.log(() => `buffer.${[absIndexToken]} value is set to ${buffer[absIndexToken]}`);
-    logger.stat(`after virtual ${prepend ? 'prepend' : 'append'}`);
     return true;
   }
-  static doEmpty(scroller, items, prepend, fixRight) {
-    const { buffer, state: { fetch } } = scroller;
-    const absIndexToken = fixRight ? 'absMinIndex' : 'absMaxIndex';
-    const shift = prepend && !fixRight ? items.length - 1 : (!prepend && fixRight ? 1 - items.length : 0);
-    const bufferLimit = buffer[absIndexToken] + (fixRight ? -1 : 1) * (items.length - 1);
-    const newItems = [];
-    const startIndex = buffer[prepend ? 'minIndex' : 'maxIndex'];
-    let index = startIndex;
-    items.forEach(item => {
-      const newItem = new Item(index + shift, item, scroller.routines);
-      Array.prototype[prepend ? 'unshift' : 'push'].call(newItems, newItem);
-      index += (prepend ? -1 : 1);
+}
+
+class Append extends BaseAdapterProcessFactory(AdapterProcess.append) {
+  static run(scroller, { process, options }) {
+    const { params } = Append.parseInput(scroller, options, false, process);
+    if (!params) {
+      return;
+    }
+    const shouldAppend = Append.doAppend(scroller, process, params);
+    scroller.workflow.call({
+      process: Append.process,
+      status: shouldAppend ? ProcessStatus.next : ProcessStatus.done
     });
-    if (bufferLimit !== buffer[absIndexToken]) {
-      buffer[absIndexToken] = bufferLimit;
-      scroller.logger.log(() => `buffer.${absIndexToken} value is set to ${buffer[absIndexToken]}`);
-    }
-    (prepend ? fetch.prepend : fetch.append).call(fetch, newItems);
-    buffer.setItems(newItems);
-    fetch.first.indexBuffer = !isNaN(buffer.firstIndex) ? buffer.firstIndex : index;
-    fetch.last.indexBuffer = !isNaN(buffer.lastIndex) ? buffer.lastIndex : index;
-    fetch.firstVisible.index = startIndex;
-    return true;
   }
-  static doRegular(scroller, items, prepend, fixRight) {
-    const index = scroller.buffer[prepend ? 'firstIndex' : 'lastIndex'];
-    const updateOptions = {
-      predicate: ({ $index, data }) => {
-        if ($index === index) {
-          return prepend ? [...items.reverse(), data] : [data, ...items];
-        }
-        return true;
-      },
-      fixRight
-    };
-    return Update.doUpdate(scroller, updateOptions);
+  static doAppend(scroller, process, params) {
+    const { bof, eof, increase, decrease } = params;
+    const { buffer } = scroller;
+    const prepend = process === AdapterProcess.prepend;
+    const opposite = prepend ? !increase : decrease;
+    let beforeIndex, afterIndex, items = params.items;
+    if (prepend) {
+      beforeIndex = (bof ? buffer.absMinIndex : buffer.minIndex) + (!buffer.size ? 1 : 0);
+      items = [...items].reverse();
+    }
+    else {
+      afterIndex = (eof ? buffer.absMaxIndex : buffer.maxIndex) - (!buffer.size && !opposite ? 1 : 0);
+    }
+    return Insert.doInsert(scroller, {
+      items,
+      beforeIndex,
+      afterIndex,
+      decrease: opposite
+    });
   }
 }
 
@@ -1769,76 +1786,6 @@ class UserClip extends BaseAdapterProcessFactory(AdapterProcess.clip) {
   }
 }
 
-class Insert extends BaseAdapterProcessFactory(AdapterProcess.insert) {
-  static run(scroller, options) {
-    const { params } = Insert.parseInput(scroller, options);
-    if (!params) {
-      return;
-    }
-    const shouldInsert = Insert.doInsert(scroller, params);
-    scroller.workflow.call({
-      process: Insert.process,
-      status: shouldInsert ? ProcessStatus.next : ProcessStatus.done
-    });
-  }
-  static doInsert(scroller, params) {
-    if (!Insert.insertEmpty(scroller, params)) {
-      if (!Insert.insertInBuffer(scroller, params)) {
-        if (!Insert.insertVirtually(scroller, params)) {
-          return false;
-        }
-      }
-    }
-    return true;
-  }
-  static insertEmpty(scroller, params) {
-    const { buffer, routines, state: { fetch } } = scroller;
-    if (buffer.size) {
-      return false;
-    }
-    const { beforeIndex, afterIndex, items, decrease } = params;
-    if (!buffer.fillEmpty(items, beforeIndex, afterIndex, !!decrease, (index, data) => new Item(index, data, routines))) {
-      return false;
-    }
-    fetch.fill(buffer.items, buffer.startIndex);
-    return true;
-  }
-  static insertInBuffer(scroller, params) {
-    const { before, after, beforeIndex, afterIndex, items, decrease } = params;
-    const indexToInsert = scroller.buffer.getIndexToInsert(before || after, beforeIndex, afterIndex);
-    if (isNaN(indexToInsert)) {
-      return false;
-    }
-    const isBackward = Number.isInteger(beforeIndex) || before;
-    const updateOptions = {
-      predicate: ({ $index, data }) => {
-        if (indexToInsert === $index) {
-          return isBackward ? [...items, data] : [data, ...items];
-        }
-        return true;
-      },
-      fixRight: decrease
-    };
-    return Update.doUpdate(scroller, updateOptions);
-  }
-  static insertVirtually(scroller, params) {
-    const { beforeIndex, afterIndex, items, decrease } = params;
-    const { buffer, state: { fetch }, viewport } = scroller;
-    const direction = Number.isInteger(beforeIndex) ? Direction.backward : Direction.forward;
-    const indexToInsert = (direction === Direction.backward ? beforeIndex : afterIndex);
-    if (!buffer.insertVirtually(items, indexToInsert, direction, !!decrease)) {
-      return false;
-    }
-    const { index, diff } = viewport.getEdgeVisibleItem(buffer.items, Direction.backward);
-    fetch.firstVisible.index = index;
-    if (!isNaN(index)) {
-      fetch.simulate = true;
-      fetch.firstVisible.delta = -buffer.getSizeByIndex(index) + diff;
-    }
-    return true;
-  }
-}
-
 class Replace extends BaseAdapterProcessFactory(AdapterProcess.replace) {
   static run(scroller, options) {
     const { params } = Replace.parseInput(scroller, options);
@@ -2236,9 +2183,9 @@ class Fetch extends BaseProcessFactory(CommonProcess.fetch) {
       }
     }
     else {
-      const { state: { scrollState, fetch }, viewport } = scroller;
-      if (scrollState.positionBeforeAsync === null) {
-        scrollState.positionBeforeAsync = viewport.scrollPosition;
+      const { state: { scroll, fetch }, viewport } = scroller;
+      if (scroll.positionBeforeAsync === null) {
+        scroll.positionBeforeAsync = viewport.scrollPosition;
       }
       fetch.cancel = () => {
         box.success = () => null;
@@ -2358,13 +2305,13 @@ class PostFetch extends BaseProcessFactory(CommonProcess.postFetch) {
 
 class Render extends BaseProcessFactory(CommonProcess.render) {
   static run(scroller) {
-    const { workflow, state: { cycle, render, scrollState }, viewport } = scroller;
+    const { workflow, state: { cycle, render, scroll }, viewport, routines } = scroller;
     scroller.logger.stat('before new items render');
-    if (scrollState.positionBeforeAsync === null) {
-      scrollState.positionBeforeAsync = viewport.scrollPosition;
+    if (scroll.positionBeforeAsync === null) {
+      scroll.positionBeforeAsync = viewport.scrollPosition;
     }
-    render.renderTimer = setTimeout(() => {
-      render.renderTimer = null;
+    render.cancel = routines.render(() => {
+      render.cancel = null;
       if (Render.doRender(scroller)) {
         workflow.call({
           process: Render.process,
@@ -2379,7 +2326,7 @@ class Render extends BaseProcessFactory(CommonProcess.render) {
           payload: { error: 'Can\'t associate item with element' }
         });
       }
-    }, 0);
+    });
   }
   static doRender(scroller) {
     const { state: { fetch, render }, viewport, buffer, logger } = scroller;
@@ -2398,29 +2345,91 @@ class Render extends BaseProcessFactory(CommonProcess.render) {
   }
   static processElement(scroller, item) {
     const { viewport, buffer } = scroller;
-    const element = viewport.element.querySelector(`[data-sid="${item.nodeId}"]`);
+    const element = viewport.findItemElementById(item.nodeId);
     if (!element) {
       return false;
     }
     item.element = element;
-    item.element.style.left = '';
-    item.element.style.top = '';
-    item.element.style.position = '';
-    item.invisible = false;
+    item.makeVisible();
     item.setSize(buffer.getSizeByIndex(item.$index));
     buffer.cacheItem(item);
     return true;
   }
 }
 
+const isInterrupted = ({ call }) => !!call.interrupted;
+class End extends BaseProcessFactory(CommonProcess.end) {
+  static run(scroller, { error } = {}) {
+    const { workflow, state: { cycle: { interrupter } } } = scroller;
+    if (!error && !interrupter) {
+      // set out params accessible via Adapter
+      End.calculateParams(scroller, workflow);
+    }
+    // explicit interruption for we don't want to go through the inner loop finalizing
+    if (isInterrupted(workflow)) {
+      workflow.call({ process: End.process, status: ProcessStatus.done });
+      return;
+    }
+    const next = End.shouldContinueRun(scroller, error);
+    scroller.state.endInnerLoop();
+    workflow.call({
+      process: End.process,
+      status: next ? ProcessStatus.next : ProcessStatus.done,
+      payload: Object.assign({}, (interrupter ? { process: interrupter } : {}))
+    });
+  }
+  static calculateParams(scroller, workflow) {
+    const { adapter, viewport, buffer: { items } } = scroller;
+    if (adapter.wanted.firstVisible) {
+      const { item } = viewport.getEdgeVisibleItem(items, Direction.backward);
+      if (!item || item.element !== adapter.firstVisible.element) {
+        adapter.firstVisible = item ? item.get() : EMPTY_ITEM;
+      }
+    }
+    // the workflow can be interrupter on firstVisible change
+    if (adapter.wanted.lastVisible && !isInterrupted(workflow)) {
+      const { item } = viewport.getEdgeVisibleItem(items, Direction.forward);
+      if (!item || item.element !== adapter.lastVisible.element) {
+        adapter.lastVisible = item ? item.get() : EMPTY_ITEM;
+      }
+    }
+  }
+  static shouldContinueRun(scroller, error) {
+    const { cycle, fetch, render } = scroller.state;
+    // Adapter.reload or Adapter.reset
+    if (cycle.interrupter) {
+      return true;
+    }
+    // critical error
+    if (error) {
+      return false;
+    }
+    // Adapter.check
+    if (fetch.simulate && fetch.isCheck && !render.noSize) {
+      return true;
+    }
+    // Adapter.remove or Adapter.update with clip
+    if (fetch.simulate && fetch.doRemove) {
+      return true;
+    }
+    // common inner loop (App start, scroll, Adapter.clip) with full fetch
+    if (!fetch.simulate && ((fetch.hasNewItems && !render.noSize) || fetch.hasAnotherPack)) {
+      return true;
+    }
+    return false;
+  }
+}
+
 class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
   static run(scroller) {
-    const { workflow, viewport, state: { scrollState } } = scroller;
-    scrollState.positionBeforeAdjust = viewport.scrollPosition;
+    const { workflow, viewport, state: { scroll } } = scroller;
+    scroll.positionBeforeAdjust = viewport.scrollPosition;
     Adjust.setPaddings(scroller);
-    scrollState.positionAfterAdjust = viewport.scrollPosition;
+    scroll.positionAfterAdjust = viewport.scrollPosition;
     // scroll position adjustments
     const position = Adjust.calculatePosition(scroller);
+    // additional adjustment if the position can't be reached during the initial cycle
+    Adjust.setAdditionalForwardPadding(scroller, position);
     // set new position using animation frame
     Adjust.setPosition(scroller, position, () => workflow.call({
       process: Adjust.process,
@@ -2451,7 +2460,8 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
     }
     // lack of items case
     const bufferSize = viewport.getScrollableSize() - forward.size - backward.size;
-    const viewportSizeDiff = viewport.getSize() - (bwdSize + bufferSize + fwdSize);
+    const scrollSize = bwdSize + bufferSize + fwdSize;
+    const viewportSizeDiff = viewport.getSize() - scrollSize;
     if (viewportSizeDiff > 0) {
       if (inverse) {
         bwdSize += viewportSizeDiff;
@@ -2466,7 +2476,7 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
     scroller.logger.stat('after paddings adjustments');
   }
   static calculatePosition(scroller) {
-    const { viewport, buffer, state: { fetch, render, scrollState } } = scroller;
+    const { viewport, buffer, state: { fetch, render, scroll } } = scroller;
     let position = viewport.paddings.backward.size;
     // increase the position to meet the expectation of the first visible item
     if (!isNaN(fetch.firstVisible.index) && !isNaN(buffer.firstIndex)) {
@@ -2489,8 +2499,8 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
       });
     }
     // slow fetch/render case
-    if (scrollState.positionBeforeAsync !== null) {
-      const diff = render.positionBefore - scrollState.positionBeforeAsync;
+    if (scroll.positionBeforeAsync !== null) {
+      const diff = render.positionBefore - scroll.positionBeforeAsync;
       if (diff !== 0) {
         scroller.logger.log(`shift position due to fetch-render difference (${diff})`);
         position += diff;
@@ -2502,22 +2512,47 @@ class Adjust extends BaseProcessFactory(CommonProcess.adjust) {
     }
     return Math.round(position);
   }
+  static setAdditionalForwardPadding(scroller, position) {
+    const { viewport, buffer, state: { cycle } } = scroller;
+    if (!cycle.isInitial || !End.shouldContinueRun(scroller, null)) {
+      return;
+    }
+    const diff = position - viewport.getMaxScrollPosition();
+    if (diff <= 0) {
+      return;
+    }
+    const last = buffer.getLastVisibleItem();
+    if (!last) {
+      return;
+    }
+    let size = 0;
+    let index = last.$index + 1;
+    while (size <= diff && index <= buffer.absMaxIndex) {
+      size += buffer.getSizeByIndex(index++);
+    }
+    const shift = Math.min(size, diff);
+    if (shift) {
+      viewport.paddings.forward.size += shift;
+      scroller.logger.log(`increase fwd padding due to lack of items (${diff} -> ${shift})`);
+    }
+  }
   static setPosition(scroller, position, done) {
-    const { state: { scrollState }, viewport } = scroller;
-    if (!scrollState.hasPositionChanged(position)) {
+    const { state: { scroll }, viewport, routines } = scroller;
+    if (!scroll.hasPositionChanged(position)) {
       return done();
     }
-    scrollState.syntheticPosition = position;
-    scrollState.syntheticFulfill = false;
-    scrollState.animationFrameId = requestAnimationFrame(() => {
-      const inertiaDiff = scrollState.positionAfterAdjust - viewport.scrollPosition;
+    scroll.syntheticPosition = position;
+    scroll.syntheticFulfill = false;
+    scroll.cancelAnimation = routines.animate(() => {
+      scroll.cancelAnimation = null;
+      const inertiaDiff = scroll.positionAfterAdjust - viewport.scrollPosition;
       let diffLog = '';
       if (inertiaDiff > 0) {
         position -= inertiaDiff;
-        scrollState.syntheticPosition = position;
+        scroll.syntheticPosition = position;
         diffLog = ` (-${inertiaDiff})`;
       }
-      scrollState.syntheticFulfill = true;
+      scroll.syntheticFulfill = true;
       viewport.scrollPosition = position;
       scroller.logger.stat('after scroll adjustment' + diffLog);
       done();
@@ -2657,67 +2692,6 @@ class Clip extends BaseProcessFactory(CommonProcess.clip) {
   }
 }
 
-const isInterrupted = ({ call }) => !!call.interrupted;
-class End extends BaseProcessFactory(CommonProcess.end) {
-  static run(scroller, { error } = {}) {
-    const { workflow, state: { cycle: { interrupter } } } = scroller;
-    if (!error && !interrupter) {
-      // set out params accessible via Adapter
-      End.calculateParams(scroller, workflow);
-    }
-    // explicit interruption for we don't want to go through the inner loop finalizing
-    if (isInterrupted(workflow)) {
-      workflow.call({ process: End.process, status: ProcessStatus.done });
-      return;
-    }
-    const next = End.finalizeInnerLoop(scroller, error);
-    workflow.call({
-      process: End.process,
-      status: next ? ProcessStatus.next : ProcessStatus.done,
-      payload: Object.assign({}, (interrupter ? { process: interrupter } : {}))
-    });
-  }
-  static calculateParams(scroller, workflow) {
-    const { adapter, viewport, buffer: { items } } = scroller;
-    if (adapter.wanted.firstVisible) {
-      const { item } = viewport.getEdgeVisibleItem(items, Direction.backward);
-      if (!item || item.element !== adapter.firstVisible.element) {
-        adapter.firstVisible = item ? item.get() : EMPTY_ITEM;
-      }
-    }
-    // the workflow can be interrupter on firstVisible change
-    if (adapter.wanted.lastVisible && !isInterrupted(workflow)) {
-      const { item } = viewport.getEdgeVisibleItem(items, Direction.forward);
-      if (!item || item.element !== adapter.lastVisible.element) {
-        adapter.lastVisible = item ? item.get() : EMPTY_ITEM;
-      }
-    }
-  }
-  static finalizeInnerLoop(scroller, error) {
-    const { state, state: { cycle, clip, fetch } } = scroller;
-    const next = !!cycle.interrupter || (error ? false : End.getNext(scroller));
-    cycle.innerLoop.isInitial = false;
-    fetch.stopSimulate();
-    clip.reset(true);
-    state.endInnerLoop();
-    return next;
-  }
-  static getNext(scroller) {
-    const { state: { fetch, render } } = scroller;
-    if (fetch.simulate && fetch.isCheck && !render.noSize) { // Adapter.check
-      return true;
-    }
-    if (fetch.simulate && fetch.doRemove) { // Adapter.remove or Adapter.update with clip
-      return true;
-    }
-    if ( // common inner loop (App start, Scroll, Adapter.clip) accompanied by fetch
-    !fetch.simulate && ((fetch.hasNewItems && !render.noSize) || fetch.hasAnotherPack)) {
-      return true;
-    }
-    return false;
-  }
-}
-
 class Logger {
   constructor(scroller, packageInfo, adapter) {
     this.logs = [];
@@ -2908,12 +2882,50 @@ class Routines {
   constructor(settings) {
     this.horizontal = settings.horizontal;
     this.window = settings.windowViewport;
+    this.viewport = settings.viewport;
   }
   checkElement(element) {
     if (!element) {
       throw new Error('HTML element is not defined');
     }
   }
+  getHostElement(element) {
+    if (this.window) {
+      return document.documentElement;
+    }
+    if (this.viewport) {
+      return this.viewport;
+    }
+    this.checkElement(element);
+    const parent = element.parentElement;
+    this.checkElement(parent);
+    return parent;
+  }
+  getScrollEventReceiver(element) {
+    if (this.window) {
+      return window;
+    }
+    return this.getHostElement(element);
+  }
+  setupScrollRestoration() {
+    if ('scrollRestoration' in history) {
+      history.scrollRestoration = 'manual';
+    }
+  }
+  dismissOverflowAnchor(element) {
+    this.checkElement(element);
+    element.style.overflowAnchor = 'none';
+  }
+  findElementBySelector(element, selector) {
+    this.checkElement(element);
+    return element.querySelector(selector);
+  }
+  findPaddingElement(element, direction) {
+    return this.findElementBySelector(element, `[data-padding-${direction}]`);
+  }
+  findItemElement(element, id) {
+    return this.findElementBySelector(element, `[data-sid="${id}"]`);
+  }
   getScrollPosition(element) {
     if (this.window) {
       return window.pageYOffset;
@@ -2976,6 +2988,12 @@ class Routines {
     return element.offsetTop - (relativeElement ? relativeElement.scrollTop : 0) +
       (direction === (!opposite ? Direction.forward : Direction.backward) ? this.getSize(element) : 0);
   }
+  makeElementVisible(element) {
+    this.checkElement(element);
+    element.style.left = '';
+    element.style.top = '';
+    element.style.position = '';
+  }
   hideElement(element) {
     this.checkElement(element);
     element.style.display = 'none';
@@ -2988,11 +3006,25 @@ class Routines {
     this.checkElement(element);
     element.scrollIntoView(argument);
   }
+  render(cb) {
+    const timeoutId = setTimeout(() => cb());
+    return () => clearTimeout(timeoutId);
+  }
+  animate(cb) {
+    const animationFrameId = requestAnimationFrame(() => cb());
+    return () => cancelAnimationFrame(animationFrameId);
+  }
+  onScroll(element, handler) {
+    element.addEventListener('scroll', handler);
+    return () => element.removeEventListener('scroll', handler);
+  }
 }
 
 class Padding {
   constructor(element, direction, routines) {
-    this.element = element.querySelector(`[data-padding-${direction}]`);
+    const found = routines.findPaddingElement(element, direction);
+    routines.checkElement(found);
+    this.element = found;
     this.direction = direction;
     this.routines = routines;
   }
@@ -3067,28 +3099,21 @@ class Viewport {
     this.routines = routines;
     this.state = state;
     this.logger = logger;
-    this.disabled = false;
+    this.hostElement = this.routines.getHostElement(this.element);
+    this.scrollEventReceiver = this.routines.getScrollEventReceiver(this.element);
     if (settings.windowViewport) {
-      this.hostElement = document.documentElement;
-      this.scrollEventReceiver = window;
-    }
-    else {
-      this.hostElement = settings.viewport || this.element.parentElement;
-      this.scrollEventReceiver = this.hostElement;
-    }
-    this.paddings = new Paddings(this.element, this.routines, settings);
-    if (settings.windowViewport && 'scrollRestoration' in history) {
-      history.scrollRestoration = 'manual';
+      this.routines.setupScrollRestoration();
     }
     if (settings.dismissOverflowAnchor) {
-      this.hostElement.style.overflowAnchor = 'none';
+      this.routines.dismissOverflowAnchor(this.hostElement);
     }
+    this.paddings = new Paddings(this.element, this.routines, settings);
   }
   reset(startIndex) {
     this.setOffset();
     this.paddings.reset(this.getSize(), startIndex, this.offset);
     this.scrollPosition = this.paddings.backward.size || 0;
-    this.state.scrollState.reset();
+    this.state.scroll.reset();
   }
   setPosition(value) {
     const oldPosition = this.scrollPosition;
@@ -3109,28 +3134,15 @@ class Viewport {
   set scrollPosition(value) {
     this.setPosition(value);
   }
-  disableScrollForOneLoop() {
-    if (this.disabled) {
-      return;
-    }
-    const { style } = this.hostElement;
-    if (style.overflowY === 'hidden') {
-      return;
-    }
-    this.disabled = true;
-    const overflow = style.overflowY;
-    setTimeout(() => {
-      this.disabled = false;
-      style.overflowY = overflow;
-    });
-    style.overflowY = 'hidden';
-  }
   getSize() {
     return this.routines.getSize(this.hostElement, true);
   }
   getScrollableSize() {
     return this.routines.getSize(this.element);
   }
+  getMaxScrollPosition() {
+    return this.getScrollableSize() - this.getSize();
+  }
   getBufferPadding() {
     return this.getSize() * this.settings.padding;
   }
@@ -3143,6 +3155,9 @@ class Viewport {
       this.offset -= this.routines.getOffset(this.hostElement);
     }
   }
+  findItemElementById(id) {
+    return this.routines.findItemElement(this.element, id);
+  }
   getEdgeVisibleItem(items, direction) {
     const bwd = direction === Direction.backward;
     const opposite = bwd ? Direction.forward : Direction.backward;
@@ -3744,22 +3759,6 @@ class Buffer {
       this.startIndex = this.absMinIndex;
     }
   }
-  appendVirtually(count, fixRight) {
-    if (fixRight) {
-      this.items.forEach(item => item.updateIndex(item.$index - count));
-      this.cache.shiftIndexes(-count);
-      this.items = [...this.items];
-    }
-    this.shiftExtremum(count, fixRight);
-  }
-  prependVirtually(count, fixRight) {
-    if (!fixRight) {
-      this.items.forEach(item => item.updateIndex(item.$index + count));
-      this.cache.shiftIndexes(count);
-      this.items = [...this.items];
-    }
-    this.shiftExtremum(count, fixRight);
-  }
   insertVirtually(items, index, direction, fixRight) {
     if (!this.checkCall.insertVirtual(items, index, direction)) {
       return false;
@@ -3949,6 +3948,7 @@ class InnerLoopModel {
     return this.count === 0;
   }
   done() {
+    this.isInitial = false;
     this.count++;
     this.total++;
     this.busy.set(false);
@@ -3968,7 +3968,7 @@ class WorkflowCycleModel {
     this.innerLoop = new InnerLoopModel(loopCount);
     this.interrupter = null;
     this.busy = new Reactive(false);
-    this.done(cycleCount);
+    this.end(cycleCount);
   }
   get loopId() {
     return `${this.instanceIndex}-${this.count}-${this.innerLoop.total}`;
@@ -3976,11 +3976,6 @@ class WorkflowCycleModel {
   get loopIdNext() {
     return `${this.instanceIndex}-${this.count}-${this.innerLoop.total + 1}`;
   }
-  done(count) {
-    this.count = count;
-    this.isInitial = false;
-    this.busy.set(false);
-  }
   start(isInitial, initiator) {
     this.isInitial = isInitial;
     this.initiator = initiator;
@@ -3989,6 +3984,11 @@ class WorkflowCycleModel {
     this.interrupter = null;
     this.busy.set(true);
   }
+  end(count) {
+    this.count = count;
+    this.isInitial = false;
+    this.busy.set(false);
+  }
   dispose(forever) {
     if (forever) {
       // otherwise the value will be persisted during re-instantiation
@@ -4106,18 +4106,6 @@ class FetchModel {
     this.firstVisible.index = start;
     this.firstVisible.delta = 0;
   }
-  append(items) {
-    this.startSimulate(items);
-    this.last.index = items[items.length - 1].$index;
-    this.first.index = items[0].$index;
-    this.direction = Direction.forward;
-  }
-  prepend(items) {
-    this.startSimulate(items);
-    this.last.index = items[0].$index;
-    this.first.index = items[items.length - 1].$index;
-    this.direction = Direction.backward;
-  }
   check(items) {
     this.startSimulate(items);
     this.last.index = items[0].$index;
@@ -4160,11 +4148,11 @@ class RenderModel {
     this.sizeBefore = 0;
     this.sizeAfter = 0;
     this.positionBefore = 0;
-    this.renderTimer = null;
+    this.cancel = null;
   }
 }
 
-class ScrollState {
+class ScrollModel {
   constructor() {
     this.reset();
   }
@@ -4176,16 +4164,16 @@ class ScrollState {
     this.positionBeforeAsync = null;
     this.positionBeforeAdjust = null;
     this.positionAfterAdjust = null;
-    this.cleanupTimers();
+    this.stop();
   }
-  cleanupTimers() {
+  stop() {
     if (this.scrollTimer) {
       clearTimeout(this.scrollTimer);
       this.scrollTimer = null;
     }
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = 0;
+    if (this.cancelAnimation) {
+      this.cancelAnimation();
+      this.cancelAnimation = null;
     }
   }
   hasPositionChanged(position) {
@@ -4204,25 +4192,19 @@ class State {
     this.fetch = new FetchModel(settings.directionPriority);
     this.clip = new ClipModel();
     this.render = new RenderModel();
-    this.scrollState = new ScrollState();
+    this.scroll = new ScrollModel();
   }
   get time() {
     return Number(new Date()) - this.initTime;
   }
-  endInnerLoop() {
-    const { fetch, render, cycle } = this;
-    if (fetch.cancel) {
-      fetch.cancel();
-      fetch.cancel = null;
-    }
-    if (render.renderTimer) {
-      clearTimeout(render.renderTimer);
-      render.renderTimer = null;
-    }
-    cycle.innerLoop.done();
+  startWorkflowCycle(isInitial, initiator) {
+    this.cycle.start(isInitial, initiator);
+  }
+  endWorkflowCycle(count) {
+    this.cycle.end(count);
   }
   startInnerLoop() {
-    const { cycle, scrollState: scroll, fetch, render, clip } = this;
+    const { cycle, scroll: scroll, fetch, render, clip } = this;
     cycle.innerLoop.start();
     scroll.positionBeforeAsync = null;
     if (!fetch.simulate) {
@@ -4235,10 +4217,24 @@ class State {
       doRender: fetch.simulate && fetch.items.length > 0
     } : {}));
   }
+  endInnerLoop() {
+    const { fetch, clip, render, cycle } = this;
+    fetch.stopSimulate();
+    clip.reset(true);
+    if (fetch.cancel) {
+      fetch.cancel();
+      fetch.cancel = null;
+    }
+    if (render.cancel) {
+      render.cancel();
+      render.cancel = null;
+    }
+    cycle.innerLoop.done();
+  }
   dispose() {
+    this.scroll.stop();
     this.cycle.dispose();
     this.endInnerLoop();
-    this.scrollState.cleanupTimers();
   }
 }
 
@@ -4924,7 +4920,7 @@ class Workflow {
     this.cyclesDone = 0;
     this.interruptionCount = 0;
     this.errors = [];
-    this.disposeScrollEventHandler = () => null;
+    this.offScroll = () => null;
     this.propagateChanges = run;
     this.stateMachineMethods = {
       run: this.runProcess(),
@@ -4952,14 +4948,13 @@ class Workflow {
       status: ProcessStatus.start
     });
     // set up scroll event listener
-    const { scrollEventReceiver } = this.scroller.viewport;
+    const { viewport: { scrollEventReceiver }, routines } = this.scroller;
     const onScrollHandler = event => this.callWorkflow({
       process: CommonProcess.scroll,
       status: ProcessStatus.start,
       payload: { event }
     });
-    scrollEventReceiver.addEventListener('scroll', onScrollHandler);
-    this.disposeScrollEventHandler = () => scrollEventReceiver.removeEventListener('scroll', onScrollHandler);
+    this.offScroll = routines.onScroll(scrollEventReceiver, onScrollHandler);
   }
   changeItems(items) {
     this.propagateChanges(items);
@@ -5045,14 +5040,14 @@ class Workflow {
     const { state, logger } = this.scroller;
     this.cyclesDone++;
     logger.logCycle(false);
-    state.cycle.done(this.cyclesDone + 1);
+    state.endWorkflowCycle(this.cyclesDone + 1);
     this.finalize();
   }
   dispose() {
     if (this.initTimer) {
       clearTimeout(this.initTimer);
     }
-    this.disposeScrollEventHandler();
+    this.offScroll();
     this.adapterRun$.dispose();
     this.scroller.dispose(true);
     Object.getOwnPropertyNames(this).forEach(prop => {