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,
    computeSnapForNodeResize: (node) => ({ width: 10, height: 10 }),
    defaultResizeSnap: { width: 10, height: 10 },
  },
} 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.

• computeSnapForNodeResize defines the snap step for resizing nodes.

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

  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, nodes will snap to the grid lines during drag and resize operations.

  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 →