Custom Middleware Example

This example demonstrates how to create a custom middleware that implements read-only functionality for ngDiagram. Middlewares provide a powerful plugin architecture for extending diagram behavior by intercepting state changes before they reach the model.

1
import '@angular/compiler';
2
import { Component } from '@angular/core';
3
import { provideNgDiagram } from 'ng-diagram';
4
import { DiagramComponent } from './diagram.component';
5

6
/**
7
 * Wrapper component that provides the ng-diagram-context
8
 */
9
@Component({
10
  imports: [DiagramComponent],
11
  providers: [provideNgDiagram()],
12
  template: ` <diagram /> `,
13
  styleUrl: './diagram-wrapper.component.scss',
14
})
15
export class DiagramWrapperComponent {}

1
import { Component, inject, signal } from '@angular/core';
2
import {
3
  createMiddlewares,
4
  initializeModel,
5
  NgDiagramBackgroundComponent,
6
  NgDiagramComponent,
7
  NgDiagramService,
8
  type NgDiagramConfig,
9
} from 'ng-diagram';
10
import { readOnlyMiddleware } from './read-only-middleware';
11

12
@Component({
13
  selector: 'diagram',
14
  imports: [NgDiagramComponent, NgDiagramBackgroundComponent],
15
  styleUrl: './diagram.component.scss',
16
  templateUrl: './diagram.component.html',
17
})
18
export class DiagramComponent {
19
  private readonly ngDiagram = inject(NgDiagramService);
20

21
  isReadOnly = signal(false);
22

23
  middlewares = createMiddlewares((defaults) => [
24
    readOnlyMiddleware,
25
    ...defaults,
26
  ]);
27

28
  config = {
29
    zoom: {
30
      max: 3,
31
      zoomToFit: {
32
        onInit: true,
33
        padding: 120,
34
      },
35
    },
36
    readOnly: {
37
      enabled: false,
38
      allowedActions: ['changeSelection'],
39
    },
40
  } satisfies NgDiagramConfig & { readOnly: any };
41

42
  model = initializeModel({
43
    nodes: [
44
      {
45
        id: '1',
46
        position: { x: 100, y: 80 },
47
        data: { label: 'Node 1' },
48
        resizable: true,
49
      },
50
      {
51
        id: '2',
52
        position: { x: 300, y: 80 },
53
        data: { label: 'Node 2' },
54
        resizable: true,
55
      },
56
      {
57
        id: '3',
58
        position: { x: 200, y: 220 },
59
        data: { label: 'Node 3' },
60
        resizable: true,
61
      },
62
    ],
63
    edges: [
64
      {
65
        id: 'e1-2',
66
        source: '1',
67
        target: '2',
68
        sourcePort: 'port-right',
69
        targetPort: 'port-left',
70
        data: {},
71
      },
72
      {
73
        id: 'e2-3',
74
        source: '2',
75
        target: '3',
76
        sourcePort: 'port-right',
77
        targetPort: 'port-left',
78
        data: {},
79
      },
80
    ],
81
  });
82

83
  toggleReadOnly() {
84
    this.isReadOnly.update((current) => {
85
      const newValue = !current;
86
      this.ngDiagram.updateConfig({
87
        readOnly: {
88
          enabled: newValue,
89
          allowedActions: ['changeSelection'],
90
        },
91
      } as any);
92
      return newValue;
93
    });
94
  }
95
}

1
import type { Middleware } from 'ng-diagram';
2

3
// Define actions that should be blocked in read-only mode
4
const blockedActions = new Set([
5
  'changeSelection',
6
  'moveNodesBy',
7
  'deleteSelection',
8
  'addNodes',
9
  'updateNode',
10
  'updateNodes',
11
  'deleteNodes',
12
  'clearModel',
13
  'addEdges',
14
  'updateEdge',
15
  'deleteEdges',
16
  'deleteElements',
17
  'paste',
18
  'resizeNode',
19
  'startLinking',
20
  'moveTemporaryEdge',
21
  'finishLinking',
22
  'changeZOrder',
23
  'rotateNodeTo',
24
  'highlightGroup',
25
  'highlightGroupClear',
26
  'treeLayout',
27
  'moveNodes',
28
  'moveNodesStop',
29
]);
30

31
/**
32
 * Read-only middleware implementation that blocks specific actions when enabled
33
 */
34
export const readOnlyMiddleware: Middleware<'read-only'> = {
35
  name: 'read-only',
36
  execute: (context, next, cancel) => {
37
    const { modelActionType, config } = context;
38

39
    // Get read-only configuration
40
    const readOnlyConfig = (config as any).readOnly;
41

42
    if (!readOnlyConfig?.enabled) {
43
      next(); // Not in read-only mode, allow everything
44
      return;
45
    }
46

47
    // Allow specific actions if configured
48
    const allowedActions = readOnlyConfig.allowedActions || [];
49
    const isActionBlocked =
50
      blockedActions.has(modelActionType) &&
51
      !allowedActions.includes(modelActionType);
52

53
    if (isActionBlocked) {
54
      console.warn(`🔒 Action "${modelActionType}" blocked by read-only mode`);
55
      cancel(); // Cancel the operation
56
      return;
57
    }
58

59
    // Allow the action to proceed
60
    next();
61
  },
62
};

1
<div class="diagram-container">
2
  <div class="controls">
3
    <div class="status">
4
      <span [class.readonly]="isReadOnly()">
5
        {{
6
          isReadOnly()
7
            ? 'Diagram is locked - try moving nodes!'
8
            : 'Diagram is editable - drag nodes around'
9
        }}
10
      </span>
11
    </div>
12
    <button
13
      [class.active]="isReadOnly()"
14
      (click)="toggleReadOnly()"
15
      class="readonly-toggle"
16
    >
17
      {{ isReadOnly() ? '🔒 Read-Only Mode' : '✏️ Edit Mode' }}
18
    </button>
19
  </div>
20
  <div class="not-content diagram">
21
    <ng-diagram [model]="model" [config]="config" [middlewares]="middlewares">
22
      <ng-diagram-background />
23
    </ng-diagram>
24
  </div>
25
</div>

1
:host {
2
  display: flex;
3
  flex-direction: column;
4
  height: 100%;
5
}
6

7
readonly-middleware-inner {
8
  display: flex;
9
  flex-direction: column;
10
  height: 100%;
11
  flex: 1;
12
}

1
:host {
2
  display: flex;
3
  flex-direction: column;
4
  height: 100%;
5
  flex: 1;
6
}
7

8
.diagram-container {
9
  position: relative;
10
  display: flex;
11
  flex-direction: column;
12
  width: 100%;
13
  height: var(--ng-diagram-height);
14
  border: var(--ng-diagram-border);
15
}
16

17
.controls {
18
  position: absolute;
19
  z-index: 1;
20
  top: 1rem;
21
  right: 1rem;
22
  padding: 1rem;
23
  display: flex;
24
  align-items: center;
25
  gap: 1rem;
26
  flex-shrink: 0;
27
  justify-content: end;
28
  background-color: var(--ngd-node-bg-primary-default);
29
  border: var(--ng-diagram-border);
30
}
31

32
.readonly-toggle {
33
  background: var(--sl-color-accent);
34
  color: white;
35
  border: none;
36
  padding: 0.5rem 1rem;
37
  margin-top: 0;
38
  border-radius: 0.25rem;
39
  cursor: pointer;
40
  font-weight: 500;
41
  transition: all 0.2s ease;
42

43
  &:hover {
44
    background: var(--sl-color-accent-high);
45
  }
46

47
  &.active {
48
    background: var(--sl-color-red);
49

50
    &:hover {
51
      background: var(--sl-color-red-high);
52
    }
53
  }
54
}
55

56
.status {
57
  font-size: 0.875rem;
58
  color: var(--sl-color-text-accent);
59

60
  .readonly {
61
    color: var(--sl-color-red);
62
    font-weight: 500;
63
  }
64
}
65

66
.diagram {
67
  margin-top: 0;
68
  flex-grow: 1;
69

70
  ng-diagram {
71
    height: 100%;
72
    width: 100%;
73
  }
74
}

Additional Explanation

Key Concepts

Action Blocking: Block specific actions based on configuration.
Allowlist: Permit selective operations through an allowlist.
Operation Cancellation: Cancel operations to prevent unwanted state changes.
Logging: Log warnings for blocked actions.