The snapping feature in ngDiagram allows nodes to be moved and resized in steps, making it easier to align elements on the diagram canvas.

Snap Drag Configuration

The following configuration options are available for snapping nodes during drag operations:

const config = {
  snapping: {
    shouldSnapDragForNode: (node) => true,
    computeSnapForNodeDrag: (node) => ({ width: 10, height: 10 }),
    defaultDragSnap: { width: 10, height: 10 },
  },
} satisfies NgDiagramConfig;

• shouldSnapDragForNode determines whether a node should snap to a grid when being dragged. When this function returns true for a given node, the node’s position will align to the nearest snap points during drag operations.

• computeSnapForNodeDrag defines the snap step for dragging nodes.

• defaultDragSnap sets a default snap step for dragging nodes if computeSnapForNodeDrag is not provided.
  The default value is { width: 10, height: 10 }.

@Component({
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
  providers: [provideNgDiagram()],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="not-content diagram">
      <ng-diagram [model]="model" [config]="config">
        <ng-diagram-background type="dots" />
      </ng-diagram>
    </div>
  `,
  styleUrl: './diagram.component.scss',
})
export class DiagramComponent {
  config = {
    zoom: {
      max: 2,
      zoomToFit: {
        onInit: true,
        padding: 100,
      },
    },
    snapping: {
      shouldSnapDragForNode: () => true,
      computeSnapForNodeDrag: () => ({ width: 20, height: 20 }),
      defaultDragSnap: { width: 20, height: 20 },
    },
  } satisfies NgDiagramConfig;

Snap Resize Configuration

The following configuration options allow you to configure snapping when resizing nodes:

const config = {
  snapping: {
    shouldSnapResizeForNode: (node) => true,
    computeSnapForNodeSize: (node) => ({ width: 10, height: 10 }),
    defaultResizeSnap: { width: 10, height: 10 },
    computeSnapOffsetForNodeSize: (node) => ({ width: 0, height: 0 }),
    defaultResizeSnapOffset: { width: 0, height: 0 },
  },
} satisfies NgDiagramConfig;

• shouldSnapResizeForNode determines whether a node should snap to a grid when being resized. When this function returns true for a given node, the node’s size will align to the nearest snap points during resize operations.

• computeSnapForNodeSize defines the snap step for resizing nodes.

• defaultResizeSnap sets a default snap step for resizing nodes if computeSnapForNodeSize is not provided.
  The default value is { width: 10, height: 10 }.

• computeSnapOffsetForNodeSize and defaultResizeSnapOffset since v1.3.0 shift the sequence of snapped sizes: sizes land on offset + n * snap, so a node with a 60px header and a 50px vertical snap can snap to 60, 110, 160, … instead of 50, 100, 150, ….
  The default offset is { width: 0, height: 0 }.

  config = {
    zoom: {
      max: 2,
      zoomToFit: {
        onInit: true,
      },
    },
    snapping: {
      shouldSnapResizeForNode: () => true,
      computeSnapForNodeSize: () => ({ width: 20, height: 20 }),
      defaultResizeSnap: { width: 20, height: 20 },
    },
  } satisfies NgDiagramConfig;

Usage with Background Grid

Snapping can be configured to work in conjunction with the background grid feature. When both the grid and snapping are using multiples of the same size, dragged nodes align to the grid lines, and resized nodes keep their sizes on the grid — so a node whose position sits on the grid stays aligned to the grid lines through every resize.

  config = {
    zoom: {
      max: 2,
      zoomToFit: {
        onInit: true,
      },
    },
    background: {
      cellSize: { width: 20, height: 20 },
    },
    snapping: {
      shouldSnapDragForNode: () => true,
      computeSnapForNodeDrag: () => ({ width: 20, height: 20 }),
      shouldSnapResizeForNode: () => true,
      computeSnapForNodeSize: () => ({ width: 20, height: 20 }),
    },
  } satisfies NgDiagramConfig;

Background reference → | Read more about global configuration in ngDiagram →