WorkFlow Diagram Editor

create workflow diagram editor area, install jsplumb package to support node drag and node connections.

Change-Id: Ie68d0f88ef1cc855c1e55e51e918111c6fba4116
Issue-ID: SDC-70
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>

1 files changed, 30 insertions, 3 deletions

diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index 76fa7666..32500abb 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -10,13 +10,40 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 
-import { Component } from '@angular/core';
+import { Component, AfterViewInit } from '@angular/core';
+import { JsPlumbService } from "./services/jsplumb.service";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'SDC Workflow Designer';
+export class AppComponent implements AfterViewInit {
+    constructor(private jsplumbService: JsPlumbService) {}
+
+    public nodes = [
+        {
+            id: '001',
+            name: 'node001',
+            top: 50,
+            left: 50,
+        },
+        {
+            id: '002',
+            name: 'node002',
+            top: 250,
+            left: 50,
+        },
+        {
+            id: '003',
+            name: 'node003',
+            top: 140,
+            left: 450,
+        },
+    ];
+
+    ngAfterViewInit(): void {
+        this.jsplumbService.initJsPlumbInstance();
+        this.jsplumbService.initNode('.node');
+    }
 }