dock-spawn-ts

A TypeScript Version of dock-spawn (see https://github.com/coderespawn/dock-spawn)

Homepage at https://node-projects.github.io/dock-spawn-ts/

info

Dock Spawn TS is a Typescript Docking Framework to create a Visual Studio like IDE in HTML

es5 version

The optional legacy ES5 build is generated locally in lib/es5 by build-es5.bat on Windows, after compiling TypeScript. It is separate from the standard npm release build. Its usage example is page/demo/demo_simple_es5.html.

differences to original dockspawn

• typescript
• bugfixes / preformance optimations
• save/restore fixed and saveing/restoring of dialogs
• touch support (works on ipad/iphone and android devices)
• performance fixes (unnessecary removeing and adding to dom reduced, not needed elements are hidden, not removed from dom)
• multiple dockspawn's in one page
• removed font-awesome dependency
• settings (dockManger.config)
• ContextMenu to close all docks (Document Docks only)
• wip webcomponent support

testing

• download the project
• install node packages ("npm ci")
• build JavaScript and browser bundles ("npm run build")
• run ("npm start")
• browse to: http://127.0.0.1:8080/page/demo/ide/demo.html

See CONTRIBUTING.md for build, pull request and release instructions.

how to use:

Resize operations return a Promise<void> that resolves after descendant containers and deferred animation-frame layout work finish. Sizes are assigned immediately; await the result before measuring content or performing work that depends on the completed layout:

await dockManager.resize(width, height);
// Content positions and tab widths are now updated.

The web component's resize() and dockManager.invalidate() can also be awaited.

Tab strips keep readable tab widths and scroll horizontally when they overflow. Use the dropdown at the end of each strip to select any tab, including hidden tabs. The selected tab scrolls into view. Click the row button beside the dropdown to switch that strip between a single row and multiple rows, like Visual Studio. Multi-row strips use at most half the pane height and scroll vertically beyond that. These controls work for document tabs, bottom tool tabs and floating tab groups.

const dockManager = new DockManager(element, { tabStripMode: 'wrap' }); // default: 'scroll'
await dockManager.setTabStripMode('scroll'); // update all strips and the default
await panel.tabPage.host.setTabStripMode('wrap'); // update one strip

The mode is a display preference for the current session; saved layouts do not store it. After building, open tests/tab-overflow.html for a demo and browser checks. The IDE demo at page/demo/ide/demo.html opens 15 editable documents to exercise overflow and row switching, including when upgrading an older saved demo layout.

Auto-hide is disabled by default. Enable it when creating the manager:

const dockManager = new DockManager(element, { enableAutoHide: true });

Use dockManager.setAutoHideEnabled(true) or false to change it at runtime. Disabling auto-hide re-pins collapsed panels and hides the pin controls. Loading a saved layout while it is disabled also re-pins its collapsed panels.

When enabled, tool panels have a pin button in their title bar. Click it to collapse the panel to a tab on its dock edge (left, right, top, or bottom). Click the edge tab to open the panel over the layout; clicking or focusing outside it, or pressing Escape, collapses it again. Click the pin button in the overlay to dock it again. Pinning restores the previous nested dock position, tab order and pane sizes where the surrounding panels still exist, including when a whole group is unpinned and then pinned back in a different order. This shared layout history is saved with the layout. If a neighboring panel was closed, it uses the nearest surviving branch of the old layout, falling back to the saved edge. Drag the overlay edge facing the document area to resize it: left/right panels change width, and top/bottom panels change height. The overlay size is remembered when reopened and saved with the layout. Drag the overlay's title bar to turn it into a floating dialog at its last docked size and dock it elsewhere. Panel content stays in the DOM throughout these transitions. Document tabs and floating dialogs do not have an auto-hide button.

The same behavior is available through panel.setAutoHide(true) and panel.setAutoHide(false). Pass an optional edge, such as panel.setAutoHide(true, 'right'), to override the inferred dock edge. panel.isAutoHidden reports whether the panel is collapsed to an edge tab. dockManager.autoHideManager.show(panel) opens its overlay. saveState() / loadState() preserve collapsed panels, their edges and sizes. Use the onAutoHideChanged(dockManager, panel) layout listener to save state after pinning or unpinning. Locking the dock state also disables the pin controls.

Run npm test for the regression suite. For browser lifecycle checks, run npm start, open http://127.0.0.1:8080/tests/auto-hide.html, and click Run tests.

Tab group moving is opt-in:

const dockManager = new DockManager(element, {
    enableTabGroups: true,   // default: false
    persistTabGroups: true  // default: true
});

Move a whole tab group by dragging the empty strip space after its tabs up or down. To move a subset, Ctrl-click (Cmd-click on macOS) its tabs, then drag one of the marked tabs up or down. The tabs float in one resizable window. Drag the floating group's title bar onto a docking arrow to dock them together, or drag an individual tab out to separate it. Tab order and the active tab are retained, including when saving and restoring floating groups. Dock locking and each panel's canUndock setting also apply to group moves.

Drop a floating window over another floating window to combine their tabs. The target is outlined while dragging. Groups can also be merged this way. Modal windows, windows with docking disabled and locked panels are excluded. setTabGroupsEnabled(false) disables the feature at runtime and separates floating groups into individual windows. Re-enable it with setTabGroupsEnabled(true). Setting config.persistTabGroups = false keeps groups during the current session, but saves and restores their members as separate floating windows. Loading grouped layouts with grouping disabled also restores separate windows without losing tabs. Existing docked tab layouts are retained in both cases.

For a focused demo with document and tool groups, open http://127.0.0.1:8080/tests/tab-groups.html after building and starting the server. It includes save/restore controls and a Run regression tests button.

When docking beside an existing pane with a ratio, the new pane takes that fraction of the reference pane's space after allowing for the new splitter bar. Other panes keep their pixel sizes. Closing or undocking a pane gives its freed space to the elastic document area while preserving the remaining tool panels.

   dockspawn div container needs position absolute or relative 

<div id="dock_div" style="height: calc(100% - 45px);">
    <div id="my_dock_manager" class="my-dock-manager" style="position: relative;"></div>
    <div id="solution_window" data-panel-caption="Solution Explorer" data-panel-icon="test.png" class="solution-window" hidden></div>
    <div id="properties_window" data-panel-caption="Properties" class="properties-window" hidden></div>
    <div id="state_window" data-panel-caption="state" class="state-window" hidden></div>
    <div id="editor1_window" data-panel-caption="Steering.h" class="editor1-window editor-host" hidden></div>
    <div id="editor2_window" data-panel-caption="Steering.cpp" class="editor2-window editor-host" hidden></div>
    <div id="infovis" data-panel-caption="Dock Tree Visualizer" class="editor2-window editor-host" hidden></div>
    <div id="output_window" data-panel-caption="Output" class="output-window editor-host" hidden></div>
    <div id="outline_window" data-panel-caption="Outline" class="outline-window" hidden></div>
    <div id="toolbox_window" data-panel-caption="Toolbox" class="toolbox-window" hidden></div>
</div>

    import { DockManager } from "../DockManager.js";
    import { PanelContainer } from "../PanelContainer.js";

    // Convert a div to a dock manager.  Panels can then be docked on to it
    let divDockManager = document.getElementById('dock_div');
    let dockManager = new DockManager(document.getElementById('my_dock_manager'));
    dockManager.initialize();

    // Let the dock manager element fill in the entire screen
    window.onresize = function () {
        dockManager.resize(
            window.innerWidth - (divDockManager.clientLeft + divDockManager.offsetLeft),
            window.innerHeight - (divDockManager.clientTop + divDockManager.offsetTop)
        );
    };
    window.onresize(null);

    // Convert existing elements on the page into "Panels". 
    // They can then be docked on to the dock manager 
    // Panels get a titlebar and a close button, and can also be 
    // converted to a floatingdialog box which can be dragged / resized 
    let solution = new PanelContainer(document.getElementById("#solution_window"), dockManager);
    let output = new PanelContainer(document.getElementById("#output_window"), dockManager);
    let properties = new PanelContainer(document.getElementById("#properties_window"), dockManager);
    let toolbox = new PanelContainer(document.getElementById("#toolbox_window"), dockManager);
    let outline = new PanelContainer(document.getElementById("#outline_window"), dockManager);
    let state = new PanelContainer(document.getElementById("#state_window"), dockManager);
    let editor1 = new PanelContainer(document.getElementById("#editor1_window"), dockManager);
    let editor2 = new PanelContainer(document.getElementById("#editor2_window"), dockManager);
    let infovis = new PanelContainer(document.getElementById("infovis"), dockManager);

    // Dock the panels on the dock manager
    let documentNode = dockManager.context.model.documentManagerNode;
    let solutionNode = dockManager.dockLeft(documentNode, solution, 0.20);
    let outlineNode = dockManager.dockFill(solutionNode, outline);
    let propertiesNode = dockManager.dockDown(outlineNode, properties, 0.6);
    let outputNode = dockManager.dockDown(documentNode, output, 0.4);
    let stateNode = dockManager.dockRight(outputNode, state, 0.40);
    let toolboxNode = dockManager.dockRight(documentNode, toolbox, 0.20);
    let editor1Node = dockManager.dockFill(documentNode, editor1);
    let editor2Node = dockManager.dockFill(documentNode, editor2);
    dockManager.floatDialog(infovis, 50, 50);

    // You could listen to callbacks of DockManager like this, there are more event's then close available see ILayoutEventListener
      dockManager.addLayoutListener({
         onClosePanel: (dockManager, panel) => {
            console.log('onClosePanel: ', dockManager, panel);
            localStorage.setItem(storeKey, dockManager.saveState());
        }
    });

other html docking frameworks in comparison

Url	Licence	Touch support	Dialogs	Keep Content in DOM	Autocolapsing Panels	Dialogs in new Browserwindows	Dock Back from extra Browserwindow
dock-spawn-ts	MIT	Yes	Yes	Yes	Yes	Yes	No
https://github.com/golden-layout/golden-layout	MIT	No	No			Yes
https://github.com/WebCabin/wcDocker	MIT	Yes	Yes			No
https://jspanel.de	MIT	Yes	Yes			No
http://www.htmldockfloat.com	Commerical/free	No	Yes			No
http://phosphorjs.github.io/	BSD 3	?	?			No
https://github.com/tupilabs/vue-lumino	Apache2	?	No			No
https://github.com/mathuo/dockview	MIT	?	No			No

https://github.com/nomcopter/react-mosaic