This package is supposed to cut rectangular area into slices (smaller areas). Regions can be absolute or stack positioned. Stack can be horizontal or vertical. Units which used are:
px
pixels%
percentsfr
proportional sizing (exactlty like in CSS Grid standard)vw
,vh
,vmin
orvmax
for relative sizing- list of units is freely customizable
Config is an object describing a region. Example of the config:
{
justifyContent: 'space-evenly',
alignContent: 'space-evenly',
templateColumns: '[first] 20% [left] 20% [right] 20% [last]',
templateRows: '20% 20% 20%',
gap: '5%',
regions: {
first: {
column: 'left / last',
row: '2 / span 2',
},
second: {
column: 'left / span 1',
row: '1 / span 1',
shift: {
x: '3vmin',
y: 5
}
},
third: {
column: '1 / span 1',
row: '1 / span 1',
scale: 1.5
},
fourth: {
column: 'first / span 1',
row: '3 / span 1',
scale: {
x: 2,
y: 2.5
}
},
},
}
property | obligatory? | type | description |
---|---|---|---|
justifyContent | no | string | the same format as for CSS justify-content rule, except stretch start is default |
alignContent | no | string | the same format as for CSS align-content rule, except stretch start is default |
templateColumns | yes | string | the same format as for CSS grid-template-columns rule |
templateRows | yes | string | the same format as for CSS grid-template-rows rule |
gap | no | string | the same format as for CSS grid-gap rule |
regions | yes | object | Object with regions. Key is the name, value is object of this type:{column: string, row: string} where: column is the same as CSS grid-column rulerow is the same as CSS grid-row rule |
Given layout config is parsed into region tree. After that all regions become an array and all of them are calculated into finite rectangular objects.
import {
calculate,
GridLayoutConfig,
defaultAreaConstructor,
RectangledObject,
AlignRule
} from 'game-css-grid';
const layoutConfig: GridLayoutConfig = {
templateColumns: '[first] 20% [left] 60% [right] 20% [last]',
templateRows: '20% 60% 20%',
justifyContent: AlignRule.Center,
alignContent: AlignRule.Start,
regions: {
panel1: {
column: 'first / last',
row: '1 / span 1',
},
panel2: {
column: 'first / last',
row: '3 / span 1',
},
}
};
const layout: {
[index: string]: RectangledObject;
} = calculate(
this.game.world.bounds, layoutConfig, defaultAreaConstructor
);