svelte-dnd-action 0.9.39 → 0.9.41

package/dist/index.mjs

@@ -495,33 +495,13 @@ function calcDistanceBetweenCenters(elA, elB) {
 
 /**
  * @param {HTMLElement} el - the element to check
- * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
+ * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
  */
 function isElementOffDocument(el) {
   var rect = getAbsoluteRect(el);
   return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
 }
 
-/**
- * If the point is inside the element returns its distances from the sides, otherwise returns null
- * @param {Point} point
- * @param {HTMLElement} el
- * @return {null|{top: number, left: number, bottom: number, right: number}}
- */
-function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-  var rect = getAbsoluteRect(el);
-  if (!isPointInsideRect(point, rect)) {
-    return null;
-  }
-  return {
-    top: point.y - rect.top,
-    bottom: rect.bottom - point.y,
-    left: point.x - rect.left,
-    // TODO - figure out what is so special about right (why the rect is too big)
-    right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-  };
-}
-
 var dzToShadowIndexToRect;
 
 /**
@@ -535,17 +515,6 @@ function resetIndexesCache() {
 }
 resetIndexesCache();
 
-/**
- * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
- * @param {HTMLElement} dz
- */
-function resetIndexesCacheForDz(dz) {
-  printDebug(function () {
-    return "resetting indexes cache for dz";
-  });
-  dzToShadowIndexToRect["delete"](dz);
-}
-
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively
@@ -628,102 +597,6 @@ function findWouldBeIndex(floatingAboveEl, collectionBelowEl) {
   };
 }
 
-var SCROLL_ZONE_PX = 25;
-function makeScroller() {
-  var scrollingInfo;
-  function resetScrolling() {
-    scrollingInfo = {
-      directionObj: undefined,
-      stepPx: 0
-    };
-  }
-  resetScrolling();
-  // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
-  function scrollContainer(containerEl) {
-    var _scrollingInfo = scrollingInfo,
-      directionObj = _scrollingInfo.directionObj,
-      stepPx = _scrollingInfo.stepPx;
-    if (directionObj) {
-      containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
-      window.requestAnimationFrame(function () {
-        return scrollContainer(containerEl);
-      });
-    }
-  }
-  function calcScrollStepPx(distancePx) {
-    return SCROLL_ZONE_PX - distancePx;
-  }
-
-  /**
-   * If the pointer is next to the sides of the element to scroll, will trigger scrolling
-   * Can be called repeatedly with updated pointer and elementToScroll values without issues
-   * @return {boolean} - true if scrolling was needed
-   */
-  function scrollIfNeeded(pointer, elementToScroll) {
-    if (!elementToScroll) {
-      return false;
-    }
-    var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
-    if (distances === null) {
-      resetScrolling();
-      return false;
-    }
-    var isAlreadyScrolling = !!scrollingInfo.directionObj;
-    var scrollingVertically = false,
-      scrollingHorizontally = false;
-    // vertical
-    if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
-      if (distances.bottom < SCROLL_ZONE_PX) {
-        scrollingVertically = true;
-        scrollingInfo.directionObj = {
-          x: 0,
-          y: 1
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
-      } else if (distances.top < SCROLL_ZONE_PX) {
-        scrollingVertically = true;
-        scrollingInfo.directionObj = {
-          x: 0,
-          y: -1
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.top);
-      }
-      if (!isAlreadyScrolling && scrollingVertically) {
-        scrollContainer(elementToScroll);
-        return true;
-      }
-    }
-    // horizontal
-    if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
-      if (distances.right < SCROLL_ZONE_PX) {
-        scrollingHorizontally = true;
-        scrollingInfo.directionObj = {
-          x: 1,
-          y: 0
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.right);
-      } else if (distances.left < SCROLL_ZONE_PX) {
-        scrollingHorizontally = true;
-        scrollingInfo.directionObj = {
-          x: -1,
-          y: 0
-        };
-        scrollingInfo.stepPx = calcScrollStepPx(distances.left);
-      }
-      if (!isAlreadyScrolling && scrollingHorizontally) {
-        scrollContainer(elementToScroll);
-        return true;
-      }
-    }
-    resetScrolling();
-    return false;
-  }
-  return {
-    scrollIfNeeded: scrollIfNeeded,
-    resetScrolling: resetScrolling
-  };
-}
-
 /**
  * @param {Object} object
  * @return {string}
@@ -789,9 +662,6 @@ function areArraysShallowEqualSameOrder(arrA, arrB) {
 
 var INTERVAL_MS = 200;
 var TOLERANCE_PX = 10;
-var _makeScroller = makeScroller(),
-  scrollIfNeeded = _makeScroller.scrollIfNeeded,
-  resetScrolling = _makeScroller.resetScrolling;
 var next;
 
 /**
@@ -799,9 +669,11 @@ var next;
  * @param {Set<HTMLElement>} dropZones
  * @param {HTMLElement} draggedEl
  * @param {number} [intervalMs = INTERVAL_MS]
+ * @param {MultiScroller} multiScroller
  */
 function observe(draggedEl, dropZones) {
   var intervalMs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INTERVAL_MS;
+  var multiScroller = arguments.length > 3 ? arguments[3] : undefined;
   // initialization
   var lastDropZoneFound;
   var lastIndexFound;
@@ -817,7 +689,7 @@ function observe(draggedEl, dropZones) {
    */
   function andNow() {
     var currentCenterOfDragged = findCenterOfElement(draggedEl);
-    var scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound);
+    var scrolled = multiScroller.multiScrollIfNeeded();
     // we only want to make a new decision after the element was moved a bit to prevent flickering
     if (!scrolled && lastCentrePositionOfDragged && Math.abs(lastCentrePositionOfDragged.x - currentCenterOfDragged.x) < TOLERANCE_PX && Math.abs(lastCentrePositionOfDragged.y - currentCenterOfDragged.y) < TOLERANCE_PX) {
       next = window.setTimeout(andNow, intervalMs);
@@ -838,7 +710,7 @@ function observe(draggedEl, dropZones) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var dz = _step.value;
-        if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
+        if (scrolled) resetIndexesCache();
         var indexObj = findWouldBeIndex(draggedEl, dz);
         if (indexObj === null) {
           // it is not inside
@@ -883,61 +755,225 @@ function unobserve() {
     return "unobserving";
   });
   clearTimeout(next);
-  resetScrolling();
   resetIndexesCache();
 }
 
-var INTERVAL_MS$1 = 300;
-var mousePosition;
+var SCROLL_ZONE_PX = 30;
 
 /**
- * Do not use this! it is visible for testing only until we get over the issue Cypress not triggering the mousemove listeners
- * // TODO - make private (remove export)
- * @param {{clientX: number, clientY: number}} e
+ * Will make a scroller that can scroll any element given to it in any direction
+ * @returns {{scrollIfNeeded: function(Point, HTMLElement): boolean, resetScrolling: function(void):void}}
  */
-function updateMousePosition(e) {
-  var c = e.touches ? e.touches[0] : e;
-  mousePosition = {
-    x: c.clientX,
-    y: c.clientY
-  };
-}
-var _makeScroller$1 = makeScroller(),
-  scrollIfNeeded$1 = _makeScroller$1.scrollIfNeeded,
-  resetScrolling$1 = _makeScroller$1.resetScrolling;
-var next$1;
-function loop() {
-  if (mousePosition) {
-    var scrolled = scrollIfNeeded$1(mousePosition, document.documentElement);
-    if (scrolled) resetIndexesCache();
+function makeScroller() {
+  var scrollingInfo;
+  function resetScrolling() {
+    scrollingInfo = {
+      directionObj: undefined,
+      stepPx: 0
+    };
   }
-  next$1 = window.setTimeout(loop, INTERVAL_MS$1);
+  resetScrolling();
+  // directionObj {x: 0|1|-1, y:0|1|-1} - 1 means down in y and right in x
+  function scrollContainer(containerEl) {
+    var _scrollingInfo = scrollingInfo,
+      directionObj = _scrollingInfo.directionObj,
+      stepPx = _scrollingInfo.stepPx;
+    if (directionObj) {
+      containerEl.scrollBy(directionObj.x * stepPx, directionObj.y * stepPx);
+      window.requestAnimationFrame(function () {
+        return scrollContainer(containerEl);
+      });
+    }
+  }
+  function calcScrollStepPx(distancePx) {
+    return SCROLL_ZONE_PX - distancePx;
+  }
+
+  /**
+   * @param {Point} pointer - the pointer will be used to decide in which direction to scroll
+   * @param {HTMLElement} elementToScroll - the scroll container
+   * If the pointer is next to the sides of the element to scroll, will trigger scrolling
+   * Can be called repeatedly with updated pointer and elementToScroll values without issues
+   * @return {boolean} - true if scrolling was needed
+   */
+  function scrollIfNeeded(pointer, elementToScroll) {
+    if (!elementToScroll) {
+      return false;
+    }
+    var distances = calcInnerDistancesBetweenPointAndSidesOfElement(pointer, elementToScroll);
+    if (distances === null) {
+      resetScrolling();
+      return false;
+    }
+    var isAlreadyScrolling = !!scrollingInfo.directionObj;
+    var scrollingVertically = false,
+      scrollingHorizontally = false;
+    // vertical
+    if (elementToScroll.scrollHeight > elementToScroll.clientHeight) {
+      if (distances.bottom < SCROLL_ZONE_PX) {
+        scrollingVertically = true;
+        scrollingInfo.directionObj = {
+          x: 0,
+          y: 1
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.bottom);
+      } else if (distances.top < SCROLL_ZONE_PX) {
+        scrollingVertically = true;
+        scrollingInfo.directionObj = {
+          x: 0,
+          y: -1
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.top);
+      }
+      if (!isAlreadyScrolling && scrollingVertically) {
+        scrollContainer(elementToScroll);
+        return true;
+      }
+    }
+    // horizontal
+    if (elementToScroll.scrollWidth > elementToScroll.clientWidth) {
+      if (distances.right < SCROLL_ZONE_PX) {
+        scrollingHorizontally = true;
+        scrollingInfo.directionObj = {
+          x: 1,
+          y: 0
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.right);
+      } else if (distances.left < SCROLL_ZONE_PX) {
+        scrollingHorizontally = true;
+        scrollingInfo.directionObj = {
+          x: -1,
+          y: 0
+        };
+        scrollingInfo.stepPx = calcScrollStepPx(distances.left);
+      }
+      if (!isAlreadyScrolling && scrollingHorizontally) {
+        scrollContainer(elementToScroll);
+        return true;
+      }
+    }
+    resetScrolling();
+    return false;
+  }
+  return {
+    scrollIfNeeded: scrollIfNeeded,
+    resetScrolling: resetScrolling
+  };
 }
 
 /**
- * will start watching the mouse pointer and scroll the window if it goes next to the edges
+ * If the point is inside the element returns its distances from the sides, otherwise returns null
+ * @param {Point} point
+ * @param {HTMLElement} el
+ * @return {null|{top: number, left: number, bottom: number, right: number}}
  */
-function armWindowScroller() {
-  printDebug(function () {
-    return "arming window scroller";
-  });
-  window.addEventListener("mousemove", updateMousePosition);
-  window.addEventListener("touchmove", updateMousePosition);
-  loop();
+function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
+  // Even if the scrolling element is small it acts as a scroller for the viewport
+  var rect = el === document.scrollingElement ? {
+    top: 0,
+    bottom: window.innerHeight,
+    left: 0,
+    right: window.innerWidth
+  } : el.getBoundingClientRect();
+  if (!isPointInsideRect(point, rect)) {
+    return null;
+  }
+  return {
+    top: point.y - rect.top,
+    bottom: rect.bottom - point.y,
+    left: point.x - rect.left,
+    right: rect.right - point.x
+  };
 }
 
 /**
- * will stop watching the mouse pointer and won't scroll the window anymore
+ @typedef {Object} MultiScroller
+ @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
+/**
+ * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
+ * @param {HTMLElement[]} baseElementsForScrolling
+ * @param {function():Point} getPointerPosition
+ * @return {MultiScroller}
  */
-function disarmWindowScroller() {
+function createMultiScroller() {
+  var baseElementsForScrolling = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var getPointerPosition = arguments.length > 1 ? arguments[1] : undefined;
   printDebug(function () {
-    return "disarming window scroller";
+    return "creating multi-scroller";
+  });
+  var scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
+  var scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort(function (dz1, dz2) {
+    return getDepth(dz2) - getDepth(dz1);
   });
-  window.removeEventListener("mousemove", updateMousePosition);
-  window.removeEventListener("touchmove", updateMousePosition);
-  mousePosition = undefined;
-  window.clearTimeout(next$1);
-  resetScrolling$1();
+  var _makeScroller = makeScroller(),
+    scrollIfNeeded = _makeScroller.scrollIfNeeded;
+
+  /**
+   * @return {boolean} - was any container scrolled
+   */
+  function tick() {
+    var mousePosition = getPointerPosition();
+    if (!mousePosition || !scrollingContainersDeepToShallow) {
+      return false;
+    }
+    var scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(function (el) {
+      return isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement;
+    });
+    for (var i = 0; i < scrollContainersUnderCursor.length; i++) {
+      var scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
+      if (scrolled) {
+        return true;
+      }
+    }
+    return false;
+  }
+  return {
+    multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : function () {
+      return false;
+    }
+  };
+}
+
+// internal utils
+function findScrollableParents(element) {
+  if (!element) {
+    return [];
+  }
+  var scrollableContainers = [];
+  var parent = element;
+  while (parent) {
+    var _window$getComputedSt = window.getComputedStyle(parent),
+      overflow = _window$getComputedSt.overflow;
+    if (overflow.split(" ").some(function (o) {
+      return o.includes("auto") || o.includes("scroll");
+    })) {
+      scrollableContainers.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+  return scrollableContainers;
+}
+function findRelevantScrollContainers(dropZones) {
+  var scrollingContainers = new Set();
+  var _iterator = _createForOfIteratorHelper(dropZones),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var dz = _step.value;
+      findScrollableParents(dz).forEach(function (container) {
+        return scrollingContainers.add(container);
+      });
+    }
+    // The scrolling element might have overflow visible and still be scrollable
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight || document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight) {
+    scrollingContainers.add(document.scrollingElement);
+  }
+  return scrollingContainers;
 }
 
 /**
@@ -1286,7 +1322,6 @@ function watchDraggedElement() {
   printDebug(function () {
     return "watching dragged element";
   });
-  armWindowScroller();
   var dropZones = typeToDropZones.get(draggedElType);
   var _iterator = _createForOfIteratorHelper(dropZones),
     _step;
@@ -1303,18 +1338,21 @@ function watchDraggedElement() {
     _iterator.f();
   }
   window.addEventListener(DRAGGED_LEFT_DOCUMENT_EVENT_NAME, handleDrop);
+
   // it is important that we don't have an interval that is faster than the flip duration because it can cause elements to jump bach and forth
   var setIntervalMs = Math.max.apply(Math, _toConsumableArray(Array.from(dropZones.keys()).map(function (dz) {
     return dzToConfig.get(dz).dropAnimationDurationMs;
   })));
-  var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); //if setintervalms is 0 it goes to 20, otherwise it is max between it and min observation.
-  observe(draggedEl, dropZones, observationIntervalMs * 1.07);
+  var observationIntervalMs = setIntervalMs === 0 ? DISABLED_OBSERVATION_INTERVAL_MS : Math.max(setIntervalMs, MIN_OBSERVATION_INTERVAL_MS); // if setIntervalMs is 0 it goes to 20, otherwise it is max between it and min observation.
+  var multiScroller = createMultiScroller(dropZones, function () {
+    return currentMousePosition;
+  });
+  observe(draggedEl, dropZones, observationIntervalMs * 1.07, multiScroller);
 }
 function unWatchDraggedElement() {
   printDebug(function () {
     return "unwatching dragged element";
   });
-  disarmWindowScroller();
   var dropZones = typeToDropZones.get(draggedElType);
   var _iterator2 = _createForOfIteratorHelper(dropZones),
     _step2;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.39",
+    "version": "0.9.41",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"

package/src/helpers/intersection.js

@@ -150,29 +150,9 @@ export function calcDistanceBetweenCenters(elA, elB) {
 
 /**
  * @param {HTMLElement} el - the element to check
- * @returns {boolean} - true if the element in its entirety is off screen including the scrollable area (the normal dom events look at the mouse rather than the element)
+ * @returns {boolean} - true if the element in its entirety is off-screen including the scrollable area (the normal dom events look at the mouse rather than the element)
  */
 export function isElementOffDocument(el) {
     const rect = getAbsoluteRect(el);
     return rect.right < 0 || rect.left > document.documentElement.scrollWidth || rect.bottom < 0 || rect.top > document.documentElement.scrollHeight;
 }
-
-/**
- * If the point is inside the element returns its distances from the sides, otherwise returns null
- * @param {Point} point
- * @param {HTMLElement} el
- * @return {null|{top: number, left: number, bottom: number, right: number}}
- */
-export function calcInnerDistancesBetweenPointAndSidesOfElement(point, el) {
-    const rect = getAbsoluteRect(el);
-    if (!isPointInsideRect(point, rect)) {
-        return null;
-    }
-    return {
-        top: point.y - rect.top,
-        bottom: rect.bottom - point.y,
-        left: point.x - rect.left,
-        // TODO - figure out what is so special about right (why the rect is too big)
-        right: Math.min(rect.right, document.documentElement.clientWidth) - point.x
-    };
-}

package/src/helpers/listUtil.js

@@ -12,15 +12,6 @@ export function resetIndexesCache() {
 }
 resetIndexesCache();
 
-/**
- * Resets the cache that allows for smarter "would be index" resolution for a specific dropzone, should be called after the zone was scrolled
- * @param {HTMLElement} dz
- */
-export function resetIndexesCacheForDz(dz) {
-    printDebug(() => "resetting indexes cache for dz");
-    dzToShadowIndexToRect.delete(dz);
-}
-
 /**
  * Caches the coordinates of the shadow element when it's in a certain index in a certain dropzone.
  * Helpful in order to determine "would be index" more effectively

package/src/helpers/multiScroller.js

@@ -0,0 +1,74 @@
+import {makeScroller} from "./scroller";
+import {printDebug} from "../constants";
+import {getDepth} from "./util";
+import {isPointInsideRect} from "./intersection";
+
+/**
+ @typedef {Object} MultiScroller
+ @property {function():boolean} multiScrollIfNeeded - call this on every "tick" to scroll containers if needed, returns true if anything was scrolled
+/**
+ * Creates a scroller than can scroll any of the provided containers or any of their scrollable parents (including the document's scrolling element)
+ * @param {HTMLElement[]} baseElementsForScrolling
+ * @param {function():Point} getPointerPosition
+ * @return {MultiScroller}
+ */
+export function createMultiScroller(baseElementsForScrolling = [], getPointerPosition) {
+    printDebug(() => "creating multi-scroller");
+    const scrollingContainersSet = findRelevantScrollContainers(baseElementsForScrolling);
+    const scrollingContainersDeepToShallow = Array.from(scrollingContainersSet).sort((dz1, dz2) => getDepth(dz2) - getDepth(dz1));
+    const {scrollIfNeeded} = makeScroller();
+
+    /**
+     * @return {boolean} - was any container scrolled
+     */
+    function tick() {
+        const mousePosition = getPointerPosition();
+        if (!mousePosition || !scrollingContainersDeepToShallow) {
+            return false;
+        }
+        const scrollContainersUnderCursor = scrollingContainersDeepToShallow.filter(
+            el => isPointInsideRect(mousePosition, el.getBoundingClientRect()) || el === document.scrollingElement
+        );
+        for (let i = 0; i < scrollContainersUnderCursor.length; i++) {
+            const scrolled = scrollIfNeeded(mousePosition, scrollContainersUnderCursor[i]);
+            if (scrolled) {
+                return true;
+            }
+        }
+        return false;
+    }
+    return {
+        multiScrollIfNeeded: scrollingContainersSet.size > 0 ? tick : () => false
+    };
+}
+
+// internal utils
+function findScrollableParents(element) {
+    if (!element) {
+        return [];
+    }
+    const scrollableContainers = [];
+    let parent = element;
+    while (parent) {
+        const {overflow} = window.getComputedStyle(parent);
+        if (overflow.split(" ").some(o => o.includes("auto") || o.includes("scroll"))) {
+            scrollableContainers.push(parent);
+        }
+        parent = parent.parentElement;
+    }
+    return scrollableContainers;
+}
+function findRelevantScrollContainers(dropZones) {
+    const scrollingContainers = new Set();
+    for (let dz of dropZones) {
+        findScrollableParents(dz).forEach(container => scrollingContainers.add(container));
+    }
+    // The scrolling element might have overflow visible and still be scrollable
+    if (
+        document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight ||
+        document.scrollingElement.scrollWidth > document.scrollingElement.clientHeight
+    ) {
+        scrollingContainers.add(document.scrollingElement);
+    }
+    return scrollingContainers;
+}

package/src/helpers/observer.js

@@ -1,4 +1,4 @@
-import {findWouldBeIndex, resetIndexesCache, resetIndexesCacheForDz} from "./listUtil";
+import {findWouldBeIndex, resetIndexesCache} from "./listUtil";
 import {findCenterOfElement, isElementOffDocument} from "./intersection";
 import {
     dispatchDraggedElementEnteredContainer,
@@ -7,13 +7,11 @@ import {
     dispatchDraggedLeftDocument,
     dispatchDraggedElementIsOverIndex
 } from "./dispatcher";
-import {makeScroller} from "./scroller";
 import {getDepth} from "./util";
 import {printDebug} from "../constants";
 
 const INTERVAL_MS = 200;
 const TOLERANCE_PX = 10;
-const {scrollIfNeeded, resetScrolling} = makeScroller();
 let next;
 
 /**
@@ -21,8 +19,9 @@ let next;
  * @param {Set<HTMLElement>} dropZones
  * @param {HTMLElement} draggedEl
  * @param {number} [intervalMs = INTERVAL_MS]
+ * @param {MultiScroller} multiScroller
  */
-export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
+export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS, multiScroller) {
     // initialization
     let lastDropZoneFound;
     let lastIndexFound;
@@ -36,7 +35,7 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
      */
     function andNow() {
         const currentCenterOfDragged = findCenterOfElement(draggedEl);
-        const scrolled = scrollIfNeeded(currentCenterOfDragged, lastDropZoneFound);
+        const scrolled = multiScroller.multiScrollIfNeeded();
         // we only want to make a new decision after the element was moved a bit to prevent flickering
         if (
             !scrolled &&
@@ -57,7 +56,7 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
         // this is a simple algorithm, potential improvement: first look at lastDropZoneFound
         let isDraggedInADropZone = false;
         for (const dz of dropZonesFromDeepToShallow) {
-            if (scrolled) resetIndexesCacheForDz(lastDropZoneFound);
+            if (scrolled) resetIndexesCache();
             const indexObj = findWouldBeIndex(draggedEl, dz);
             if (indexObj === null) {
                 // it is not inside
@@ -95,6 +94,5 @@ export function observe(draggedEl, dropZones, intervalMs = INTERVAL_MS) {
 export function unobserve() {
     printDebug(() => "unobserving");
     clearTimeout(next);
-    resetScrolling();
     resetIndexesCache();
 }