Visual

The base grid functionality in ixfx is agnostic to representation, but since this is a common-enough need, there’s an extended Type Grids.GridVisual . It has the limitation that each cell must be the same size, and be square.

type GridVisual = Grid & {
  size: number // Pixel size of a cell
}

For example, the following defines a 5x5 grid with each cell being 10x10 pixels.

const grid = { rows: 5, cols: 5, size: 10 }

Once you have a GridVisual there are some useful functions.

• Grids.rectangleForCell yields a rectangle ({x,y,width,height}) for a cell
• Grids.asRectangles yields rectangles ({x,y,width,height}) for all cells in a grid
• Grids.cellAtPoint yields the cell at pixel coordinate
• Grids.cellMiddle returns the visual midpoint of a cell