Skip to content

FaberJS is an open-source platform-independent layouting engine capable of mimicking different CSS layouting paradigm(ex. CSS grids)

Notifications You must be signed in to change notification settings

priyanjitdey94/faberjs

 
 

Repository files navigation

FaberJS Build Status

FaberJS is an open-source layouting engine currently supporting CSS Grid like declarations. Unlike HTML element which can leverage the power of CSS for Grid layouts, objects like SVG or custom objects cannot do that. Hence this library tries to solve that problem. For example, we have an object storing drawing information like dimensions and styles and then for laying itself in a parent container, FaberJS can be used.

Introduction to CSS Grid

CSS Grid Layout is one of the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element's children (which become Grid Items).

For more details about CSS grids, refer to this awesome guide: https://css-tricks.com/snippets/css/complete-guide-grid/

Usage Guide

Installation

git clone [email protected]:fusioncharts/faberjs.git
npm install
npm start 

Define a Grid with template and items

const parent = {
    style: {
        display: 'grid',
        height: 400,
        width: 500,
        gridTemplateColumns: '100 100',
        gridTemplateRows: '100 100',
        justifyItems: 'center',
        alignItems: 'center',
        paddingStart: 10,
        paddingEnd: 10,
        paddingTop: 10,
        paddingBottom: 10,
    }
};
const children = [
    {
        style: {
            width: 100,
            height: 100,
            gridColumnStart: 1,
            gridColumnEnd: 2,
            gridRowStart: 1,
            gridRowEnd: 2
        }
    },
    {
        style: {
            width: 100,
            height: 100,
            gridColumnStart: 2,
            gridColumnEnd: 3,
            gridRowStart: 1,
            gridRowEnd: 2
        }
    },
    {
        style: {
            width: 100,
            height: 100,
            gridColumnStart: 1,
            gridColumnEnd: 2,
            gridRowStart: 2,
            gridRowEnd: 3
        }
    },
    {
        style: {
            width: 100,
            height: 100,
            gridColumnStart: 2,
            gridColumnEnd: 3,
            gridRowStart: 2,
            gridRowEnd: 3
        }
    }
];

Compute layout

const layout = computeLayout({
    ...parent,
    children
})

/*
    {
    ...

    "children": [
        {
            "style": {
                "x": 10,
                "y": 10,
                "x2": 110,
                "y2": 110,
                "width": 100,
                "height": 100
            }
        },
        {
            "style": {
                "x": 110,
                "y": 10,
                "x2": 210,
                "y2": 110,
                "width": 100,
                "height": 100
            }
        },
        {
            "style": {
                "x": 10,
                "y": 110,
                "x2": 110,
                "y2": 210,
                "width": 100,
                "height": 100
            }
        },
        {
            "style": {
                "x": 110,
                "y": 110,
                "x2": 210,
                "y2": 210,
                "width": 100,
                "height": 100
            }
        }
    ]
}
*/

Structure of input

{
    style: {
        height: required,
        width: required,
        display: grid,
        gridTemplateColumns: 'space speparated track sizes',
        gridTemplateRows: 'space speparated track sizes'
    },
    children: [] // Array of grid items which will be laid out
}

Structure of output

Each node will receive a layout object containing the following information.

{
    layout: {
        x,
        y,
        x2,
        y2,
        width,
        height
    },
}

Template with line names

gridTemplateColumns: '[col-1] 100 [col-2] 100'
gridTemplateRows: '[row-1] 100 [row-2] 100'

Alignments

Standard justification and alignment properties are supported, like justify-items, align-items, justify-self, align-self

Contribution Guide

Refer the CONTRIBUTING.md before starting any contribution.

About

FaberJS is an open-source platform-independent layouting engine capable of mimicking different CSS layouting paradigm(ex. CSS grids)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 96.2%
  • Shell 2.5%
  • HTML 1.3%