{"id":22362718,"url":"https://github.com/pragmagic/karadock","last_synced_at":"2025-04-09T16:17:50.382Z","repository":{"id":87213004,"uuid":"91434507","full_name":"pragmagic/karadock","owner":"pragmagic","description":"Dock layout engine based on Karax framework","archived":false,"fork":false,"pushed_at":"2017-07-26T08:51:43.000Z","size":2338,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T16:17:44.873Z","etag":null,"topics":["dock-layout-engine","karax-framework","nim","web"],"latest_commit_sha":null,"homepage":null,"language":"Nim","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/pragmagic.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":"2017-05-16T08:29:22.000Z","updated_at":"2021-02-16T16:41:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"d6ceee28-9469-440b-8e2a-010d7cb7f16f","html_url":"https://github.com/pragmagic/karadock","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/pragmagic%2Fkaradock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pragmagic%2Fkaradock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pragmagic%2Fkaradock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pragmagic%2Fkaradock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pragmagic","download_url":"https://codeload.github.com/pragmagic/karadock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065282,"owners_count":21041872,"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":["dock-layout-engine","karax-framework","nim","web"],"created_at":"2024-12-04T17:11:06.743Z","updated_at":"2025-04-09T16:17:50.358Z","avatar_url":"https://github.com/pragmagic.png","language":"Nim","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KaraDock\n\nDock layout engine based on Karax framework.\n\nExample:\n\n```nim\nconst border = \"4px solid black\"\nconst dropPlaceholderColor = \"rgba(26, 135, 230, 0.5)\"\nconst bodyColor = \"rgb(78, 79, 81)\"\nconst PanelAName = \"Panel A\"\nconst PanelBName = \"Panel B\"\nconst PanelCName = \"Panel C\"\nconst PanelDName = \"Panel D\"\nconst PanelEName = \"Panel E\"\n\nvar config = Config(\n  columnStyle: proc(config; path: ColumnPath): VStyle =\n    style(borderLeft ~ (if path != 0: border else: \"0\")),\n\n  columnDropPlaceholderStyle: proc(config; path: ColumnPath): VStyle =\n    style(backgroundColor ~ dropPlaceholderColor),\n\n  rowStyle: proc(config; path: RowPath): VStyle =\n    style(\n      borderTop ~ (if path.index != 0: border else: \"0\"),\n      backgroundColor ~ bodyColor\n    ),\n\n  rowHeaderStyle: proc(config; path: RowPath): VStyle =\n    style(backgroundColor ~ \"black\"),\n\n  rowDropPlaceholderStyle: proc(config; path: RowPath): VStyle =\n    style(backgroundColor ~ dropPlaceholderColor),\n\n  panelNameStyle: proc(config; path: PanelPath): VStyle =\n    let row = getRow(config=config, path=path.rowPath)\n    let isActive = row.activePanel == path.index\n    result = style(\n      height ~ \"26px\",\n      lineHeight ~ \"26px\",\n      paddingLeft ~ \"15px\",\n      paddingRight ~ \"15px\",\n      fontWeight ~ \"500\",\n      backgroundColor ~ (if isActive: bodyColor else: \"black\"),\n      color ~ (if isActive: \"#c7c7c8\" else: \"#666666\")\n    ),\n\n  panelNameDropPlaceholderStyle: proc(config; path: PanelPath): VStyle =\n    style(backgroundColor ~ dropPlaceholderColor),\n\n  panelBodyStyle: proc(config; path: PanelPath): VStyle =\n    style(padding ~ \"5px\"),\n\n  resizerStyle: style(backgroundColor ~ \"rgba(255, 255, 255, 0.5)\"),\n\n  onupdate: proc(configUpd: Config) =\n    #e.g. save configUpd.columns to LocalStorage\n    redraw(),\n\n  width: window.innerWidth,\n  height: window.innerHeight,\n\n  columns: @[\n    Column(\n      width: 250,\n      rows: @[\n        Row(\n          height: 60,\n          activePanel: 0,\n          panels: @[\n            Panel(\n              name: PanelAName,\n              isWorkingArea: false,\n              forceDisplayName: true,\n              minWidthPx: 250,\n              minHeightPx: 200,\n              body: buildHtml(text PanelAName)\n            )\n          ]\n        ),\n        Row(\n          height: 40,\n          activePanel: 1,\n          panels: @[\n            Panel(\n              name: PanelBName,\n              isWorkingArea: false,\n              forceDisplayName: true,\n              minWidthPx: 250,\n              minHeightPx: 200,\n              body: buildHtml(text PanelBName)\n            ),\n            Panel(\n              name: PanelCName,\n              isWorkingArea: false,\n              forceDisplayName: true,\n              minWidthPx: 250,\n              minHeightPx: 200,\n              body: buildHtml(text PanelCName)\n            )\n          ]\n        )\n      ]\n    ),\n\n    Column(\n      width: 100,\n      rows: @[\n        Row(\n          height: 100,\n          activePanel: 0,\n          panels: @[\n            Panel(\n              name: PanelDName,\n              isWorkingArea: true,\n              forceDisplayName: false,\n              minWidthPx: 400,\n              minHeightPx: 300,\n              body: buildHtml(text PanelDName)\n            )\n          ]\n        )\n      ]\n    ),\n\n    Column(\n      width: 200,\n      rows: @[\n        Row(\n          height: 100,\n          activePanel: 0,\n          panels: @[\n            Panel(\n              name: PanelEName,\n              isWorkingArea: false,\n              forceDisplayName: true,\n              minWidthPx: 200,\n              minHeightPx: 300,\n              body: buildHtml(text PanelEName)\n            )\n          ]\n        )\n      ]\n    )\n  ]\n)\n\nwindow.addEventListener(cstring\"resize\", proc(event) =\n  config.width = window.innerWidth\n  config.height = window.innerHeight\n  redraw()\n)\n\nproc createDom(): VNode =\n  let style = style(\n    color ~ \"white\",\n    fontSize ~ \"16px\"\n  )\n\n  result = buildHtml(tdiv(style=style)):\n    karaDock(config)\n\nsetRenderer createDom\n```\n\n![Example](/example-complex.gif?raw=true \"Example\")\n\nTo run the example above:\n\n```\n  nimble install # For first time\n```\n\n```\n  cd examples/\n  nim js complex.nim\n  open complex.html\n```\n\n## TODO\n\n* Use UUID instead of numeric indexes as panel/row/column paths.\n* Automatically collapse/expand rows based on current available `config.height` and sum of `Panel.minHeightPx`.\n* Automatically wrap right columns to the left based on current available `config.width` and `Column.width`.\n\n## License\nThis library is licensed under the MIT license.\nRead [LICENSE](https://github.com/pragmagic/karadock/blob/master/LICENSE) file for details.\n\nCopyright (c) 2017 Pragmagic, Inc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpragmagic%2Fkaradock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpragmagic%2Fkaradock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpragmagic%2Fkaradock/lists"}