https://github.com/seanghay/gridboard

A library for building Grid & Spans on Canvas
https://github.com/seanghay/gridboard

canvas canvas-grid grid

Last synced: about 2 months ago
JSON representation

A library for building Grid & Spans on Canvas

• Host: GitHub
• URL: https://github.com/seanghay/gridboard
• Owner: seanghay
• License: mit
• Created: 2022-02-23T10:01:38.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-23T10:01:34.000Z (over 2 years ago)
• Last Synced: 2024-03-23T13:02:49.507Z (10 months ago)
• Topics: canvas, canvas-grid, grid
• Language: TypeScript
• Homepage: https://gridboard.netlify.app/
• Size: 479 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# Grid Board

A library for building Grid & Spans on Canvas

[![ci](https://github.com/seanghay/gridboard/actions/workflows/ci.yml/badge.svg)](https://github.com/seanghay/gridboard/actions/workflows/ci.yml)

[![Release](https://github.com/seanghay/gridboard/actions/workflows/release.yml/badge.svg)](https://github.com/seanghay/gridboard/actions/workflows/release.yml)

[![npm](https://img.shields.io/npm/v/@gridboard/core)](https://npmjs.com/package/@gridboard/core)



## Installation

```sh

# npm

npm i @gridboard/core

# pnpm

pnpm i @gridboard/core

# Yarn

yarn add @gridboard/core

```

### Browser

```html

import { renderGrid } from 'https://unpkg.com/@gridboard/core?module';

```

## Usage

[See example](https://github.com/seanghay/gridboard/tree/main/packages/web)

```js

renderGrid({

    width,

    height,

    gapSize: state.gridGap,

    gapEdge: false,

    spans: state.spans,

    rowSize: state.gridRowSize,

    columnSize: state.gridColumnSize,

    render({

      row, column,

      cellHeight,

      cellWidth,

      position,

      estimatedHeight,

      estimatedWidth,

      x,

      y

    }) {

      ctx.fillStyle = '#eee';

      ctx.fillRect(

        x,

        y,

        cellWidth,

        cellHeight

      );

    }

  });

  ```

  

## Spans

Spans look like this `0:4!0:5, 0:4!4:4` where `row:columnSpanSize!column:rowSpanSize` separated by commas `,`

## License

MIT