Layout Integration Example

This example demonstrates how to integrate external layout libraries and use built-in layout features in ngDiagram.

1
import { type Edge, type Node } from 'ng-diagram';
2
import { NodeTemplateType } from './types';
3

4
export const diagramModel: { nodes: Node[]; edges: Edge[] } = {
5
  nodes: [
6
    {
7
      id: '1',
8
      position: { x: 0, y: 0 },
9
      data: { label: 'Root' },
10
      type: NodeTemplateType.CustomNodeType,
11
    },
12
    {
13
      id: '2',
14
      position: { x: 567, y: 122 },
15
      data: { label: 'B' },
16
      type: NodeTemplateType.CustomNodeType,
17
    },
18
    {
19
      id: '3',
20
      position: { x: 320, y: 301 },
21
      data: { label: 'A' },
22
      type: NodeTemplateType.CustomNodeType,
23
    },
24
    {
25
      id: '4',
26
      position: { x: 611, y: 487 },
27
      data: { label: 'B 2' },
28
      type: NodeTemplateType.CustomNodeType,
29
    },
30
    {
31
      id: '5',
32
      position: { x: 97, y: 178 },
33
      data: { label: 'A 1' },
34
      type: NodeTemplateType.CustomNodeType,
35
    },
36
    {
37
      id: '6',
38
      position: { x: 235, y: 85 },
39
      data: { label: 'A 2' },
40
      type: NodeTemplateType.CustomNodeType,
41
    },
42
    {
43
      id: '7',
44
      position: { x: 528, y: 320 },
45
      data: { label: 'B 2' },
46
      type: NodeTemplateType.CustomNodeType,
47
    },
48
    {
49
      id: '8',
50
      position: { x: 165, y: 387 },
51
      data: { label: 'A 1.1' },
52
      type: NodeTemplateType.CustomNodeType,
53
    },
54
  ],
55
  edges: [
56
    {
57
      id: 'e1-2',
58
      source: '1',
59
      sourcePort: 'port-right',
60
      targetPort: 'port-left',
61
      target: '2',
62
      data: {},
63
    },
64
    {
65
      id: 'e1-3',
66
      source: '1',
67
      sourcePort: 'port-bottom',
68
      targetPort: 'port-left',
69
      target: '3',
70
      data: {},
71
    },
72
    {
73
      id: 'e2-4',
74
      source: '2',
75
      sourcePort: 'port-right',
76
      targetPort: 'port-left',
77
      target: '4',
78
      data: {},
79
    },
80
    {
81
      id: 'e3-5',
82
      source: '3',
83
      sourcePort: 'port-bottom',
84
      targetPort: 'port-left',
85
      target: '5',
86
      data: {},
87
    },
88
    {
89
      id: 'e3-6',
90
      source: '3',
91
      sourcePort: 'port-right',
92
      targetPort: 'port-left',
93
      target: '6',
94
      data: {},
95
    },
96
    {
97
      id: 'e4-7',
98
      source: '4',
99
      sourcePort: 'port-right',
100
      targetPort: 'port-left',
101
      target: '7',
102
      data: {},
103
    },
104
    {
105
      id: 'e5-8',
106
      source: '5',
107
      sourcePort: 'port-right',
108
      targetPort: 'port-left',
109
      target: '8',
110
      data: {},
111
    },
112
  ],
113
};

1
import '@angular/compiler';
2

3
import { Component, inject } from '@angular/core';
4
import {
5
  initializeModel,
6
  NgDiagramBackgroundComponent,
7
  NgDiagramComponent,
8
  NgDiagramModelService,
9
  NgDiagramNodeTemplateMap,
10
  provideNgDiagram,
11
  type NgDiagramConfig,
12
  type SelectionMovedEvent,
13
} from 'ng-diagram';
14
import { diagramModel } from './data';
15
import { LayoutButtonsComponent } from './layout-buttons/layout-buttons.component';
16
import { NodeComponent } from './node/node.component';
17
import { NodeTemplateType } from './types';
18

19
@Component({
20
  imports: [
21
    NgDiagramComponent,
22
    NgDiagramBackgroundComponent,
23
    LayoutButtonsComponent,
24
  ],
25
  template: `
26
    <div class="not-content diagram">
27
      <ng-diagram
28
        [model]="model"
29
        [config]="config"
30
        (selectionMoved)="onSelectionMoved($event)"
31
        [nodeTemplateMap]="nodeTemplateMap"
32
      >
33
        <ng-diagram-background />
34
      </ng-diagram>
35
      <layout-buttons />
36
    </div>
37
  `,
38
  styleUrl: './diagram.component.scss',
39
  providers: [provideNgDiagram()],
40
})
41
export class DiagramComponent {
42
  nodeTemplateMap = new NgDiagramNodeTemplateMap([
43
    [NodeTemplateType.CustomNodeType, NodeComponent],
44
  ]);
45
  private modelService = inject(NgDiagramModelService);
46

47
  model = initializeModel({
48
    nodes: diagramModel.nodes,
49
    edges: diagramModel.edges,
50
  });
51

52
  config: NgDiagramConfig = {
53
    zoom: {
54
      zoomToFit: {
55
        onInit: true,
56
        padding: 80,
57
      },
58
    },
59
  };
60

61
  // When user manually moves nodes, edges in manual routing mode should be
62
  // reset to auto so they follow the node movement and re-route appropriately
63
  onSelectionMoved(event: SelectionMovedEvent): void {
64
    const movedNodeIds = new Set(event.nodes.map((n) => n.id));
65
    const edges = this.modelService.edges();
66

67
    const edgesToUpdate = edges
68
      .filter(
69
        (edge) =>
70
          (movedNodeIds.has(edge.source) || movedNodeIds.has(edge.target)) &&
71
          edge.routingMode === 'manual'
72
      )
73
      .map((edge) => ({
74
        id: edge.id,
75
        routingMode: 'auto' as const,
76
      }));
77

78
    if (edgesToUpdate.length > 0) {
79
      this.modelService.updateEdges(edgesToUpdate);
80
    }
81
  }
82
}

1
import { Component, computed, inject } from '@angular/core';
2
import {
3
  NgDiagramModelService,
4
  NgDiagramService,
5
  NgDiagramViewportService,
6
} from 'ng-diagram';
7
import { performLayout } from '../perform-layout';
8

9
@Component({
10
  imports: [],
11
  selector: 'layout-buttons',
12
  template: `
13
    <button class="btn" (click)="onCustomLayout()">
14
      Perform custom layout
15
    </button>
16
  `,
17
  styleUrls: ['./layout-buttons.component.scss'],
18
})
19
export class LayoutButtonsComponent {
20
  diagramService = inject(NgDiagramService);
21
  modelService = inject(NgDiagramModelService);
22
  viewportService = inject(NgDiagramViewportService);
23

24
  nodes = computed(() => this.modelService.getModel().getNodes());
25
  edges = computed(() => this.modelService.getModel().getEdges());
26

27
  async onCustomLayout() {
28
    const { nodes: finalNodes, edges: finalEdges } = await performLayout(
29
      this.nodes(),
30
      this.edges()
31
    );
32

33
    if (finalNodes.length > 0) {
34
      this.modelService.updateNodes(finalNodes);
35
    }
36

37
    if (finalEdges.length > 0) {
38
      this.modelService.updateEdges(finalEdges);
39
    }
40

41
    setTimeout(() => {
42
      this.viewportService.zoomToFit();
43
    }, 1);
44
  }
45
}

1
import { Component, input } from '@angular/core';
2
import {
3
  NgDiagramBaseNodeTemplateComponent,
4
  NgDiagramPortComponent,
5
  type NgDiagramNodeTemplate,
6
  type Node,
7
} from 'ng-diagram';
8

9
@Component({
10
  imports: [NgDiagramPortComponent, NgDiagramBaseNodeTemplateComponent],
11
  templateUrl: './node.component.html',
12
  styleUrls: ['./node.component.scss'],
13
  host: {
14
    '[class.ng-diagram-port-hoverable-over-node]': 'true',
15
  },
16
})
17
export class NodeComponent implements NgDiagramNodeTemplate {
18
  node = input.required<Node>();
19
}

1
import ELK, { type ElkExtendedEdge, type ElkNode } from 'elkjs';
2
import { type Edge, type Node } from 'ng-diagram';
3

4
const elk = new ELK();
5
const layoutOptions = {
6
  'elk.algorithm': 'layered',
7
  'elk.direction': 'RIGHT',
8
  'elk.layered.nodePlacement.strategy': 'SIMPLE',
9
  'elk.layered.cycleBreaking.strategy': 'DEPTH_FIRST',
10
  'elk.layered.spacing.edgeNodeBetweenLayers': '30',
11
  'spacing.edgeNode': '70',
12
  'spacing.nodeNode': '50',
13
  'layered.spacing.edgeNodeBetweenLayers': '50',
14
  'layered.spacing.nodeNodeBetweenLayers': '50',
15
  'edgeLabels.sideSelection': 'ALWAYS_UP',
16
  'layering.strategy': 'NETWORK_SIMPLEX',
17
  'nodePlacement.strategy': 'BRANDES_KOEPF',
18
};
19

20
export async function performLayout(nodes: Node[], edges: Edge[]) {
21
  const nodesToLayout = nodes.map(
22
    ({ id: nodeId, size, measuredPorts }): ElkNode => ({
23
      id: nodeId,
24
      ...size,
25
      layoutOptions: {
26
        portConstraints: 'FIXED_POS',
27
      },
28
      ports: measuredPorts?.map(
29
        ({ id: portId, position, size: portSize }: any) => ({
30
          id: `${nodeId}:${portId}`,
31
          ...portSize,
32
          ...position,
33
        })
34
      ),
35
    })
36
  );
37

38
  const graph: ElkNode = {
39
    id: 'root',
40
    layoutOptions,
41
    children: nodesToLayout,
42
    edges: edges.map(({ id, source, target, sourcePort, targetPort }) => {
43
      const sourceWithPort = sourcePort ? `${source}:${sourcePort}` : source;
44
      const targetWithPort = targetPort ? `${target}:${targetPort}` : target;
45

46
      return {
47
        id,
48
        sources: [sourceWithPort],
49
        targets: [targetWithPort],
50
      };
51
    }),
52
  };
53

54
  const { children: laidOutNodes, edges: laidOutEdges } =
55
    await elk.layout(graph);
56

57
  const updatedNodes: Node[] = nodes.map((node) => {
58
    const {
59
      position: { x: baseX, y: baseY },
60
    } = node;
61

62
    const { x = baseX, y = baseY } = laidOutNodes?.find(
63
      ({ id }: any) => id === node.id
64
    ) ?? {
65
      x: baseX,
66
      y: baseY,
67
    };
68

69
    return {
70
      ...node,
71
      position: { x, y },
72
    };
73
  });
74

75
  const updatedEdges: Edge[] = edges.map((edge) => {
76
    const elkEdge = laidOutEdges?.find(({ id }: any) => id === edge.id);
77
    if (!elkEdge) {
78
      return edge;
79
    }
80

81
    const points = getLayoutPoints(elkEdge);
82

83
    return {
84
      ...edge,
85
      // Set routing mode to manual to disable automatic routing from ngDiagram
86
      // and use the exact points calculated by ELK layout engine
87
      routingMode: 'manual',
88
      points,
89
    };
90
  });
91

92
  return { nodes: updatedNodes, edges: updatedEdges };
93
}
94

95
function getLayoutPoints(elkEdge: ElkExtendedEdge) {
96
  if (!elkEdge.sections?.length) return [];
97

98
  const section = elkEdge.sections[0];
99

100
  return [section.startPoint, ...(section.bendPoints ?? []), section.endPoint];
101
}

1
export enum NodeTemplateType {
2
  CustomNodeType = 'customNodeType',
3
}

1
<ng-diagram-base-node-template [node]="node">
2
  <span class="node-label">{{ node().data.label }}</span>
3
</ng-diagram-base-node-template>
4
<ng-diagram-port id="port-bottom" type="both" side="bottom" />
5
<ng-diagram-port id="port-top" type="both" side="top" />

1
.diagram {
2
  position: relative;
3
  display: flex;
4
  height: var(--ng-diagram-height);
5
  border: var(--ng-diagram-border);
6
  margin-top: 0;
7
}

1
:host {
2
  position: absolute;
3
  top: 1rem;
4
  right: 1rem;
5
  z-index: 1;
6
  display: flex;
7
  padding: 1rem;
8
  background-color: var(--ngd-node-bg-primary-default);
9
  border: var(--ng-diagram-border);
10

11
  button {
12
    margin-top: 0;
13
  }
14
}

1
:host {
2
  .node-label {
3
    width: 200px;
4
    height: 32px;
5
    display: flex;
6
    align-items: center;
7
    justify-content: center;
8
  }
9
}

Additional Explanation

Key Concepts

External Layout Libraries: Integrate solutions like ELK.js for advanced layouts. ELK.js assigns position to nodes and generates edge paths automatically.
User Interaction Detection: Use the selectionMoved event to detect manual node movement.
Edge Routing Modes:
- Set edges to manual mode to preserve custom layout points from ELK.
- Reset edges to auto mode when connected nodes are moved manually.
Batch Updates: Use updateNodes and updateEdges for efficient diagram updates.