{"id":16674204,"url":"https://github.com/waltertamboer/dockspace-js","last_synced_at":"2026-04-28T11:03:34.757Z","repository":{"id":224407707,"uuid":"762490168","full_name":"waltertamboer/dockspace-js","owner":"waltertamboer","description":"A Typescript/Javascript library to create a dockspace where panes can be managed.","archived":false,"fork":false,"pushed_at":"2024-04-26T08:32:35.000Z","size":180,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-25T08:19:15.793Z","etag":null,"topics":["docking","dockspace","javascript","js","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/waltertamboer.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":"2024-02-23T22:19:53.000Z","updated_at":"2024-04-26T08:32:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"68af96d6-17fa-444a-abb9-e83456cd695d","html_url":"https://github.com/waltertamboer/dockspace-js","commit_stats":null,"previous_names":["waltertamboer/dockspace-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/waltertamboer/dockspace-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waltertamboer%2Fdockspace-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waltertamboer%2Fdockspace-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waltertamboer%2Fdockspace-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waltertamboer%2Fdockspace-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waltertamboer","download_url":"https://codeload.github.com/waltertamboer/dockspace-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waltertamboer%2Fdockspace-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32377599,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T09:24:15.638Z","status":"ssl_error","status_checked_at":"2026-04-28T09:24:15.071Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["docking","dockspace","javascript","js","ts","typescript"],"created_at":"2024-10-12T12:29:43.867Z","updated_at":"2026-04-28T11:03:34.734Z","avatar_url":"https://github.com/waltertamboer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dockspace-js\n\nA Typescript/Javascript library to create dockspace where panes can be managed.\n\n## Installation\n\n### The library\n\nAdd the library to your project via NPM or Yarn:\n\n```bash\n$ npm install @waltertamboer/dockspace-js\n```\n\n```bash\n$ yarn add @waltertamboer/dockspace-js\n```\n\n### The stylesheet\n\nNext create a stylesheet, an example can be found \n[here](https://github.com/waltertamboer/dockspace-js/blob/master/examples/css/dockspace.css). \nThe stylesheet is important because it sets the position to absolute for the containers.\nObviously, you can adjust it according to your needs.\n\nThe size of the splitter is not handled in the stylesheet but is handled in Javascript. \nThis is done because positions of panes are calculated and depend on the size of the splitter.\nSetting the splitter size is done on the renderer.\n\n```js\nrenderer.splitterSize = 5;\n```\n\n## Usage (Typescript)\n\n### Setup the Dockspace\nThe first step is to setup the dockspace. The dockspace is a model that holds all the pane's.\n\n```ts\nfunction runApp(): void {\n    const dockSpace = new DockSpace();\n    \n    // ...\n}\n\nwindow.addEventListener('DOMContentLoaded', () =\u003e {\n    runApp();\n});\n```\n\n### Register pane's\n\nNow that the dockspace is created, we can create panes and add them to the dockspace. The default \ncontainer for the dockspace is a column container. This means that panes that are added to it, are \ndivided by a vertical splitter.\n\n```ts\nfunction runApp(): void {\n    const dockSpace = new DockSpace();\n    \n    // ...\n\n    const pane1 = dockSpace.createPane();\n    const pane2 = dockSpace.createPane();\n\n    dockSpace.container.append(pane1);\n    dockSpace.container.append(pane2);\n}\n```\n\n### Setup renderer\n\nNext we need to setup the renderer. Let's setup an HTML renderer. The refresh method should be called to build \nthe dockspace.\n\n```ts\nfunction runApp(): void {\n    const dockSpace = new DockSpace();\n    \n    // ...\n    \n    const targetElement = document.getElementById('container');\n\n    if (!targetElement) {\n        throw new Error(\"Failed to find element with id 'container'.\");\n    }\n\n    const renderer = new DockHtmlRenderer(targetElement, dockSpace);\n    renderer.interactive = true;\n    renderer.splitterSize = 5;\n    renderer.refresh();\n}\n```\n\n### Using Row and Column containers\n\nIt's possible to add row and column containers. These containers are pane's as well.\n\n```ts\nfunction runApp(): void {\n    const dockSpace = new DockSpace();\n\n    const pane1 = dockSpace.createPane();\n    dockSpace.container.append(pane1);\n\n    const pane2 = dockSpace.createRowContainer();\n    dockSpace.container.append(pane2);\n\n    const pane3 = dockSpace.createPane();\n    pane2.append(pane3);\n\n    const pane4 = dockSpace.createPane();\n    pane2.append(pane4);\n\n    // ...\n}\n```\n\n### Applying grow factors\n\nGrow factors can be used to determine the size of a pane. The grow factor is respected even when the\nviewport is resized. This way the pane's maintain their aspect ratio.\n\nFor each container, the grow factor is accumulated for every pane. Let's say there are two panes\nand both of them have a grow factor of 1. That means both of them have an equal size. If the second\npane would have a grow factor of 2, we would calculate the size like this:\n- Calculate the total sum of the grow factors: `totalFactor = 1 + 2 = 3`\n- Calculate the size of a single pane: `singlePaneWidth = containerWidth / totalFactor;`\n- Now calculate the size of a pane based on the grow factor: `paneWidth = singlePaneWidth * pane.growFactor`\n\nThe grow factor can be set on each pane:\n\n```ts\nfunction runApp(): void {\n    const dockSpace = new DockSpace();\n\n    const pane = dockSpace.createPane();\n\n    pane.growFactor = 2;\n}\n```\n\n### Using pane renderers\n\nA pane renderer is a way to populate the content of the pane. The type of pane renderer depends on the type\nof renderer that is being used. When the HTML renderer is used, you can extend the DockPaneHtmlBuilder class.\n\n```ts\nfunction runApp(): void {\n    const dockSpace = new DockSpace();\n\n    // ...\n    \n    const pane = dockSpace.createPane(new (class extends DockPaneHtmlBuilder {\n        protected getHeaderLabel(renderer: DockHtmlRenderer, pane: DockPane): string {\n            return 'Pane ' + pane.id.toString();\n        }\n\n        protected buildHtml(renderer: DockHtmlRenderer, parentElement: DockHtmlElement, pane: DockPane): void {\n            const div = buildDiv(renderer, pane);\n\n            div.style.backgroundColor = 'pink';\n\n            parentElement.element.appendChild(div);\n        }\n    })());\n\n    // ...\n}\n```\n\n### Drag and drop pane's to different locations\n\nIn order to drag and drop pane's you can extend the DockTabbarHtmlBuilder renderer. This makes it \npossible to drag and drop a pane to a different location.\n\n```ts\nfunction runApp(): void {\n    const dockSpace = new DockSpace();\n\n    // ...\n\n    const pane = dockSpace.createPane(new (class extends DockTabbarHtmlBuilder {\n        protected getHeaderLabel(renderer: DockHtmlRenderer, pane: DockPane): string {\n            return 'Pane ' + pane.id.toString();\n        }\n\n        protected buildTab(renderer: DockHtmlRenderer, parentElement: HTMLElement, pane: DockPane): void {\n            const div = buildDiv(renderer, pane);\n\n            div.style.backgroundColor = 'pink';\n\n            parentElement.appendChild(div);\n        }\n    })(dockSpace));\n    \n    // ...\n}\n```\n\n\n## Examples (Javascript)\n\nYou can view some examples by cloning this repository and than building the project:\n\n```bash\n$ yarn run build\n```\n\nNext start a local server by running:\n\n```bash\n$ yarn run serve\n```\n\nIf you now open http://localhost:8001/examples/index.html - you can browse through the examples.\n\n## Development\n\nTo develop on this project, it's recommended to open two terminals:\n1. To watch for changing files via `yarn run watch`\n2. A second terminal to serve the files via `yarn run serve` \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaltertamboer%2Fdockspace-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaltertamboer%2Fdockspace-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaltertamboer%2Fdockspace-js/lists"}