{"id":18421179,"url":"https://github.com/ud-ud/layout","last_synced_at":"2025-04-13T11:24:05.126Z","repository":{"id":83176296,"uuid":"130537161","full_name":"UD-UD/layout","owner":"UD-UD","description":"Generate UI given a set of configuration and render it in HTML ,SVG or CANVAS","archived":false,"fork":false,"pushed_at":"2018-10-04T18:31:31.000Z","size":300,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T07:17:52.859Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UD-UD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-22T05:09:56.000Z","updated_at":"2018-05-14T18:08:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"c31038c9-3e32-45ce-9c1d-4ad7f3593d06","html_url":"https://github.com/UD-UD/layout","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/UD-UD%2Flayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UD-UD%2Flayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UD-UD%2Flayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UD-UD%2Flayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UD-UD","download_url":"https://codeload.github.com/UD-UD/layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248704258,"owners_count":21148331,"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":[],"created_at":"2024-11-06T04:24:39.297Z","updated_at":"2025-04-13T11:24:05.096Z","avatar_url":"https://github.com/UD-UD.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Layout\n\nCreates a html layout from a given configuration\n\n### Prerequisites\n\n```\nnode\n```\n\n### Installing\n\nClone the repository and run the following command\n\n```\nnpm install\n```\nAfter the installation all necessary library will be ready for you to directly start your developement\n\n## Build you app\n```\nnpm run build\n```\n\n## Running the tests\n\n```\nnpm run test\n```\n\n## Show Test Coverage\n\n```\nnpm run cover\n```\n\n## Usage\n```\nconst {\n  Layout,\n  DummyComponent\n} = layout\n\nconst width = 600\nconst height = 600\nconst skeletonType = 'html'\n\nconst component1 = new DummyComponent(10, {\n  width: width / 2,\n  height: width / 2\n})\n\nconst component2 = new DummyComponent(10, {\n  width: width / 2,\n  height: width / 2\n})\n\nconst component3 = new DummyComponent(10, {\n  width: width / 2,\n  height: width / 2\n})\n\nconst component4 = new DummyComponent(10, {\n  width: width / 2,\n  height: width / 2\n})\n\nconst layoutDefinition = {\n  host: null,\n  cut: 'v',\n  ratioWeight: 1,\n  lanes: [{\n    host: null,\n    cut: 'h',\n    ratioWeight: 1,\n    preferred: true,\n    lanes: [\n      {\n        host: component1,\n        cut: null,\n        ratioWeight: 1,\n        preferred: true,\n        lanes: []\n      },\n      {\n        host: component2,\n        cut: null,\n        ratioWeight: 1,\n        lanes: []\n      }\n    ]\n  },\n  {\n    host: null,\n    cut: 'h',\n    ratioWeight: 1,\n    lanes: [\n      {\n        host: component3,\n        cut: null,\n        ratioWeight: 1,\n        lanes: []\n      },\n      {\n        host: component4,\n        cut: null,\n        ratioWeight: 1,\n        preferred: true,\n        lanes: []\n      }\n    ]\n  }\n  ]\n}\n\nconst renderAt = 'board'\n\nconst fancyGridLayout = new Layout({\n  renderAt,\n  layoutDefinition,\n  width,\n  height,\n  skeletonType\n})\n\nfancyGridLayout.compute()\n\n// draw all components\ncomponent1.draw()\ncomponent2.draw()\ncomponent3.draw()\ncomponent4.draw()\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fud-ud%2Flayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fud-ud%2Flayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fud-ud%2Flayout/lists"}