Grid Management Functions in TypeScript

This documentation provides an overview of TypeScript functions for managing grid-based layouts. These functions offer utilities for mapping and sorting grid items, finding empty cells, and more.

Table of Contents

• mapGridItems
• calculateTotalGridRows
• findEmptyCells
• findPositionsForYxZBlocks
• mergeAndOrderBlocks
• mapCoordinates
• mapGrid

EXAMPLE OF A BLOCK

"block1": {
     "blockName": "ExampleBlockName",
     "displayDetails": {
        "rows": 2, 
        "cols": 6
     }
}

mapGridItems Function

The mapGridItems function maps a list of items to grid positions, considering item dimensions and available grid space. It takes the following parameters:

function mapGridItems(
    items: any[],
    TOTAL_COLS: number = 12,
    MIN_COLS: number = 4,
    paths: Paths = {
        cols: 'displayDetails.cols',
        rows: 'displayDetails.rows',
        name: 'blockName'
    }
): MapGridItemsResult {
    // Implementation...
}

This function returns a MapGridItemsResult object with two properties: mapped and occupied, which represent the mapped grid items and the occupied grid positions, respectively.

calculateTotalGridRows Function

The calculateTotalGridRows function calculates the total number of rows required for the grid based on the mapped grid items.

function calculateTotalGridRows(gridMap: GridItem[] = []): number {
    // Implementation...
}

It takes the gridMap as input, which is an array of GridItem objects representing the mapped grid items.

findEmptyCells Function

The findEmptyCells function identifies and returns a list of empty cells within the grid. It takes into account the total number of rows and columns and considers the occupied cells.

function findEmptyCells(cols: number = 12, rows: number, occupiedCells: OccupiedCell[] = []): OccupiedCell[] {
    // Implementation...
}

This function returns an array of OccupiedCell objects representing the coordinates of empty cells.

findPositionsForYxZBlocks Function

The findPositionsForYxZBlocks function finds positions within the grid suitable for inserting blocks of specific dimensions. It considers the available space and avoids collisions with occupied cells.

function findPositionsForYxZBlocks(
    cols: number,
    rows: number,
    occupiedCells: OccupiedCell[],
    consecutiveEmptyCells: number = 4,
    objectToInsert: GridItem = { w: 4, h: 1, item: null }
): GridItem[] {
    // Implementation...
}

It returns an array of GridItem objects representing the positions for blocks.

mergeAndOrderBlocks Function

The mergeAndOrderBlocks function merges grid positions and block positions and orders them by x-coordinate and then y-coordinate.

function mergeAndOrderBlocks(gridMap: GridItem[], blockPositions: GridItem[]): GridItem[] {
    // Implementation...
}

It takes two arrays, gridMap and blockPositions, and returns a sorted array of GridItem objects.

mapCoordinates Function

The mapCoordinates function maps a list of GridItem objects to a dictionary for easy retrieval.

function mapCoordinates(dataArray: GridItem[]): Record<string, string | null> {
    // Implementation...
}

It returns a dictionary where the keys represent the coordinates of grid items, and the values represent the associated item names.

mapGrid Function

The mapGrid function combines the functionality of the previous functions to map, sort, and organize grid items within a specified grid layout.

function mapGrid(items: any[], options: GridMapOptions = {
    totalCols: 12,
    minCols: 4,
    paths: {
        cols: 'displayDetails.cols',
        rows: 'displayDetails.rows',
        name: 'blockName'
    },
    replaceEmptyCells: false,
    emptyCellReplacement: { w: 4, h: 1, item: null }
}): Record<string, string | null> {
    // Implementation...
}

Example

const items = [
    {
        blockName: "Item A",
        displayDetails: {
            cols: 6,
            rows: 2,
        },
    },
    {
        blockName: "Item B",
        displayDetails: {
            cols: 4,
            rows: 1,
        },
    },
    {
        blockName: "Item C",
        displayDetails: {
            cols: 4,
            rows: 1,
        },
    },
    {
        blockName: "Item D",
        displayDetails: {
            cols: 6,
            rows: 1,
        },
    },
];

const mappedAndSorted = mapGrid(items);

console.log(mappedAndSorted);

// Output:
// {
//     "0_0_6_2": "Item A",
//     "6_0_4_1": "Item B",
//     "0_2_4_1": "Item C",
//     "0_2_4_1": "Item D"
// }

It returns a dictionary that maps grid positions to item names, providing an organized grid layout.

These TypeScript functions can be used to efficiently manage grid-based layouts in various applications.