summaryrefslogtreecommitdiffstats
path: root/public/src/app/diagram/diagram.component.ts
blob: e3321bff928543a836de473b124fd7d106fbea12 (plain)
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
56
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() {
    console.log('list:', this.list);
    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);
    }
  }
}