grid-map-2d v1.0.0

grid-map-2d

A basic library (TS/JS) that allows to create grids/maps with various useful functions to manipulate them.

• Installation
• Get started
  • Initialize the grid
  • Display functions
• Cell
• Get data
  • Get the number of columns of the map
  • Get the number of rows of the map
  • Get all column cells
  • Get all line cells
  • Get the map
  • Get a cell by identifier
  • Get cells by multiple identifiers
  • Get a cell by x and y position
  • Get cells by multiple positions
  • Get a cells by key in data
  • Get a cells by value in data
  • Get a diagonal of cells
  • Get a range of cells
• Set and reset data
  • Set all column data
  • Set all line data
  • Set the map with new data
  • Set cell data by identifier
  • Set multiple cells data by identifiers
  • Set cell data by x and y position
  • Set multiple cells data by positions
  • Set or update multiple cells data
• Update data
  • Update all column data
  • Update all line data
  • Update all map data
  • Update cell data by identifier
  • Update multiple cells data by identifiers
  • Update cell data by x and y position
  • Update multiple cells data by positions

Installation

# with npm
npm install grid-map-2d
# with yarn
yarn add grid-map-2d

Get started

import { OurGridMap } from 'grid-map-2d';

const myMap = new OurGridMap();
await myMap.initMap(3, 3);
myMap.printMap();

Map:
________________________________________________________________________________________________
| id: n6YL0LrYx9GMQBM_p6Hw9JqoE | id: bNKJreC5StdWO7mIdnKKOlWZg | id: MO0G1ZJjvQIzN6e7F5GQCvYhA  |
| x: 0                          | x: 0                          | x: 0                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________
| id: BfioRp78GWfbW1aHE9X8Ywlsj | id: 2fsK2-r4SLF-q2T6GgDp7lI7q | id: jVgz48XZbpsBj1ENj50lddR_N  |
| x: 1                          | x: 1                          | x: 1                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________
| id: ks9jPVDoHZ3wEGnFzEuBOUEWj | id: SywJhTs5KrpF5uU93tJeZBIY5 | id: vKqsZILPaPX1YQ_2IdRhFQ7Zp  |
| x: 2                          | x: 2                          | x: 2                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________

Initialize the grid

You can initialize the grid by passing it a number of rows and columns.

import { OurGridMap } from 'grid-map-2d';

const myMap = new OurGridMap();
await myMap.initMap(3, 3);

You can also pass it a array with pre-filled cells as a parameter.

import { OurGridMap } from 'grid-map-2d';

const myMap = new OurGridMap();
await myMap.initMap(
  3,
  3,
  [
    {
      data: {
        foo: 'foo',
      },
      x: 0,
      y: 0,
    },
    {
      data: {
        bar: 'bar',
      },
      x: 1,
      y: 1,
    },
  ],
);
myMap.printMap();

Map:
________________________________________________________________________________________________
| id: CJYXjnc7_snlrpdYfU6-LKgWv | id: BYo24dTj4f3dXjInW7hwdX7x1 | id: IOpsY6lhjL6wgkHD8HgE0adFb  |
| x: 0                          | x: 0                          | x: 0                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {"foo":"foo"}           | data: {}                      | data: {}                       |
________________________________________________________________________________________________
| id: mGSusN_koreYV1cHMa5wXeUa_ | id: gfexjURMBgNvuGN_vL_aaefq3 | id: V1zuzqK_ge6-Dm9gObVMDyG9n  |
| x: 1                          | x: 1                          | x: 1                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {"bar":"bar"}           | data: {}                       |
________________________________________________________________________________________________
| id: gOHscmxXUOXYQEiI_0ggkPf74 | id: bDdEcfCoBdE2-gYGHemiihEXR | id: lrWAxOjbhsBdviaa1LxDfq9y8  |
| x: 2                          | x: 2                          | x: 2                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________

Display functions

To help you visualize or debug you can display the map, a row or a column.

import { OurGridMap } from 'grid-map-2d';

const myMap = new OurGridMap();
await myMap.initMap(3, 3);

await myMap.printMap();
await myMap.printLine(0);
await myMap.printColumn(1);

Map:
________________________________________________________________________________________________
| id: HF3ZbYWZ3I-6Gip70ygwTLd9L | id: IOCBkHC0GuFrb9vlxWbuaDOvP | id: tYThW0VbP6mLpq4VE7GzCT-WF  |
| x: 0                          | x: 0                          | x: 0                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________
| id: IC9Y-R6dIrxoOhHhHY8m1z0UE | id: Oi1yYQ-Lw6quYVaQVb7yADBuB | id: UK5CTucLITGabh4aQZd0KFjOi  |
| x: 1                          | x: 1                          | x: 1                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________
| id: cSIabX1VXoDOxGqIhX6WH24n4 | id: eQFzx0230CwjuDOt4JblxQ2Cz | id: cRe8ijDdCK62HVQiPPPAa_X1v  |
| x: 2                          | x: 2                          | x: 2                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________

Line 0 :
________________________________________________________________________________________________
| id: HF3ZbYWZ3I-6Gip70ygwTLd9L | id: IOCBkHC0GuFrb9vlxWbuaDOvP | id: tYThW0VbP6mLpq4VE7GzCT-WF  |
| x: 0                          | x: 0                          | x: 0                           |
| y: 0                          | y: 1                          | y: 2                           |
| data: {}                      | data: {}                      | data: {}                       |
________________________________________________________________________________________________

Column 1 :
________________________________
| id: IOCBkHC0GuFrb9vlxWbuaDOvP  |
| x: 0                           |
| y: 1                           |
| data: {}                       |
________________________________
| id: Oi1yYQ-Lw6quYVaQVb7yADBuB  |
| x: 1                           |
| y: 1                           |
| data: {}                       |
________________________________
| id: eQFzx0230CwjuDOt4JblxQ2Cz  |
| x: 2                           |
| y: 1                           |
| data: {}                       |
________________________________

Cell

The grid consists of several cells (OurCell class) which you can manipulate with several functions.

import { OurGridMap } from 'grid-map-2d';

const myMap = new OurGridMap();
await myMap.initMap(3, 3);

const myCell = await myMap.getCellByPos(0, 0);

// Get cell identifier
myCell.getcellId();

// Get cell data
myCell.getData();

// Get `x` position of the cell
myCell.getX();

// Get `y` position of the cell
myCell.getY();

// Reset cell data
myCell.resetData();

// Set cell data
myCell.setData({foo: 'foo'});

// Update cell data
myCell.updateData({bar: 'bar'});

Get data

You can retrieve cells and other data in different ways.

Get the number of columns of the map

You can use getColumns to get the numbers of columns.

import { OurGridMap } from 'grid-map-2d';

const myMap = new OurGridMap();
await myMap.initMap(2, 3);

myMap.getColumns(); // Return 3

Get the number of rows of the map

You can use getLines to get the numbers of rows.

import { OurGridMap } from 'grid-map-2d';

const myMap = new OurGridMap();
await myMap.initMap(2, 3);

myMap.getLines(); // Return 2

Get all column cells

You can use getAllColumn to get all column cells.

// Get all cells of the second column
await myMap.getAllColumn(1);

Get all line cells

You can use getAllLine to get all row cells.

// Get all cells of the first row
await myMap.getAllLine(0);

Get the map

You can use getMap to get all the map.

// Get all the map
myMap.getMap();

Get a cell by identifier

You can use getCellById to get a cell by id.

const cell = await myMap.getCellById('cell-id');

// `cell` can be undefined if `cell-id` doesn't exist
if (cell) {
  // do something
}

Get cells by multiple identifiers

You can use getCellsByIds to get multiple cells by ids.

// Get an array of `OurCell`
const cells = await myMap.getCellsByIds(['cell-id1', 'cell-id2']);

Get a cell by x and y position

You can use getCellByPos to get a cell by position.

const cells = await myMap.getCellByPos(0, 0);

// `cell` can be undefined if position doesn't exist
if (cell) {
  // do something
}

Get cells by multiple positions

You can use getCellsByPositions to get multiple cells by positions.

// Get an array of `OurCell`
const cells = await myMap.getCellsByPositions([{x: 0, y: 0}, {x: 1, y: 0}]);

Get a cells by key in data

You can use getCellsByKeyInData to get a cells by an existing key in data.

const myMap = new OurGridMap();
await myMap.initMap(
  3,
  3,
  [
    {
      data: {
        foo: 'test',
      },
      x: 0,
      y: 0,
    },
    {
      data: {
        foo: 'test2',
      },
      x: 0,
      y: 1,
    },
    {
      data: {
        bar: 'test3',
      },
      x: 1,
      y: 1,
    },
  ],
);

// Get an array of `OurCell`
const cells = await myMap.getCellsByKeyInData('foo');

Get a cells by value in data

You can use getCellsByValueInData to get a cells by value in an existing key in data.

const myMap = new OurGridMap();
await myMap.initMap(
  3,
  3,
  [
    {
      data: {
        foo: 'test',
      },
      x: 0,
      y: 0,
    },
    {
      data: {
        foo: 'test2',
      },
      x: 0,
      y: 1,
    },
    {
      data: {
        foo: 'test2',
      },
      x: 1,
      y: 1,
    },
  ],
);

// Get an array of `OurCell`
const cells = await myMap.getCellsByValueInData('foo', 'test2');

Get a diagonal of cells

You can use getDiagonal to get a diagonal of cells.

const myMap = new OurGridMap();
await myMap.initMap(3, 3);

// Get an array of `OurCell` by passing positions of the first and last cell of the diagonal
let cells = await myMap.getDiagonal({x: 0, y: 0}, {x: 2, y: 2});

// Get an array of `OurCell` by passing id of the first and last cell of the diagonal
cells = await myMap.getDiagonal('cell-id1', 'cell-id2');

Get a range of cells

You can use getRange to get a range of cells.

const myMap = new OurGridMap();
await myMap.initMap(3, 3);

// Get an array of `OurCell` by passing positions of the first and last cell of the range
let cells = await myMap.getRange({x: 0, y: 0}, {x: 1, y: 1});

// Get an array of `OurCell` by passing id of the first and last cell of the range
cells = await myMap.getRange('cell-id1', 'cell-id2');

Set and reset data

set functions removes all old data and assigns new data.

Set all column data

You can use setAllColumnData to set a column with the same data.

// Set the second colum of the map with the same data
// Get an array of `OurCell` with all column cells
const cells = await myMap.setAllColumnData(1, {foo: 'foo'});

You can use resetAllColumnData to reset a column.

// Reset data of the second colum of the map
// Get an array of `OurCell` with all column cells
const cells = await myMap.resetAllColumnData(1);

Set all line data

You can use setAllLineData to set a row with the same data.

// Set the first row of the map with the same data
// Get an array of `OurCell` with all row cells
const cells = await myMap.setAllLineData(0, {foo: 'foo'});

You can use resetAllLineData to reset a row.

// Reset data of the first row of the map
// Get an array of `OurCell` with all row cells
const cells = await myMap.resetAllLineData(0);

Set the map with new data

You can use setAllMapData to set all map with the same data.

// Set the map with the same data
// Get the map (`OurMap`)
const maps = await myMap.setAllMapData({foo: 'foo'});

You can use resetAllMapData to reset all map.

// Reset the map with
// Get the map (`OurMap`)
const maps = await myMap.resetAllMapData();

You can also use setMap to set the map by a new map.

// Set the map by a new map
// Get the map (`OurMap`)
const maps = await myMap.setMap(
  [
    [
      {
        data: {},
        x: 0,
        y: 0,
      },
      {
        data: {
          foo: 'foo',
        },
        x: 0,
        y: 1,
      },
    ],
    [
      {
        data: {},
        x: 1,
        y: 0,
      },
      {
        data: {
          bar: 'bar',
        },
        x: 1,
        y: 1,
      },
    ],
  ]
);

Set cell data by identifier

You can use setCellDataById to set cell data by id.

// Set cell data by id
const cell = await myMap.setCellDataById('cell-id', {foo: 'foo'});

// `cell` can be undefined if `cell-id` doesn't exist
if (cell) {
  // do something
}

You can use resetCellDataById to reset cell data by id.

// Reset cell data by id
const cell = await myMap.resetCellDataById('cell-id');

// `cell` can be undefined if `cell-id` doesn't exist
if (cell) {
  // do something
}

Set multiple cells data by identifiers

You can use setMultipleCellsDataByIds to set with the same data multiple cells data.

// Set multiple cells data
// Get an array of `OurCell`
const cells = await myMap.setMultipleCellsDataByIds(['cell-id1', 'cell-id2'], {foo: 'foo'});

You can use resetMultipleCellsDataByIds to reset multiple cells data.

// Reset multiple cells data
// Get an array of `OurCell`
const cells = await myMap.resetMultipleCellsDataByIds(['cell-id1', 'cell-id2']);

Set cell data by x and y position

You can use setCellDataByPos to set cell data by position.

// Set cell data by position
const cell = await myMap.setCellDataByPos(0, 0, {foo: 'foo'});

// `cell` can be undefined if `cell-id` doesn't exist
if (cell) {
  // do something
}

You can use resetCellDataByPos to reset cell data by position.

// Reset cell data by position
const cell = await myMap.resetCellDataByPos(0, 0);

// `cell` can be undefined if `cell-id` doesn't exist
if (cell) {
  // do something
}

Set multiple cells data by positions

You can use setMultipleCellsDataByPos to set with the same data multiple cells data.

// Set multiple cells data
// Get an array of `OurCell`
const cells = await myMap.setMultipleCellsDataByPos([{x: 0, y: 0, x:2, y:0}], {foo: 'foo'});

You can use resetMultipleCellsDataByPos to reset multiple cells data by positions.

// Reset multiple cells data
// Get an array of `OurCell`
const cells = await myMap.resetMultipleCellsDataByPos([{x: 0, y: 0, x:2, y:0}]);

Set or update multiple cells data

You can use setOrUpdateMultipleCellsData to set or update specific cells with for specific data.

const myMap = new OurGridMap();
await myMap.initMap(
  2,
  2,
  [
    {
      data: {
        foo: 'foo',
      },
      x: 0,
      y: 0,
    },
    {
      data: {
        foo: 'foo',
      },
      x: 0,
      y: 1,
    },
    {
      data: {
        bar: 'bar',
      },
      x: 1,
      y: 0,
    },
    {
      data: {
        bar: 'bar',
      },
      x: 1,
      y: 1,
    },
  ],
);

// Set specific cells with specific data
// Get an array of `OurCell`
let cells = await mapTest.setOrUpdateMultipleCellsData(
  [
    {x: 0, y: 0, data: {test: 'test'}},
    {cellId: 'cell-id1', data: {test: 'test'}},
  ],
  'set',
);

// Update specific cells with specific data
// Get an array of `OurCell`
cells = await mapTest.setOrUpdateMultipleCellsData(
  [
    {cellId: 'cell-id1', data: {test2: 'test2'}},
    {x: 0, y: 0, data: {test: 'test2'}},
  ],
  'update',
);

Update data

update functions can add and update data.

Update all column data

You can use updateAllColumnData to update a column with the same data.

// Update the second colum of the map with the same data
// Get an array of `OurCell` with all column cells
const cells = await myMap.updateAllColumnData(1, {foo: 'foo'});

Update all line data

You can use updateAllLineData to update a row with the same data.

// Update the first row of the map with the same data
// Get an array of `OurCell` with all row cells
const cells = await myMap.updateAllLineData(0, {foo: 'foo'});

Update all map data

You can use updateAllMapData to update the map with the same data.

// Update the the map with the same data
// Get the map (`OurMap`)
const cells = await myMap.updateAllMapData({foo: 'foo'});

Update cell data by identifier

You can use updateCellDataById to update cell data by id.

// Update cell data
const cell = await myMap.updateCellDataById('cell-id1', {foo: 'foo'});

// `cell` can be undefined if `cell-id` doesn't exist
if (cell) {
  // do something
}

Update multiple cells data by identifiers

You can use updateMultipleCellsDataByIds to update with the same data multiple cells data.

// Update multiple cells data
// Get an array of `OurCell`
const cells = await myMap.updateMultipleCellsDataByIds(['cell-id1', 'cell-id2'], {foo: 'foo'});

Update cell data by x and y position

You can use updateCellDataByPos to update cell data by position.

// Update cell data
const cell = await myMap.updateCellDataByPos(0, 0, {foo: 'foo'});

// `cell` can be undefined if `cell-id` doesn't exist
if (cell) {
  // do something
}

Update multiple cells data by positions

You can use updateMultipleCellsDataByPos to update with the same data multiple cells data.

// Update multiple cells data
// Get an array of `OurCell`
const cells = await myMap.updateMultipleCellsDataByPos([{x: 0, y: 0}, {x: 1, y: 1}], {foo: 'foo'});