1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
import {
Component,
Input,
OnChanges,
ElementRef,
ViewChild,
AfterViewInit
} from '@angular/core';
@Component({
selector: 'app-diagram',
templateUrl: './diagram.component.html',
styleUrls: ['./diagram.component.scss']
})
export class DiagramComponent implements OnChanges, AfterViewInit {
@Input() list;
maxWidth = 550;
maxLengthLeft;
maxLengthRight;
@ViewChild('svgContainer') svgContainer: ElementRef;
ngAfterViewInit() {
console.log(
'svg width:',
this.svgContainer.nativeElement.getBoundingClientRect().width
);
this.maxWidth = this.svgContainer.nativeElement.getBoundingClientRect().width;
}
constructor() {}
ngOnChanges() {
if (this.list) {
const name1MaxLength = this.list.reduce(
(r, s) => (r > s.name1.length ? r : s.name1.length),
0
);
const p1MaxLength = this.list.reduce(
(r, s) => (r > s.p1.length ? r : s.p1.length),
0
);
this.maxLengthLeft = Math.max(name1MaxLength, p1MaxLength);
const name2MaxLength = this.list.reduce(
(r, s) => (r > s.name2.length ? r : s.name2.length),
0
);
const p2MaxLength = this.list.reduce(
(r, s) => (r > s.p2.length ? r : s.p2.length),
0
);
this.maxLengthRight = Math.max(name2MaxLength, p2MaxLength);
}
}
}
|
