The box selection feature in ngDiagram allows users to select multiple nodes and edges on the canvas by drawing a rectangle around them.

Usage

To activate box selection, hold down the Shift key and click and drag on the canvas. If two selected nodes are connected by an edge, the edge will also be included in the selection.

Configuration

Box selection behavior can be configured via the boxSelection property.

    boxSelection: {
      partialInclusion: true,
      realtime: true,
    },

Available options:

• partialInclusion: If set to true, nodes that are partially within the selection rectangle will be included in the selection.

  Default: true

• realtime: If set to true, the selection rectangle will update the selection in real-time as the user drags the mouse. If false the selection will happen after releasing the mouse button.

  Default: true

Read more about global configuration in ngDiagram →

Customization

You can customize the appearance of the box selection rectangle by using predefined CSS variables:

@Component({
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  template: `
    <div class="not-content diagram">
      <ng-diagram [model]="model" [config]="config">
        <ng-diagram-background />
      </ng-diagram>
    </div>
  `,
  styles: [
    `
      .diagram {
        display: flex;
        height: var(--ng-diagram-height);
        border: var(--ng-diagram-border);

        --ngd-box-selection-border-color: rgba(40, 255, 2, 0.5);
        --ngd-box-selection-border-size: 2px;
        --ngd-box-selection-background: rgba(0, 255, 204, 0.2);
      }
    `,
  ],
})