Docking

Tiling a window into panels

DockHost is the region that turns a window into a tiled, resizable, tabbable workspace — the Outliner | Viewport | Inspector layout every serious tool has. It owns a recursive split tree: a node is either a split (an axis plus fractional children) or a leaf (one editor), and you describe the whole layout declaratively.

auto dock = std::make_unique<ui::DockHost>(theme.get());
dock->registerEditor("outliner",   "Outliner",   std::move(outliner));
dock->registerEditor("viewport",   "Viewport",   std::move(viewport));
dock->registerEditor("properties", "Properties", std::move(inspector));

dock->setLayout(LayoutNode::split(Axis::X,
    { {0.22f, LayoutNode::leaf("outliner")},
      {0.56f, LayoutNode::leaf("viewport")},
      {0.22f, LayoutNode::leaf("properties")} }));

Each leaf shows one editor (any region) under a themed header; dividers are draggable to resize; events route to the area under the cursor with capture for divider and editor drags.

Tabbed areas

A leaf can hold several editors as tabs — LayoutNode::area({"nodes", "spreadsheet"}) stacks them under a tab strip with beveled chips, click to switch. That is how a single pane offers a Node editor and a Spreadsheet in the same slot.

Drag-to-dock and tear-off

Dragging a tab onto another area docks it: drop on the centre to add a tab, drop near an edge to split. A drop-zone highlight shows where it will land, and the split tree mutates accordingly — removing the editor from its old node (collapsing degenerate nodes), splitting or redocking at the new one. Cross-host seams (takeEditor / giveEditor) and an onTearOff callback are the hooks for floating a panel out into its own window and docking it back.

Per-region buffering pays off here

Because each editor is a region with its own offscreen layer, DockHost composites the visible panels by blitting their cached textures and only repaints the ones marked dirty. Drag the divider and the panels re-blit; pan the viewport and only the viewport's layer re-renders. Content rects are pixel-snapped so each blit is exact. The result is a multi-pane workspace that stays fluid no matter how many panels are open — which is what makes the Editor feel instant while a document and an agent change underneath it.