@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/drag-drop/drop-list-ref.js

@@ -0,0 +1,707 @@
+import { coerceElement } from "./dom/coerce.js";
+import { _getShadowRoot } from "./dom/shadow-dom.js";
+import { viewportRuler } from "../scrolling/viewport-ruler.js";
+import { Emitter } from "../scrolling/emitter.js";
+import { dragDropRegistry } from "./drag-drop-registry.js";
+import { isPointerNearDomRect, isInsideClientRect } from "./dom/dom-rect.js";
+import { ParentPositionTracker } from "./dom/parent-position-tracker.js";
+import { cancelLayoutShift, captureLayoutShift } from "./dom/layout-shift.js";
+import { SingleAxisSortStrategy } from "./sorting/single-axis-sort-strategy.js";
+import { MixedSortStrategy } from "./sorting/mixed-sort-strategy.js";
+const NO_SUBSCRIPTION = { unsubscribe() { } };
+/** No NgZone: `runOutsideAngular` calls through (keeps the upstream code shape). */
+const zone = {
+    runOutsideAngular: (fn) => fn(),
+};
+/**
+ * Proximity, as a ratio to width/height, at which a
+ * dragged item will affect the drop container.
+ */
+const DROP_PROXIMITY_THRESHOLD = 0.05;
+/**
+ * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
+ * viewport. The value comes from trying it out manually until it feels right.
+ */
+const SCROLL_PROXIMITY_THRESHOLD = 0.05;
+/** Vertical direction in which we can auto-scroll. */
+const AutoScrollVerticalDirection = { NONE: 0, UP: 1, DOWN: 2 };
+/** Horizontal direction in which we can auto-scroll. */
+const AutoScrollHorizontalDirection = { NONE: 0, LEFT: 1, RIGHT: 2 };
+/**
+ * Creates a `DropListRef` for an element, turning it into a drop list.
+ * @param element Element to which to attach the drop list functionality.
+ * @param deps Optional services (Angular: the injector).
+ */
+export function createDropListRef(element, deps = {}) {
+    const doc = deps.document ?? coerceElement(element).ownerDocument;
+    return new DropListRef(element, deps.dragDropRegistry ?? dragDropRegistry(doc), doc, deps.viewportRuler ?? viewportRuler(doc));
+}
+/**
+ * Reference to a drop list. Used to manipulate or dispose of the container.
+ */
+export class DropListRef {
+    /** Element that the drop list is attached to. */
+    element;
+    /** Whether starting a dragging sequence from this container is disabled. */
+    disabled = false;
+    /** Whether sorting items within the list is disabled. */
+    sortingDisabled = false;
+    /** Locks the position of the draggable elements inside the container along the specified axis. */
+    lockAxis = null;
+    /**
+     * Whether auto-scrolling the view when the user
+     * moves their pointer close to the edges is disabled.
+     */
+    autoScrollDisabled = false;
+    /** Number of pixels to scroll for each frame when auto-scrolling an element. */
+    autoScrollStep = 2;
+    /**
+     * Whether the items in the list should leave an anchor node when leaving the initial container.
+     */
+    hasAnchor = false;
+    /**
+     * Function that is used to determine whether an item
+     * is allowed to be moved into a drop container.
+     */
+    enterPredicate = () => true;
+    /** Function that is used to determine whether an item can be sorted into a particular index. */
+    sortPredicate = () => true;
+    /** Emits right before dragging has started. */
+    beforeStarted = new Emitter();
+    /**
+     * Emits when the user has moved a new drag item into this container.
+     */
+    entered = new Emitter();
+    /**
+     * Emits when the user removes an item from the container
+     * by dragging it into another container.
+     */
+    exited = new Emitter();
+    /** Emits when the user drops an item inside the container. */
+    dropped = new Emitter();
+    /** Emits as the user is swapping items while actively dragging. */
+    sorted = new Emitter();
+    /** Emits when a dragging sequence is started in a list connected to the current one. */
+    receivingStarted = new Emitter();
+    /** Emits when a dragging sequence is stopped from a list connected to the current one. */
+    receivingStopped = new Emitter();
+    /** Arbitrary data that can be attached to the drop list. */
+    data;
+    /** Element that is the direct parent of the drag items. */
+    _container;
+    /** Whether an item in the list is being dragged. */
+    _isDragging = false;
+    /** Keeps track of the positions of any parent scrollable elements. */
+    _parentPositions;
+    /** Strategy being used to sort items within the list. */
+    _sortStrategy;
+    /** Cached `DOMRect` of the drop list. */
+    _domRect;
+    /** Draggable items in the container. */
+    _draggables = [];
+    /** Drop lists that are connected to the current one. */
+    _siblings = [];
+    /** Connected siblings that currently have a dragged item. */
+    _activeSiblings = new Set();
+    /** Subscription to the window being scrolled. */
+    _viewportScrollSubscription = NO_SUBSCRIPTION;
+    /** Vertical direction in which the list is currently scrolling. */
+    _verticalScrollDirection = AutoScrollVerticalDirection.NONE;
+    /** Horizontal direction in which the list is currently scrolling. */
+    _horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;
+    /** Node that is being auto-scrolled. */
+    _scrollNode;
+    /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
+    _cachedShadowRoot = null;
+    /** Reference to the document. */
+    _document;
+    /** Elements that can be scrolled while the user is dragging. */
+    _scrollableElements = [];
+    /** Initial value for the element's `scroll-snap-type` style. */
+    _initialScrollSnap;
+    /** Direction of the list's layout. */
+    _direction = "ltr";
+    /** Pending auto-scroll animation frame. */
+    _scrollFrame = 0;
+    _dragDropRegistry;
+    _viewportRuler;
+    constructor(element, _dragDropRegistry, _document, _viewportRuler) {
+        this._dragDropRegistry = _dragDropRegistry;
+        this._viewportRuler = _viewportRuler;
+        const coercedElement = (this.element = coerceElement(element));
+        this._document = _document;
+        this.withOrientation("vertical").withElementContainer(coercedElement);
+        _dragDropRegistry.registerDropContainer(this);
+        this._parentPositions = new ParentPositionTracker(_document);
+    }
+    /** Removes the drop list functionality from the DOM element. */
+    dispose() {
+        this._stopScrolling();
+        this._viewportScrollSubscription.unsubscribe();
+        this.beforeStarted.complete();
+        this.entered.complete();
+        this.exited.complete();
+        this.dropped.complete();
+        this.sorted.complete();
+        this.receivingStarted.complete();
+        this.receivingStopped.complete();
+        this._activeSiblings.clear();
+        this._scrollNode = null;
+        this._parentPositions.clear();
+        this._dragDropRegistry.removeDropContainer(this);
+    }
+    /** Whether an item from this list is currently being dragged. */
+    isDragging() {
+        return this._isDragging;
+    }
+    /** Starts dragging an item. */
+    start() {
+        // Rivet: a shift animation still running from a previous drag would throw off the measurements.
+        this._draggingStarted(() => cancelLayoutShift(this._shiftElements()));
+        this._notifyReceivingSiblings();
+    }
+    /**
+     * Attempts to move an item into the container.
+     * @param item Item that was moved into the container.
+     * @param pointerX Position of the item along the X axis.
+     * @param pointerY Position of the item along the Y axis.
+     * @param index Index at which the item entered. If omitted, the container will try to figure it
+     *   out automatically.
+     */
+    enter(item, pointerX, pointerY, index) {
+        // Rivet: the placeholder insert below moves the items; animate them from where they are now
+        // (read once `beforeStarted` synced the items, before the sort strategy measures them).
+        let shift = () => { };
+        this._draggingStarted(() => (shift = captureLayoutShift(this._shiftElements())));
+        // If sorting is disabled, we want the item to return to its starting
+        // position if the user is returning it to its initial container.
+        if (index == null && this.sortingDisabled) {
+            index = this._draggables.indexOf(item);
+        }
+        this._sortStrategy.enter(item, pointerX, pointerY, index);
+        // Note that this usually happens inside `_draggingStarted` as well, but the dimensions
+        // can change when the sort strategy moves the item around inside `enter`.
+        this._cacheParentPositions();
+        // Notify siblings at the end so that the item has been inserted into the `activeDraggables`.
+        this._notifyReceivingSiblings();
+        this.entered.next({ item, container: this, currentIndex: this.getItemIndex(item) });
+        shift();
+    }
+    /**
+     * Removes an item from the container after it was dragged into another container by the user.
+     * @param item Item that was dragged out.
+     */
+    exit(item) {
+        // Rivet: the items lose their sort transforms here and the placeholder leaves the list right
+        // after (the next container's `enter`); animate them from where they are now.
+        const shift = captureLayoutShift(this._shiftElements());
+        this._reset();
+        this.exited.next({ item, container: this });
+        shift();
+    }
+    /**
+     * Drops an item into this container.
+     * @param item Item being dropped into the container.
+     * @param currentIndex Index at which the item should be inserted.
+     * @param previousIndex Index of the item when dragging started.
+     * @param previousContainer Container from which the item got dragged in.
+     * @param isPointerOverContainer Whether the user's pointer was over the
+     *    container when the item was dropped.
+     * @param distance Distance the user has dragged since the start of the dragging sequence.
+     * @param event Event that triggered the dropping sequence.
+     */
+    drop(item, currentIndex, previousIndex, previousContainer, isPointerOverContainer, distance, dropPoint, event) {
+        this._reset();
+        this.dropped.next({
+            item,
+            currentIndex,
+            previousIndex,
+            container: this,
+            previousContainer,
+            isPointerOverContainer,
+            distance,
+            dropPoint,
+            event,
+        });
+    }
+    /**
+     * Sets the draggable items that are a part of this list.
+     * @param items Items that are a part of this list.
+     */
+    withItems(items) {
+        const previousItems = this._draggables;
+        this._draggables = items;
+        items.forEach((item) => item._withDropContainer(this));
+        if (this.isDragging()) {
+            const draggedItems = previousItems.filter((item) => item.isDragging());
+            // If all of the items being dragged were removed
+            // from the list, abort the current drag sequence.
+            if (draggedItems.every((item) => items.indexOf(item) === -1)) {
+                this._reset();
+            }
+            else {
+                this._sortStrategy.withItems(this._draggables);
+            }
+        }
+        return this;
+    }
+    /** Sets the layout direction of the drop list. */
+    withDirection(direction) {
+        this._direction = direction;
+        if (this._sortStrategy instanceof SingleAxisSortStrategy) {
+            this._sortStrategy.direction = direction;
+        }
+        return this;
+    }
+    /**
+     * Sets the containers that are connected to this one. When two or more containers are
+     * connected, the user will be allowed to transfer items between them.
+     * @param connectedTo Other containers that the current containers should be connected to.
+     */
+    connectedTo(connectedTo) {
+        this._siblings = connectedTo.slice();
+        return this;
+    }
+    /**
+     * Sets the orientation of the container.
+     * @param orientation New orientation for the container.
+     */
+    withOrientation(orientation) {
+        if (orientation === "mixed") {
+            this._sortStrategy = new MixedSortStrategy(this._document, this._dragDropRegistry);
+        }
+        else {
+            const strategy = new SingleAxisSortStrategy(this._dragDropRegistry);
+            strategy.direction = this._direction;
+            strategy.orientation = orientation;
+            this._sortStrategy = strategy;
+        }
+        this._sortStrategy.withElementContainer(this._container);
+        this._sortStrategy.withSortPredicate((index, item) => this.sortPredicate(index, item, this));
+        return this;
+    }
+    /**
+     * Sets which parent elements are can be scrolled while the user is dragging.
+     * @param elements Elements that can be scrolled.
+     */
+    withScrollableParents(elements) {
+        const element = this._container;
+        // We always allow the current element to be scrollable
+        // so we need to ensure that it's in the array.
+        this._scrollableElements = elements.indexOf(element) === -1 ? [element, ...elements] : elements.slice();
+        return this;
+    }
+    /**
+     * Configures the drop list so that a different element is used as the container for the
+     * dragged items. This is useful for the cases when one might not have control over the
+     * full DOM that sets up the dragging.
+     * Note that the alternate container needs to be a descendant of the drop list.
+     * @param container New element container to be assigned.
+     */
+    withElementContainer(container) {
+        if (container === this._container) {
+            return this;
+        }
+        const element = coerceElement(this.element);
+        if (container !== element && !element.contains(container)) {
+            throw new Error("Invalid DOM structure for drop list. Alternate container element must be a descendant of the drop list.");
+        }
+        const oldContainerIndex = this._scrollableElements.indexOf(this._container);
+        const newContainerIndex = this._scrollableElements.indexOf(container);
+        if (oldContainerIndex > -1) {
+            this._scrollableElements.splice(oldContainerIndex, 1);
+        }
+        if (newContainerIndex > -1) {
+            this._scrollableElements.splice(newContainerIndex, 1);
+        }
+        if (this._sortStrategy) {
+            this._sortStrategy.withElementContainer(container);
+        }
+        this._cachedShadowRoot = null;
+        this._scrollableElements.unshift(container);
+        this._container = container;
+        return this;
+    }
+    /** Gets the scrollable parents that are registered with this drop container. */
+    getScrollableParents() {
+        return this._scrollableElements;
+    }
+    /**
+     * Figures out the index of an item in the container.
+     * @param item Item whose index should be determined.
+     */
+    getItemIndex(item) {
+        return this._isDragging ? this._sortStrategy.getItemIndex(item) : this._draggables.indexOf(item);
+    }
+    /**
+     * Gets the item at a specific index.
+     * @param index Index at which to retrieve the item.
+     */
+    getItemAtIndex(index) {
+        return this._isDragging ? this._sortStrategy.getItemAtIndex(index) : this._draggables[index] || null;
+    }
+    /**
+     * Whether the list is able to receive the item that
+     * is currently being dragged inside a connected drop list.
+     */
+    isReceiving() {
+        return this._activeSiblings.size > 0;
+    }
+    /**
+     * Sorts an item inside the container based on its position.
+     * @param item Item to be sorted.
+     * @param pointerX Position of the item along the X axis.
+     * @param pointerY Position of the item along the Y axis.
+     * @param pointerDelta Direction in which the pointer is moving along each axis.
+     */
+    _sortItem(item, pointerX, pointerY, pointerDelta) {
+        // Don't sort the item if sorting is disabled or it's out of range.
+        if (this.sortingDisabled || !this._domRect || !isPointerNearDomRect(this._domRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
+            return;
+        }
+        const result = this._sortStrategy.sort(item, pointerX, pointerY, pointerDelta);
+        if (result) {
+            this.sorted.next({
+                previousIndex: result.previousIndex,
+                currentIndex: result.currentIndex,
+                container: this,
+                item,
+            });
+        }
+    }
+    /**
+     * Checks whether the user's pointer is close to the edges of either the
+     * viewport or the drop list and starts the auto-scroll sequence.
+     * @param pointerX User's pointer position along the x axis.
+     * @param pointerY User's pointer position along the y axis.
+     */
+    _startScrollingIfNecessary(pointerX, pointerY) {
+        if (this.autoScrollDisabled) {
+            return;
+        }
+        let scrollNode;
+        let verticalScrollDirection = AutoScrollVerticalDirection.NONE;
+        let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;
+        // Check whether we should start scrolling any of the parent containers.
+        this._parentPositions.positions.forEach((position, element) => {
+            // We have special handling for the `document` below. Also this would be
+            // nicer with a  for...of loop, but it requires changing a compiler flag.
+            if (element === this._document || !position.clientRect || scrollNode) {
+                return;
+            }
+            if (isPointerNearDomRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
+                [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections(element, position.clientRect, this._direction, pointerX, pointerY);
+                if (verticalScrollDirection || horizontalScrollDirection) {
+                    scrollNode = element;
+                }
+            }
+        });
+        // Otherwise check if we can start scrolling the viewport.
+        if (!verticalScrollDirection && !horizontalScrollDirection) {
+            const { width, height } = this._viewportRuler.getViewportSize();
+            const domRect = {
+                width,
+                height,
+                top: 0,
+                right: width,
+                bottom: height,
+                left: 0,
+            };
+            verticalScrollDirection = getVerticalScrollDirection(domRect, pointerY);
+            horizontalScrollDirection = getHorizontalScrollDirection(domRect, pointerX);
+            scrollNode = window;
+        }
+        if (scrollNode &&
+            (verticalScrollDirection !== this._verticalScrollDirection ||
+                horizontalScrollDirection !== this._horizontalScrollDirection ||
+                scrollNode !== this._scrollNode)) {
+            this._verticalScrollDirection = verticalScrollDirection;
+            this._horizontalScrollDirection = horizontalScrollDirection;
+            this._scrollNode = scrollNode;
+            if ((verticalScrollDirection || horizontalScrollDirection) && scrollNode) {
+                zone.runOutsideAngular(this._startScrollInterval);
+            }
+            else {
+                this._stopScrolling();
+            }
+        }
+    }
+    /** Stops any currently-running auto-scroll sequences. */
+    _stopScrolling() {
+        if (this._scrollFrame)
+            cancelAnimationFrame(this._scrollFrame);
+        this._scrollFrame = 0;
+    }
+    /** Starts the dragging sequence within the list. */
+    _draggingStarted(beforeMeasure) {
+        const styles = this._container.style;
+        this.beforeStarted.next();
+        beforeMeasure?.();
+        this._isDragging = true;
+        if (
+        // Prevent the check from running on apps not using an alternate container. Ideally we
+        // would always run it, but introducing it at this stage would be a breaking change.
+        this._container !== coerceElement(this.element)) {
+            for (const drag of this._draggables) {
+                if (!drag.isDragging() && drag.getVisibleElement().parentNode !== this._container) {
+                    throw new Error("Invalid DOM structure for drop list. All items must be placed directly inside of the element container.");
+                }
+            }
+        }
+        // We need to disable scroll snapping while the user is dragging, because it breaks automatic
+        // scrolling. The browser seems to round the value based on the snapping points which means
+        // that we can't increment/decrement the scroll position.
+        this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || "";
+        styles.scrollSnapType = styles.msScrollSnapType = "none";
+        this._sortStrategy.start(this._draggables);
+        this._cacheParentPositions();
+        this._viewportScrollSubscription.unsubscribe();
+        this._listenToScrollEvents();
+    }
+    /** Caches the positions of the configured scrollable parents. */
+    _cacheParentPositions() {
+        this._parentPositions.cache(this._scrollableElements);
+        // The list element is always in the `scrollableElements`
+        // so we can take advantage of the cached `DOMRect`.
+        this._domRect = this._parentPositions.positions.get(this._container).clientRect;
+    }
+    /** Resets the container to its initial state. */
+    _reset() {
+        this._isDragging = false;
+        const styles = this._container.style;
+        styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
+        this._siblings.forEach((sibling) => sibling._stopReceiving(this));
+        this._sortStrategy.reset();
+        this._stopScrolling();
+        this._viewportScrollSubscription.unsubscribe();
+        this._parentPositions.clear();
+    }
+    /** Starts the interval that'll auto-scroll the element. */
+    _startScrollInterval = () => {
+        this._stopScrolling();
+        const tick = () => {
+            this._scrollFrame = requestAnimationFrame(tick);
+            const node = this._scrollNode;
+            const scrollStep = this.autoScrollStep;
+            if (this._verticalScrollDirection === AutoScrollVerticalDirection.UP) {
+                node.scrollBy(0, -scrollStep);
+            }
+            else if (this._verticalScrollDirection === AutoScrollVerticalDirection.DOWN) {
+                node.scrollBy(0, scrollStep);
+            }
+            if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) {
+                node.scrollBy(-scrollStep, 0);
+            }
+            else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) {
+                node.scrollBy(scrollStep, 0);
+            }
+        };
+        // `interval(0, animationFrameScheduler)`: first step on the next frame.
+        this._scrollFrame = requestAnimationFrame(tick);
+    };
+    /**
+     * Checks whether the user's pointer is positioned over the container.
+     * @param x Pointer position along the X axis.
+     * @param y Pointer position along the Y axis.
+     */
+    _isOverContainer(x, y) {
+        return this._domRect != null && isInsideClientRect(this._domRect, x, y);
+    }
+    /**
+     * Figures out whether an item should be moved into a sibling
+     * drop container, based on its current position.
+     * @param item Drag item that is being moved.
+     * @param x Position of the item along the X axis.
+     * @param y Position of the item along the Y axis.
+     */
+    _getSiblingContainerFromPosition(item, x, y) {
+        return this._siblings.find((sibling) => sibling._canReceive(item, x, y));
+    }
+    /**
+     * Checks whether the drop list can receive the passed-in item.
+     * @param item Item that is being dragged into the list.
+     * @param x Position of the item along the X axis.
+     * @param y Position of the item along the Y axis.
+     */
+    _canReceive(item, x, y) {
+        if (!this._domRect || !isInsideClientRect(this._domRect, x, y) || !this.enterPredicate(item, this)) {
+            return false;
+        }
+        const elementFromPoint = this._getShadowRoot().elementFromPoint(x, y);
+        // If there's no element at the pointer position, then
+        // the client rect is probably scrolled out of the view.
+        if (!elementFromPoint) {
+            return false;
+        }
+        // The `DOMRect`, that we're using to find the container over which the user is
+        // hovering, doesn't give us any information on whether the element has been scrolled
+        // out of the view or whether it's overlapping with other containers. This means that
+        // we could end up transferring the item into a container that's invisible or is positioned
+        // below another one. We use the result from `elementFromPoint` to get the top-most element
+        // at the pointer position and to find whether it's one of the intersecting drop containers.
+        return elementFromPoint === this._container || this._container.contains(elementFromPoint);
+    }
+    /**
+     * Called by one of the connected drop lists when a dragging sequence has started.
+     * @param sibling Sibling in which dragging has started.
+     */
+    _startReceiving(sibling, items) {
+        const activeSiblings = this._activeSiblings;
+        if (!activeSiblings.has(sibling) &&
+            items.every((item) => {
+                // Note that we have to add an exception to the `enterPredicate` for items that started off
+                // in this drop list. The drag ref has logic that allows an item to return to its initial
+                // container, if it has left the initial container and none of the connected containers
+                // allow it to enter. See `DragRef._updateActiveDropContainer` for more context.
+                return this.enterPredicate(item, this) || this._draggables.indexOf(item) > -1;
+            })) {
+            activeSiblings.add(sibling);
+            this._cacheParentPositions();
+            this._listenToScrollEvents();
+            this.receivingStarted.next({
+                initiator: sibling,
+                receiver: this,
+                items,
+            });
+        }
+    }
+    /**
+     * Called by a connected drop list when dragging has stopped.
+     * @param sibling Sibling whose dragging has stopped.
+     */
+    _stopReceiving(sibling) {
+        this._activeSiblings.delete(sibling);
+        this._viewportScrollSubscription.unsubscribe();
+        this.receivingStopped.next({ initiator: sibling, receiver: this });
+    }
+    /**
+     * Starts listening to scroll events on the viewport.
+     * Used for updating the internal state of the list.
+     */
+    _listenToScrollEvents() {
+        this._viewportScrollSubscription = this._dragDropRegistry.scrolled(this._getShadowRoot()).subscribe((event) => {
+            if (this.isDragging()) {
+                const scrollDifference = this._parentPositions.handleScroll(event);
+                if (scrollDifference) {
+                    this._sortStrategy.updateOnScroll(scrollDifference.top, scrollDifference.left);
+                }
+            }
+            else if (this.isReceiving()) {
+                this._cacheParentPositions();
+            }
+        });
+    }
+    /**
+     * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
+     * than saving it in property directly on init, because we want to resolve it as late as possible
+     * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
+     * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
+     */
+    _getShadowRoot() {
+        if (!this._cachedShadowRoot) {
+            const shadowRoot = _getShadowRoot(this._container);
+            this._cachedShadowRoot = shadowRoot || this._document;
+        }
+        return this._cachedShadowRoot;
+    }
+    /** Rivet: the elements of the items that are not being dragged (the ones a layout shift moves). */
+    _shiftElements() {
+        const elements = [];
+        for (const drag of this._draggables)
+            if (!drag.isDragging())
+                elements.push(drag.getRootElement());
+        return elements;
+    }
+    /** Notifies any siblings that may potentially receive the item. */
+    _notifyReceivingSiblings() {
+        const draggedItems = this._sortStrategy.getActiveItemsSnapshot().filter((item) => item.isDragging());
+        this._siblings.forEach((sibling) => sibling._startReceiving(this, draggedItems));
+    }
+}
+/**
+ * Gets whether the vertical auto-scroll direction of a node.
+ * @param clientRect Dimensions of the node.
+ * @param pointerY Position of the user's pointer along the y axis.
+ */
+function getVerticalScrollDirection(clientRect, pointerY) {
+    const { top, bottom, height } = clientRect;
+    const yThreshold = height * SCROLL_PROXIMITY_THRESHOLD;
+    if (pointerY >= top - yThreshold && pointerY <= top + yThreshold) {
+        return AutoScrollVerticalDirection.UP;
+    }
+    else if (pointerY >= bottom - yThreshold && pointerY <= bottom + yThreshold) {
+        return AutoScrollVerticalDirection.DOWN;
+    }
+    return AutoScrollVerticalDirection.NONE;
+}
+/**
+ * Gets whether the horizontal auto-scroll direction of a node.
+ * @param clientRect Dimensions of the node.
+ * @param pointerX Position of the user's pointer along the x axis.
+ */
+function getHorizontalScrollDirection(clientRect, pointerX) {
+    const { left, right, width } = clientRect;
+    const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;
+    if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) {
+        return AutoScrollHorizontalDirection.LEFT;
+    }
+    else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) {
+        return AutoScrollHorizontalDirection.RIGHT;
+    }
+    return AutoScrollHorizontalDirection.NONE;
+}
+/**
+ * Gets the directions in which an element node should be scrolled,
+ * assuming that the user's pointer is already within it scrollable region.
+ * @param element Element for which we should calculate the scroll direction.
+ * @param clientRect Bounding client rectangle of the element.
+ * @param direction Layout direction of the drop list.
+ * @param pointerX Position of the user's pointer along the x axis.
+ * @param pointerY Position of the user's pointer along the y axis.
+ */
+function getElementScrollDirections(element, clientRect, direction, pointerX, pointerY) {
+    const computedVertical = getVerticalScrollDirection(clientRect, pointerY);
+    const computedHorizontal = getHorizontalScrollDirection(clientRect, pointerX);
+    let verticalScrollDirection = AutoScrollVerticalDirection.NONE;
+    let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;
+    // Note that we here we do some extra checks for whether the element is actually scrollable in
+    // a certain direction and we only assign the scroll direction if it is. We do this so that we
+    // can allow other elements to be scrolled, if the current element can't be scrolled anymore.
+    // This allows us to handle cases where the scroll regions of two scrollable elements overlap.
+    if (computedVertical) {
+        const scrollTop = element.scrollTop;
+        if (computedVertical === AutoScrollVerticalDirection.UP) {
+            if (scrollTop > 0) {
+                verticalScrollDirection = AutoScrollVerticalDirection.UP;
+            }
+        }
+        else if (element.scrollHeight - scrollTop > element.clientHeight) {
+            verticalScrollDirection = AutoScrollVerticalDirection.DOWN;
+        }
+    }
+    if (computedHorizontal) {
+        const scrollLeft = element.scrollLeft;
+        if (direction === "rtl") {
+            if (computedHorizontal === AutoScrollHorizontalDirection.RIGHT) {
+                // In RTL `scrollLeft` will be negative when scrolled.
+                if (scrollLeft < 0) {
+                    horizontalScrollDirection = AutoScrollHorizontalDirection.RIGHT;
+                }
+            }
+            else if (element.scrollWidth + scrollLeft > element.clientWidth) {
+                horizontalScrollDirection = AutoScrollHorizontalDirection.LEFT;
+            }
+        }
+        else {
+            if (computedHorizontal === AutoScrollHorizontalDirection.LEFT) {
+                if (scrollLeft > 0) {
+                    horizontalScrollDirection = AutoScrollHorizontalDirection.LEFT;
+                }
+            }
+            else if (element.scrollWidth - scrollLeft > element.clientWidth) {
+                horizontalScrollDirection = AutoScrollHorizontalDirection.RIGHT;
+            }
+        }
+    }
+    return [verticalScrollDirection, horizontalScrollDirection];
+}