4 files changed, 154 insertions, 24 deletions
diff --git a/public/src/app/diagram/diagram.component.html b/public/src/app/diagram/diagram.component.html
index b3cb28a..c12860b 100644
--- a/public/src/app/diagram/diagram.component.html
+++ b/public/src/app/diagram/diagram.component.html
@@ -1,19 +1,35 @@
-<svg id="diagram" #diagram>
-  <svg viewBox="0 0 500 500" width="100%" height="500px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index">
+<div style="overflow:hidden; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;">
+  <svg id="diagram" #diagram align="center" #svgContainer>
+    <svg width="100%" height="550px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index"
+      style="padding: 1em 0;" align="center">
 
-    <svg width="80px">
-      <text x="0" [attr.y]="45 * (i+1)">
-        {{item.source}}
-      </text>
-    </svg>
+      <svg [attr.width]="maxLengthLeft * 10">
+        <text text-anchor="start" x="0" [attr.y]="40 * (i+1)" font-size="12" dy="0">
+          <tspan x="0" dy=".6em" font-weight="bold">
+            {{item.name1}}
+          </tspan>
+          <tspan x="0" dy="1.2em">
+            {{item.p1}}
+          </tspan>
+        </text>
+      </svg>
+
+      <circle stroke="#8BC34A" fill="#8BC34A" [attr.cx]="maxLengthLeft * 8" [attr.cy]="44 * (i+1)" r="5" />
+
+      <line [attr.x1]="maxLengthLeft * 8" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 30" [attr.y2]="44 * (i+1)"
+        stroke-width="2" stroke="black" stroke-dasharray="5, 5" stroke="#8BC34A" fill="#8BC34A" class="line" />
 
-    <circle cx="100" [attr.cy]="44 * (i+1)" r="5" />
-    <line x1="100" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - 150" [attr.y2]="44 * (i+1)" stroke-width="2" stroke="black" stroke-dasharray="5, 5"
-      class="line" />
-    <circle [attr.cx]="maxWidth - 150" [attr.cy]="44 * (i+1)" r="5" />
+      <circle [attr.cx]="maxWidth - maxLengthRight * 8 - 30" [attr.cy]="44 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" />
 
-    <text [attr.x]="maxWidth - 130" [attr.y]="45 * (i+1)">
-      {{item.target}}
-    </text>
+      <text text-anchor="start" [attr.x]="maxWidth - maxLengthRight * 8" [attr.y]="40 * (i+1)" font-size="12" dy="0">
+        <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy=".6em" font-weight="bold">
+          {{item.name2}}
+        </tspan>
+        <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy="1.2em">
+          {{item.p2}}
+        </tspan>
+      </text>
+
+    </svg>
   </svg>
-</svg>
+</div>
diff --git a/public/src/app/diagram/diagram.component.scss b/public/src/app/diagram/diagram.component.scss
index 57437d8..1753ea2 100644
--- a/public/src/app/diagram/diagram.component.scss
+++ b/public/src/app/diagram/diagram.component.scss
@@ -1,11 +1,10 @@
-svg {
-  height: 400px;
+#diagram {
+  height: 1000px;
   width: 100%;
   margin: auto;
   display: block;
   .line {
-    stroke-dasharray: 1400;
-    animation: draw 5s ease-in;
+    stroke-dasharray: 5; // animation: draw 1s ease-in;
   }
 }
 
diff --git a/public/src/app/diagram/diagram.component.spec.ts b/public/src/app/diagram/diagram.component.spec.ts
index 535f280..e3177cc 100644
--- a/public/src/app/diagram/diagram.component.spec.ts
+++ b/public/src/app/diagram/diagram.component.spec.ts
@@ -1,5 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { DiagramComponent } from './diagram.component';
 
 describe('DiagramComponent', () => {
@@ -23,4 +22,77 @@ describe('DiagramComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should check on change check maxLengthLeft', () => {
+    component.list = [
+      {
+        name1: 'node1dsvsdsvd',
+        name2: 'node2',
+        p1: 'Stream_publish_0',
+        p2: 'capability'
+      },
+      {
+        name1: 'node33',
+        name2: 'node2555',
+        p1: 'requirement2',
+        p2: 'capability11'
+      },
+      {
+        name1: 'namber4',
+        name2: 'namber3',
+        p1: 'requirement3',
+        p2: 'capability4'
+      }
+    ];
+    component.ngOnChanges();
+    expect(component.maxLengthLeft).toBe(16);
+  });
+  it('should check on change check maxLengthRight', () => {
+    component.list = [
+      {
+        name1: 'node1dsvsdsvd',
+        name2: 'node2',
+        p1: 'Stream_publish_0',
+        p2: 'capability'
+      },
+      {
+        name1: 'node33',
+        name2: 'node2555',
+        p1: 'requirement2',
+        p2: 'capability11'
+      },
+      {
+        name1: 'namber4',
+        name2: 'namber3',
+        p1: 'requirement3',
+        p2: 'capability4'
+      }
+    ];
+    component.ngOnChanges();
+    expect(component.maxLengthRight).toBe(12);
+  });
+  it('should check on change check maxWidth', () => {
+    component.list = [
+      {
+        name1: 'node1dsvsdsvd',
+        name2: 'node2',
+        p1: 'Stream_publish_0',
+        p2: 'capability'
+      },
+      {
+        name1: 'node33',
+        name2: 'node2555',
+        p1: 'requirement2',
+        p2: 'capability11'
+      },
+      {
+        name1: 'namber4',
+        name2: 'namber3',
+        p1: 'requirement3',
+        p2: 'capability4'
+      }
+    ];
+    component.ngOnChanges();
+    expect(component.maxWidth).toBe(550);
+  });
 });
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);
+    }
+  }
 }