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 familiar from creative tools. 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: it removes the editor from its old node (collapsing degenerate nodes), then splits or redocks at the new one. The takeEditor and giveEditor calls and an onTearOff callback float a panel out into its own window and dock 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.