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

package/drag-drop/sorting/mixed-sort-strategy.js

@@ -0,0 +1,259 @@
+// Ported from Angular Components (src/cdk/drag-drop/sorting/mixed-sort-strategy.ts), MIT, © Google LLC.
+import { _getShadowRoot } from "../dom/shadow-dom.js";
+import { moveItemInArray } from "../drag-utils.js";
+/**
+ * Strategy that only supports sorting on a list that might wrap.
+ * Items are reordered by moving their DOM nodes around.
+ * @docs-private
+ */
+export class MixedSortStrategy {
+    /** Root element container of the drop list. */
+    _element;
+    /** Function used to determine if an item can be sorted into a specific index. */
+    _sortPredicate;
+    /** Lazily-resolved root node containing the list. Use `_getRootNode` to read this. */
+    _rootNode;
+    /**
+     * Draggable items that are currently active inside the container. Includes the items
+     * that were there at the start of the sequence, as well as any items that have been dragged
+     * in, but haven't been dropped yet.
+     */
+    _activeItems;
+    /**
+     * Keeps track of the item that was last swapped with the dragged item, as well as what direction
+     * the pointer was moving in when the swap occurred and whether the user's pointer continued to
+     * overlap with the swapped item after the swapping occurred.
+     */
+    _previousSwap = {
+        drag: null,
+        deltaX: 0,
+        deltaY: 0,
+        overlaps: false,
+    };
+    /**
+     * Keeps track of the relationship between a node and its next sibling. This information
+     * is used to restore the DOM to the order it was in before dragging started.
+     */
+    _relatedNodes = [];
+    _document;
+    _dragDropRegistry;
+    constructor(_document, _dragDropRegistry) {
+        this._document = _document;
+        this._dragDropRegistry = _dragDropRegistry;
+    }
+    /**
+     * To be called when the drag sequence starts.
+     * @param items Items that are currently in the list.
+     */
+    start(items) {
+        const childNodes = this._element.childNodes;
+        this._relatedNodes = [];
+        for (let i = 0; i < childNodes.length; i++) {
+            const node = childNodes[i];
+            this._relatedNodes.push([node, node.nextSibling]);
+        }
+        this.withItems(items);
+    }
+    /**
+     * To be called when an item is being sorted.
+     * @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.
+     */
+    sort(item, pointerX, pointerY, pointerDelta) {
+        const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
+        const previousSwap = this._previousSwap;
+        if (newIndex === -1 || this._activeItems[newIndex] === item) {
+            return null;
+        }
+        const toSwapWith = this._activeItems[newIndex];
+        // Prevent too many swaps over the same item.
+        if (previousSwap.drag === toSwapWith &&
+            previousSwap.overlaps &&
+            previousSwap.deltaX === pointerDelta.x &&
+            previousSwap.deltaY === pointerDelta.y) {
+            return null;
+        }
+        const previousIndex = this.getItemIndex(item);
+        const current = item.getPlaceholderElement();
+        const overlapElement = toSwapWith.getRootElement();
+        if (newIndex > previousIndex) {
+            overlapElement.after(current);
+        }
+        else {
+            overlapElement.before(current);
+        }
+        moveItemInArray(this._activeItems, previousIndex, newIndex);
+        const newOverlapElement = this._getRootNode().elementFromPoint(pointerX, pointerY);
+        // Note: it's tempting to save the entire `pointerDelta` object here, however that'll
+        // break this functionality, because the same object is passed for all `sort` calls.
+        previousSwap.deltaX = pointerDelta.x;
+        previousSwap.deltaY = pointerDelta.y;
+        previousSwap.drag = toSwapWith;
+        previousSwap.overlaps =
+            overlapElement === newOverlapElement || overlapElement.contains(newOverlapElement);
+        return {
+            previousIndex,
+            currentIndex: newIndex,
+        };
+    }
+    /**
+     * Called when an item is being moved 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) {
+        // Remove the item from current set of items first so that it doesn't throw off the indexes
+        // further down in this method. See https://github.com/angular/components/issues/31505
+        const currentIndex = this._activeItems.indexOf(item);
+        if (currentIndex > -1) {
+            this._activeItems.splice(currentIndex, 1);
+        }
+        let enterIndex = index == null || index < 0
+            ? this._getItemIndexFromPointerPosition(item, pointerX, pointerY)
+            : index;
+        // In some cases (e.g. when the container has padding) we might not be able to figure
+        // out which item to insert the dragged item next to, because the pointer didn't overlap
+        // with anything. In that case we find the item that's closest to the pointer.
+        if (enterIndex === -1) {
+            enterIndex = this._getClosestItemIndexToPointer(item, pointerX, pointerY);
+        }
+        const targetItem = this._activeItems[enterIndex];
+        if (targetItem && !this._dragDropRegistry.isDragging(targetItem)) {
+            this._activeItems.splice(enterIndex, 0, item);
+            targetItem.getRootElement().before(item.getPlaceholderElement());
+        }
+        else {
+            this._activeItems.push(item);
+            this._element.appendChild(item.getPlaceholderElement());
+        }
+    }
+    /** Sets the items that are currently part of the list. */
+    withItems(items) {
+        this._activeItems = items.slice();
+    }
+    /** Assigns a sort predicate to the strategy. */
+    withSortPredicate(predicate) {
+        this._sortPredicate = predicate;
+    }
+    /** Resets the strategy to its initial state before dragging was started. */
+    reset() {
+        const root = this._element;
+        const previousSwap = this._previousSwap;
+        // Moving elements around in the DOM can break things like the `@for` loop, because it
+        // uses comment nodes to know where to insert elements. To avoid such issues, we restore
+        // the DOM nodes in the list to their original order when the list is reset.
+        // Note that this could be simpler if we just saved all the nodes, cleared the root
+        // and then appended them in the original order. We don't do it, because it can break
+        // down depending on when the snapshot was taken. E.g. we may end up snapshotting the
+        // placeholder element which is removed after dragging.
+        for (let i = this._relatedNodes.length - 1; i > -1; i--) {
+            const [node, nextSibling] = this._relatedNodes[i];
+            if (node.parentNode === root && node.nextSibling !== nextSibling) {
+                if (nextSibling === null) {
+                    root.appendChild(node);
+                }
+                else if (nextSibling.parentNode === root) {
+                    root.insertBefore(node, nextSibling);
+                }
+            }
+        }
+        this._relatedNodes = [];
+        this._activeItems = [];
+        previousSwap.drag = null;
+        previousSwap.deltaX = previousSwap.deltaY = 0;
+        previousSwap.overlaps = false;
+    }
+    /**
+     * Gets a snapshot of items currently in the list.
+     * Can include items that we dragged in from another list.
+     */
+    getActiveItemsSnapshot() {
+        return this._activeItems;
+    }
+    /** Gets the index of a specific item. */
+    getItemIndex(item) {
+        return this._activeItems.indexOf(item);
+    }
+    /** Gets the item at a specific index. */
+    getItemAtIndex(index) {
+        return this._activeItems[index] || null;
+    }
+    /** Used to notify the strategy that the scroll position has changed. */
+    updateOnScroll() {
+        this._activeItems.forEach(item => {
+            if (this._dragDropRegistry.isDragging(item)) {
+                // We need to re-sort the item manually, because the pointer move
+                // events won't be dispatched while the user is scrolling.
+                item._sortFromLastPointerPosition();
+            }
+        });
+    }
+    withElementContainer(container) {
+        if (container !== this._element) {
+            this._element = container;
+            this._rootNode = undefined;
+        }
+    }
+    /**
+     * Gets the index of an item in the drop container, based on the position of the user's pointer.
+     * @param item Item that is being sorted.
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     * @param delta Direction in which the user is moving their pointer.
+     */
+    _getItemIndexFromPointerPosition(item, pointerX, pointerY) {
+        const elementAtPoint = this._getRootNode().elementFromPoint(Math.floor(pointerX), Math.floor(pointerY));
+        const index = elementAtPoint
+            ? this._activeItems.findIndex(item => {
+                const root = item.getRootElement();
+                return elementAtPoint === root || root.contains(elementAtPoint);
+            })
+            : -1;
+        return index === -1 || !this._sortPredicate(index, item) ? -1 : index;
+    }
+    /** Lazily resolves the list's root node. */
+    _getRootNode() {
+        // Resolve the root node lazily to ensure that the drop list is in its final place in the DOM.
+        if (!this._rootNode) {
+            this._rootNode = _getShadowRoot(this._element) || this._document;
+        }
+        return this._rootNode;
+    }
+    /**
+     * Finds the index of the item that's closest to the item being dragged.
+     * @param item Item being dragged.
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     */
+    _getClosestItemIndexToPointer(item, pointerX, pointerY) {
+        if (this._activeItems.length === 0) {
+            return -1;
+        }
+        if (this._activeItems.length === 1) {
+            return 0;
+        }
+        let minDistance = Infinity;
+        let minIndex = -1;
+        // Find the Euclidean distance (https://en.wikipedia.org/wiki/Euclidean_distance) between each
+        // item and the pointer, and return the smallest one. Note that this is a bit flawed in that DOM
+        // nodes are rectangles, not points, so we use the top/left coordinates. It should be enough
+        // for our purposes.
+        for (let i = 0; i < this._activeItems.length; i++) {
+            const current = this._activeItems[i];
+            if (current !== item) {
+                const { x, y } = current.getRootElement().getBoundingClientRect();
+                const distance = Math.hypot(pointerX - x, pointerY - y);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    minIndex = i;
+                }
+            }
+        }
+        return minIndex;
+    }
+}

package/drag-drop/sorting/single-axis-sort-strategy.d.ts

@@ -0,0 +1,112 @@
+import type { Direction } from "../../bidi/index.js";
+import type { DragDropRegistry } from "../drag-drop-registry.js";
+import type { DropListSortStrategy, SortPredicate } from "./drop-list-sort-strategy.js";
+import type { DragRef } from "../drag-ref.js";
+/**
+ * Strategy that only supports sorting along a single axis.
+ * Items are reordered using CSS transforms which allows for sorting to be animated.
+ * @docs-private
+ */
+export declare class SingleAxisSortStrategy implements DropListSortStrategy {
+    /** Root element container of the drop list. */
+    private _element;
+    /** Function used to determine if an item can be sorted into a specific index. */
+    private _sortPredicate;
+    /** Cache of the dimensions of all the items inside the container. */
+    private _itemPositions;
+    /**
+     * Draggable items that are currently active inside the container. Includes the items
+     * that were there at the start of the sequence, as well as any items that have been dragged
+     * in, but haven't been dropped yet.
+     */
+    private _activeDraggables;
+    /** Direction in which the list is oriented. */
+    orientation: "vertical" | "horizontal";
+    /** Layout direction of the drop list. */
+    direction: Direction;
+    private _dragDropRegistry;
+    constructor(_dragDropRegistry: DragDropRegistry);
+    /**
+     * Keeps track of the item that was last swapped with the dragged item, as well as what direction
+     * the pointer was moving in when the swap occurred and whether the user's pointer continued to
+     * overlap with the swapped item after the swapping occurred.
+     */
+    private _previousSwap;
+    /**
+     * To be called when the drag sequence starts.
+     * @param items Items that are currently in the list.
+     */
+    start(items: readonly DragRef[]): void;
+    /**
+     * To be called when an item is being sorted.
+     * @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.
+     */
+    sort(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
+        x: number;
+        y: number;
+    }): {
+        previousIndex: number;
+        currentIndex: number;
+    } | null;
+    /**
+     * Called when an item is being moved 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: DragRef, pointerX: number, pointerY: number, index?: number): void;
+    /** Sets the items that are currently part of the list. */
+    withItems(items: readonly DragRef[]): void;
+    /** Assigns a sort predicate to the strategy. */
+    withSortPredicate(predicate: SortPredicate<DragRef>): void;
+    /** Resets the strategy to its initial state before dragging was started. */
+    reset(): void;
+    /**
+     * Gets a snapshot of items currently in the list.
+     * Can include items that we dragged in from another list.
+     */
+    getActiveItemsSnapshot(): readonly DragRef[];
+    /** Gets the index of a specific item. */
+    getItemIndex(item: DragRef): number;
+    /** Gets the item at a specific index. */
+    getItemAtIndex(index: number): DragRef | null;
+    /** Used to notify the strategy that the scroll position has changed. */
+    updateOnScroll(topDifference: number, leftDifference: number): void;
+    withElementContainer(container: HTMLElement): void;
+    /** Refreshes the position cache of the items and sibling containers. */
+    private _cacheItemPositions;
+    private _getVisualItemPositions;
+    /**
+     * Gets the offset in pixels by which the item that is being dragged should be moved.
+     * @param currentPosition Current position of the item.
+     * @param newPosition Position of the item where the current item should be moved.
+     * @param delta Direction in which the user is moving.
+     */
+    private _getItemOffsetPx;
+    /**
+     * Gets the offset in pixels by which the items that aren't being dragged should be moved.
+     * @param currentIndex Index of the item currently being dragged.
+     * @param siblings All of the items in the list.
+     * @param delta Direction in which the user is moving.
+     */
+    private _getSiblingOffsetPx;
+    /**
+     * Checks if pointer is entering in the first position
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     */
+    private _shouldEnterAsFirstChild;
+    /**
+     * Gets the index of an item in the drop container, based on the position of the user's pointer.
+     * @param item Item that is being sorted.
+     * @param pointerX Position of the user's pointer along the X axis.
+     * @param pointerY Position of the user's pointer along the Y axis.
+     * @param delta Direction in which the user is moving their pointer.
+     */
+    private _getItemIndexFromPointerPosition;
+}