svelte-dnd-action 0.9.39 → 0.9.41

package/README.md

@@ -22,7 +22,7 @@ It is being actively maintained.
 -   Rich animations (can be opted out of)
 -   Touch support
 -   Define what can be dropped where (dnd-zones optionally have a "type")
--   Scroll dnd-zones and/or the window horizontally or vertically by placing the dragged element next to the edge
+-   Scroll dnd-zones (of the relevant "type"), parent containers that contains them and/or the window horizontally or vertically by placing the dragged element next to the edge
 -   Supports advanced use-cases such as various flavours of copy-on-drag and custom drag handles (see examples below)
 -   Performant and small footprint (no external dependencies, no fluff code)
 -   Fully accessible (beta) - keyboard support, aria attributes and assistive instructions for screen readers
@@ -82,7 +82,7 @@ npm install --save-dev svelte-dnd-action
         width: 50%;
         padding: 0.3em;
         border: 1px solid black;
-        /* this will allow the dragged element to scroll the list */
+        /* this will allow the dragged element to scroll the list although starting in version 0.9.41 the lib would detect any scrollable parent*/
         overflow: scroll;
         height: 200px;
     }
@@ -207,7 +207,6 @@ If you want to implement your own custom screen-reader alerts, roles and instruc
 -   Any data that should "survive" when the items are dragged around and dropped should be included in the `items` array that is passed in.
 -   The host component must refresh the items that are passed in to the custom-action when receiving consider and finalize events (do not omit any handler).
 -   FYI, the library assumes it is okay to add a temporary item to the items list in any of the dnd-zones while an element is dragged around.
--   If you want dragged items to be able to scroll the container, make sure the scroll-container (the element with overflow:scroll) is the dnd-zone (the element decorated with this custom action)
 -   Svelte's built-in transitions might not play nice with this library. Luckily, it is an easy issue to work around. There are examples above.
 
 ### Overriding the item id key name
@@ -252,9 +251,11 @@ setDebugMode(true);
 
 ### Typescript
 
-If you are using Typescript, you will need to add the following block to your `global.d.ts` (at least until [this svelte issue](https://github.com/sveltejs/language-tools/issues/431) is resolved):
+#### Setup (Optional)
 
-#### Svelte 3 or below
+TypeScript support has been added since version 0.9.40 and you do not need to set up any custom typings. However, in case you are using some older version or face some types issue, you will need to add the following block to your `global.d.ts` (at least until [this svelte issue](https://github.com/sveltejs/language-tools/issues/431) is resolved):
+
+##### Svelte 3 or below
 
 ```typescript
 declare type Item = import("svelte-dnd-action").Item;
@@ -267,7 +268,7 @@ declare namespace svelte.JSX {
 }
 ```
 
-#### Svelte 4:
+##### Svelte 4:
 
 ```typescript
 declare type Item = import("svelte-dnd-action").Item;
@@ -282,17 +283,18 @@ declare namespace svelteHTML {
 
 You may need to edit `tsconfig.json` to include `global.d.ts` if it doesn't already: "include": ["src/**/*", "global.d.ts"].
 
-> Note: If you are using Sveltekit you should use `svelte.config.js` to modify the generated `tsconfig.json` rather than adding the `include` element to the root `tsconfig.json`.  Adding `include` to the root file will cause issues because it will [override](https://www.typescriptlang.org/tsconfig#extends) the `include` array defined in `.svelte-kit/tsconfig.json`. Example:
+> Note: If you are using Sveltekit you should use `svelte.config.js` to modify the generated `tsconfig.json` rather than adding the `include` element to the root `tsconfig.json`. Adding `include` to the root file will cause issues because it will [override](https://www.typescriptlang.org/tsconfig#extends) the `include` array defined in `.svelte-kit/tsconfig.json`. Example:
+>
 > ```javascript
 > const config = {
->   kit: {
->     typescript: {
->       config(config) {
->          // This path is relative to the ".svelte-kit" folder
->         config.include.push('../global.d.ts');
->       },
->     },
->   },
+>     kit: {
+>         typescript: {
+>             config(config) {
+>                 // This path is relative to the ".svelte-kit" folder
+>                 config.include.push("../global.d.ts");
+>             }
+>         }
+>     }
 > };
 > ```
 

package/dist/index.d.ts

@@ -1,14 +1,18 @@
+import type {ActionReturn} from "svelte/action";
+
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
  * Supports mouse, touch and keyboard interactions.
  * Dispatches two events that the container is expected to react to by modifying its list of items,
  * which will then feed back in to this action via the update function
  */
-export declare function dndzone(
+export declare function dndzone<T extends Item>(node: HTMLElement, options: Options<T>): ActionReturn<Options<T>, DndZoneAttributes<T>>;
+
+export declare function dndzone<T extends Item>(
     node: HTMLElement,
-    options: Options
+    options: Options<T>
 ): {
-    update: (newOptions: Options) => void;
+    update: (newOptions: Options<T>) => void;
     destroy: () => void;
 };
 
@@ -19,8 +23,8 @@ export type TransformDraggedElementFunction = (
 ) => void;
 
 export declare type Item = Record<string, any>;
-export interface Options {
-    items: Item[]; // the list of items that was used to generate the children of the given node
+export interface Options<T extends Item = Item> {
+    items: T[]; // the list of items that was used to generate the children of the given node
     type?: string; // the type of the dnd zone. children dragged from here can only be dropped in other zones of the same type, defaults to a base type
     flipDurationMs?: number; // if the list animated using flip (recommended), specifies the flip duration such that everything syncs with it without conflict
     dragDisabled?: boolean;
@@ -35,6 +39,13 @@ export interface Options {
     centreDraggedOnCursor?: boolean;
 }
 
+export interface DndZoneAttributes<T> {
+    "on:consider"?: (e: CustomEvent<DndEvent<T>>) => void;
+    "on:finalize"?: (e: CustomEvent<DndEvent<T>>) => void;
+    onconsider?: (e: CustomEvent<DndEvent<T>>) => void;
+    onfinalize?: (e: CustomEvent<DndEvent<T>>) => void;
+}
+
 /**
  * Will make the screen reader alert the provided text to the user
  */

package/dist/index.js

@@ -501,33 +501,13 @@
 
   /**
    * @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;
 
   /**
@@ -541,17 +521,6 @@
   }
   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
@@ -634,102 +603,6 @@
     };
   }
 
-  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}
@@ -795,9 +668,6 @@
 
   var INTERVAL_MS = 200;
   var TOLERANCE_PX = 10;
-  var _makeScroller = makeScroller(),
-    scrollIfNeeded = _makeScroller.scrollIfNeeded,
-    resetScrolling = _makeScroller.resetScrolling;
   var next;
 
   /**
@@ -805,9 +675,11 @@
    * @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;
@@ -823,7 +695,7 @@
      */
     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);
@@ -844,7 +716,7 @@
       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
@@ -889,61 +761,225 @@
       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;
   }
 
   /**
@@ -1292,7 +1328,6 @@
     printDebug(function () {
       return "watching dragged element";
     });
-    armWindowScroller();
     var dropZones = typeToDropZones.get(draggedElType);
     var _iterator = _createForOfIteratorHelper(dropZones),
       _step;
@@ -1309,18 +1344,21 @@
       _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;