Generates list of boxes that will cover whole canvas, excepts defined gaps.
npm install @fczbkk/gap-gridGenerates 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.
``javascript
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();
`
Object representing a Box.
Properties
- left number top
- number width
- number height
- number
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.
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.
Gap Grid is published under the MIT license.