Dock Spawn is a web based dock layout engine that aids in creating flexible user interfaces by enabling panels to be docked on the screen similar to Visual Studio IDE
// Convert a div to the dock manager. Panels can then be docked on to it
var dockDiv = document.getElementById("dock");
var dock = new dockspawn.DockManager(dockDiv);
dock.resizable();
// 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
var solution = dock.contain("solution_window");
var properties = dock.contain("properties_window");
var toolbox = dock.contain("toolbox_window");
var outline = dock.contain("outline_window");
var problems = dock.contain("problems_window");
var output = dock.contain("output_window");
var editor1 = dock.contain("editor1_window");
var editor2 = dock.contain("editor2_window");
// Dock the panels on the dock manager
//var content = dock.content;
var outlineNode = outline.dockLeft(0.15);
var solutionNode = solution.dockFill(outlineNode);
var propertiesNode = properties.dockDown(0.6, outlineNode);
var outputNode = output.dockDown(0.2);
var problemsNode = problems.dockRight(0.40, outputNode);
var toolboxNode = toolbox.dockRight(0.20);
var editor1Node = editor1.dockFill();
var editor2Node = editor2.dockFill();
with the demo app:
https://github.com/automenta/opennars.web/commit/6f5e32973b3f7e2024c82f25145554fbccda156d#diff-7f958a715ef0d644371ae8b1b5f18250R68
https://github.com/automenta/opennars.web/commit/6f5e32973b3f7e2024c82f25145554fbccda156d#diff-9