{"id":13534234,"url":"https://github.com/node-projects/dock-spawn-ts","last_synced_at":"2025-04-06T20:09:47.056Z","repository":{"id":43886406,"uuid":"188730114","full_name":"node-projects/dock-spawn-ts","owner":"node-projects","description":"A TypeScript HTML Docking Framework (fork of dock-spawn)","archived":false,"fork":false,"pushed_at":"2024-05-16T09:37:58.000Z","size":3763,"stargazers_count":118,"open_issues_count":9,"forks_count":27,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-05-17T04:57:36.095Z","etag":null,"topics":["avalondock","dock","docking","dockspawn","float","ide","typescript","visualstudio"],"latest_commit_sha":null,"homepage":"","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/node-projects.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"jogibear9988","patreon":"jogibear9988"}},"created_at":"2019-05-26T20:47:06.000Z","updated_at":"2024-05-27T13:49:27.173Z","dependencies_parsed_at":"2024-05-16T04:45:07.564Z","dependency_job_id":"cfbabda6-41aa-4315-8b81-1a242f4d1744","html_url":"https://github.com/node-projects/dock-spawn-ts","commit_stats":{"total_commits":234,"total_committers":10,"mean_commits":23.4,"dds":"0.14102564102564108","last_synced_commit":"9c1a5e513b146e2f216f3207888662f79c7a749a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fdock-spawn-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fdock-spawn-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fdock-spawn-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fdock-spawn-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-projects","download_url":"https://codeload.github.com/node-projects/dock-spawn-ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543589,"owners_count":20955865,"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":["avalondock","dock","docking","dockspawn","float","ide","typescript","visualstudio"],"created_at":"2024-08-01T07:01:28.584Z","updated_at":"2025-04-06T20:09:47.040Z","avatar_url":"https://github.com/node-projects.png","language":"JavaScript","readme":"# dock-spawn-ts\nA TypeScript Version of dock-spawn (see https://github.com/coderespawn/dock-spawn)\n\nHomepage at https://node-projects.github.io/dock-spawn-ts/\n\n[![NPM version](http://img.shields.io/npm/v/dock-spawn-ts.svg)](https://www.npmjs.com/package/dock-spawn-ts)\n[![Downloads](https://img.shields.io/npm/dm/dock-spawn-ts.svg)](https://www.npmjs.com/package/dock-spawn-ts)\n\n# info\nDock Spawn TS is a Typescript Docking Framework to create a Visual Studio like IDE in HTML\n\n![Logo](https://raw.githubusercontent.com/node-projects/dock-spawn-ts/master/ide.png)\n\n# es5 version\n\nThere is an ES5 Version in the lib/es5 directory\nUsage Example is in page/demo/demo_simple_es5.html\n\n# differences to original dockspawn\n - typescript\n - bugfixes / preformance optimations\n - save/restore fixed and saveing/restoring of dialogs\n - touch support (works on ipad/iphone and android devices)\n - performance fixes (unnessecary removeing and adding to dom reduced, not needed elements are hidden, not removed from dom)\n - multiple dockspawn's in one page\n - removed font-awesome dependency\n - settings (dockManger.config)\n - ContextMenu to close all docks (Document Docks only)\n - wip webcomponent support\n\n# testing\n - download the project\n - install node packages (\"npm i\")\n - compile typescript (\"npm run tsc\") (compiled version is included in repo for live demo)\n - run (\"npm start\")\n - browse to: http://127.0.0.1:8080/page/demo/ide/demo.html\n\n# how to use:\n\n```html\n   dockspawn div container needs position absolute or relative \n\n\u003cdiv id=\"dock_div\" style=\"height: calc(100% - 45px);\"\u003e\n    \u003cdiv id=\"my_dock_manager\" class=\"my-dock-manager\" style=\"position: relative;\"\u003e\u003c/div\u003e\n    \u003cdiv id=\"solution_window\" data-panel-caption=\"Solution Explorer\" data-panel-icon=\"test.png\" class=\"solution-window\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"properties_window\" data-panel-caption=\"Properties\" class=\"properties-window\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"state_window\" data-panel-caption=\"state\" class=\"state-window\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"editor1_window\" data-panel-caption=\"Steering.h\" class=\"editor1-window editor-host\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"editor2_window\" data-panel-caption=\"Steering.cpp\" class=\"editor2-window editor-host\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"infovis\" data-panel-caption=\"Dock Tree Visualizer\" class=\"editor2-window editor-host\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"output_window\" data-panel-caption=\"Output\" class=\"output-window editor-host\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"outline_window\" data-panel-caption=\"Outline\" class=\"outline-window\" hidden\u003e\u003c/div\u003e\n    \u003cdiv id=\"toolbox_window\" data-panel-caption=\"Toolbox\" class=\"toolbox-window\" hidden\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n```javascript\n    import { DockManager } from \"../DockManager.js\";\n    import { PanelContainer } from \"../PanelContainer.js\";\n\n    // Convert a div to a dock manager.  Panels can then be docked on to it\n    let divDockManager = document.getElementById('dock_div');\n    let dockManager = new DockManager(document.getElementById('my_dock_manager'));\n    dockManager.initialize();\n\n    // Let the dock manager element fill in the entire screen\n    window.onresize = function () {\n        dockManager.resize(\n            window.innerWidth - (divDockManager.clientLeft + divDockManager.offsetLeft),\n            window.innerHeight - (divDockManager.clientTop + divDockManager.offsetTop)\n        );\n    };\n    window.onresize(null);\n\n    // Convert existing elements on the page into \"Panels\". \n    // They can then be docked on to the dock manager \n    // Panels get a titlebar and a close button, and can also be \n    // converted to a floatingdialog box which can be dragged / resized \n    let solution = new PanelContainer(document.getElementById(\"#solution_window\"), dockManager);\n    let output = new PanelContainer(document.getElementById(\"#output_window\"), dockManager);\n    let properties = new PanelContainer(document.getElementById(\"#properties_window\"), dockManager);\n    let toolbox = new PanelContainer(document.getElementById(\"#toolbox_window\"), dockManager);\n    let outline = new PanelContainer(document.getElementById(\"#outline_window\"), dockManager);\n    let state = new PanelContainer(document.getElementById(\"#state_window\"), dockManager);\n    let editor1 = new PanelContainer(document.getElementById(\"#editor1_window\"), dockManager);\n    let editor2 = new PanelContainer(document.getElementById(\"#editor2_window\"), dockManager);\n    let infovis = new PanelContainer(document.getElementById(\"infovis\"), dockManager);\n\n    // Dock the panels on the dock manager\n    let documentNode = dockManager.context.model.documentManagerNode;\n    let solutionNode = dockManager.dockLeft(documentNode, solution, 0.20);\n    let outlineNode = dockManager.dockFill(solutionNode, outline);\n    let propertiesNode = dockManager.dockDown(outlineNode, properties, 0.6);\n    let outputNode = dockManager.dockDown(documentNode, output, 0.4);\n    let stateNode = dockManager.dockRight(outputNode, state, 0.40);\n    let toolboxNode = dockManager.dockRight(documentNode, toolbox, 0.20);\n    let editor1Node = dockManager.dockFill(documentNode, editor1);\n    let editor2Node = dockManager.dockFill(documentNode, editor2);\n    dockManager.floatDialog(infovis, 50, 50);\n\n    // You could listen to callbacks of DockManager like this, there are more event's then close available see ILayoutEventListener\n      dockManager.addLayoutListener({\n         onClosePanel: (dockManager, panel) =\u003e {\n            console.log('onClosePanel: ', dockManager, panel);\n            localStorage.setItem(storeKey, dockManager.saveState());\n        }\n    });\n```\n\n# other html docking frameworks in comparison\n\n| Url                                            | Licence         | Touch support | Dialogs | Keep Content in DOM | Autocolapsing Panels | Dialogs in new Browserwindows | Dock Back from extra Browserwindow |\n|------------------------------------------------|-----------------|---------------|---------|---------------------|----------------------|-------------------------------|------------------------------------|\n| dock-spawn-ts                                  | MIT             | Yes           | Yes     | Yes                 | No                   | Yes                           | No                                 |\n| https://github.com/golden-layout/golden-layout | MIT             | No            | No      |                     |                      | Yes                           |                                    |\n| https://github.com/WebCabin/wcDocker           | MIT             | Yes           | Yes     |                     |                      | No                            |                                    |\n| https://jspanel.de                             | MIT             | Yes           | Yes     |                     |                      | No                            |                                    |\n| http://www.htmldockfloat.com                   | Commerical/free | No            | Yes     |                     |                      | No                            |                                    |\n| http://phosphorjs.github.io/                   | BSD 3           | ?             | ?       |                     |                      | No                            |                                    |\n| https://github.com/tupilabs/vue-lumino         | Apache2         | ?             | No      |                     |                      | No                            |                                    |\n| https://github.com/mathuo/dockview             | MIT             | ?             | No      |                     |                      | No                            |                                    |\n   \nhttps://github.com/nomcopter/react-mosaic","funding_links":["https://github.com/sponsors/jogibear9988","https://patreon.com/jogibear9988"],"categories":["Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fdock-spawn-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-projects%2Fdock-spawn-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fdock-spawn-ts/lists"}