diff options
Diffstat (limited to 'public/src/app/diagram/diagram.component.ts')
-rw-r--r-- | public/src/app/diagram/diagram.component.ts | 49 |
1 files changed, 46 insertions, 3 deletions
diff --git a/public/src/app/diagram/diagram.component.ts b/public/src/app/diagram/diagram.component.ts index a0ae3a1..394b0ee 100644 --- a/public/src/app/diagram/diagram.component.ts +++ b/public/src/app/diagram/diagram.component.ts @@ -1,12 +1,55 @@ -import { Component, Input } from '@angular/core'; +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 { +export class DiagramComponent implements OnChanges, AfterViewInit { @Input() list; - maxWidth: number = 500; + 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); + } + } } |