Skip to content

grid-layout is a layout engine which implements grid, can used in canvas/node-canvas

Notifications You must be signed in to change notification settings

welefen/grid-layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jun 4, 2020
268c799 · Jun 4, 2020
Jun 4, 2020
Jun 4, 2020
Apr 27, 2020
Apr 27, 2020
Mar 30, 2020
Mar 31, 2020
Mar 31, 2020
Apr 27, 2020
Jun 4, 2020
Dec 31, 2019
Apr 27, 2020

Repository files navigation

grid-layout

grid-layout is a layout engine which implements grid, can use in canvas/node-canvas.

it's support most of features from https://www.w3.org/TR/css-grid-1/ except direction/writing-mode styles.

Install

npm i @welefen/grid-layout

Usage

<script src="https://unpkg.com/@welefen/grid-layout/dist/gridLayout.js"></script>
<script>
const { Container, Node } = GridLayout;
</script>
import { Container, Node } from '@welefen/grid-layout';
const container = new Container({ // containerOptions
  width: 500,
  height: 500
});
[
  { width: 100, height: 100 },
  { width: 100, height: 100 }
].forEach(item => {
  const node = new Node(item); // nodeOptions
  container.appendChild(node);
});
container.calculateLayout();
const result = container.getAllComputedLayout();
// result is
/**
 * {
 *  top: 0
    left: 0
    width: 500
    height: 500,
    children: [{
      top: 0,
      left: 0,
      width: 100,
      height: 100
    }, ...]
 * }
 * /

containerOptions

{
  gridAutoFlow?: string;
  gridAutoColumns?: string;
  gridAutoRows?: string;
  gridColumnGap?: StringOrNumber;
  gridRowGap?: StringOrNumber;
  gridTemplateAreas?: string | string[][];
  gridTemplateRows?: string;
  gridTemplateColumns?: string;
  width: number;
  height: number;
  alignItems?: SelfAlignment;
  justifyItems?: SelfAlignment;
  alignContent?: ContentAlignment;
  justifyContent?: ContentAlignment;
}
type SelfAlignment = 'stretch' | 'center' | 'start' | 'end' | 'auto';
type ContentAlignment = 'stretch' | 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
type StringOrNumber = string | number;

gridTemplateAreas config

// string
{
  gridTemplateAreas: `"a b c"
                      "d e f"`
}

// array
{
  gridTemplateAreas: [['a', 'b', 'c'],
                      ['d', 'e', 'f']]
}

nodeOptions

{
  gridArea?: string;
  gridColumnEnd?: StringOrNumber;
  gridColumnStart?: StringOrNumber;
  gridRowEnd?: StringOrNumber;
  gridRowStart?: StringOrNumber;
  alignSelf?: SelfAlignment;
  justifySelf?: SelfAlignment;
  paddingTop?: StringOrNumber;
  paddingRight?: StringOrNumber;
  paddingBottom?: StringOrNumber;
  paddingLeft?: StringOrNumber;
  padding?: any;
  marginTop?: StringOrNumber;
  marginRight?: StringOrNumber;
  marginBottom?: StringOrNumber;
  marginLeft?: StringOrNumber;
  margin?: StringOrNumber;
  borderTop?: StringOrNumber;
  borderRight?: StringOrNumber;
  borderBottom?: StringOrNumber;
  borderLeft?: StringOrNumber;
  border?: any;
  width?: StringOrNumber;
  height?: StringOrNumber;
  boxSizing?: string;
  order?: number;
  minWidth?: StringOrNumber;
  maxWidth?: StringOrNumber;
  minHeight?: StringOrNumber;
  maxHeight?: StringOrNumber;
  minContentWidth?: StringOrNumber;
  minContentHeight?: StringOrNumber;
  maxContentWidth?: StringOrNumber;
  maxContentHeight?: StringOrNumber;
}

Playground

git clone [email protected]:welefen/grid-layout.git;
npm i;
npm run build;
cd web;
npm i;
npm start;
# then visit http://127.0.0.1:8080/

online playground: https://welefen.com/lab/gridLayout/

About

grid-layout is a layout engine which implements grid, can used in canvas/node-canvas

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published