@cloudscape-design/board-components 3.0.30 → 3.0.32

package/board/interfaces.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { InteractionType, Operation } from "../internal/dnd-controller/controller";
 import { BoardItemDefinition, BoardItemDefinitionBase, DataFallbackType, Direction, GridLayout, GridLayoutItem, ItemId, Rect } from "../internal/interfaces";
+import { LayoutEngine } from "../internal/layout-engine/engine";
 import { LayoutShift } from "../internal/layout-engine/interfaces";
 import { NonCancelableEventHandler } from "../internal/utils/events";
 import { Position } from "../internal/utils/position";
@@ -127,6 +128,7 @@ export interface Transition<D> {
     operation: Operation;
     interactionType: InteractionType;
     itemsLayout: GridLayout;
+    layoutEngine: LayoutEngine;
     insertionDirection: null | Direction;
     draggableItem: BoardItemDefinitionBase<D>;
     draggableRect: Rect;

package/board/internal.js

@@ -132,7 +132,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
         dispatch({ type: "discard" });
         autoScrollHandlers.removePointerEventHandlers();
     });
-    useDragSubscription("acquire", ({ droppableId, draggableItem, acquiredItemElement }) => {
+    useDragSubscription("acquire", ({ droppableId, draggableItem, renderAcquiredItem }) => {
         const placeholder = placeholdersLayout.items.find((it) => it.id === droppableId);
         // If missing then it does not belong to this board.
         if (!placeholder) {
@@ -142,13 +142,13 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
             type: "acquire-item",
             position: new Position({ x: placeholder.x, y: placeholder.y }),
             layoutElement: containerAccessRef.current,
-            acquiredItemElement: acquiredItemElement,
+            acquiredItemElement: renderAcquiredItem(),
         });
         focusNextRenderIdRef.current = draggableItem.id;
     });
     const removeItemAction = (removedItem) => {
         dispatch({ type: "init-remove", items, itemsLayout, removedItem });
-        const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id).getLayoutShift();
+        const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id);
         onItemsChange(createItemsChangeEvent(items, layoutShift));
     };
     function focusItem(itemId) {
@@ -192,7 +192,7 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
                                     else {
                                         delete itemContainerRef.current[item.id];
                                     }
-                                }, item: item, transform: transforms[item.id], inTransition: !!transition || !!removeTransition, placed: true, acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
+                                }, item: item, transform: transforms[item.id], inTransition: !!transition || !!removeTransition, placed: item.id !== (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), acquired: item.id === (acquiredItem === null || acquiredItem === void 0 ? void 0 : acquiredItem.id), getItemSize: () => ({
                                     width: gridContext.getWidth(itemSize.width),
                                     minWidth: gridContext.getWidth(getMinColumnSpan(item, itemsLayout.columns)),
                                     maxWidth: gridContext.getWidth(itemMaxSize.width),

package/board/transition.js

@@ -38,6 +38,7 @@ function initTransition({ operation, interactionType, itemsLayout, draggableItem
         operation,
         interactionType,
         itemsLayout,
+        layoutEngine: new LayoutEngine(itemsLayout),
         insertionDirection: null,
         draggableItem,
         draggableRect,
@@ -67,7 +68,7 @@ function initTransition({ operation, interactionType, itemsLayout, draggableItem
     };
 }
 function initRemoveTransition({ items, removedItem, itemsLayout }) {
-    const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id).refloat().getLayoutShift();
+    const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id);
     const removeTransition = { items, removedItem, layoutShift };
     return { transition: null, removeTransition, announcement: null };
 }

package/board/utils/layout.js

@@ -1,6 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { LayoutEngine } from "../../internal/layout-engine/engine";
 import { createPlaceholdersLayout, getDefaultColumnSpan, getDefaultRowSpan } from "../../internal/utils/layout";
 import { normalizeInsertionPath } from "./path";
 export function getLayoutColumns(transition) {
@@ -54,24 +53,21 @@ export function getLayoutShift(transition, path, insertionDirection) {
     if (path.length === 0) {
         return null;
     }
-    const engine = new LayoutEngine(transition.itemsLayout);
     const width = getDefaultColumnSpan(transition.draggableItem, getLayoutColumns(transition));
     const height = getDefaultRowSpan(transition.draggableItem);
     const rows = getLayoutRows(transition);
     const columns = getLayoutColumns(transition);
     switch (transition.operation) {
         case "resize":
-            return engine.resize({ itemId: transition.draggableItem.id, path }).getLayoutShift();
+            return transition.layoutEngine.resize({ itemId: transition.draggableItem.id, path });
         case "reorder":
-            return engine.move({ itemId: transition.draggableItem.id, path }).getLayoutShift();
+            return transition.layoutEngine.move({ itemId: transition.draggableItem.id, path });
         case "insert":
-            return engine
-                .insert({
+            return transition.layoutEngine.insert({
                 itemId: transition.draggableItem.id,
                 width,
                 height,
                 path: normalizeInsertionPath(path, insertionDirection !== null && insertionDirection !== void 0 ? insertionDirection : "right", columns, rows),
-            })
-                .getLayoutShift();
+            });
     }
 }

package/internal/debug-tools/generators.js

@@ -218,7 +218,7 @@ export function generateInsert(grid, insertId = "X", options) {
     const textGrid = toMatrix(grid);
     const y = getRandomIndex(textGrid);
     const x = getRandomIndex(textGrid[y]);
-    const width = getRandomInt(1, maxWidth + 1 - x);
+    const width = getRandomInt(1, Math.max(1, maxWidth + 1 - x));
     const height = getRandomInt(1, maxHeight + 1);
     return { itemId: insertId, width, height, path: [new Position({ x, y })] };
 }

package/internal/dnd-controller/controller.d.ts

@@ -36,7 +36,7 @@ export interface Droppable {
 interface AcquireData {
     droppableId: ItemId;
     draggableItem: Item;
-    acquiredItemElement?: ReactNode;
+    renderAcquiredItem: () => ReactNode;
 }
 export interface DragAndDropEvents {
     start: (data: DragAndDropData) => void;
@@ -54,7 +54,7 @@ export declare function useDraggable({ draggableItem, getCollisionRect, }: {
     updateTransition(coordinates: Coordinates): void;
     submitTransition(): void;
     discardTransition(): void;
-    acquire(droppableId: ItemId, acquiredItemElement?: ReactNode): void;
+    acquire(droppableId: ItemId, renderAcquiredItem: () => ReactNode): void;
     getDroppables(): [string, Droppable][];
 };
 export declare function useDroppable({ itemId, context, getElement, }: {

package/internal/dnd-controller/controller.js

@@ -43,11 +43,11 @@ class DragAndDropController extends EventEmitter {
     /**
      * Issues an "acquire" event to notify the current transition draggable is acquired by the given droppable.
      */
-    acquire(droppableId, acquiredItemElement) {
+    acquire(droppableId, renderAcquiredItem) {
         if (!this.transition) {
             throw new Error("Invariant violation: no transition present for acquire.");
         }
-        this.emit("acquire", { droppableId, draggableItem: this.transition.draggableItem, acquiredItemElement });
+        this.emit("acquire", { droppableId, draggableItem: this.transition.draggableItem, renderAcquiredItem });
     }
     /**
      * Registers a droppable used for collisions check, acquire, and dropTarget provision.
@@ -115,8 +115,8 @@ export function useDraggable({ draggableItem, getCollisionRect, }) {
         discardTransition() {
             controller.discard();
         },
-        acquire(droppableId, acquiredItemElement) {
-            controller.acquire(droppableId, acquiredItemElement);
+        acquire(droppableId, renderAcquiredItem) {
+            controller.acquire(droppableId, renderAcquiredItem);
         },
         getDroppables() {
             return controller.getDroppables();

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (5dff2947)";
+export var PACKAGE_VERSION = "3.0.0 (4a7c9c80)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "board-components",
-  "PACKAGE_VERSION": "3.0.0 (5dff2947)",
+  "PACKAGE_VERSION": "3.0.0 (4a7c9c80)",
   "THEME": "open-source-visual-refresh",
   "ALWAYS_VISUAL_REFRESH": true
 }

package/internal/item-container/index.d.ts

@@ -46,7 +46,7 @@ export interface ItemContainerProps {
         maxHeight: number;
     };
     onKeyMove?(direction: Direction): void;
-    children: () => ReactNode;
+    children: (hasDropTarget: boolean) => ReactNode;
 }
 export declare const ItemContainer: import("react").ForwardRefExoticComponent<ItemContainerProps & import("react").RefAttributes<ItemContainerRef>>;
 export {};

package/internal/item-container/index.js

@@ -60,6 +60,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
                     itemId: draggableItem.id,
                     sizeTransform: dropTarget ? getItemSize(dropTarget) : originalSizeRef.current,
                     positionTransform: { x: coordinates.x - pointerOffset.x, y: coordinates.y - pointerOffset.y },
+                    hasDropTarget: !!dropTarget,
                 });
             }
         }
@@ -154,7 +155,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
             return;
         }
         // Notify the respective droppable of the intention to insert the item in it.
-        draggableApi.acquire(nextDroppable, childrenRef.current);
+        draggableApi.acquire(nextDroppable, () => children(true));
         setIsHidden(true);
         muteEventsRef.current = true;
     }
@@ -244,7 +245,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
     if (isHidden) {
         itemTransitionClassNames.push(styles.hidden);
     }
-    if (placed && transform) {
+    if (transform) {
         // The moved items positions are altered with CSS transform.
         if (transform.type === "move") {
             itemTransitionClassNames.push(styles.transformed);
@@ -272,7 +273,7 @@ function ItemContainerComponent({ item, placed, acquired, inTransition, transfor
         (transition === null || transition === void 0 ? void 0 : transition.interactionType) === "pointer";
     const childrenRef = useRef(null);
     if (!inTransition || isActive) {
-        childrenRef.current = children();
+        childrenRef.current = children(!!(transition === null || transition === void 0 ? void 0 : transition.hasDropTarget));
     }
     const content = (_jsx("div", { ref: itemRef, className: clsx(styles.root, ...itemTransitionClassNames), style: itemTransitionStyle, "data-item-id": item.id, onBlur: onBlur, children: _jsx(ItemContext.Provider, { value: {
                 isActive,

package/internal/layout-engine/engine-cache.d.ts

@@ -0,0 +1,32 @@
+import { Position } from "../utils/position";
+import { LayoutEngineState } from "./engine-state";
+/**
+ * The cache is used to avoid duplicate computations for the same initial state and path.
+ * The cache must be invalidated once the items layout has changed e.g. as result of the operation commit.
+ * The cache is a tree of nodes with the root node representing the initial state and empty path. The
+ * rest of the tree store all previous state computations per path.
+ */
+export declare class LayoutEngineCacheNode {
+    position: null | Position;
+    state: LayoutEngineState;
+    private next;
+    constructor(state: LayoutEngineState);
+    /**
+     * The function takes path position and the callback to compute the corresponding state if not yet cached.
+     * It returns the next cache node to take the next path position if available:
+     *
+     * const root = new LayoutEngineCacheNode(state)
+     *
+     * const x1y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 })) // computes
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 })) // computes
+     *    .state;
+     *
+     * const x2y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 }))
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 }))
+     *    .matches({ x: 2, y: 0 }, () => compute({ x: 2, y: 0 })) // computes
+     *    .state;
+     */
+    matches(position: Position, compute: () => LayoutEngineState): LayoutEngineCacheNode;
+}

package/internal/layout-engine/engine-cache.js

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * The cache is used to avoid duplicate computations for the same initial state and path.
+ * The cache must be invalidated once the items layout has changed e.g. as result of the operation commit.
+ * The cache is a tree of nodes with the root node representing the initial state and empty path. The
+ * rest of the tree store all previous state computations per path.
+ */
+export class LayoutEngineCacheNode {
+    constructor(state) {
+        this.position = null;
+        this.next = new Array();
+        this.state = state;
+    }
+    /**
+     * The function takes path position and the callback to compute the corresponding state if not yet cached.
+     * It returns the next cache node to take the next path position if available:
+     *
+     * const root = new LayoutEngineCacheNode(state)
+     *
+     * const x1y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 })) // computes
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 })) // computes
+     *    .state;
+     *
+     * const x2y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 }))
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 }))
+     *    .matches({ x: 2, y: 0 }, () => compute({ x: 2, y: 0 })) // computes
+     *    .state;
+     */
+    matches(position, compute) {
+        for (const nextNode of this.next) {
+            if (nextNode.position.x === position.x && nextNode.position.y === position.y) {
+                return nextNode;
+            }
+        }
+        const nextNode = new LayoutEngineCacheNode(compute());
+        nextNode.position = position;
+        this.next.push(nextNode);
+        return nextNode;
+    }
+}

package/internal/layout-engine/engine-solution.d.ts

@@ -0,0 +1,25 @@
+import { Conflicts } from "./engine-state";
+import { LayoutEngineGrid, ReadonlyLayoutEngineGrid } from "./grid";
+import { CommittedMove } from "./interfaces";
+export type MoveSolution = [state: MoveSolutionState, nextMove: CommittedMove];
+export declare class MoveSolutionState {
+    grid: LayoutEngineGrid;
+    moves: CommittedMove[];
+    moveIndex: number;
+    conflicts: null | Conflicts;
+    overlaps: Map<string, string>;
+    score: number;
+    constructor(grid: ReadonlyLayoutEngineGrid, moves: readonly CommittedMove[], conflicts: null | Conflicts);
+    static clone({ grid, moves, moveIndex, conflicts, overlaps, score }: MoveSolutionState): {
+        grid: LayoutEngineGrid;
+        moves: CommittedMove[];
+        moveIndex: number;
+        conflicts: Conflicts | null;
+        overlaps: Map<string, string>;
+        score: number;
+    };
+}
+/**
+ * Given a solution state finds a set of all possible moves each resolving a particular overlap.
+ */
+export declare function findNextSolutions(state: MoveSolutionState): MoveSolution[];

package/internal/layout-engine/engine-solution.js

@@ -0,0 +1,205 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Position } from "../utils/position";
+import { LayoutEngineGrid } from "./grid";
+import { checkOppositeDirections, createMove, getMoveOriginalRect, getMoveRect } from "./utils";
+// All directions in which overlaps can be incrementally resolved.
+const PRIORITY_DIRECTIONS = ["down", "right", "left", "up"];
+// The class represents an intermediate layout state used to find the next set of solutions for.
+// The solution is terminal when no overlaps are left and it can become the next layout state if its
+// score is smaller than that of the alternative solutions.
+export class MoveSolutionState {
+    constructor(grid, moves, conflicts) {
+        this.moveIndex = 0;
+        this.overlaps = new Map();
+        this.score = 0;
+        this.grid = LayoutEngineGrid.clone(grid);
+        this.moves = [...moves];
+        this.moveIndex = moves.length;
+        this.conflicts = conflicts;
+    }
+    // The solution state needs to be cloned after the move is performed in case there are overlaps left
+    // so that the next solutions won't have the shared state to corrupt.
+    // The conflicts never change and can be carried over w/o cloning.
+    static clone({ grid, moves, moveIndex, conflicts, overlaps, score }) {
+        return {
+            grid: LayoutEngineGrid.clone(grid),
+            moves: [...moves],
+            moveIndex,
+            conflicts,
+            overlaps: new Map([...overlaps]),
+            score,
+        };
+    }
+}
+/**
+ * Given a solution state finds a set of all possible moves each resolving a particular overlap.
+ */
+export function findNextSolutions(state) {
+    // For every overlap and direction found a move if exists that resolves the overlap.
+    // A pair of the given state and the overlap resolution move is a new solution to try.
+    const nextMoveSolutions = [];
+    for (const [overlapId, overlapIssuerId] of state.overlaps) {
+        for (const moveDirection of PRIORITY_DIRECTIONS) {
+            const move = getOverlapMove(state, overlapId, overlapIssuerId, moveDirection);
+            if (move !== null) {
+                nextMoveSolutions.push([MoveSolutionState.clone(state), move]);
+            }
+        }
+    }
+    return nextMoveSolutions;
+}
+// Returns an evaluated move to resolve the given overlap in the given direction or null if such move is not possible.
+function getOverlapMove(state, overlapId, overlapIssuerId, moveDirection) {
+    var _a;
+    const userItem = state.grid.getItem(state.moves[0].itemId);
+    const overlapItem = state.grid.getItem(overlapId);
+    const overlapIssuerItem = state.grid.getItem(overlapIssuerId);
+    const overlapMove = getMoveForDirection(overlapItem, overlapIssuerItem, moveDirection);
+    // The move position is outside the grid boundaries.
+    if (overlapMove.x < 0 || overlapMove.y < 0 || overlapMove.x + overlapMove.width > state.grid.width) {
+        return null;
+    }
+    // Subsequent item overlap moves in the opposite directions do not contribute to solution.
+    const prevOverlapMove = getLastSolutionMove(state, overlapItem.id);
+    if (prevOverlapMove && checkOppositeDirections(prevOverlapMove.direction, moveDirection)) {
+        return null;
+    }
+    const pathOverlaps = getPathOverlaps(state, overlapMove, overlapIssuerItem);
+    for (const overlap of pathOverlaps) {
+        // Not allowed to intersect with the user-controlled item.
+        if (overlap.id === userItem.id) {
+            return null;
+        }
+        // Not allowed to intersect with conflicting items.
+        if ((_a = state.conflicts) === null || _a === void 0 ? void 0 : _a.items.has(overlap.id)) {
+            return null;
+        }
+        // Intersecting with items having unresolved overlaps does not contribute to solution.
+        if (state.overlaps.has(overlap.id)) {
+            return null;
+        }
+    }
+    const lastIssuerMove = getLastSolutionMove(state, overlapIssuerItem.id);
+    if (!lastIssuerMove) {
+        throw new Error("Invariant violation: overlap issuer has no associated moves.");
+    }
+    const issuerDirection = lastIssuerMove.direction;
+    const isSwap = checkIfSwap(overlapMove, lastIssuerMove);
+    const isDifferentIssuerDirection = moveDirection !== issuerDirection;
+    const isOppositeIssuerDirection = checkOppositeDirections(moveDirection, issuerDirection);
+    const userMoveBoundaries = getUserMoveBoundaries(state);
+    const moveVector = getSolutionMovesVector(state);
+    // Swap score penalizes non-swap overlap resolutions in case the direction does not match that of the issuer.
+    const swapPenalty = isSwap ? 0 : 20;
+    const differentDirectionPenalty = !isSwap && isDifferentIssuerDirection ? 10 : 0;
+    const oppositeDirectionPenalty = !isSwap && isOppositeIssuerDirection ? 500 : 0;
+    const swapScore = swapPenalty + differentDirectionPenalty + oppositeDirectionPenalty;
+    // Overlaps score penalizes moves that cause additional overlaps.
+    const overlapsScore = pathOverlaps.size * 50;
+    // Boundaries score penalize movements of items that are outside the area covered by the user move.
+    const moveOutsideUserTopPenalty = overlapItem.y + overlapItem.height - 1 < userMoveBoundaries.top ? 500 : 0;
+    const moveOutsideUserLeftPenalty = overlapItem.x + overlapItem.width - 1 < userMoveBoundaries.left ? 50 : 0;
+    const moveOutsideUserRightPenalty = overlapItem.x > userMoveBoundaries.right ? 50 : 0;
+    const boundariesScore = moveOutsideUserTopPenalty + moveOutsideUserLeftPenalty + moveOutsideUserRightPenalty;
+    // Move vector score penalize movements that are against the common move direction of other items.
+    const vectorXPenalty = overlapMove.distanceX * moveVector.x < 0 ? moveVector.x * 2 : 0;
+    const vectorYPenalty = overlapMove.distanceY * moveVector.y < 0 ? moveVector.y * 2 : 0;
+    const moveVectorScore = vectorXPenalty + vectorYPenalty;
+    // Score starts from 1 to avoid overlap moves having 0 score which breaks the solutions cache.
+    const score = 1 + swapScore + overlapsScore + moveVectorScore + boundariesScore;
+    return { ...overlapMove, score };
+}
+// Retrieves the first possible move for the given direction to resolve the overlap.
+function getMoveForDirection(moveTarget, overlap, direction) {
+    switch (direction) {
+        case "up":
+            return createMove("OVERLAP", moveTarget, new Position({ x: moveTarget.x, y: overlap.y - moveTarget.height }));
+        case "down":
+            return createMove("OVERLAP", moveTarget, new Position({ x: moveTarget.x, y: overlap.y + overlap.height }));
+        case "left":
+            return createMove("OVERLAP", moveTarget, new Position({ x: overlap.x - moveTarget.width, y: moveTarget.y }));
+        case "right":
+            return createMove("OVERLAP", moveTarget, new Position({ x: overlap.x + overlap.width, y: moveTarget.y }));
+    }
+}
+// Retrieves the last move if exists within the given solution.
+function getLastSolutionMove(state, itemId) {
+    let lastMove = null;
+    for (let i = state.moves.length - 1; i >= state.moveIndex; i--) {
+        if (state.moves[i].itemId === itemId) {
+            lastMove = state.moves[i];
+            break;
+        }
+    }
+    return lastMove;
+}
+// Calculates vector as the amount of cell movements to either direction.
+// All moves in one direction are summarized, the opposite moves cancel each other.
+// The vector show in which direction (left / right, up / down) the most overlaps were resolved.
+function getSolutionMovesVector(state) {
+    const vector = { x: 0, y: 0 };
+    for (let i = state.moveIndex; i < state.moves.length; i++) {
+        const move = state.moves[i];
+        if (move.type === "OVERLAP") {
+            vector.x += move.distanceX * move.height;
+            vector.y += move.distanceY * move.width;
+        }
+    }
+    return vector;
+}
+// Finds a rectangle within which the user-controlled item was moved (previous and current positions only).
+// The layout items outside the boundaries are not expected to be disturbed.
+function getUserMoveBoundaries(state) {
+    const firstUserMove = state.moves[0];
+    const lastUserMove = state.moves[state.moveIndex];
+    if (!firstUserMove || !lastUserMove || firstUserMove.itemId !== lastUserMove.itemId) {
+        throw new Error("Invariant violation: unexpected user move.");
+    }
+    const original = getMoveOriginalRect(lastUserMove);
+    const current = getMoveRect(lastUserMove);
+    return {
+        top: Math.min(original.top, current.top),
+        right: Math.max(original.right, current.right),
+        bottom: Math.max(original.bottom, current.bottom),
+        left: Math.min(original.left, current.left),
+    };
+}
+// Finds all overlaps that the move will cause along its path not considering the original location and original overlap.
+function getPathOverlaps(state, move, overlapIssuerItem) {
+    const { left, right, top, bottom } = getMoveOriginalRect(move);
+    const startX = move.distanceX <= 0 ? move.x : right + 1;
+    const endX = move.distanceX < 0 ? left - 1 : right + move.distanceX;
+    const startY = move.distanceY <= 0 ? move.y : bottom + 1;
+    const endY = move.distanceY < 0 ? top - 1 : bottom + move.distanceY;
+    const pathOverlaps = new Set(state.grid.getOverlaps({
+        id: move.itemId,
+        x: startX,
+        width: 1 + endX - startX,
+        y: startY,
+        height: 1 + endY - startY,
+    }));
+    pathOverlaps.delete(overlapIssuerItem);
+    return pathOverlaps;
+}
+// Checks if the overlap move is a swap with the user-moved item.
+function checkIfSwap(overlapMove, lastIssuerMove) {
+    if (lastIssuerMove.type !== "MOVE") {
+        return false;
+    }
+    if (!checkOppositeDirections(overlapMove.direction, lastIssuerMove.direction)) {
+        return false;
+    }
+    const overlapRect = getMoveOriginalRect(overlapMove);
+    const issuerRect = getMoveRect(lastIssuerMove);
+    switch (lastIssuerMove.direction) {
+        case "up":
+            return overlapRect.top === issuerRect.top;
+        case "right":
+            return overlapRect.right === issuerRect.right;
+        case "down":
+            return overlapRect.bottom === issuerRect.bottom;
+        case "left":
+            return overlapRect.left === issuerRect.left;
+    }
+}

package/internal/layout-engine/engine-state.d.ts

@@ -0,0 +1,17 @@
+import { Direction, ItemId } from "../interfaces";
+import { LayoutEngineGrid, ReadonlyLayoutEngineGrid } from "./grid";
+import { CommittedMove } from "./interfaces";
+/**
+ * The class describes the layout engine state at a particular path step.
+ * The state of the last performed step is the command result.
+ */
+export declare class LayoutEngineState {
+    grid: ReadonlyLayoutEngineGrid;
+    moves: readonly CommittedMove[];
+    conflicts: null | Conflicts;
+    constructor(grid: LayoutEngineGrid, moves?: CommittedMove[], conflicts?: null | Conflicts);
+}
+export interface Conflicts {
+    items: ReadonlySet<ItemId>;
+    direction: Direction;
+}

package/internal/layout-engine/engine-state.js

@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * The class describes the layout engine state at a particular path step.
+ * The state of the last performed step is the command result.
+ */
+export class LayoutEngineState {
+    constructor(grid, moves = new Array(), conflicts = null) {
+        this.grid = grid;
+        this.moves = moves;
+        this.conflicts = conflicts;
+    }
+}

package/internal/layout-engine/engine-step.d.ts

@@ -1,11 +1,9 @@
-import { ItemId } from "../interfaces";
-import { LayoutEngineGrid, ReadonlyLayoutEngineGrid } from "./grid";
+import { LayoutEngineState } from "./engine-state";
 import { CommittedMove } from "./interfaces";
-export declare class LayoutEngineStepState {
-    grid: ReadonlyLayoutEngineGrid;
-    moves: readonly CommittedMove[];
-    conflicts: ReadonlySet<ItemId>;
-    constructor(grid: LayoutEngineGrid, moves?: CommittedMove[], conflicts?: Set<string>);
-}
-export declare function resolveOverlaps(userMove: CommittedMove, state: LayoutEngineStepState): LayoutEngineStepState;
-export declare function refloatGrid(state: LayoutEngineStepState): LayoutEngineStepState;
+/**
+ * The function takes the current layout state (item placements from the previous steps and all moves done so far)
+ * and a user command increment that describes an item transition by one cell in some direction.
+ * The function finds overlapping elements and resolves all overlaps if possible (always possible when no conflicts).
+ * The result in an updated state (new item placements, additional moves, and item conflicts if any).
+ */
+export declare function resolveOverlaps(layoutState: LayoutEngineState, userMove: CommittedMove): LayoutEngineState;