{"id":19185713,"url":"https://github.com/fusioncharts/faberjs","last_synced_at":"2025-05-08T01:16:07.216Z","repository":{"id":80458513,"uuid":"197753017","full_name":"fusioncharts/faberjs","owner":"fusioncharts","description":"FaberJS is an open-source platform-independent layouting engine capable of mimicking different CSS layouting paradigm(ex. CSS grids)","archived":false,"fork":false,"pushed_at":"2020-04-16T10:13:59.000Z","size":550,"stargazers_count":34,"open_issues_count":4,"forks_count":8,"subscribers_count":4,"default_branch":"develop","last_synced_at":"2025-05-08T01:16:01.722Z","etag":null,"topics":["canvas","css","css-grid","css-grid-layout","css-grids","grid-layouts","js-layouts","layout","layout-algorithm","layout-engine","svg-layout","svg-layout-manager"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fusioncharts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-07-19T10:24:33.000Z","updated_at":"2024-11-29T13:43:49.000Z","dependencies_parsed_at":"2023-04-05T13:07:33.130Z","dependency_job_id":null,"html_url":"https://github.com/fusioncharts/faberjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffaberjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffaberjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffaberjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffaberjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fusioncharts","download_url":"https://codeload.github.com/fusioncharts/faberjs/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252978810,"owners_count":21834920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","css","css-grid","css-grid-layout","css-grids","grid-layouts","js-layouts","layout","layout-algorithm","layout-engine","svg-layout","svg-layout-manager"],"created_at":"2024-11-09T11:11:39.432Z","updated_at":"2025-05-08T01:16:07.193Z","avatar_url":"https://github.com/fusioncharts.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FaberJS [![Build Status](https://travis-ci.org/fusioncharts/faberjs.svg?branch=develop)](https://travis-ci.org/fusioncharts/faberjs)\n\nFaberJS 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.\nFor 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.\n\n## Introduction to CSS Grid\nCSS 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).\n\nFor more details about CSS grids, refer to this awesome guide:\nhttps://css-tricks.com/snippets/css/complete-guide-grid/\n\n## Usage Guide\n\n### Installation\n\n\n```bash\ngit clone git@github.com:fusioncharts/faberjs.git\nnpm install\nnpm start \n```\n\n**Define a Grid with template and items**\n```js\nconst parent = {\n    style: {\n        display: 'grid',\n        height: 400,\n        width: 500,\n        gridTemplateColumns: '100 100',\n        gridTemplateRows: '100 100',\n        justifyItems: 'center',\n        alignItems: 'center',\n        paddingStart: 10,\n        paddingEnd: 10,\n        paddingTop: 10,\n        paddingBottom: 10,\n    }\n};\nconst children = [\n    {\n        style: {\n            width: 100,\n            height: 100,\n            gridColumnStart: 1,\n            gridColumnEnd: 2,\n            gridRowStart: 1,\n            gridRowEnd: 2\n        }\n    },\n    {\n        style: {\n            width: 100,\n            height: 100,\n            gridColumnStart: 2,\n            gridColumnEnd: 3,\n            gridRowStart: 1,\n            gridRowEnd: 2\n        }\n    },\n    {\n        style: {\n            width: 100,\n            height: 100,\n            gridColumnStart: 1,\n            gridColumnEnd: 2,\n            gridRowStart: 2,\n            gridRowEnd: 3\n        }\n    },\n    {\n        style: {\n            width: 100,\n            height: 100,\n            gridColumnStart: 2,\n            gridColumnEnd: 3,\n            gridRowStart: 2,\n            gridRowEnd: 3\n        }\n    }\n];\n```\n**Compute layout**\n```js\nconst layout = computeLayout({\n    ...parent,\n    children\n})\n\n/*\n    {\n    ...\n\n    \"children\": [\n        {\n            \"style\": {\n                \"x\": 10,\n                \"y\": 10,\n                \"x2\": 110,\n                \"y2\": 110,\n                \"width\": 100,\n                \"height\": 100\n            }\n        },\n        {\n            \"style\": {\n                \"x\": 110,\n                \"y\": 10,\n                \"x2\": 210,\n                \"y2\": 110,\n                \"width\": 100,\n                \"height\": 100\n            }\n        },\n        {\n            \"style\": {\n                \"x\": 10,\n                \"y\": 110,\n                \"x2\": 110,\n                \"y2\": 210,\n                \"width\": 100,\n                \"height\": 100\n            }\n        },\n        {\n            \"style\": {\n                \"x\": 110,\n                \"y\": 110,\n                \"x2\": 210,\n                \"y2\": 210,\n                \"width\": 100,\n                \"height\": 100\n            }\n        }\n    ]\n}\n*/\n```\n\n### Structure of input\n```js\n{\n    style: {\n        height: required,\n        width: required,\n        display: grid,\n        gridTemplateColumns: 'space speparated track sizes',\n        gridTemplateRows: 'space speparated track sizes'\n    },\n    children: [] // Array of grid items which will be laid out\n}\n```\n\n### Structure of output\nEach node will receive a layout object containing the following information.\n```js\n{\n    layout: {\n        x,\n        y,\n        x2,\n        y2,\n        width,\n        height\n    },\n}\n```\n\n### Template with line names\n\n```\ngridTemplateColumns: '[col-1] 100 [col-2] 100'\ngridTemplateRows: '[row-1] 100 [row-2] 100'\n```\n\n### Alignments\nStandard justification and alignment properties are supported, like justify-items, align-items, justify-self, align-self\n\n\n## Contribution Guide\n\nRefer the [CONTRIBUTING.md](contributing.md) before starting any contribution.\n\n## License\nCopyright 2020 FusionCharts, Inc.\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use this file except in compliance with the License. You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Ffaberjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffusioncharts%2Ffaberjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Ffaberjs/lists"}