@cloudscape-design/board-components 3.0.0 → 3.0.2

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (f7bedc98)";
+export var PACKAGE_VERSION = "3.0.0 (2398ed65)";
 export var THEME = "default";
 export var ALWAYS_VISUAL_REFRESH = false;

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

@@ -1,5 +1,11 @@
 import { ItemId } from "../interfaces";
-import { LayoutEngineGrid } from "./grid";
+import { LayoutEngineGrid, ReadonlyLayoutEngineGrid } from "./grid";
 import { CommittedMove } from "./interfaces";
-export declare function resolveOverlaps(userMove: CommittedMove, grid: LayoutEngineGrid, moves: CommittedMove[], conflicts: Set<ItemId>): void;
-export declare function refloatGrid(grid: LayoutEngineGrid, moves: CommittedMove[], conflicts: Set<ItemId>): void;
+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;

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

@@ -1,19 +1,30 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { StackSet } from "../utils/stack-set";
-export function resolveOverlaps(userMove, grid, moves, conflicts) {
-    new LayoutEngineStep(grid, moves, conflicts).resolveOverlaps(userMove);
+import { LayoutEngineGrid } from "./grid";
+export class LayoutEngineStepState {
+    constructor(grid, moves = new Array(), conflicts = new Set()) {
+        this.grid = grid;
+        this.moves = moves;
+        this.conflicts = conflicts;
+    }
 }
-export function refloatGrid(grid, moves, conflicts) {
-    new LayoutEngineStep(grid, moves, conflicts).refloatGrid();
+export function resolveOverlaps(userMove, state) {
+    return new LayoutEngineStep(state).resolveOverlaps(userMove).getState();
+}
+export function refloatGrid(state) {
+    return new LayoutEngineStep(state).refloatGrid().getState();
 }
 class LayoutEngineStep {
-    constructor(grid, moves, conflicts) {
+    constructor(state) {
         this.moves = [];
         this.conflicts = new Set();
-        this.grid = grid;
-        this.moves = moves;
-        this.conflicts = conflicts;
+        this.grid = LayoutEngineGrid.clone(state.grid);
+        this.moves = [...state.moves];
+        this.conflicts = new Set([...state.conflicts]);
+    }
+    getState() {
+        return { grid: this.grid, moves: this.moves, conflicts: this.conflicts };
     }
     // Issue moves on overlapping items trying to resolve all of them.
     resolveOverlaps(userMove) {
@@ -27,6 +38,7 @@ class LayoutEngineStep {
                 overlaps.push(itemId);
             }
         };
+        this.conflicts = this.findConflicts(userMove);
         this.makeMove(userMove, addOverlap, priorities);
         const tryVacantMoves = () => {
             // Try vacant moves on all overlaps.
@@ -56,11 +68,12 @@ class LayoutEngineStep {
         };
         tryVacantMoves();
         this.refloatGrid(activeId);
+        return this;
     }
     // Find items that can "float" to the top and apply the necessary moves.
     refloatGrid(activeId) {
         if (this.conflicts.size > 0) {
-            return;
+            return this;
         }
         let needAnotherRefloat = false;
         for (const item of this.grid.items) {
@@ -90,6 +103,7 @@ class LayoutEngineStep {
         if (needAnotherRefloat) {
             this.refloatGrid(activeId);
         }
+        return this;
     }
     makeMove(move, addOverlap, priorities) {
         switch (move.type) {
@@ -220,7 +234,8 @@ class LayoutEngineStep {
             height: overlapItem.height,
             type: "ESCAPE",
         };
-        for (move.y; move.y < 100; move.y++) {
+        // If can't find the escape move after 999 steps down it is likely a bug in the validation.
+        for (move.y; move.y < 999; move.y++) {
             if (this.validatePriorityMove(move, priorities, activeId, false)) {
                 return move;
             }
@@ -304,4 +319,58 @@ class LayoutEngineStep {
             }
         }
     }
+    // Find items that the active item cannot be moved over with the current move.
+    findConflicts(move) {
+        if (move.type !== "MOVE") {
+            return new Set();
+        }
+        const conflicts = new Set();
+        const moveTarget = this.grid.getItem(move.itemId);
+        const direction = `${move.x - moveTarget.x}:${move.y - moveTarget.y}`;
+        switch (direction) {
+            case "-1:0": {
+                const left = Math.max(0, moveTarget.left - 1);
+                for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
+                    const block = this.grid.getCellOverlap(left, y, moveTarget.id);
+                    if (block && block.x < left) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            case "1:0": {
+                const right = Math.min(this.grid.width - 1, moveTarget.right + 1);
+                for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
+                    const block = this.grid.getCellOverlap(right, y, moveTarget.id);
+                    if (block && block.x + block.width - 1 > right) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            case "0:-1": {
+                const top = Math.max(0, moveTarget.top - 1);
+                for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
+                    const block = this.grid.getCellOverlap(x, top, moveTarget.id);
+                    if (block && block.y < top) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            case "0:1": {
+                const bottom = moveTarget.bottom + 1;
+                for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
+                    const block = this.grid.getCellOverlap(x, bottom, moveTarget.id);
+                    if (block && block.y + block.height - 1 > bottom) {
+                        conflicts.add(block.id);
+                    }
+                }
+                break;
+            }
+            default:
+                throw new Error(`Invariant violation: unexpected direction ${direction}.`);
+        }
+        return conflicts;
+    }
 }

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

@@ -2,9 +2,7 @@ import { GridLayout, ItemId } from "../interfaces";
 import { InsertCommand, LayoutShift, MoveCommand, ResizeCommand } from "./interfaces";
 export declare class LayoutEngine {
     private current;
-    private grid;
-    private moves;
-    private conflicts;
+    private step;
     private chained;
     constructor(args: GridLayout | LayoutEngine);
     move(moveCommand: MoveCommand): LayoutEngine;

package/internal/layout-engine/engine.js

@@ -1,25 +1,20 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { Position } from "../utils/position";
-import { findConflicts } from "./engine-conflicts";
-import { refloatGrid, resolveOverlaps } from "./engine-step";
+import { LayoutEngineStepState, refloatGrid, resolveOverlaps } from "./engine-step";
 import { LayoutEngineGrid } from "./grid";
 import { normalizeMovePath, normalizeResizePath, sortGridItems } from "./utils";
 export class LayoutEngine {
     constructor(args) {
-        this.moves = [];
-        this.conflicts = new Set();
         this.chained = false;
         if (args instanceof LayoutEngine) {
             this.current = args.current;
-            this.grid = args.grid;
-            this.moves = args.moves;
-            this.conflicts = args.conflicts;
+            this.step = args.step;
             this.chained = true;
         }
         else {
             this.current = args;
-            this.grid = new LayoutEngineGrid(args.items, args.columns);
+            this.step = new LayoutEngineStepState(new LayoutEngineGrid(args.items, args.columns));
         }
     }
     move(moveCommand) {
@@ -27,76 +22,73 @@ export class LayoutEngine {
         const { itemId, path } = this.validateMoveCommand(moveCommand);
         for (let stepIndex = 0; stepIndex < path.length; stepIndex++) {
             const step = path[stepIndex];
-            const { width, height } = this.grid.getItem(itemId);
+            const { width, height } = this.step.grid.getItem(itemId);
             const move = { itemId, x: step.x, y: step.y, width, height, type: "MOVE" };
-            this.conflicts = findConflicts(move, this.grid);
-            resolveOverlaps(move, this.grid, this.moves, this.conflicts);
+            this.step = resolveOverlaps(move, this.step);
         }
         return new LayoutEngine(this);
     }
     resize(resize) {
         this.cleanup();
         const { itemId, path } = this.validateResizeCommand(resize);
-        const resizeTarget = this.grid.getItem(itemId);
+        const resizeTarget = this.step.grid.getItem(itemId);
         for (let stepIndex = 0; stepIndex < path.length; stepIndex++) {
             const width = path[stepIndex].x - resizeTarget.x;
             const height = path[stepIndex].y - resizeTarget.y;
-            resolveOverlaps({ itemId, x: resizeTarget.x, y: resizeTarget.y, width, height, type: "RESIZE" }, this.grid, this.moves, this.conflicts);
+            this.step = resolveOverlaps({ itemId, x: resizeTarget.x, y: resizeTarget.y, width, height, type: "RESIZE" }, this.step);
         }
         return new LayoutEngine(this);
     }
     insert({ itemId, width, height, path: [position, ...path] }) {
         this.cleanup();
-        resolveOverlaps({ itemId, ...position, width, height, type: "INSERT" }, this.grid, this.moves, this.conflicts);
+        this.step = resolveOverlaps({ itemId, ...position, width, height, type: "INSERT" }, this.step);
         return new LayoutEngine(this).move({ itemId, path });
     }
     remove(itemId) {
         this.cleanup();
-        const { x, y, width, height } = this.grid.getItem(itemId);
-        resolveOverlaps({ itemId, x, y, width, height, type: "REMOVE" }, this.grid, this.moves, this.conflicts);
+        const { x, y, width, height } = this.step.grid.getItem(itemId);
+        this.step = resolveOverlaps({ itemId, x, y, width, height, type: "REMOVE" }, this.step);
         return new LayoutEngine(this);
     }
     refloat() {
-        refloatGrid(this.grid, this.moves, this.conflicts);
+        this.step = refloatGrid(this.step);
         return new LayoutEngine(this);
     }
     getLayoutShift() {
         return {
             current: this.current,
             next: {
-                items: sortGridItems(this.grid.items.map((item) => ({ ...item }))),
-                columns: this.grid.width,
-                rows: this.grid.height,
+                items: sortGridItems(this.step.grid.items.map((item) => ({ ...item }))),
+                columns: this.step.grid.width,
+                rows: this.step.grid.height,
             },
-            moves: [...this.moves],
-            conflicts: [...this.conflicts],
+            moves: [...this.step.moves],
+            conflicts: [...this.step.conflicts],
         };
     }
     cleanup() {
         if (!this.chained) {
-            this.grid = new LayoutEngineGrid(this.current.items, this.current.columns);
-            this.moves = [];
-            this.conflicts = new Set();
+            this.step = new LayoutEngineStepState(new LayoutEngineGrid(this.current.items, this.current.columns));
         }
     }
     validateMoveCommand({ itemId, path }) {
-        const moveTarget = this.grid.getItem(itemId);
+        const moveTarget = this.step.grid.getItem(itemId);
         for (const step of path) {
-            if (step.x < 0 || step.y < 0 || step.x + moveTarget.width > this.grid.width) {
+            if (step.x < 0 || step.y < 0 || step.x + moveTarget.width > this.step.grid.width) {
                 throw new Error("Invalid move: outside grid.");
             }
         }
         return { itemId, path: normalizeMovePath(new Position({ x: moveTarget.x, y: moveTarget.y }), path) };
     }
     validateResizeCommand({ itemId, path }) {
-        const resizeTarget = this.grid.getItem(itemId);
+        const resizeTarget = this.step.grid.getItem(itemId);
         const x = resizeTarget.x + resizeTarget.width;
         const y = resizeTarget.y + resizeTarget.height;
         for (const step of path) {
             if (step.x < 1 || step.y < 1) {
                 throw new Error("Invalid resize: can't resize to 0.");
             }
-            if (step.x > this.grid.width) {
+            if (step.x > this.step.grid.width) {
                 throw new Error("Invalid resize: outside grid.");
             }
         }

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

@@ -6,11 +6,12 @@ export interface LayoutEngineItem extends GridLayoutItem, Rect {
     originalWidth: number;
     originalHeight: number;
 }
-export declare class LayoutEngineGrid {
-    private _width;
-    private _height;
-    private _items;
-    private layout;
+export declare class ReadonlyLayoutEngineGrid {
+    protected _width: number;
+    protected _height: number;
+    protected _items: Map<string, LayoutEngineItem>;
+    protected _layout: Set<ItemId>[][];
+    static clone(grid: ReadonlyLayoutEngineGrid): LayoutEngineGrid;
     constructor(items: readonly GridLayoutItem[], columns: number);
     get width(): number;
     get height(): number;
@@ -18,11 +19,13 @@ export declare class LayoutEngineGrid {
     getItem(itemId: ItemId): LayoutEngineItem;
     getCell(x: number, y: number): LayoutEngineItem[];
     getCellOverlap(x: number, y: number, itemId: ItemId): null | LayoutEngineItem;
+    protected makeNewRow(): void;
+}
+export declare class LayoutEngineGrid extends ReadonlyLayoutEngineGrid {
     move(itemId: ItemId, x: number, y: number, onOverlap?: (overlapId: ItemId) => void): void;
     resize(itemId: ItemId, width: number, height: number, onOverlap?: (overlapId: ItemId) => void): void;
     insert(item: GridLayoutItem, onOverlap: (overlapId: ItemId) => void): void;
     remove(itemId: ItemId): void;
     private removeLayoutItem;
     private insertLayoutItem;
-    private makeNewRow;
 }

package/internal/layout-engine/grid.js

@@ -1,10 +1,18 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { getItemRect } from "./utils";
-export class LayoutEngineGrid {
+export class ReadonlyLayoutEngineGrid {
+    static clone(grid) {
+        const clone = new LayoutEngineGrid([], 0);
+        clone._width = grid._width;
+        clone._height = grid._height;
+        clone._items = new Map([...grid._items].map(([k, v]) => [k, { ...v }]));
+        clone._layout = grid._layout.map((row) => row.map((set) => new Set([...set])));
+        return clone;
+    }
     constructor(items, columns) {
         this._items = new Map();
-        this.layout = [];
+        this._layout = [];
         this._width = columns;
         this._height = 0;
         for (const item of items) {
@@ -23,12 +31,12 @@ export class LayoutEngineGrid {
                 throw new Error("Invalid grid: items of invalid size.");
             }
             for (let y = item.y; y < item.y + item.height; y++) {
-                while (this.layout.length <= y) {
+                while (this._layout.length <= y) {
                     this.makeNewRow();
                 }
                 for (let x = item.x; x < item.x + item.width; x++) {
-                    this.layout[y][x].add(item.id);
-                    if (this.layout[y][x].size > 1) {
+                    this._layout[y][x].add(item.id);
+                    if (this._layout[y][x].size > 1) {
                         throw new Error("Invalid grid: items overlap.");
                     }
                 }
@@ -52,10 +60,10 @@ export class LayoutEngineGrid {
         return item;
     }
     getCell(x, y) {
-        if (!this.layout[y] || !this.layout[y][x]) {
+        if (!this._layout[y] || !this._layout[y][x]) {
             return [];
         }
-        return [...this.layout[y][x]].map((itemId) => this.getItem(itemId));
+        return [...this._layout[y][x]].map((itemId) => this.getItem(itemId));
     }
     getCellOverlap(x, y, itemId) {
         for (const item of this.getCell(x, y)) {
@@ -65,6 +73,12 @@ export class LayoutEngineGrid {
         }
         return null;
     }
+    makeNewRow() {
+        this._layout.push([...Array(this._width)].map(() => new Set()));
+        this._height = this._layout.length;
+    }
+}
+export class LayoutEngineGrid extends ReadonlyLayoutEngineGrid {
     move(itemId, x, y, onOverlap) {
         const moveTarget = this.getItem(itemId);
         this.removeLayoutItem(moveTarget);
@@ -97,14 +111,14 @@ export class LayoutEngineGrid {
             throw new Error("Inserting item has invalid size.");
         }
         for (let y = item.y; y < item.y + item.height; y++) {
-            while (this.layout.length <= y) {
+            while (this._layout.length <= y) {
                 this.makeNewRow();
             }
             for (let x = item.x; x < item.x + item.width; x++) {
-                for (const overlapId of this.layout[y][x]) {
+                for (const overlapId of this._layout[y][x]) {
                     onOverlap(overlapId);
                 }
-                this.layout[y][x].add(item.id);
+                this._layout[y][x].add(item.id);
             }
         }
     }
@@ -116,25 +130,21 @@ export class LayoutEngineGrid {
     removeLayoutItem(item) {
         for (let y = item.y; y < item.y + item.height; y++) {
             for (let x = item.x; x < item.x + item.width; x++) {
-                this.layout[y][x].delete(item.id);
+                this._layout[y][x].delete(item.id);
             }
         }
     }
     insertLayoutItem(item, onOverlap) {
         for (let y = item.y; y < item.y + item.height; y++) {
             for (let x = item.x; x < item.x + item.width; x++) {
-                while (!this.layout[y]) {
+                while (!this._layout[y]) {
                     this.makeNewRow();
                 }
-                for (const overlapId of this.layout[y][x]) {
+                for (const overlapId of this._layout[y][x]) {
                     onOverlap === null || onOverlap === void 0 ? void 0 : onOverlap(overlapId);
                 }
-                this.layout[y][x].add(item.id);
+                this._layout[y][x].add(item.id);
             }
         }
     }
-    makeNewRow() {
-        this.layout.push([...Array(this._width)].map(() => new Set()));
-        this._height = this.layout.length;
-    }
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "f7bedc987918e00ec55f49dfcf8109c1f03b2163"
+  "commit": "2398ed656ef60e2aa7e40000ab70f5dd6fb1783f"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/board-components",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/board-components.git"
@@ -40,4 +40,4 @@
     ]
   },
   "license": "Apache-2.0"
-}
+}

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

@@ -1,4 +0,0 @@
-import { ItemId } from "../interfaces";
-import { LayoutEngineGrid } from "./grid";
-import { CommittedMove } from "./interfaces";
-export declare function findConflicts(move: CommittedMove, grid: LayoutEngineGrid): Set<ItemId>;

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

@@ -1,53 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-// Find items that the active item cannot be moved over with the current move.
-export function findConflicts(move, grid) {
-    const conflicts = new Set();
-    const moveTarget = grid.getItem(move.itemId);
-    const direction = `${move.x - moveTarget.x}:${move.y - moveTarget.y}`;
-    switch (direction) {
-        case "-1:0": {
-            const left = Math.max(0, moveTarget.left - 1);
-            for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
-                const block = grid.getCellOverlap(left, y, moveTarget.id);
-                if (block && block.x < left) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        case "1:0": {
-            const right = Math.min(grid.width - 1, moveTarget.right + 1);
-            for (let y = moveTarget.y; y < moveTarget.y + moveTarget.height; y++) {
-                const block = grid.getCellOverlap(right, y, moveTarget.id);
-                if (block && block.x + block.width - 1 > right) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        case "0:-1": {
-            const top = Math.max(0, moveTarget.top - 1);
-            for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
-                const block = grid.getCellOverlap(x, top, moveTarget.id);
-                if (block && block.y < top) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        case "0:1": {
-            const bottom = moveTarget.bottom + 1;
-            for (let x = moveTarget.x; x < moveTarget.x + moveTarget.width; x++) {
-                const block = grid.getCellOverlap(x, bottom, moveTarget.id);
-                if (block && block.y + block.height - 1 > bottom) {
-                    conflicts.add(block.id);
-                }
-            }
-            break;
-        }
-        default:
-            throw new Error(`Invariant violation: unexpected direction ${direction}.`);
-    }
-    return conflicts;
-}