Gap Grid

Generates list of boxes that will cover whole canvas, excepts defined gaps.

This library was originaly created for Backdrop. But it is abstract and has no requirements, so it can be used anywhere else. Let's see what it does:

It starts with a box (canvas) containing other boxes (gaps). Then it finds minimum number of boxes to fill out whole canvas around the gaps without overlaps.

How to use it

import GapGrid from '@fczbkk/gap-grid';

// create instance
var my_gap_grid = new GapGrid();

// set canvas box
my_gap_grid.setCanvas({left: 0, top: 0, width: 500, height: 500});

// add gap boxes
my_gap_grid.addGap({left: 100, top: 100, width: 100, height: 200});
my_gap_grid.addGap({left: 300, top: 200, width: 100, height: 200});

// get list of cover boxes
var cover_boxes = my_gap_grid.generate();

Documentation

Box

Object representing a Box.

Properties

• left number
• top number
• width number
• height number

GapGrid

Class representing a GapGrid.

constructor

Create a GapGrid object.

Parameters

• canvas [Box] Box representing the area which you want to cover.
• gaps [Array<Box>] List of Box objects representing areas which should not be covered.

setCanvas

Update the canvas.

Parameters

• canvas Box

clearGaps

Removes all the gap boxes.

addGaps

Adds multiple gaps at once.

Parameters

• gaps [Array<Box>](default [])

addGap

Add single gap.

Parameters

• gap Box

removeGaps

Remove multiple gaps at once.

Parameters

• gaps [Array<Box>](default [])

removeGap

Remove single gap.

Parameters

• gap Box

generate

Creates list of Box objects. They represent the minimum number of boxes that, if combined, will cover the whole area of canvas, without overlapping and without covering areas of gaps.

Returns Array<Box>

Bug reports, feature requests and contact

If you found any bugs, if you have feature requests or any questions, please, either file an issue at GitHub or send me an e-mail at riki@fczbkk.com.

License

Gap Grid is published under the MIT license.