👹 Add gridController.compress() method and autoCompress prop (#69)

* demo

* Add compress method to grid controller

* update readme

Author: cuire

README.md

@@ -374,15 +374,16 @@ Setting `collision` prop to `compress` will compress items vertically towards th
 
 ### Grid props
 
-| prop      | description                                                                        | type                                | default |
-| --------- | ---------------------------------------------------------------------------------- | ----------------------------------- | ------- |
-| cols      | Grid columns count. If set to 0, grid will grow infinitly. Must be >= 0.           | number                              | 0       |
-| rows      | Grid rows count. If set to 0, grid will grow infinitly. Must be >= 0.              | number                              | 0       |
-| itemSize  | Size of the grid item. If not set, grid will calculate it based on container size. | { width?: number, height?: number } | {}      |
-| gap       | Gap between grid items.                                                            | number                              | 10      |
-| bounds    | Should grid items be bounded by the grid container.                                | boolean                             | false   |
-| readonly  | If true disables interaction with grid items.                                      | boolean                             | false   |
-| collision | Collision behavior of grid items. [About](#collision-behavior)                     | none \| push \| compress            | none    |
+| prop         | description                                                                                                            | type                                | default |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------- |
+| cols         | Grid columns count. If set to 0, grid will grow infinitly. Must be >= 0.                                               | number                              | 0       |
+| rows         | Grid rows count. If set to 0, grid will grow infinitly. Must be >= 0.                                                  | number                              | 0       |
+| itemSize     | Size of the grid item. If not set, grid will calculate it based on container size.                                     | { width?: number, height?: number } | {}      |
+| gap          | Gap between grid items.                                                                                                | number                              | 10      |
+| bounds       | Should grid items be bounded by the grid container.                                                                    | boolean                             | false   |
+| readonly     | If true disables interaction with grid items.                                                                          | boolean                             | false   |
+| collision    | Collision behavior of grid items. [About](#collision-behavior)                                                         | none \| push \| compress            | none    |
+| autoCompress | Auto compress the grid items when programmatically changing grid items. Only works with 'compress' collision strategy. | boolean                             | true    |
 
 > ⚠️ if `cols` or/and `rows` are set to 0, `itemSize.width` or/and `itemSize.height` must be setted.
 
@@ -519,6 +520,43 @@ Finds the first available position within the grid that can accommodate an item
 </Grid>
 ```
 
+#### compress()
+
+Compresses all items vertically towards the top into any available space.
+
+##### Example
+
+✨ [repl](https://svelte.dev/repl/79bcc70f11944d9e9b03970de731b3e2?version=4.2.11)
+
+```svelte
+<script lang="ts">
+	import Grid, { GridItem, type GridController } from 'svelte-grid-extended';
+
+	let items = [
+		{ id: '1', x: 0, y: 0, w: 2, h: 5 },
+		{ id: '2', x: 2, y: 2, w: 2, h: 2 }
+	];
+
+	let gridController: GridController;
+
+	function compressItems() {
+		gridController.compress();
+	}
+
+	const itemSize = { height: 40 };
+</script>
+
+<button class="btn" on:click={compressItems}>Compress Items</button>
+
+<Grid {itemSize} cols={10} collision="push" bind:controller={gridController}>
+	{#each items as item (item.id)}
+		<GridItem id={item.id} bind:x={item.x} bind:y={item.y} bind:w={item.w} bind:h={item.h}>
+			<div class="item">{item.id.slice(0, 5)}</div>
+		</GridItem>
+	{/each}
+</Grid>
+```
+
 ## 📜 License
 
 MIT

src/lib/Grid.svelte

@@ -26,7 +26,8 @@
 		LayoutItem,
 		LayoutChangeDetail,
 		GridParams,
-		Collision
+		Collision,
+		GridController as GridControllerType
 	} from './types';
 	import { writable, type Readable, type Writable } from 'svelte/store';
 
@@ -116,6 +117,13 @@
 	 */
 	export let collision: Collision = 'none';
 
+	/**
+	 * Auto compress the grid items when programmatically changing grid items.
+	 * Only works with 'compress' collision strategy.
+	 * @default true
+	 */
+	export let autoCompress = true;
+
 	let _cols: number;
 
 	let _rows: number;
@@ -175,6 +183,10 @@
 	 */
 	function updateGrid() {
 		items = items;
+
+		if (autoCompress && collision === 'compress') {
+			controller.compress();
+		}
 	}
 
 	onMount(() => {
@@ -209,12 +221,12 @@
 			throw new Error(`Item with id ${item.id} already exists`);
 		}
 		items[item.id] = item;
-		items = items;
+		updateGrid();
 	}
 
 	function unregisterItem(item: LayoutItem): void {
 		delete items[item.id];
-		items = items;
+		updateGrid();
 	}
 
 	const gridSettings = writable<GridParams>({
@@ -248,7 +260,7 @@
 		collision
 	}));
 
-	export const controller = new GridController($gridSettings);
+	export const controller: GridControllerType = new GridController($gridSettings);
 	$: controller.gridParams = $gridSettings;
 
 	setContext(GRID_CONTEXT_NAME, gridSettings);

src/lib/GridController.ts

@@ -1,5 +1,5 @@
-import { getAvailablePosition } from './utils/grid';
-import type { GridParams, GridController as GridControllerType } from './types';
+import { getAvailablePosition, hasCollisions } from './utils/grid';
+import type { GridParams, GridController as GridControllerType, LayoutItem } from './types';
 
 export class GridController implements GridControllerType {
 	gridParams: GridParams;
@@ -28,4 +28,31 @@ export class GridController implements GridControllerType {
 			maxRows
 		);
 	}
+
+	compress(): void {
+		this._compress(this.gridParams.items);
+	}
+
+	private _compress(items: Record<string, LayoutItem>): void {
+		const gridItems = Object.values(items);
+		const sortedItems = [...gridItems].sort((a, b) => a.y - b.y);
+
+		sortedItems.reduce((accItem, currentItem) => {
+			let newY = currentItem.y;
+			while (newY >= 0) {
+				if (hasCollisions({ ...currentItem, y: newY }, accItem)) {
+					break;
+				}
+				newY--;
+			}
+			if (newY !== currentItem.y - 1) {
+				currentItem.y = newY + 1;
+				currentItem.invalidate();
+			}
+			accItem.push(currentItem);
+			return accItem;
+		}, [] as LayoutItem[]);
+
+		this.gridParams.updateGrid();
+	}
 }

src/lib/GridItem.svelte

@@ -113,6 +113,7 @@
 	$: item.max = max;
 	$: item.movable = movable;
 	$: item.resizable = resizable;
+	$: item, invalidate();
 
 	/**
 	 * Updates svelte-components props behind that item. Should be called when the item
@@ -122,6 +123,7 @@
 		({ x, y, w, h } = item);
 		dispatch('change', { item });
 		$gridParams.dispatch('change', { item });
+		$gridParams.updateGrid();
 	}
 
 	onMount(() => {

src/lib/types.ts

@@ -73,4 +73,5 @@ export type Collision = 'none' | 'push' | 'compress';
 export type GridController = {
 	gridParams: GridParams;
 	getFirstAvailablePosition: (w: number, h: number) => Position | null;
+	compress: () => void;
 };

src/routes/examples/controller-compress/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Grid, { GridItem, type GridController } from '$lib';
+
+	let items = [
+		{ id: '1', x: 0, y: 0, w: 2, h: 5 },
+		{ id: '2', x: 2, y: 2, w: 2, h: 2 }
+	];
+
+	let gridController: GridController;
+
+	function compressItems() {
+		gridController.compress();
+	}
+
+	const itemSize = { height: 40 };
+</script>
+
+<button class="btn" on:click={compressItems}>Compress Items</button>
+
+<Grid {itemSize} cols={10} collision="push" bind:controller={gridController}>
+	{#each items as item (item.id)}
+		<GridItem id={item.id} bind:x={item.x} bind:y={item.y} bind:w={item.w} bind:h={item.h}>
+			<div class="item">{item.id.slice(0, 5)}</div>
+		</GridItem>
+	{/each}
+</Grid>
+
+<style>
+	.item {
+		display: grid;
+		place-items: center;
+		background-color: rgb(150, 150, 150);
+		width: 100%;
+		height: 100%;
+	}
+	.btn {
+		margin-top: 10px;
+		margin-left: 10px;
+		right: 2px;
+		top: 1px;
+	}
+</style>

src/routes/examples/gh-57/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Grid, { GridItem, type GridController } from '$lib';
+
+	let items = [
+		{ id: crypto.randomUUID(), x: 0, y: 0, w: 2, h: 5 },
+		{ id: crypto.randomUUID(), x: 2, y: 2, w: 2, h: 2 },
+		{ id: crypto.randomUUID(), x: 2, y: 0, w: 1, h: 2 },
+		{ id: crypto.randomUUID(), x: 3, y: 0, w: 2, h: 2 },
+		{ id: crypto.randomUUID(), x: 4, y: 2, w: 1, h: 3 },
+		{ id: crypto.randomUUID(), x: 8, y: 0, w: 2, h: 8 },
+		{ id: crypto.randomUUID(), x: 4, y: 5, w: 1, h: 1 },
+		{ id: crypto.randomUUID(), x: 2, y: 6, w: 3, h: 2 },
+		{ id: crypto.randomUUID(), x: 2, y: 4, w: 2, h: 2 }
+	];
+
+	type Collision = 'none' | 'push' | 'compress';
+
+	let collision: Collision = 'compress';
+
+	const itemsBackup = structuredClone(items);
+
+	const itemSize = { height: 40 };
+
+	function resetGrid() {
+		items = structuredClone(itemsBackup);
+	}
+
+	function remove(id: string) {
+		items = items.filter((i) => i.id !== id);
+	}
+
+	let gridController: GridController;
+
+	function addNewItem() {
+		const w = Math.floor(Math.random() * 2) + 1;
+		const h = Math.floor(Math.random() * 5) + 1;
+		const newPosition = gridController.getFirstAvailablePosition(w, h);
+		items = newPosition
+			? [...items, { id: crypto.randomUUID(), x: newPosition.x, y: newPosition.y, w, h }]
+			: items;
+	}
+
+	function moveAll() {
+		items = items.map((i) => ({ ...i, x: i.x, y: i.y + 1 }));
+	}
+</script>
+
+<button class="btn" on:click={addNewItem}>Add New Item</button>
+<button class="btn" on:click={resetGrid}>Reset Grid</button>
+<button class="btn" on:click={moveAll}>Move all</button>
+
+<button class="btn" on:click={() => (collision = 'none')}>No collision</button>
+<button class="btn" on:click={() => (collision = 'push')}>Push</button>
+<button class="btn" on:click={() => (collision = 'compress')}>Compress</button>
+
+<Grid {itemSize} cols={10} {collision} bind:controller={gridController}>
+	{#each items as item (item.id)}
+		<GridItem id={item.id} bind:x={item.x} bind:y={item.y} bind:w={item.w} bind:h={item.h}>
+			<button
+				on:pointerdown={(e) => e.stopPropagation()}
+				on:click={() => remove(item.id)}
+				class="remove"
+			>
+				✕
+			</button>
+			<div class="item">{item.id.slice(0, 5)}</div>
+		</GridItem>
+	{/each}
+</Grid>
+
+<style>
+	.item {
+		display: grid;
+		place-items: center;
+		background-color: rgb(150, 150, 150);
+		width: 100%;
+		height: 100%;
+	}
+	.remove {
+		cursor: pointer;
+		position: absolute;
+		right: 10px;
+		top: 3px;
+	}
+	.btn {
+		margin-top: 10px;
+		margin-left: 10px;
+		right: 2px;
+		top: 1px;
+	}
+</style>