Lane interaction in Blazor Diagram Component

23 May 20241 minute to read

The diagram provides support to select, resize, or swap the lane interactively.


A Lane can be selected by clicking (tapping) the header of the lane.

Resizing lane

  • Lane can be resized in the bottom and right direction.
  • Lane can be resized by using the resize selector of the lane.
  • Lane can be resized by resizing the bottom and right border of the lane without making a selection.
  • Once you are able to resize the lane, the swimlane will be automatically resized.
  • The lane can be resized either by resizing the selector or the tight bounds of the child object. If the child node moves to the edge of the lane, it can be automatically resized.

The following image shows how to resize the lane.

Lane Resizing

Lane swapping

  • Lanes can be swapped by dragging the lanes over another lane.
  • The helper should indicate the insertion point when lane swapping.
    The following image shows how to swap lanes.

Lane Swapping

Children interaction in lanes

  • You can resize the child node within swimlanes.
  • You can drag the child nodes within the lane.
  • You can interchange the child nodes from one lane to another.
  • Drag and drop the child nodes from lane to the diagram.
  • Drag and drop the child nodes from diagram to the lane.
  • Based on the child node interactions, the lane size will be updated.

The following image shows children interaction in lane.

Lane Children Interaction