Docking

Create complex layout through code or during runtime by docking panels on the screen.

Floating Dialogs

Create floating dialog boxes by undocking a panel. Floating dialog boxes could be dragged/resized

Tabbed Panels

Dock panels within other existing panels to place them in a tab control. Tabs can be undocked back into floating dialogs

 

Integrated Development Environment

The sample demonstrates an IDE user interface.

Launch

Two Dock Spawn Containers

The sample demonstrates the usage of two independet DockSpawn instances.

Launch

Dock Spawn TS is written in Typescript. Start by importing the dock-spawn library into your project

import { DockManager } from "./js/DockManager.js";
import { PanelContainer } from "./js/PanelContainer.js";
import { PanelType } from "./js/enums/PanelContainerType.js";

Create a dock manager DIV element in the html page. This div would be converted to a dock manager, which would enable panels to be docked on to it. There is no restriction on the size of this div. It could take up the entire screen or have a fixed size

let dockManager = new DockManager(document.getElementById('my_dock_manager'));
dockManager.initialize();

Existing elements in the DOM can be converted to Dock Panels which would enable them to be docked on to the dock manager created above. A dock panel wraps the provided content element around a frame with a title bar and a close button.

You can also provide some options in a config object as a second parameter to the DockManager constructor.

• escClosesWindow - Escape Key closes Dialogs (default: true)
• dialogRootElement - Wich element should be used as root for dialogs (default: document.body)
• moveOnlyWithinDockConatiner - Move Dialogs only within DockSpawn root elment (default: false)

There are 2 different types for PanelContainer. "document" and "panel".

let editor1 = new PanelContainer(document.getElementById("editor_div"), dockManager, null, PanelType.document);
let toolbox = new PanelContainer(document.getElementById("toolbox_div"), dockManager, null, PanelType.panel);
// ...

Now that the panels are created, dock them on the dock manager. Initially, the dock manager contains a docked view, called the Document Manager which is the central area of the dock manager. Get a reference to the document manager node

let documentNode = dockManager.context.model.documentManagerNode;

Using this as a point of reference, lets dock the Solution Explorer to the left, taking up 20% of the space

let solutionNode = dockManager.dockLeft(documentNode, solution, 0.20);

Dock the outline node inside the Solution Explorer (fill mode) to create a tabbed interface with these two panels

let outlineNode = dockManager.dockFill(solutionNode, outline);

Notice the first argument in dockFill method is solutionNode, indicating that this is relative to the Solution Explorer. This way, a dock hierarchy of arbitrary complexity can be created.

let editor1Node = dockManager.dockFill(documentNode, editor1);

Its a good idea to dock dominant panels (e.g. the Editor panel in an IDE) in the Document Node with fill mode so that the documents are displayed as tabs in the document manager

During runtime, dock panels can be undocked from their positions into floating dialog boxes, which can be dragged/resized and docked in another location

You can also create dialogs directly from PanelContainers. This will create a Dialog at x:50 and y:70

dockManager.floatDialog(infovis, 50, 70);

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

// Let the dock manager element fill in the entire screen
window.onresize = () => {
	dockManager.resize(
		divDockContainer.clientWidth,
		divDockContainer.clientHeight
	);
};
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 floating dialog box which can be dragged / resized
let solution = new PanelContainer(document.getElementById("solution_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 output = new PanelContainer(document.getElementById("output_window"), dockManager);
let editor1 = new PanelContainer(document.getElementById("editor1_window"), dockManager, null, PanelType.document);
let editor2 = new PanelContainer(document.getElementById("editor2_window"), dockManager, null, PanelType.document);
editor2.hideCloseButton(true);
let infovis = new PanelContainer(document.getElementById("infovis"), dockManager); // invisible Dialog has no size, so size it manually
infovis.width = 600;
infovis.height = 400;

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

Dock Spawn TS is an open source software released under the MIT License. Refer MIT-License.txt for more details