Skip to main content

Dock to edge groupsEnterprise

Dock-to-edge groups make an edge behave like a Visual Studio Code sidebar. An edge with no content takes up zero space; a drop zone for it appears only while dragging; and dropping a panel on the far edge docks an edge group there. When its last panel leaves, the edge group tears down and the edge becomes invisible again.

For the basics of creating, sizing, collapsing, and serializing edge groups, see Edge groups.

Enable it with the dockToEdgeGroups option. Pass true to enable all four edges, or an object to opt edges in individually:

To enable dock-to-edge on only some edges, name them individually; true/false (or an omitted edge) toggles each of top, bottom, left, right:

const api = createDockview(element, {
    // only the left and right edges accept a dock-to-edge drop
    dockToEdgeGroups: { left: true, right: true },
    createComponent,
});

Dock-to-edge is off by default; leaving dockToEdgeGroups unset (or false) keeps the standard behaviour, where an edge must be created explicitly with addEdgeGroup and an emptied edge collapses to a strip rather than disappearing.

Two drop bands​

While dragging a panel toward the layout edge there are two drop zones:

  • The outer band, hugging the true edge (marked by a coloured indicator line), docks the panel as a dedicated edge group.
  • Just inside it, the panel splits the primary grid as usual, the standard dndEdges behaviour.

A newly revealed edge group is created collapsed: the drop adds a tab to its strip rather than popping the group open. Dropping onto an edge that already exists simply adds the panel to its tabs and leaves the group's collapsed/expanded state untouched. Combine with auto-hide edge groups so a revealed edge peeks open on click.

Zero footprint when empty​

An edge group created by a drag reveal is flagged to tear down to zero footprint once its last panel leaves: the edge occupies no space and shows no strip until something is dragged back to it. This is the difference from a normal edge group, which collapses to a persistent strip when emptied.

Revealed edges still serialize and restore like any other edge group; a transient empty edge (mid-teardown) is never persisted.

Composing with the DnD compass​

If the DnD compass compass is also enabled, the two compose rather than conflict. A drop can target either:

  • the grid layout edge, the compass's outer ring, or
  • an edge group, the true outer edge band (drag-reveal).

The distinction is by pointer depth: the compass's outer ring sits well inside the edge band, and the edge-group indicator takes over at the very edge.

Revealing programmatically​

Reveal (create-or-fill) an edge group and move a dragged item into it, the primitive the drag affordance is built on:

revealEdgeGroupWithData
Reveal (create-or-fill) the edge group at position and move the dragged item described by data into it. A newly created edge group tears down to zero footprint when later emptied. Drives the dock-to-edge groups behind the dockToEdgeGroups option; a no-op if edge groups are unavailable.
revealEdgeGroupWithData(position: EdgeGroupPosition, data: {
		groupId: string,
		panelId?: 'null' | string
	}, options: {
		autoHide?: boolean
	}): void
api.revealEdgeGroupWithData('left', {
    groupId: draggedGroupId,
    panelId: draggedPanelId,
});

Dock-to-edge groups require both the edge-group and drag-and-drop overlay functionality; the option is a no-op if either is unavailable. The discoverable two-band affordance and the edge indicator are provided by the dockview-enterprise package.

See also​