grid-template-parser
Advanced tools
Comparing version 0.1.0 to 0.2.0
@@ -9,5 +9,6 @@ 'use strict'; | ||
var find = function find(compare, direction, extremum, grid) { | ||
return compare.apply(undefined, _toConsumableArray(Object.keys(grid).map(function (cell) { | ||
return grid[cell][direction][extremum]; | ||
var find = function find(fn, direction, extremum, _ref) { | ||
var areas = _ref.areas; | ||
return fn.apply(undefined, _toConsumableArray(Object.keys(areas).map(function (cell) { | ||
return areas[cell][direction][extremum]; | ||
}))); | ||
@@ -46,10 +47,2 @@ }; | ||
return find(Math.max, 'row', 'end', grid); | ||
}; | ||
var width = exports.width = function width(grid) { | ||
return maxColumnEnd(grid) - 1; | ||
}; | ||
var height = exports.height = function height(grid) { | ||
return maxRowEnd(grid) - 1; | ||
}; |
@@ -49,3 +49,9 @@ 'use strict'; | ||
var grid = exports.grid = function grid(template) { | ||
return template.split(separator).reduce(reduceRow, []).reduce(reduceGrid, {}); | ||
var rows = template.split(separator).reduce(reduceRow, []); | ||
var width = rows[0].length; | ||
var height = rows.length; | ||
var areas = rows.reduce(reduceGrid, {}); | ||
return { width: width, height: height, areas: areas }; | ||
}; |
@@ -89,14 +89,2 @@ 'use strict'; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'width', { | ||
enumerable: true, | ||
get: function get() { | ||
return _bounds.width; | ||
} | ||
}); | ||
Object.defineProperty(exports, 'height', { | ||
enumerable: true, | ||
get: function get() { | ||
return _bounds.height; | ||
} | ||
}); |
@@ -6,18 +6,7 @@ 'use strict'; | ||
}); | ||
exports.template = undefined; | ||
var _bounds = require('./bounds'); | ||
var matchingArea = function matchingArea(grid, r, c) { | ||
return function (cell) { | ||
return grid[cell].row.start <= r + 1 && grid[cell].row.end > r + 1 && grid[cell].column.start <= c + 1 && grid[cell].column.end > c + 1; | ||
}; | ||
}; | ||
var defaultTemplate = function defaultTemplate(grid) { | ||
var w = (0, _bounds.width)(grid); | ||
var h = (0, _bounds.height)(grid); | ||
return Array.from({ length: h }, function () { | ||
return Array.from({ length: w }, function () { | ||
var defaultTemplate = function defaultTemplate(width, height) { | ||
return Array.from({ length: height }, function () { | ||
return Array.from({ length: width }, function () { | ||
return '.'; | ||
@@ -28,8 +17,17 @@ }); | ||
var template = exports.template = function template(grid) { | ||
return defaultTemplate(grid).reduce(function (acc, row, r, rows) { | ||
var matchingArea = function matchingArea(areas, r, c) { | ||
return function (cell) { | ||
return areas[cell].row.start <= r + 1 && areas[cell].row.end > r + 1 && areas[cell].column.start <= c + 1 && areas[cell].column.end > c + 1; | ||
}; | ||
}; | ||
var template = exports.template = function template(_ref) { | ||
var width = _ref.width, | ||
height = _ref.height, | ||
areas = _ref.areas; | ||
return defaultTemplate(width, height).reduce(function (acc, row, r, rows) { | ||
var separator = r < rows.length - 1 ? '\n' : ''; | ||
var line = row.reduce(function (acc, cell, c, cells) { | ||
var separator = c < cells.length - 1 ? ' ' : ''; | ||
var area = Object.keys(grid).find(matchingArea(grid, r, c)); | ||
var area = Object.keys(areas).find(matchingArea(areas, r, c)); | ||
@@ -36,0 +34,0 @@ return '' + acc + (typeof area === 'string' ? area : cell) + separator; |
{ | ||
"name": "grid-template-parser", | ||
"version": "0.1.0", | ||
"version": "0.2.0", | ||
"description": "A simple CSS Grid template parser", | ||
@@ -15,2 +15,4 @@ "main": "lib/index.js", | ||
"lint:flow": "flow check || exit 0", | ||
"preversion": "npm test", | ||
"postversion": "git push && git push --tags", | ||
"prepublish": "npm run lint && npm test && npm run build", | ||
@@ -17,0 +19,0 @@ "postpublish": "npm run clean" |
515
README.md
@@ -13,2 +13,4 @@ # grid-template-parser [![Build Status](https://travis-ci.org/anthonydugois/grid-template-parser.svg?branch=master)](https://travis-ci.org/anthonydugois/grid-template-parser) | ||
### Parse a grid template | ||
```js | ||
@@ -25,23 +27,508 @@ import {grid} from 'grid-template-parser'; | ||
// → { | ||
// a: { | ||
// column: { start: 1, end: 4, span: 3 }, | ||
// row: { start: 1, end: 3, span: 2 }, | ||
// width: 5, | ||
// height: 4, | ||
// areas: { | ||
// a: { | ||
// column: {start: 1, end: 4, span: 3}, | ||
// row: {start: 1, end: 3, span: 2}, | ||
// }, | ||
// b: { | ||
// column: {start: 4, end: 6, span: 2}, | ||
// row: {start: 1, end: 3, span: 2}, | ||
// }, | ||
// c: { | ||
// column: {start: 3, end: 6, span: 3}, | ||
// row: {start: 3, end: 4, span: 1}, | ||
// }, | ||
// d: { | ||
// column: {start: 1, end: 6, span: 5}, | ||
// row: {start: 4, end: 5, span: 1}, | ||
// }, | ||
// }, | ||
// b: { | ||
// column: { start: 4, end: 6, span: 2 }, | ||
// row: { start: 1, end: 3, span: 2 }, | ||
// } | ||
``` | ||
### Build a grid template | ||
```js | ||
import {template} from 'grid-template-parser'; | ||
const areas = template({ | ||
width: 5, | ||
height: 4, | ||
areas: { | ||
a: { | ||
column: {start: 1, end: 4, span: 3}, | ||
row: {start: 1, end: 3, span: 2}, | ||
}, | ||
b: { | ||
column: {start: 3, end: 6, span: 3}, | ||
row: {start: 3, end: 5, span: 2}, | ||
}, | ||
}, | ||
}); | ||
// → `"a a a . ." | ||
// "a a a . ." | ||
// ". . b b b" | ||
// ". . b b b"` | ||
``` | ||
An helper is provided to declare areas more intuitively. The following example is equivalent to the previous: | ||
```js | ||
import {template, area} from 'grid-template-parser'; | ||
const a = area({ | ||
x: 0, | ||
y: 0, | ||
width: 3, | ||
height: 2, | ||
}); | ||
const b = area({ | ||
x: 2, | ||
y: 2, | ||
width: 3, | ||
height: 2, | ||
}); | ||
const areas = template({ | ||
width: 5, | ||
height: 4, | ||
areas: {a, b}, | ||
}); | ||
// → `"a a a . ." | ||
// "a a a . ." | ||
// ". . b b b" | ||
// ". . b b b"` | ||
``` | ||
## API | ||
### `grid(template)` | ||
Parses a grid template and returns an object representation. | ||
#### Arguments | ||
1. `template` *string* The grid template to parse. | ||
#### Returns | ||
*[Grid](#grid)* An object representation of the grid template. | ||
#### Example | ||
```js | ||
import {grid} from 'grid-template-parser'; | ||
const areas = grid(` | ||
"a a a b b" | ||
"a a a b b" | ||
". . c c c" | ||
"d d d d d" | ||
`); | ||
// → { | ||
// width: 5, | ||
// height: 4, | ||
// areas: { | ||
// a: { | ||
// column: {start: 1, end: 4, span: 3}, | ||
// row: {start: 1, end: 3, span: 2}, | ||
// }, | ||
// b: { | ||
// column: {start: 4, end: 6, span: 2}, | ||
// row: {start: 1, end: 3, span: 2}, | ||
// }, | ||
// c: { | ||
// column: {start: 3, end: 6, span: 3}, | ||
// row: {start: 3, end: 4, span: 1}, | ||
// }, | ||
// d: { | ||
// column: {start: 1, end: 6, span: 5}, | ||
// row: {start: 4, end: 5, span: 1}, | ||
// }, | ||
// }, | ||
// c: { | ||
// column: { start: 3, end: 6, span: 3 }, | ||
// row: { start: 3, end: 4, span: 1 }, | ||
// }, | ||
// d: { | ||
// column: { start: 1, end: 6, span: 5 }, | ||
// row: { start: 4, end: 5, span: 1 }, | ||
// }, | ||
// } | ||
``` | ||
--- | ||
### `template(grid)` | ||
Builds a grid template from an object representation. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to build. | ||
#### Returns | ||
*string* The equivalent grid template. | ||
#### Example | ||
```js | ||
import {template} from 'grid-template-parser'; | ||
const areas = template({ | ||
width: 5, | ||
height: 4, | ||
areas: { | ||
a: { | ||
column: {start: 1, end: 4, span: 3}, | ||
row: {start: 1, end: 3, span: 2}, | ||
}, | ||
b: { | ||
column: {start: 3, end: 6, span: 3}, | ||
row: {start: 3, end: 5, span: 2}, | ||
}, | ||
}, | ||
}); | ||
// → `"a a a . ." | ||
// "a a a . ." | ||
// ". . b b b" | ||
// ". . b b b"` | ||
``` | ||
--- | ||
### `rect(area)` | ||
Converts an area into a rect. | ||
#### Arguments | ||
1. `area` *[Area](#area)* The area to convert. | ||
#### Returns | ||
*[Rect](#rect)* The equivalent rect. | ||
#### Example | ||
```js | ||
import {rect} from 'grid-template-parser'; | ||
const r = rect({ | ||
column: {start: 1, end: 4, span: 3}, | ||
row: {start: 1, end: 3, span: 2}, | ||
}); | ||
// → { | ||
// x: 0, | ||
// y: 0, | ||
// width: 3, | ||
// height: 2, | ||
// } | ||
``` | ||
--- | ||
### `area(rect)` | ||
Converts a rect into an area. | ||
#### Arguments | ||
1. `rect` *[Rect](#rect)* The rect to convert. | ||
#### Returns | ||
*[Area](#area)* The equivalent area. | ||
#### Example | ||
```js | ||
import {area} from 'grid-template-parser'; | ||
const a = area({ | ||
x: 0, | ||
y: 0, | ||
width: 3, | ||
height: 2, | ||
}); | ||
// → { | ||
// column: {start: 1, end: 4, span: 3}, | ||
// row: {start: 1, end: 3, span: 2}, | ||
// } | ||
``` | ||
--- | ||
### `minColumnStart(grid)` | ||
Finds the min column start of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The min column start. | ||
#### Example | ||
```js | ||
import {grid, minColumnStart} from 'grid-template-parser'; | ||
const min = minColumnStart(grid(` | ||
". . a a a" | ||
". b b b b" | ||
". . . c c" | ||
`)); | ||
// → 2 | ||
``` | ||
--- | ||
### `maxColumnStart(grid)` | ||
Finds the max column start of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The max column start. | ||
#### Example | ||
```js | ||
import {grid, maxColumnStart} from 'grid-template-parser'; | ||
const max = maxColumnStart(grid(` | ||
". . a a a" | ||
". b b b b" | ||
". . . c c" | ||
`)); | ||
// → 4 | ||
``` | ||
--- | ||
### `minColumnEnd(grid)` | ||
Finds the min column end of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The min column end. | ||
#### Example | ||
```js | ||
import {grid, minColumnEnd} from 'grid-template-parser'; | ||
const min = minColumnEnd(grid(` | ||
"a a . . ." | ||
"b b b b ." | ||
"c c c . ." | ||
`)); | ||
// → 3 | ||
``` | ||
--- | ||
### `maxColumnEnd(grid)` | ||
Finds the max column end of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The max column end. | ||
#### Example | ||
```js | ||
import {grid, maxColumnEnd} from 'grid-template-parser'; | ||
const max = maxColumnEnd(grid(` | ||
"a a . . ." | ||
"b b b b ." | ||
"c c c . ." | ||
`)); | ||
// → 5 | ||
``` | ||
--- | ||
### `minRowStart(grid)` | ||
Finds the min row start of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The min row start. | ||
#### Example | ||
```js | ||
import {grid, minRowStart} from 'grid-template-parser'; | ||
const min = minRowStart(grid(` | ||
". . . ." | ||
"a a . ." | ||
"a a b b" | ||
"a a b b" | ||
`)); | ||
// → 2 | ||
``` | ||
--- | ||
### `maxRowStart(grid)` | ||
Finds the max row start of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The max row start. | ||
#### Example | ||
```js | ||
import {grid, maxRowStart} from 'grid-template-parser'; | ||
const max = maxRowStart(grid(` | ||
". . . ." | ||
"a a . ." | ||
"a a b b" | ||
"a a b b" | ||
`)); | ||
// → 3 | ||
``` | ||
--- | ||
### `minRowEnd(grid)` | ||
Finds the min row end of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The min row end. | ||
#### Example | ||
```js | ||
import {grid, minRowEnd} from 'grid-template-parser'; | ||
const min = minRowEnd(grid(` | ||
"a a b b" | ||
"a a b b" | ||
". . b b" | ||
". . . ." | ||
`)); | ||
// → 3 | ||
``` | ||
--- | ||
### `maxRowEnd(grid)` | ||
Finds the max row end of all grid areas. | ||
#### Arguments | ||
1. `grid` *[Grid](#grid)* The grid to analyze. | ||
#### Returns | ||
*number* The max row end. | ||
#### Example | ||
```js | ||
import {grid, maxRowEnd} from 'grid-template-parser'; | ||
const max = maxRowEnd(grid(` | ||
"a a b b" | ||
"a a b b" | ||
". . b b" | ||
". . . ." | ||
`)); | ||
// → 4 | ||
``` | ||
## Types | ||
### `Track` | ||
```js | ||
type Track = { | ||
start: number, | ||
end: number, | ||
span: number, | ||
}; | ||
``` | ||
### `Area` | ||
```js | ||
type Area = { | ||
row: Track, | ||
column: Track, | ||
}; | ||
``` | ||
### `Rect` | ||
```js | ||
type Rect = { | ||
x: number, | ||
y: number, | ||
width: number, | ||
height: number, | ||
}; | ||
``` | ||
### `Grid` | ||
```js | ||
type Grid = { | ||
width: number, | ||
height: number, | ||
areas: {[key: string]: Area}, | ||
}; | ||
``` | ||
## License | ||
MIT |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
17255
533
222