Download Image Example

This example demonstrates how to export the current flow as an image using Angular features and the html-to-image library.

1
import '@angular/compiler';
2
import { Component, ElementRef, viewChild, type Signal } from '@angular/core';
3
import {
4
  initializeModel,
5
  NgDiagramBackgroundComponent,
6
  NgDiagramComponent,
7
  NgDiagramModelService,
8
  provideNgDiagram,
9
  type NgDiagramConfig,
10
} from 'ng-diagram';
11
import { GenerateImageService } from './generate-image.service';
12
import { NavBarComponent } from './nav-bar/nav-bar.component';
13

14
@Component({
15
  imports: [NgDiagramComponent, NavBarComponent, NgDiagramBackgroundComponent],
16
  template: `
17
    <div class="not-content diagram">
18
      <ng-diagram #ngDiagram [model]="model" [config]="config">
19
        <ng-diagram-background />
20
      </ng-diagram>
21
      <div class="nav-bar">
22
        <nav-bar [diagramRef]="diagramElementRef()"></nav-bar>
23
      </div>
24
    </div>
25
  `,
26
  styleUrl: './diagram.component.scss',
27
  providers: [GenerateImageService, NgDiagramModelService, provideNgDiagram()],
28
})
29
export class DiagramComponent {
30
  diagramElementRef: Signal<ElementRef<HTMLElement> | undefined> = viewChild(
31
    'ngDiagram',
32
    { read: ElementRef }
33
  );
34

35
  config = {
36
    zoom: {
37
      max: 3,
38
      zoomToFit: {
39
        onInit: true,
40
      },
41
    },
42
  } satisfies NgDiagramConfig;
43

44
  model = initializeModel({
45
    nodes: [
46
      {
47
        id: 'MAIN ROOT',
48
        position: { x: 500, y: 50 },
49
        data: {},
50
        size: { width: 140, height: 50 },
51
      },
52
      {
53
        id: 'child1',
54
        position: { x: 250, y: 100 },
55
        data: {},
56
        size: { width: 120, height: 44 },
57
      },
58
      {
59
        id: 'child2',
60
        position: { x: 250, y: 0 },
61
        data: {},
62
        size: { width: 120, height: 44 },
63
      },
64
      {
65
        id: 'child3',
66
        position: { x: 750, y: 0 },
67
        data: {},
68
        size: { width: 120, height: 44 },
69
      },
70
      {
71
        id: 'leaf1',
72
        position: { x: 0, y: 150 },
73
        data: {},
74
        size: { width: 100, height: 38 },
75
      },
76
      {
77
        id: 'leaf2',
78
        position: { x: 0, y: 50 },
79
        data: {},
80
        size: { width: 100, height: 38 },
81
      },
82
      {
83
        id: 'leaf3',
84
        position: { x: 1000, y: 50 },
85
        data: {},
86
        size: { width: 100, height: 38 },
87
      },
88
      {
89
        id: 'leaf4',
90
        position: { x: 1000, y: -50 },
91
        data: {},
92
        size: { width: 100, height: 38 },
93
      },
94
      {
95
        id: 'leaf5',
96
        position: { x: 1000, y: -150 },
97
        data: {},
98
        size: { width: 100, height: 38 },
99
      },
100
      {
101
        id: 'leaf6',
102
        position: { x: 1000, y: 150 },
103
        data: {},
104
        size: { width: 100, height: 38 },
105
      },
106
    ],
107
    edges: [
108
      {
109
        id: 'e1',
110
        data: {},
111
        source: 'MAIN ROOT',
112
        target: 'child1',
113
        sourcePort: 'port-left',
114
        targetPort: 'port-right',
115
      },
116
      {
117
        id: 'e2',
118
        data: {},
119
        source: 'MAIN ROOT',
120
        target: 'child2',
121
        sourcePort: 'port-left',
122
        targetPort: 'port-right',
123
      },
124
      {
125
        id: 'e3',
126
        data: {},
127
        source: 'MAIN ROOT',
128
        target: 'child3',
129
        sourcePort: 'port-right',
130
        targetPort: 'port-left',
131
      },
132
      {
133
        id: 'e4',
134
        data: {},
135
        source: 'child1',
136
        target: 'leaf1',
137
        sourcePort: 'port-left',
138
        targetPort: 'port-right',
139
      },
140
      {
141
        id: 'e5',
142
        data: {},
143
        source: 'child1',
144
        target: 'leaf2',
145
        sourcePort: 'port-left',
146
        targetPort: 'port-right',
147
      },
148
      {
149
        id: 'e6',
150
        data: {},
151
        source: 'child3',
152
        target: 'leaf3',
153
        sourcePort: 'port-right',
154
        targetPort: 'port-left',
155
      },
156
      {
157
        id: 'e7',
158
        data: {},
159
        source: 'child3',
160
        target: 'leaf4',
161
        sourcePort: 'port-right',
162
        targetPort: 'port-left',
163
      },
164
      {
165
        id: 'e8',
166
        data: {},
167
        source: 'child3',
168
        target: 'leaf5',
169
        sourcePort: 'port-right',
170
        targetPort: 'port-left',
171
      },
172
      {
173
        id: 'e9',
174
        data: {},
175
        source: 'child3',
176
        target: 'leaf6',
177
        sourcePort: 'port-right',
178
        targetPort: 'port-left',
179
      },
180
    ],
181
  });
182
}


28 collapsed lines
1
import { type Node } from 'ng-diagram';
2

3
export const downloadImage = (data: string | Blob, fileName: string) => {
4
  try {
5
    const anchor = document.createElement('a');
6
    let url: string | null = null;
7

8
    if (typeof data === 'string') {
9
      anchor.href = data;
10
    } else if (data instanceof Blob) {
11
      url = URL.createObjectURL(data);
12
      anchor.href = url;
13
    } else {
14
      throw new Error('Unsupported data type for download');
15
    }
16

17
    anchor.download = fileName;
18
    document.body.appendChild(anchor);
19
    anchor.click();
20
    document.body.removeChild(anchor);
21

22
    if (url) {
23
      URL.revokeObjectURL(url);
24
    }
25
  } catch (e) {
26
    console.error(e);
27
  }
28
};
29

30
export const calculateBoundingBox = (nodes: Node[], margin: number) => {
31
  if (nodes.length === 0) {
32
    return {
33
      width: 0,
34
      height: 0,
35
      top: 0,
36
      left: 0,
37
    };
38
  }
39
  let minX = Infinity,
40
    minY = Infinity,
41
    maxX = -Infinity,
42
    maxY = -Infinity;
43

44
  for (const node of nodes) {
45
    const nodeWidth = node.size?.width || 0;
46
    const nodeHeight = node.size?.height || 0;
47

48
    minX = Math.min(minX, node.position.x);
49
    minY = Math.min(minY, node.position.y);
50
    maxX = Math.max(maxX, node.position.x + nodeWidth);
51
    maxY = Math.max(maxY, node.position.y + nodeHeight);
52
  }
53

54
  return {
55
    width: maxX - minX + margin * 2,
56
    height: maxY - minY + margin * 2,
57
    left: minX - margin,
58
    top: minY - margin,
59
  };
60
};


7 collapsed lines
1
import { Injectable } from '@angular/core';
2
import { toPng } from 'html-to-image';
3
import type { Options } from 'html-to-image/lib/types';
4
import { type Node } from 'ng-diagram';
5
import { calculateBoundingBox } from './generate-image.helper';
6

7
@Injectable()
8
export class GenerateImageService {
9
  private IMAGE_MARGIN: number = 50;
10

11
  async generateImageFile(nodes: Node[], element: HTMLElement) {
12
    const size = calculateBoundingBox(nodes, this.IMAGE_MARGIN);
13
    const backgroundColor = getComputedStyle(element).backgroundColor || '#fff';
14

15
    const options: Options = {
16
      backgroundColor,
17
      width: size.width,
18
      height: size.height,
19
      cacheBust: false,
20
      skipFonts: false,
21
      pixelRatio: 2,
22
      fetchRequestInit: { mode: 'cors' as RequestMode },
23
      style: {
24
        transform: `translate(${Math.abs(size.left)}px, ${Math.abs(size.top)}px) scale(1)`,
25
      },
26
    };
27

28
    const diagramCanvasElement = element.getElementsByTagName(
29
      'ng-diagram-canvas'
30
    )[0] as HTMLElement;
31

32
    return await toPng(diagramCanvasElement, options);
33
  }
34
}


4 collapsed lines
1
import { Component, ElementRef, inject, input } from '@angular/core';
2
import { NgDiagramModelService } from 'ng-diagram';
3
import { downloadImage } from '../generate-image.helper';
4
import { GenerateImageService } from '../generate-image.service';
5

6
@Component({
7
  selector: 'nav-bar',
8
  template: `<button (click)="download()">Download Image</button>`,
9
})
10
export class NavBarComponent {
11
  private readonly generateImageService = inject(GenerateImageService);
12
  private readonly modelService = inject(NgDiagramModelService);
13

14
  diagramRef = input<ElementRef<HTMLElement> | undefined>();
15

16
  async download(): Promise<void> {
17
    const diagramRef = this.diagramRef();
18
    if (diagramRef) {
19
      const file = await this.generateImageService.generateImageFile(
20
        this.modelService.getModel().getNodes(),
21
        diagramRef.nativeElement
22
      );
23

24
      downloadImage(file, `flow-diagram-${Date.now()}.png`);
25
    }
26
  }
27
}

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

8
.nav-bar {
9
  position: absolute;
10
  top: 1rem;
11
  right: 1rem;
12
  display: flex;
13
  gap: 0.5px;
14
  align-items: flex-end;
15
  justify-content: end;
16
  padding: 1rem;
17
  background-color: var(--ngd-node-bg-primary-default);
18
  border: var(--ng-diagram-border);
19

20
  button {
21
    margin-top: 0;
22
  }
23
}

Additional Explanation

Key Concepts

Export: Downloads the flow as a PNG image.
Bounding Box Calculation: Ensures the exported image includes all nodes with proper margins.

Implementation Details

Generate Image Service: Handles the logic for exporting the flow as an image, using the html-to-image library and bounding box calculation.
Helper Functions: Manage the download process and calculate the bounding box for the flow.
NavBar Component: Provides a button to trigger the download action. Calculates the bounding box for the entire flow and passes the flow element reference to the service.

Actions

Download: Exports the current flow as a PNG image using the bounding box and margin settings.