From 22050d0684629bf50dedd9eda20242c6aae62337 Mon Sep 17 00:00:00 2001
From: Lvbo163 <lv.bo163@zte.com.cn>
Date: Fri, 12 Jan 2018 10:47:38 +0800
Subject: change file encoding

change pc to unix

Issue-ID: SDC-910

Change-Id: I3fde01a1b8c8daa4ea34622f369fb2e04b59b47f
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
---
 sdc-workflow-designer-ui/src/app/app.component.ts  |    1 -
 sdc-workflow-designer-ui/src/app/app.module.ts     |   97 +-
 .../components/container/container.component.html  |    2 +-
 .../editable-property.component.css                |   52 +-
 .../editable-property.component.html               |    2 +-
 .../rest-config-list/rest-config-list.component.ts |    4 +-
 .../node-parameters/node-parameters.component.html |   42 +-
 .../node-parameters/node-parameters.component.ts   |  188 ++--
 .../parameter-tree/parameter-tree.component.html   |   46 +-
 .../parameter-tree/parameter-tree.component.ts     |  336 +++---
 .../src/app/components/node/node.component.css     |  456 ++++----
 .../src/app/components/node/node.component.html    |  298 ++---
 .../src/app/components/node/node.component.ts      |  226 ++--
 .../components/parameter/parameter.component.css   |   76 +-
 .../components/parameter/parameter.component.html  |   98 +-
 .../components/parameter/parameter.component.ts    |  308 +++---
 .../property/rest-task/rest-task.component.html    |    2 +-
 .../script-task/script-task.component.html         |   60 +-
 .../property/script-task/script-task.component.ts  |   48 +-
 .../start-event/start-event.component.html         |   50 +-
 .../property/start-event/start-event.component.ts  |   72 +-
 .../sequence-flow/sequence-flow.component.html     |    2 +-
 .../app/components/toolbar/toolbar.component.css   |  124 +--
 .../app/components/toolbar/toolbar.component.html  |  388 +++----
 .../app/components/toolbar/toolbar.component.ts    |   98 +-
 .../app/directive/resizable/resizable.directive.ts |   84 +-
 .../src/app/model/plan-model.ts                    |   34 +-
 .../src/app/model/topology/node-template.ts        |   36 +-
 .../src/app/model/workflow/error-event.ts          |   36 +-
 .../src/app/model/workflow/position.ts             |   30 +-
 .../src/app/model/workflow/script-task.ts          |   34 +-
 .../src/app/model/workflow/sub-process.ts          |   30 +-
 .../src/app/model/workflow/tosca-node-task.ts      |   44 +-
 .../src/app/model/workflow/workflow-element.ts     |   28 +-
 .../src/app/services/broadcast.service.ts          |    2 +-
 .../app/services/data/in-memory-data.service.ts    |   12 +-
 .../src/app/services/data/mockdata.ts              |    2 +-
 .../src/app/services/data/swagger.ts               |    1 -
 .../src/app/services/jsplumb.service.ts            | 1135 ++++++++++----------
 .../src/app/services/model.service.ts              | 1026 +++++++++---------
 .../src/app/services/rest.service.ts               |   46 +-
 .../src/app/shared/shared.module.ts                |   12 +-
 .../src/app/util/workflow-util.ts                  |   60 +-
 sdc-workflow-designer-ui/src/assets/i18n/en.json   |   92 +-
 .../src/assets/i18n/zh-CN.json                     |   92 +-
 sdc-workflow-designer-ui/src/styles.css            |   22 +-
 46 files changed, 2985 insertions(+), 2949 deletions(-)
 delete mode 100644 sdc-workflow-designer-ui/src/app/services/data/swagger.ts

diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index f6573450..54972b72 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -42,6 +42,5 @@ export class AppComponent {
             browserLang = window.navigator.language;
         }
         translate.use(browserLang);
-
     }
 }
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index 33f98d2b..88ccbc1e 100644
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -9,55 +9,57 @@
  * Contributors:
  *     ZTE - initial API and implementation and/or initial documentation
  */
-
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { AccordionModule } from 'ngx-bootstrap/accordion';
+import { AlertModule, ModalModule } from 'ngx-bootstrap/index';
 import { NgxTreeSelectModule } from 'ngx-tree-select';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { AlertModule, ModalModule } from 'ngx-bootstrap/index';
-import { AccordionModule } from 'ngx-bootstrap/accordion';
 
 import { AppComponent } from './app.component';
-import { JsPlumbService } from "./services/jsplumb.service";
-import { NodeComponent } from "./components/node/node.component";
-import { ToolbarComponent } from "./components/toolbar/toolbar.component";
-import { WorkflowService } from "./services/workflow.service";
-import { DataService } from "./services/data/data.service";
-import { HttpService } from "./util/http.service";
-import { SharedModule } from "./shared/shared.module";
-import { InMemoryWebApiModule } from "angular-in-memory-web-api";
-import { InMemoryDataService } from "./services/data/in-memory-data.service";
-import { HttpModule } from "@angular/http";
-import { RouterModule } from "@angular/router";
-import { BroadcastService } from "./services/broadcast.service";
-import { PropertiesComponent } from "./components/property/properties.component";
-import { ParameterComponent } from "./components/parameter/parameter.component";
-import { MenusComponent } from "./components/menus/menus.component";
-import { RestTaskComponent } from "./components/property/rest-task/rest-task.component";
-import { EditablePropertyComponent } from "./components/editable-property/editable-property.component";
-import { SwaggerTreeConverterService } from "./services/swagger-tree-converter.service";
-import { IntermediateCatchEventComponent } from "./components/property/intermediate-catch-event/intermediate-catch-event.component";
-import { SequenceFlowComponent } from "./components/sequence-flow/sequence-flow.component";
-import { ScriptTaskComponent } from "./components/property/script-task/script-task.component";
-import { WorkflowsComponent } from "./components/menus/workflows/workflows.component";
-import { ModelService } from './services/model.service';
 import { ContainerComponent } from './components/container/container.component';
-import { RestService } from './services/rest.service';
-import { ResizableDirective } from './directive/resizable/resizable.directive';
-import { StartEventComponent } from './components/property/start-event/start-event.component';
+import { EditablePropertyComponent } from './components/editable-property/editable-property.component';
 import { NodeParametersComponent } from './components/node-parameters/node-parameters.component';
 import { ParameterTreeComponent } from './components/node-parameters/parameter-tree/parameter-tree.component';
-import { NoticeService } from './services/notice.service';
-import { GlobalNoticeComponent } from './components/global-notice/global-notice.component';
-import { SettingService } from './services/setting.service';
-import { ErrorEventComponent } from './components/property/error-event/error-event.component';
+import { NodeComponent } from './components/node/node.component';
+import { ParameterComponent } from './components/parameter/parameter.component';
+import { IntermediateCatchEventComponent } from './components/property/intermediate-catch-event/intermediate-catch-event.component';
 import { NodeTemplateComponent } from './components/property/node-template/node-template.component';
-import { RestConfigComponent } from './components/menus/rest-config/rest-config.component';
+import { PropertiesComponent } from './components/property/properties.component';
+import { RestTaskComponent } from './components/property/rest-task/rest-task.component';
+import { ErrorEventComponent } from './components/property/error-event/error-event.component';
+import { StartEventComponent } from './components/property/start-event/start-event.component';
+import { SequenceFlowComponent } from './components/sequence-flow/sequence-flow.component';
 import { RestConfigDetailComponent } from './components/menus/rest-config/rest-config-detail/rest-config-detail.component';
 import { RestConfigListComponent } from './components/menus/rest-config/rest-config-list/rest-config-list.component';
+import { RestConfigComponent } from './components/menus/rest-config/rest-config.component';
+import { ToolbarComponent } from './components/toolbar/toolbar.component';
+
+import { ResizableDirective } from './directive/resizable/resizable.directive';
+
+import { BroadcastService } from './services/broadcast.service';
+import { DataService } from './services/data/data.service';
+import { JsPlumbService } from './services/jsplumb.service';
+import { ModelService } from './services/model.service';
+import { NoticeService } from './services/notice.service';
+import { RestService } from './services/rest.service';
+import { SwaggerTreeConverterService } from './services/swagger-tree-converter.service';
+import { SettingService } from './services/setting.service';
+
+import { SharedModule } from './shared/shared.module';
+import { HttpService } from './util/http.service';
+import { GlobalNoticeComponent } from './components/global-notice/global-notice.component';
+import { MenusComponent } from './components/menus/menus.component';
+import { ScriptTaskComponent } from "./components/property/script-task/script-task.component";
+import { WorkflowsComponent } from './components/menus/workflows/workflows.component';
+import { WorkflowService } from './services/workflow.service';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService } from './services/data/in-memory-data.service';
+import { HttpModule } from '@angular/http';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
@@ -68,38 +70,38 @@ export function HttpLoaderFactory(http: HttpClient) {
     declarations: [
         AppComponent,
         ContainerComponent,
-        ErrorEventComponent,
-        ResizableDirective,
         EditablePropertyComponent,
-        GlobalNoticeComponent,
+        ErrorEventComponent,
         IntermediateCatchEventComponent,
-        MenusComponent,
         NodeComponent,
         NodeParametersComponent,
         NodeTemplateComponent,
         ParameterComponent,
         ParameterTreeComponent,
         PropertiesComponent,
-        RestTaskComponent,
         RestConfigComponent,
-        RestConfigDetailComponent,
-        RestConfigListComponent,
+        RestTaskComponent,
+        SequenceFlowComponent,
         ScriptTaskComponent,
         StartEventComponent,
-        SequenceFlowComponent,
         ToolbarComponent,
+        RestConfigDetailComponent,
+        RestConfigListComponent,
+        ResizableDirective,
+        GlobalNoticeComponent,
+        MenusComponent,
         WorkflowsComponent,
     ],
     providers: [
         BroadcastService,
-        DataService,
         HttpService,
         JsPlumbService,
-	ModelService,
+        ModelService,
         NoticeService,
         RestService,
-        SettingService,
         SwaggerTreeConverterService,
+	DataService,
+        SettingService,
         WorkflowService
     ],
     imports: [
@@ -131,8 +133,9 @@ export function HttpLoaderFactory(http: HttpClient) {
         })
     ],
     bootstrap: [
-    	AppComponent,
+        AppComponent,
     ],
 })
 export class AppModule {
+
 }
diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.html b/sdc-workflow-designer-ui/src/app/components/container/container.component.html
index 0d9c5222..c40fbcda 100644
--- a/sdc-workflow-designer-ui/src/app/components/container/container.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.html
@@ -19,4 +19,4 @@
 
 <b4t-properties></b4t-properties>
 
-<b4t-sequence-flow></b4t-sequence-flow>
+<b4t-sequence-flow></b4t-sequence-flow>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css
index 431bf7c0..257a07df 100644
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.css
@@ -1,26 +1,26 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-.edit{
-    font-size: 24px;
-    width: 300px;
-    height: 30px;
-    border: 1px solid #fff;
-}
-
-.edit:hover{
-    border-color: #80bdff;
-}
-
-.edit:focus{
-    border-color: #80bdff;
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+.edit{
+    font-size: 24px;
+    width: 300px;
+    height: 30px;
+    border: 1px solid #fff;
+}
+
+.edit:hover{
+    border-color: #80bdff;
+}
+
+.edit:focus{
+    border-color: #80bdff;
+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
index 6a63f69a..3c804efb 100644
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
@@ -2,4 +2,4 @@
     (mouseover)="showEditComponent(true)" (mouseout)="showEditComponent(false)">
 <button *ngIf="showEdit" type="button" class="btn blue1 pull-left" (click)="stopEdit();">
     <i class="fa fa-check"></i>
-</button>
+</button>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts
index 59c9c9af..43120e85 100644
--- a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts
@@ -36,7 +36,9 @@ export class RestConfigListComponent {
     }
 
     public addRestConfig() {
-        const restConfig = this.restService.addRestConfig();
+
+        const restConfig = this.restService.newRestConfig();
+        this.restService.addRestConfig(restConfig);
 
         this.onConfigSelected(restConfig);
     }
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html
index 1b3e15c9..04e81966 100644
--- a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html
@@ -1,21 +1,21 @@
-<!--
-/*******************************************************************************
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- *******************************************************************************/
--->
-<b4t-parameter *ngFor="let param of pathParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>
-<hr *ngIf="pathParams.length > 0">
-<b4t-parameter *ngFor="let param of queryParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>
-
-<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="inputParams" [valueSource]="inputSources"
-    [planItems]="planItems"></b4t-parameter-tree>
-<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="outputParams" [valueSource]="outputSources"
-    [planItems]="planItems"></b4t-parameter-tree>
+<!--
+/*******************************************************************************
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ *******************************************************************************/
+-->
+<b4t-parameter *ngFor="let param of pathParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>
+<hr *ngIf="pathParams.length > 0">
+<b4t-parameter *ngFor="let param of queryParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>
+
+<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="inputParams" [valueSource]="inputSources"
+    [planItems]="planItems"></b4t-parameter-tree>
+<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="outputParams" [valueSource]="outputSources"
+    [planItems]="planItems"></b4t-parameter-tree>
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts
index 79643d36..5e7b24c7 100644
--- a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts
@@ -1,94 +1,94 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { TreeNode } from 'primeng/primeng';
-
-import { PlanTreeviewItem } from '../../model/plan-treeview-item';
-import { Swagger, SwaggerResponse } from '../../model/swagger';
-import { ValueSource } from '../../model/value-source.enum';
-import { RestParameter } from '../../model/workflow/rest-parameter';
-import { BroadcastService } from '../../services/broadcast.service';
-import { SwaggerTreeConverterService } from '../../services/swagger-tree-converter.service';
-import { RestService } from "../../services/rest.service";
-
-/**
- * property component presents information of a workflow node.
- * the presented information can be edit in this component.
- * it may load information dynamically. the content may be different for different node type.
- */
-@Component({
-    selector: 'b4t-node-parameters',
-    styleUrls: ['./node-parameters.component.css'],
-    templateUrl: 'node-parameters.component.html',
-})
-export class NodeParametersComponent implements OnChanges {
-    @Input() public swaggerInput: RestParameter[];
-    @Input() public swaggerOutput: SwaggerResponse[];
-    @Input() public restConfigId: string;
-    @Input() public planItems: PlanTreeviewItem[];
-
-    public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan];
-    public outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan];
-    public valueSource = ValueSource;
-    public pathParams: any[] = [];
-    public queryParams: any[] = [];
-    public inputParams: TreeNode[] = [];
-    public outputParams: TreeNode[] = [];
-
-    private index = 1;
-
-    constructor(private broadcastService: BroadcastService,
-        private restService: RestService,
-        private swaggerTreeConverterService: SwaggerTreeConverterService) {
-    }
-
-    public ngOnChanges(changes: SimpleChanges): void {
-        if (changes.swaggerInput && changes.swaggerInput.currentValue) {
-            this.resetRequestParams(changes.swaggerInput.currentValue);
-        }
-        if (changes.swaggerOutput && changes.swaggerOutput.currentValue) {
-            this.resetResponseParams(changes.swaggerOutput.currentValue);
-        }
-    }
-
-    public resetRequestParams(parameters: RestParameter[]) {
-        this.pathParams = [];
-        this.queryParams = [];
-        this.inputParams = [];
-
-        parameters.forEach(param => {
-            if (param.position === 'path') {
-                this.pathParams.push(param);
-            } else if (param.position === 'query') {
-                this.queryParams.push(param);
-            } else if (param.position === 'body') {
-                const requestTreeNode = this.swaggerTreeConverterService
-                    .schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), 'Request Param', param.schema, param.value);
-                param.value = requestTreeNode.value;
-                this.inputParams.push(requestTreeNode);
-            } else {
-                // TODO others param types not supported
-                console.log('Unsupport parameter position(in):' + param.position);
-            }
-        });
-    }
-
-    public resetResponseParams(responses: SwaggerResponse[]) {
-        this.outputParams = [];
-        if (0 < responses.length && responses[0].schema) {
-            const treeNode = this.swaggerTreeConverterService
-                .schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), 'Response Params', responses[0].schema, {});
-            this.outputParams.push(treeNode);
-        }
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { TreeNode } from 'primeng/primeng';
+
+import { PlanTreeviewItem } from '../../model/plan-treeview-item';
+import { Swagger, SwaggerResponse } from '../../model/swagger';
+import { ValueSource } from '../../model/value-source.enum';
+import { RestParameter } from '../../model/workflow/rest-parameter';
+import { BroadcastService } from '../../services/broadcast.service';
+import { SwaggerTreeConverterService } from '../../services/swagger-tree-converter.service';
+import { RestService } from "../../services/rest.service";
+
+/**
+ * property component presents information of a workflow node.
+ * the presented information can be edit in this component.
+ * it may load information dynamically. the content may be different for different node type.
+ */
+@Component({
+    selector: 'b4t-node-parameters',
+    styleUrls: ['./node-parameters.component.css'],
+    templateUrl: 'node-parameters.component.html',
+})
+export class NodeParametersComponent implements OnChanges {
+    @Input() public swaggerInput: RestParameter[];
+    @Input() public swaggerOutput: SwaggerResponse[];
+    @Input() public restConfigId: string;
+    @Input() public planItems: PlanTreeviewItem[];
+
+    public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan];
+    public outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan];
+    public valueSource = ValueSource;
+    public pathParams: any[] = [];
+    public queryParams: any[] = [];
+    public inputParams: TreeNode[] = [];
+    public outputParams: TreeNode[] = [];
+
+    private index = 1;
+
+    constructor(private broadcastService: BroadcastService,
+        private restService: RestService,
+        private swaggerTreeConverterService: SwaggerTreeConverterService) {
+    }
+
+    public ngOnChanges(changes: SimpleChanges): void {
+        if (changes.swaggerInput && changes.swaggerInput.currentValue) {
+            this.resetRequestParams(changes.swaggerInput.currentValue);
+        }
+        if (changes.swaggerOutput && changes.swaggerOutput.currentValue) {
+            this.resetResponseParams(changes.swaggerOutput.currentValue);
+        }
+    }
+
+    public resetRequestParams(parameters: RestParameter[]) {
+        this.pathParams = [];
+        this.queryParams = [];
+        this.inputParams = [];
+
+        parameters.forEach(param => {
+            if (param.position === 'path') {
+                this.pathParams.push(param);
+            } else if (param.position === 'query') {
+                this.queryParams.push(param);
+            } else if (param.position === 'body') {
+                const requestTreeNode = this.swaggerTreeConverterService
+                    .schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), 'Request Param', param.schema, param.value);
+                param.value = requestTreeNode.value;
+                this.inputParams.push(requestTreeNode);
+            } else {
+                // TODO others param types not supported
+                console.log('Unsupport parameter position(in):' + param.position);
+            }
+        });
+    }
+
+    public resetResponseParams(responses: SwaggerResponse[]) {
+        this.outputParams = [];
+        if (0 < responses.length && responses[0].schema) {
+            const treeNode = this.swaggerTreeConverterService
+                .schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), 'Response Params', responses[0].schema, {});
+            this.outputParams.push(treeNode);
+        }
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html
index cc17916c..5c03dc05 100644
--- a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html
@@ -1,23 +1,23 @@
-<p-tree *ngIf="parameters.length > 0" [value]="parameters">
-    <ng-template let-node pTemplate="default">
-        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="valueSource" [planItems]="planItems"
-            [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
-    </ng-template>
-
-    <ng-template let-node pTemplate="array">
-        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"
-            [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"
-            (insert)="addChildNode4ObjectArray(node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
-    </ng-template>
-
-    <ng-template let-node pTemplate="object">
-        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"
-            [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
-    </ng-template>
-
-    <ng-template let-node pTemplate="map">
-        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"
-            [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"
-            (insert)="addChildNode4DynamicObject(node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
-    </ng-template>
-</p-tree>
+<p-tree *ngIf="parameters.length > 0" [value]="parameters">
+    <ng-template let-node pTemplate="default">
+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="valueSource" [planItems]="planItems"
+            [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
+    </ng-template>
+
+    <ng-template let-node pTemplate="array">
+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"
+            [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"
+            (insert)="addChildNode4ObjectArray(node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
+    </ng-template>
+
+    <ng-template let-node pTemplate="object">
+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"
+            [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
+    </ng-template>
+
+    <ng-template let-node pTemplate="map">
+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"
+            [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"
+            (insert)="addChildNode4DynamicObject(node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
+    </ng-template>
+</p-tree>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts
index 1c74b707..b1f67d94 100644
--- a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts
@@ -1,168 +1,168 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-import { ChangeDetectionStrategy, Component, Input, OnChanges, Output, SimpleChange, SimpleChanges } from '@angular/core';
-import { TreeNode } from 'primeng/primeng';
-
-import { PlanTreeviewItem } from '../../../model/plan-treeview-item';
-import { ValueSource } from '../../../model/value-source.enum';
-import { ValueType } from '../../../model/value-type.enum';
-import { Parameter } from '../../../model/workflow/parameter';
-import { SwaggerTreeConverterService } from '../../../services/swagger-tree-converter.service';
-import { WorkflowUtil } from '../../../util/workflow-util';
-import { Swagger } from "../../../model/swagger";
-import { RestService } from "../../../services/rest.service";
-
-/**
- * parameter tree presents parameter of task node's input or output parameters.
- */
-@Component({
-    selector: 'b4t-parameter-tree',
-    styleUrls: ['./parameter-tree.component.css'],
-    templateUrl: 'parameter-tree.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ParameterTreeComponent implements OnChanges {
-    @Input() public parameters: TreeNode[];
-    @Input() public restConfigId: string;
-    @Input() public valueSource: ValueSource[];
-    @Input() public planItems: PlanTreeviewItem[];
-
-    constructor(private restService: RestService, private swaggerTreeConverterService: SwaggerTreeConverterService) { }
-
-    public ngOnChanges(changes: SimpleChanges) {
-    }
-
-    public getParameter(node: any): Parameter {
-        // console.log('Parameter init:' + node.label +'.'+ node.type+'.'+JSON.stringify(node.value.value)+'.'+node.value.valueSource);
-
-        return new Parameter(node.label, node.value.value, node.value.valueSource, node.definition.type, node.definition.reqquired);
-    }
-
-
-    public paramChange(param: Parameter, node: any) {
-        // console.log('Parameter change:' + param.name + ', Node label is:' + node.label);
-
-        node.value.valueSource = param.valueSource;
-        node.value.value = param.value;
-
-        this.objectParameterChange(node);
-
-        if (node.label !== param.name) {
-            delete node.parent.value.value[node.label];
-            node.label = param.name;
-        }
-        if (node.parent) {
-            node.parent.value.value[node.label] = node.value;
-        }else{
-            // this parameter is 'request param' or 'response param'
-        }
-
-    }
-
-    private objectParameterChange(node: any) {
-        if (node.value.valueSource === ValueSource[ValueSource.Definition]) { // value will be set by node defintion
-            const treeNode = this.swaggerTreeConverterService.schema2TreeNode(this.getSwagger(), node.label, node.definition, node.value);
-            node.value = treeNode.value;
-            node.children = treeNode.children;
-        } else {  // parameter value will be set by param
-            node.children = [];
-        }
-    }
-
-    private getSwagger(): Swagger {
-        return this.restService.getSwaggerInfo(this.restConfigId);
-    }
-
-    public addChildNode4DynamicObject(node: any) {
-        const copyItem = WorkflowUtil.deepClone(node.definition.additionalProperties);
-        const key = Object.keys(node.value.value).length;
-
-        const childrenNode = this.swaggerTreeConverterService
-            .schema2TreeNode(this.getSwagger(), key, copyItem);
-
-        childrenNode.keyEditable = true;
-        node.value.value[key] = childrenNode.value;
-
-        node.children.push(childrenNode);
-    }
-
-    public addChildNode4ObjectArray(node: any) {
-        const copyItem = WorkflowUtil.deepClone(node.definition.items);
-
-        const childrenNode = this.swaggerTreeConverterService
-            .schema2TreeNode(
-            this.getSwagger(),
-            node.children.length,
-            copyItem);
-
-        node.value.value.push(childrenNode.value);
-        node.children.push(childrenNode);
-    }
-
-    public deleteTreeNode(node: any) {
-        if ('array' === node.parent.type) {
-            // delete data
-            node.parent.value.value.splice(node.label, 1);
-            node.parent.children.splice(node.label, 1);
-
-            // update node index
-            node.parent.children.forEach((childNode, index) => childNode.label = index);
-        } else if ('map' === node.parent.type) {
-            delete node.parent.value.value[node.label];
-            for (let index = 0; index < node.parent.children.length; index++) {
-                const element = node.parent.children[index];
-                if (element.label === node.label) {
-                    node.parent.children.splice(index, 1);
-                    break;
-                }
-            }
-        }
-    }
-
-    public canInsert(node: any) {
-        if (node.value.valueSource !== ValueSource[ValueSource.Definition]) {
-            return false;
-        } else {
-            return this.isArrayObject(node) || this.isDynamicObject(node);
-        }
-    }
-
-    public canDelete(node: any) {
-        const parent = node.parent;
-        if (parent &&
-            (this.isArrayObject(parent) || this.isDynamicObject(parent))) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    public getObjectValueSource(): ValueSource[] {
-        const result = [];
-        this.valueSource.forEach(source => {
-            if (ValueSource.String != source) {
-                result.push(source);
-            }
-        });
-        result.push(ValueSource.Definition);
-        return result;
-    }
-
-    private isArrayObject(node: any): boolean {
-        return node.type === 'array';
-    }
-
-    private isDynamicObject(node: any): boolean {
-        return node.type === 'map';
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnChanges, Output, SimpleChange, SimpleChanges } from '@angular/core';
+import { TreeNode } from 'primeng/primeng';
+
+import { PlanTreeviewItem } from '../../../model/plan-treeview-item';
+import { ValueSource } from '../../../model/value-source.enum';
+import { ValueType } from '../../../model/value-type.enum';
+import { Parameter } from '../../../model/workflow/parameter';
+import { SwaggerTreeConverterService } from '../../../services/swagger-tree-converter.service';
+import { WorkflowUtil } from '../../../util/workflow-util';
+import { Swagger } from "../../../model/swagger";
+import { RestService } from "../../../services/rest.service";
+
+/**
+ * parameter tree presents parameter of task node's input or output parameters.
+ */
+@Component({
+    selector: 'b4t-parameter-tree',
+    styleUrls: ['./parameter-tree.component.css'],
+    templateUrl: 'parameter-tree.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ParameterTreeComponent implements OnChanges {
+    @Input() public parameters: TreeNode[];
+    @Input() public restConfigId: string;
+    @Input() public valueSource: ValueSource[];
+    @Input() public planItems: PlanTreeviewItem[];
+
+    constructor(private restService: RestService, private swaggerTreeConverterService: SwaggerTreeConverterService) { }
+
+    public ngOnChanges(changes: SimpleChanges) {
+    }
+
+    public getParameter(node: any): Parameter {
+        // console.log('Parameter init:' + node.label +'.'+ node.type+'.'+JSON.stringify(node.value.value)+'.'+node.value.valueSource);
+        
+        return new Parameter(node.label, node.value.value, node.value.valueSource, node.definition.type, node.definition.reqquired);
+    }
+
+
+    public paramChange(param: Parameter, node: any) {
+        // console.log('Parameter change:' + param.name + ', Node label is:' + node.label);
+        
+        node.value.valueSource = param.valueSource;
+        node.value.value = param.value;
+
+        this.objectParameterChange(node);
+
+        if (node.label !== param.name) {
+            delete node.parent.value.value[node.label];
+            node.label = param.name;
+        }
+        if (node.parent) {
+            node.parent.value.value[node.label] = node.value;
+        }else{
+            // this parameter is 'request param' or 'response param'
+        }
+
+    }
+
+    private objectParameterChange(node: any) {
+        if (node.value.valueSource === ValueSource[ValueSource.Definition]) { // value will be set by node defintion
+            const treeNode = this.swaggerTreeConverterService.schema2TreeNode(this.getSwagger(), node.label, node.definition, node.value);
+            node.value = treeNode.value;
+            node.children = treeNode.children;
+        } else {  // parameter value will be set by param
+            node.children = [];
+        }
+    }
+
+    private getSwagger(): Swagger {
+        return this.restService.getSwaggerInfo(this.restConfigId);
+    }
+
+    public addChildNode4DynamicObject(node: any) {
+        const copyItem = WorkflowUtil.deepClone(node.definition.additionalProperties);
+        const key = Object.keys(node.value.value).length;
+
+        const childrenNode = this.swaggerTreeConverterService
+            .schema2TreeNode(this.getSwagger(), key, copyItem);
+
+        childrenNode.keyEditable = true;
+        node.value.value[key] = childrenNode.value;
+
+        node.children.push(childrenNode);
+    }
+
+    public addChildNode4ObjectArray(node: any) {
+        const copyItem = WorkflowUtil.deepClone(node.definition.items);
+
+        const childrenNode = this.swaggerTreeConverterService
+            .schema2TreeNode(
+            this.getSwagger(),
+            node.children.length,
+            copyItem);
+
+        node.value.value.push(childrenNode.value);
+        node.children.push(childrenNode);
+    }
+
+    public deleteTreeNode(node: any) {
+        if ('array' === node.parent.type) {
+            // delete data
+            node.parent.value.value.splice(node.label, 1);
+            node.parent.children.splice(node.label, 1);
+
+            // update node index
+            node.parent.children.forEach((childNode, index) => childNode.label = index);
+        } else if ('map' === node.parent.type) {
+            delete node.parent.value.value[node.label];
+            for (let index = 0; index < node.parent.children.length; index++) {
+                const element = node.parent.children[index];
+                if (element.label === node.label) {
+                    node.parent.children.splice(index, 1);
+                    break;
+                }
+            }
+        }
+    }
+
+    public canInsert(node: any) {
+        if (node.value.valueSource !== ValueSource[ValueSource.Definition]) {
+            return false;
+        } else {
+            return this.isArrayObject(node) || this.isDynamicObject(node);
+        }
+    }
+
+    public canDelete(node: any) {
+        const parent = node.parent;
+        if (parent &&
+            (this.isArrayObject(parent) || this.isDynamicObject(parent))) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    public getObjectValueSource(): ValueSource[] {
+        const result = [];
+        this.valueSource.forEach(source => {
+            if (ValueSource.String != source) {
+                result.push(source);
+            }
+        });
+        result.push(ValueSource.Definition);
+        return result;
+    }
+
+    private isArrayObject(node: any): boolean {
+        return node.type === 'array';
+    }
+
+    private isDynamicObject(node: any): boolean {
+        return node.type === 'map';
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.css b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
index d0c35868..85cb0422 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.css
@@ -1,228 +1,228 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-.node {
-    cursor: pointer;
-    display: inline-block;
-    position: absolute;
-    z-index: 2;
-}
-
-.node-icon{
-    border-radius: 4px;
-}
-
-.node-icon svg{
-    display: block;
-    fill: #00ABFF;
-}
-
-.active {
-    outline: 1px solid #00ABFF;
-}
-
-/**
- * Anchors
- */
-.anchors {
-    position: absolute;
-    border-radius: 1em;
-    display: none;
-    background-color: #2e6f9a;
-    width: 12px;
-    height: 12px;
-    cursor: pointer;
-    -ms-transition: all 0.15s ease-in-out;
-    transition: all 0.15s ease-in-out;
-    -moz-transition: all 0.15s ease-in-out;
-    -webkit-transition: all 0.15s ease-in-out;
-    -o-transition: all 0.15s ease-in-out;
-}
-
-.node-icon:hover > .anchors {
-    display: inline-block;
-}
-
-.anchor-left {
-    left: -6px;
-    top: calc(50%);
-}
-
-.anchor-right {
-    right: -6px;
-    top: calc(50%);
-}
-
-.anchor-top {
-    top: -6px;
-    left: calc(50% - 6px);
-}
-
-.anchor-bottom {
-    bottom: -6px;
-    left: calc(50% - 6px);
-}
-
-/*right arrow*/
-.right {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    left: 4px;
-    top: 1px;
-
-}
-
-.right-arrow1, .right-arrow2 {
-    width: 0;
-    height: 0;
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    border-top: 5px transparent dashed;
-    border-right: 5px transparent dashed;
-    border-bottom: 5px transparent dashed;
-    border-left: 5px #2e6f9a solid;
-    overflow: hidden;
-}
-
-.right-arrow1 {
-
-    border-left: 5px white solid;
-}
-
-.right-arrow2 {
-    left: -2px;
-}
-
-/*left arrow */
-.left {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    left: -2px;
-    top: 1px;
-    z-index: 2;
-}
-
-.left-arrow1, .left-arrow2 {
-    width: 0;
-    height: 0;
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 5; /*ie8-*/
-    border-top: 5px transparent dashed;
-    border-left: 5px transparent dashed;
-    border-bottom: 5px transparent dashed;
-    border-right: 5px #2e6f9a solid;
-    overflow: hidden;
-}
-
-.left-arrow1 {
-    border-right: 5px #fff solid;
-}
-
-.left-arrow2 {
-    left: 2px;
-}
-
-/*top arrow*/
-.top {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    left: 1px;
-    z-index: 2;
-}
-
-.top-arrow1, .top-arrow2 {
-    width: 0;
-    height: 0;
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 5;
-    border-bottom: 5px #2e6f9a solid;
-    border-left: 5px transparent dashed;
-    border-right: 5px transparent dashed;
-    border-top: 5px transparent dashed;
-    overflow: hidden;
-}
-
-.top-arrow1 {
-    z-index: 6;
-}
-
-.top-arrow2 {
-    top: -2px;
-    border-bottom: 5px white solid;
-}
-
-/*bottom arrow*/
-.bottom {
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    left: 1px;
-    top: 4px;
-    z-index: 2;
-}
-
-.bottom-arrow1, .bottom-arrow2 {
-    width: 0;
-    height: 0;
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 5;
-    border-bottom: 5px transparent dashed;
-    border-left: 5px transparent dashed;
-    border-right: 5px transparent dashed;
-    border-top: 5px #2e6f9a solid;
-    overflow: hidden;
-}
-
-.bottom-arrow1 {
-    top: -2px;
-    z-index: 6;
-}
-
-.bottom-arrow2 {
-    border-top: 5px white solid;
-}
-/**
- * Anchors End
- */
-
-.node .name {
-    width: 55px;
-    height: 12px;
-    text-align: center;
-    white-space: nowrap;
-    color: #5c6d90;
-    line-height: 12px;
-    cursor: pointer;
-    font-family: Arial;
-    font-size: 12px;
-}
-
-.resizeable {
-    background-color: darkolivegreen;
-    border:1px solid blue;
-    margin: 10px;
-}
-
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+.node {
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    z-index: 2;
+}
+
+.node-icon{
+    border-radius: 4px;
+}
+
+.node-icon svg{
+    display: block;
+    fill: #00ABFF;
+}
+
+.active {
+    outline: 1px solid #00ABFF;
+}
+
+/**
+ * Anchors
+ */
+.anchors {
+    position: absolute;
+    border-radius: 1em;
+    display: none;
+    background-color: #2e6f9a;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    -ms-transition: all 0.15s ease-in-out;
+    transition: all 0.15s ease-in-out;
+    -moz-transition: all 0.15s ease-in-out;
+    -webkit-transition: all 0.15s ease-in-out;
+    -o-transition: all 0.15s ease-in-out;
+}
+
+.node-icon:hover > .anchors {
+    display: inline-block;
+}
+
+.anchor-left {
+    left: -6px;
+    top: calc(50%);
+}
+
+.anchor-right {
+    right: -6px;
+    top: calc(50%);
+}
+
+.anchor-top {
+    top: -6px;
+    left: calc(50% - 6px);
+}
+
+.anchor-bottom {
+    bottom: -6px;
+    left: calc(50% - 6px);
+}
+
+/*right arrow*/
+.right {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: 4px;
+    top: 1px;
+
+}
+
+.right-arrow1, .right-arrow2 {
+    width: 0;
+    height: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-top: 5px transparent dashed;
+    border-right: 5px transparent dashed;
+    border-bottom: 5px transparent dashed;
+    border-left: 5px #2e6f9a solid;
+    overflow: hidden;
+}
+
+.right-arrow1 {
+
+    border-left: 5px white solid;
+}
+
+.right-arrow2 {
+    left: -2px;
+}
+
+/*left arrow */
+.left {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: -2px;
+    top: 1px;
+    z-index: 2;
+}
+
+.left-arrow1, .left-arrow2 {
+    width: 0;
+    height: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 5; /*ie8-*/
+    border-top: 5px transparent dashed;
+    border-left: 5px transparent dashed;
+    border-bottom: 5px transparent dashed;
+    border-right: 5px #2e6f9a solid;
+    overflow: hidden;
+}
+
+.left-arrow1 {
+    border-right: 5px #fff solid;
+}
+
+.left-arrow2 {
+    left: 2px;
+}
+
+/*top arrow*/
+.top {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: 1px;
+    z-index: 2;
+}
+
+.top-arrow1, .top-arrow2 {
+    width: 0;
+    height: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 5;
+    border-bottom: 5px #2e6f9a solid;
+    border-left: 5px transparent dashed;
+    border-right: 5px transparent dashed;
+    border-top: 5px transparent dashed;
+    overflow: hidden;
+}
+
+.top-arrow1 {
+    z-index: 6;
+}
+
+.top-arrow2 {
+    top: -2px;
+    border-bottom: 5px white solid;
+}
+
+/*bottom arrow*/
+.bottom {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    left: 1px;
+    top: 4px;
+    z-index: 2;
+}
+
+.bottom-arrow1, .bottom-arrow2 {
+    width: 0;
+    height: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 5;
+    border-bottom: 5px transparent dashed;
+    border-left: 5px transparent dashed;
+    border-right: 5px transparent dashed;
+    border-top: 5px #2e6f9a solid;
+    overflow: hidden;
+}
+
+.bottom-arrow1 {
+    top: -2px;
+    z-index: 6;
+}
+
+.bottom-arrow2 {
+    border-top: 5px white solid;
+}
+/**
+ * Anchors End
+ */
+
+.node .name {
+    width: 55px;
+    height: 12px;
+    text-align: center;
+    white-space: nowrap;
+    color: #5c6d90;
+    line-height: 12px;
+    cursor: pointer;
+    font-family: Arial;
+    font-size: 12px;
+}
+
+.resizeable {
+    background-color: darkolivegreen;
+    border:1px solid blue;
+    margin: 10px;
+}
+
diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.html b/sdc-workflow-designer-ui/src/app/components/node/node.component.html
index 3f4c9389..1b9c4b1a 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.html
@@ -1,149 +1,149 @@
-<!--
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
--->
-<div (click)="onClick($event)" (mousedown)="onMousedown()" (dblclick)="showProperties($event)" class="node" id="{{node.id}}"
-    (mouseover)="onMouseOver($event, $event.target.parentNode)" (mouseout)="onMouseOut($event, $event.target.parentNode)" [style.top]="node.position.top + 'px'"
-    [style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'" #nodeItem>
-
-    <div class="name">{{node.name}}</div>
-
-    <div *ngIf="canHaveChildren()" b4tResizable class="node-icon" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'"
-        [class.active]="active">
-        <b4t-node *ngFor="let child of node.children" [node]="child" [rank]="rank + 10"></b4t-node>
-        <div class="anchor anchors anchor-left">
-            <span class="left">
-                <i class="left-arrow1"></i>
-                <i class="left-arrow2"></i>
-            </span>
-        </div>
-        <div class="anchor anchors anchor-right">
-            <span class="right">
-                <i class="right-arrow1"></i>
-                <i class="right-arrow2"></i>
-            </span>
-        </div>
-    </div>
-
-    <div *ngIf="!canHaveChildren()" class="node-icon" [class.active]="active">
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'">
-            <g [ngSwitch]="node.type">
-                <g *ngSwitchCase="nodeType[nodeType.startEvent]">
-                    <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
-                        s15-6.7,15-15S23.3,0,15,0L15,0z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.endEvent]">
-                    <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
-                        s15-6.7,15-15S23.3,0,15,0L15,0z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.errorStartEvent]">
-                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2
-                        s13,5.8,13,13S22.2,28,15,28z" />
-                    <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16
-                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
-                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6
-                        c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z"
-                    />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.errorEndEvent]">
-                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4
-                        s11,4.9,11,11S21.1,26,15,26z" />
-                    <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10
-                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
-                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]">
-                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
-                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
-                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
-                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
-                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
-                    <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1
-                        C25.7,15.5,25.2,15.1,24.7,15.1z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.restTask]">
-                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
-                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
-                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
-                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
-                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
-                    <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2
-                        c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4
-                        c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z"
-                    />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.exclusiveGateway]">
-                    <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4
-                        l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z"
-                    />
-                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
-                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
-                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
-                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.parallelGateway]">
-                    <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1
-                        s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z" />
-                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
-                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
-                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
-                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.subProcess]">
-                    <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4
-                        v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4
-                        c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z" />
-                    <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5
-                        c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]">
-                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26
-                        c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4
-                        c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z"
-                    />
-                    <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9
-                        c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" />
-                </g>
-                <g *ngSwitchCase="nodeType[nodeType.scriptTask]">
-                    <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4
-                        c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6
-                        c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4
-                        c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5
-                        C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3
-                        c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8
-                        c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3
-                        c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0
-                        l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5
-                        l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" />
-                    <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
-                        l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" />
-                    <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2
-                        c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" />
-                    <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1
-                        c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />
-                </g>
-            </g>
-        </svg>
-        <div class="anchor anchors anchor-left">
-            <span class="left">
-                <i class="left-arrow1"></i>
-                <i class="left-arrow2"></i>
-            </span>
-        </div>
-        <div class="anchor anchors anchor-right">
-            <span class="right">
-                <i class="right-arrow1"></i>
-                <i class="right-arrow2"></i>
-            </span>
-        </div>
-    </div>
-</div>
+<!--
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+-->
+<div (click)="onClick($event)" (mousedown)="onMousedown()" (dblclick)="showProperties($event)" class="node" id="{{node.id}}"
+    (mouseover)="onMouseOver($event, $event.target.parentNode)" (mouseout)="onMouseOut($event, $event.target.parentNode)" [style.top]="node.position.top + 'px'"
+    [style.left]="node.position.left + 'px'" [style.width]="node.position.width + 'px'" #nodeItem>
+
+    <div class="name">{{node.name}}</div>
+
+    <div *ngIf="canHaveChildren()" b4tResizable class="node-icon" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'"
+        [class.active]="active">
+        <b4t-node *ngFor="let child of node.children" [node]="child" [rank]="rank + 10"></b4t-node>
+        <div class="anchor anchors anchor-left">
+            <span class="left">
+                <i class="left-arrow1"></i>
+                <i class="left-arrow2"></i>
+            </span>
+        </div>
+        <div class="anchor anchors anchor-right">
+            <span class="right">
+                <i class="right-arrow1"></i>
+                <i class="right-arrow2"></i>
+            </span>
+        </div>
+    </div>
+
+    <div *ngIf="!canHaveChildren()" class="node-icon" [class.active]="active">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" [style.width]="node.position.width + 'px'" [style.height]="node.position.height + 'px'">
+            <g [ngSwitch]="node.type">
+                <g *ngSwitchCase="nodeType[nodeType.startEvent]">
+                    <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
+                        s15-6.7,15-15S23.3,0,15,0L15,0z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.endEvent]">
+                    <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
+                        s15-6.7,15-15S23.3,0,15,0L15,0z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.errorStartEvent]">
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2
+                        s13,5.8,13,13S22.2,28,15,28z" />
+                    <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16
+                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
+                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6
+                        c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z"
+                    />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.errorEndEvent]">
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4
+                        s11,4.9,11,11S21.1,26,15,26z" />
+                    <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10
+                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
+                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]">
+                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
+                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
+                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
+                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
+                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
+                    <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1
+                        C25.7,15.5,25.2,15.1,24.7,15.1z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.restTask]">
+                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
+                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
+                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
+                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
+                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
+                    <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2
+                        c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4
+                        c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z"
+                    />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.exclusiveGateway]">
+                    <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4
+                        l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z"
+                    />
+                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
+                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
+                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
+                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.parallelGateway]">
+                    <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1
+                        s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z" />
+                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
+                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
+                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
+                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.subProcess]">
+                    <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4
+                        v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4
+                        c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z" />
+                    <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5
+                        c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]">
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26
+                        c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4
+                        c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z"
+                    />
+                    <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9
+                        c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" />
+                </g>
+                <g *ngSwitchCase="nodeType[nodeType.scriptTask]">
+                    <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4
+                        c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6
+                        c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4
+                        c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5
+                        C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3
+                        c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8
+                        c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3
+                        c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0
+                        l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5
+                        l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" />
+                    <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
+                        l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" />
+                    <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2
+                        c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" />
+                    <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1
+                        c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />
+                </g>
+            </g>
+        </svg>
+        <div class="anchor anchors anchor-left">
+            <span class="left">
+                <i class="left-arrow1"></i>
+                <i class="left-arrow2"></i>
+            </span>
+        </div>
+        <div class="anchor anchors anchor-right">
+            <span class="right">
+                <i class="right-arrow1"></i>
+                <i class="right-arrow2"></i>
+            </span>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
index e688e973..5fd2caef 100644
--- a/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/node/node.component.ts
@@ -1,113 +1,113 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
-
-import { Subscription } from 'rxjs/Subscription';
-import { SubProcess } from '../../model/workflow/sub-process';
-import { WorkflowNode } from '../../model/workflow/workflow-node';
-import { BroadcastService } from '../../services/broadcast.service';
-import { JsPlumbService } from '../../services/jsplumb.service';
-import { ModelService } from '../../services/model.service';
-import { NodeType } from '../../model/workflow/node-type.enum';
-
-/**
- * node component represent a single workflow node.
- * every node would be rendered on the container component
- */
-@Component({
-    selector: 'b4t-node',
-    styleUrls: ['./node.component.css'],
-    templateUrl: 'node.component.html',
-})
-export class NodeComponent implements AfterViewInit, OnDestroy {
-    @Input() public node: WorkflowNode;
-    @Input() public rank: number;
-    @ViewChild('nodeItem') nodeItem: ElementRef;
-
-    public nodeType = NodeType;
-    public active = false;
-    private currentWorkflowSubscription: Subscription;
-    private isMoving = false;
-
-    constructor(private jsPlumbService: JsPlumbService,
-        private modelService: ModelService,
-        private broadcastService: BroadcastService) {
-    }
-
-    public ngAfterViewInit() {
-        this.jsPlumbService.initJsPlumbInstance(this.node.parentId);
-        this.jsPlumbService.initNode(this.node);
-
-        if (this.canHaveChildren()) {
-            this.jsPlumbService.nodeDroppable(this.node, this.rank);
-            this.jsPlumbService.connectChildrenNodes(this.node.id);
-        }
-
-        this.currentWorkflowSubscription = this.broadcastService.selectedElement$.subscribe(activeNodes => {
-            let active = false;
-            for (let index = 0; index < activeNodes.length; index++) {
-                let activeNode = activeNodes[index] as WorkflowNode;
-                if (activeNode.id === this.node.id) {
-                    active = true;
-                    break;
-                }
-            }
-            this.active = active;
-        });
-    }
-
-    public ngOnDestroy() {
-        this.currentWorkflowSubscription.unsubscribe();
-        if (this.nodeItem.nativeElement.onmousemove) {
-            this.nodeItem.nativeElement.onmousemove = null;
-        }
-    }
-
-    public onMousedown() {
-        let currentThis = this;
-        this.nodeItem.nativeElement.onmousemove = function () {
-            currentThis.isMoving = true;
-        };
-    }
-
-    public onClick(event) {
-        if (this.nodeItem.nativeElement.onmousemove) {
-            this.nodeItem.nativeElement.onmousemove = null;
-        }
-        if (this.isMoving && this.active) {
-            this.isMoving = false;
-            return;
-        }
-        event.stopPropagation();
-        this.broadcastService.broadcast(this.broadcastService.showProperty, null);
-        this.broadcastService.broadcast(this.broadcastService.selectedElement, [this.node]);
-    }
-
-    public canHaveChildren(): boolean {
-        return this.node.type === 'subProcess';
-    }
-
-    public onMouseOut(event, target) {
-        event.stopPropagation();
-        target.classList.remove('hover');
-    }
-
-    public onMouseOver(event, target) {
-        event.stopPropagation();
-        target.classList.add('hover');
-    }
-
-    public showProperties(event) {
-        event.stopPropagation();
-        this.broadcastService.broadcast(this.broadcastService.showProperty, this.node);
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
+
+import { Subscription } from 'rxjs/Subscription';
+import { SubProcess } from '../../model/workflow/sub-process';
+import { WorkflowNode } from '../../model/workflow/workflow-node';
+import { BroadcastService } from '../../services/broadcast.service';
+import { JsPlumbService } from '../../services/jsplumb.service';
+import { ModelService } from '../../services/model.service';
+import { NodeType } from '../../model/workflow/node-type.enum';
+
+/**
+ * node component represent a single workflow node.
+ * every node would be rendered on the container component
+ */
+@Component({
+    selector: 'b4t-node',
+    styleUrls: ['./node.component.css'],
+    templateUrl: 'node.component.html',
+})
+export class NodeComponent implements AfterViewInit, OnDestroy {
+    @Input() public node: WorkflowNode;
+    @Input() public rank: number;
+    @ViewChild('nodeItem') nodeItem: ElementRef;
+
+    public nodeType = NodeType;
+    public active = false;
+    private currentWorkflowSubscription: Subscription;
+    private isMoving = false;
+
+    constructor(private jsPlumbService: JsPlumbService,
+        private modelService: ModelService,
+        private broadcastService: BroadcastService) {
+    }
+
+    public ngAfterViewInit() {
+        this.jsPlumbService.initJsPlumbInstance(this.node.parentId);
+        this.jsPlumbService.initNode(this.node);
+
+        if (this.canHaveChildren()) {
+            this.jsPlumbService.nodeDroppable(this.node, this.rank);
+            this.jsPlumbService.connectChildrenNodes(this.node.id);
+        }
+
+        this.currentWorkflowSubscription = this.broadcastService.selectedElement$.subscribe(activeNodes => {
+            let active = false;
+            for (let index = 0; index < activeNodes.length; index++) {
+                let activeNode = activeNodes[index] as WorkflowNode;
+                if (activeNode.id === this.node.id) {
+                    active = true;
+                    break;
+                }
+            }
+            this.active = active;
+        });
+    }
+
+    public ngOnDestroy() {
+        this.currentWorkflowSubscription.unsubscribe();
+        if (this.nodeItem.nativeElement.onmousemove) {
+            this.nodeItem.nativeElement.onmousemove = null;
+        }
+    }
+
+    public onMousedown() {
+        let currentThis = this;
+        this.nodeItem.nativeElement.onmousemove = function () {
+            currentThis.isMoving = true;
+        };
+    }
+
+    public onClick(event) {
+        if (this.nodeItem.nativeElement.onmousemove) {
+            this.nodeItem.nativeElement.onmousemove = null;
+        }
+        if (this.isMoving && this.active) {
+            this.isMoving = false;
+            return;
+        }
+        event.stopPropagation();
+        this.broadcastService.broadcast(this.broadcastService.showProperty, null);
+        this.broadcastService.broadcast(this.broadcastService.selectedElement, [this.node]);
+    }
+
+    public canHaveChildren(): boolean {
+        return this.node.type === 'subProcess';
+    }
+
+    public onMouseOut(event, target) {
+        event.stopPropagation();
+        target.classList.remove('hover');
+    }
+
+    public onMouseOver(event, target) {
+        event.stopPropagation();
+        target.classList.add('hover');
+    }
+
+    public showProperties(event) {
+        event.stopPropagation();
+        this.broadcastService.broadcast(this.broadcastService.showProperty, this.node);
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css
index fdcd38d7..9cf5d60f 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css
@@ -1,38 +1,38 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
- .form-control-label{
-    margin-bottom: 0;
-    width: 100px;
-    vertical-align: middle;
-}
-
-.parameter-item{
-    display: inline;
-    margin-left: 5px;
-    vertical-align: middle;
-}
-
-.form-control-required{
-    color: red;
-    height: 30px;
-    line-height: 30px;
-}
-
-.form-control-input{
-    width: 120px;
-    vertical-align: middle;
-}
-
-.form-control-value{
-    width: 160px;
-    display: inline-block;
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+.form-control-label{
+    margin-bottom: 0;
+    width: 100px;
+    vertical-align: middle;
+}
+
+.parameter-item{
+    display: inline;
+    margin-left: 5px;
+    vertical-align: middle;
+}
+
+.form-control-required{
+    color: red;
+    height: 30px;
+    line-height: 30px;
+}
+
+.form-control-input{
+    width: 120px;
+    vertical-align: middle;
+}
+
+.form-control-value{
+    width: 160px;
+    display: inline-block;
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
index 72e77990..50ec0449 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
@@ -1,49 +1,49 @@
-<!--
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
--->
-
-<div class="form-group">
-    <div *ngIf="showLabel" class="parameter-item" style="margin:0;">
-        <label *ngIf="true === param.required" class="form-control-required">*</label>
-        <input *ngIf="canEditName" class="form-control form-control-input" type="text" [ngModel]="param.name" (ngModelChange)="keyChange($event)">
-        <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label>
-    </div>
-    <div class="parameter-item">
-        <div *ngIf="showValue" [ngSwitch]="param.valueSource" class="parameter-item">
-            <input *ngSwitchCase="sourceEnum[sourceEnum.String]" class="form-control form-control-value" type="text" [ngModel]="param.value"
-                (ngModelChange)="valueChange($event)">
-            <input *ngSwitchCase="sourceEnum[sourceEnum.Variable]" class="form-control form-control-value" type="text" [ngModel]="param.value"
-                (ngModelChange)="valueChange($event)">
-            <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" style="vertical-align:top;" [items]="planOptions" childrenField="children"
-                #simpleSelect="ngModel" class="form-control-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select>
-            <select *ngSwitchCase="sourceEnum[sourceEnum.Topology]" class="form-control form-control-value" type="text" [ngModel]="param.value"
-                (ngModelChange)="valueChange($event)">
-                <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}}</option>
-            </select>
-        </div>
-        <select *ngIf="showValueSource" class="form-control parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource"
-            (ngModelChange)="valueSourceChange($event)">
-            <option *ngFor="let sourceType of valueSource" value="{{sourceEnum[sourceType]}}">{{sourceEnum[sourceType]}}</option>
-        </select>
-    </div>
-    <div *ngIf="canInsert" class="parameter-item">
-        <button type="button" class="btn blue1" (click)="insertParam()">
-            <i class="fa fa-plus"></i>
-        </button>
-    </div>
-    <div *ngIf="canDelete" class="parameter-item">
-        <button type="button" class="btn oes-red-bg" (click)="deleteParam()">
-            <i class="fa fa-minus"></i>
-        </button>
-    </div>
-</div>
+<!--
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+-->
+
+<div class="form-group">
+    <div *ngIf="showLabel" class="parameter-item" style="margin:0;">
+        <label *ngIf="true === param.required" class="form-control-required">*</label>
+        <input *ngIf="canEditName" class="form-control form-control-input" type="text" [ngModel]="param.name" (ngModelChange)="keyChange($event)">
+        <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label>
+    </div>
+    <div class="parameter-item">
+        <div *ngIf="showValue" [ngSwitch]="param.valueSource" class="parameter-item">
+            <input *ngSwitchCase="sourceEnum[sourceEnum.String]" class="form-control form-control-value" type="text" [ngModel]="param.value"
+                (ngModelChange)="valueChange($event)">
+            <input *ngSwitchCase="sourceEnum[sourceEnum.Variable]" class="form-control form-control-value" type="text" [ngModel]="param.value"
+                (ngModelChange)="valueChange($event)">
+            <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" style="vertical-align:top;" [items]="planOptions" childrenField="children"
+                #simpleSelect="ngModel" class="form-control-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select>
+            <select *ngSwitchCase="sourceEnum[sourceEnum.Topology]" class="form-control form-control-value" type="text" [ngModel]="param.value"
+                (ngModelChange)="valueChange($event)">
+                <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}}</option>
+            </select>
+        </div>
+        <select *ngIf="showValueSource" class="form-control parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource"
+            (ngModelChange)="valueSourceChange($event)">
+            <option *ngFor="let sourceType of valueSource" value="{{sourceEnum[sourceType]}}">{{sourceEnum[sourceType]}}</option>
+        </select>
+    </div>
+    <div *ngIf="canInsert" class="parameter-item">
+        <button type="button" class="btn blue1" (click)="insertParam()">
+            <i class="fa fa-plus"></i>
+        </button>
+    </div>
+    <div *ngIf="canDelete" class="parameter-item">
+        <button type="button" class="btn oes-red-bg" (click)="deleteParam()">
+            <i class="fa fa-minus"></i>
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
index 31782962..8c614460 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
@@ -1,154 +1,154 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-
-import { PlanTreeviewItem } from '../../model/plan-treeview-item';
-import { ValueSource } from '../../model/value-source.enum';
-import { Parameter } from '../../model/workflow/parameter';
-import { DataService } from '../../services/data/data.service';
-
-/**
- * this component contains in property component if the corresponding node has parameter properties
- * eg. task node have input and output params, start event node has input param
- */
-@Component({
-    selector: 'b4t-parameter',
-    styleUrls: ['./parameter.component.css'],
-    templateUrl: 'parameter.component.html',
-})
-export class ParameterComponent implements OnChanges, OnInit {
-    @Input() public param: Parameter;
-    @Input() public valueSource: ValueSource[];
-    @Input() public canEditName: boolean;
-    @Input() public showLabel = true;
-    @Input() public canInsert: boolean;
-    @Input() public canDelete: boolean;
-    @Input() public planItems: PlanTreeviewItem[];
-    @Output() public paramChange = new EventEmitter<Parameter>();
-    @Output() insert: EventEmitter<Parameter> = new EventEmitter<Parameter>();
-    @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>();
-
-    public sourceEnum = ValueSource;
-    public valueGroupClass;
-    public valueClass;
-    public valueSourceClass;
-    public planOptions = [];
-    public topologyOptions: { name: string, value: string }[] = [];
-    public showValue = true;
-    public showValueSource = true;
-    public planValue: any = {};
-
-    constructor(private dataService: DataService) { }
-
-    public ngOnChanges(changes: SimpleChanges): void {
-        // if (changes.canInsert && !changes.canInsert.isFirstChange()) {
-        //     this.resetValueGroupClass(changes.canInsert.currentValue, this.canDelete);
-        // }
-        // if (changes.canDelete && !changes.canDelete.isFirstChange()) {
-        //     this.resetValueGroupClass(this.canInsert, changes.canDelete.currentValue);
-        // }
-    }
-
-    public ngOnInit(): void {
-        // console.warn('Parameter OnInit, parameter name is:' + this.param.name);
-        if (1 === this.valueSource.length) {
-            this.showValueSource = false;
-        }
-        this.topologyOptions = this.dataService.getTopologyProperties();
-        // this.valueClass = {
-        //     'col-md-7': this.showValueSource,
-        //     'col-md-12': !this.showValueSource
-        // };
-        // this.resetValueGroupClass(this.canInsert, this.canDelete);
-        this.updateValueSource(this.param.valueSource);
-        // trans plan options to tree view items.
-        this.initPlanTreeviewItems(this.planItems);
-        if (ValueSource[ValueSource.Plan] === this.param.valueSource) {
-            this.planValue = { id: this.param.value };
-        }
-    }
-
-    public keyChange(key: string) {
-        this.param.name = key;
-        this.paramChange.emit(this.param);
-    }
-
-    public valueChange(value: any) {
-        if (ValueSource[ValueSource.Plan] === this.param.valueSource) {
-            if ('object' === typeof (value)) {
-                this.planValue = value;
-                this.param.value = value.id;
-            } else {
-                this.planValue = { id: '' };
-                this.param.value = '';
-            }
-        } else {
-            this.param.value = value;
-        }
-        this.paramChange.emit(this.param);
-    }
-
-    public valueSourceChange(valueSource: string) {
-        this.updateValueSource(valueSource);
-        this.param.valueSource = valueSource;
-        this.valueChange('');
-    }
-
-    public insertParam(): void {
-        this.insert.emit();
-    }
-
-    public deleteParam(): void {
-        this.delete.emit();
-    }
-
-    private updateValueSource(valueSource: string):void{
-        if(ValueSource[ValueSource.Definition] === valueSource){
-            this.showValue = false;
-        }else{
-            this.showValue = true;
-        }
-        // this.resetValueSourceClass(this.showValue);
-    }
-
-    private resetValueGroupClass(canInsert: boolean, canDelete: boolean): void {
-        // this.valueGroupClass = {
-        //     'col-md-5': canInsert && canDelete,
-        //     'col-md-7': (canInsert && !canDelete) || (!canInsert && canDelete),
-        //     'col-md-9': !canInsert && !canDelete
-        // };
-    }
-
-    private initPlanTreeviewItems(planTreeviewItems: PlanTreeviewItem[]): void {
-        this.planOptions = this.getTreeviewChild(planTreeviewItems);
-    }
-
-    private getTreeviewChild(planTreeviewItems: PlanTreeviewItem[]): any[] {
-        let treeviewItems = [];
-        if (undefined == planTreeviewItems || 0 === planTreeviewItems.length) {
-            // todo: debug check if it need [] or undefined.
-            return treeviewItems;
-        }
-        planTreeviewItems.forEach(item => {
-            const treeviewItem = {
-                id: item.value,
-                name: item.name,
-                disabled: false,
-                // !item.canSelect,
-                children: this.getTreeviewChild(item.children)
-            };
-            treeviewItems.push(treeviewItem);
-        });
-        return treeviewItems;
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+
+import { PlanTreeviewItem } from '../../model/plan-treeview-item';
+import { ValueSource } from '../../model/value-source.enum';
+import { Parameter } from '../../model/workflow/parameter';
+import { DataService } from '../../services/data/data.service';
+
+/**
+ * this component contains in property component if the corresponding node has parameter properties
+ * eg. task node have input and output params, start event node has input param
+ */
+@Component({
+    selector: 'b4t-parameter',
+    styleUrls: ['./parameter.component.css'],
+    templateUrl: 'parameter.component.html',
+})
+export class ParameterComponent implements OnChanges, OnInit {
+    @Input() public param: Parameter;
+    @Input() public valueSource: ValueSource[];
+    @Input() public canEditName: boolean;
+    @Input() public showLabel = true;
+    @Input() public canInsert: boolean;
+    @Input() public canDelete: boolean;
+    @Input() public planItems: PlanTreeviewItem[];
+    @Output() public paramChange = new EventEmitter<Parameter>();
+    @Output() insert: EventEmitter<Parameter> = new EventEmitter<Parameter>();
+    @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>();
+
+    public sourceEnum = ValueSource;
+    public valueGroupClass;
+    public valueClass;
+    public valueSourceClass;
+    public planOptions = [];
+    public topologyOptions: { name: string, value: string }[] = [];
+    public showValue = true;
+    public showValueSource = true;
+    public planValue: any = {};
+
+    constructor(private dataService: DataService) { }
+
+    public ngOnChanges(changes: SimpleChanges): void {
+        // if (changes.canInsert && !changes.canInsert.isFirstChange()) {
+        //     this.resetValueGroupClass(changes.canInsert.currentValue, this.canDelete);
+        // }
+        // if (changes.canDelete && !changes.canDelete.isFirstChange()) {
+        //     this.resetValueGroupClass(this.canInsert, changes.canDelete.currentValue);
+        // }
+    }
+
+    public ngOnInit(): void {
+        // console.warn('Parameter OnInit, parameter name is:' + this.param.name);
+        if (1 === this.valueSource.length) {
+            this.showValueSource = false;
+        }
+        this.topologyOptions = this.dataService.getTopologyProperties();
+        // this.valueClass = {
+        //     'col-md-7': this.showValueSource,
+        //     'col-md-12': !this.showValueSource
+        // };
+        // this.resetValueGroupClass(this.canInsert, this.canDelete);
+        this.updateValueSource(this.param.valueSource);
+        // trans plan options to tree view items.
+        this.initPlanTreeviewItems(this.planItems);
+        if (ValueSource[ValueSource.Plan] === this.param.valueSource) {
+            this.planValue = { id: this.param.value };
+        }
+    }
+
+    public keyChange(key: string) {
+        this.param.name = key;
+        this.paramChange.emit(this.param);
+    }
+
+    public valueChange(value: any) {
+        if (ValueSource[ValueSource.Plan] === this.param.valueSource) {
+            if ('object' === typeof (value)) {
+                this.planValue = value;
+                this.param.value = value.id;
+            } else {
+                this.planValue = { id: '' };
+                this.param.value = '';
+            }
+        } else {
+            this.param.value = value;
+        }
+        this.paramChange.emit(this.param);
+    }
+
+    public valueSourceChange(valueSource: string) {
+        this.updateValueSource(valueSource);
+        this.param.valueSource = valueSource;
+        this.valueChange('');
+    }
+
+    public insertParam(): void {
+        this.insert.emit();
+    }
+
+    public deleteParam(): void {
+        this.delete.emit();
+    }
+
+    private updateValueSource(valueSource: string):void{
+        if(ValueSource[ValueSource.Definition] === valueSource){
+            this.showValue = false;
+        }else{
+            this.showValue = true;
+        }
+        // this.resetValueSourceClass(this.showValue);
+    }
+
+    private resetValueGroupClass(canInsert: boolean, canDelete: boolean): void {
+        // this.valueGroupClass = {
+        //     'col-md-5': canInsert && canDelete,
+        //     'col-md-7': (canInsert && !canDelete) || (!canInsert && canDelete),
+        //     'col-md-9': !canInsert && !canDelete
+        // };
+    }
+
+    private initPlanTreeviewItems(planTreeviewItems: PlanTreeviewItem[]): void {
+        this.planOptions = this.getTreeviewChild(planTreeviewItems);
+    }
+
+    private getTreeviewChild(planTreeviewItems: PlanTreeviewItem[]): any[] {
+        let treeviewItems = [];
+        if (undefined == planTreeviewItems || 0 === planTreeviewItems.length) {
+            // todo: debug check if it need [] or undefined.
+            return treeviewItems;
+        }
+        planTreeviewItems.forEach(item => {
+            const treeviewItem = {
+                id: item.value,
+                name: item.name,
+                disabled: false,
+                // !item.canSelect,
+                children: this.getTreeviewChild(item.children)
+            };
+            treeviewItems.push(treeviewItem);
+        });
+        return treeviewItems;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
index 089d242d..e0d368d6 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
@@ -42,4 +42,4 @@
 
 <div class="ui-fluid">
 	<b4t-node-parameters [restConfigId]="this.node.restConfigId" [swaggerInput]="this.node.parameters" [swaggerOutput]="this.node.responses" [planItems]="planItems"></b4t-node-parameters>
-</div>
+</div>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html
index 53e253e2..ee1ac4d4 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html
@@ -1,30 +1,30 @@
-<!--
-/*******************************************************************************
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- *******************************************************************************/
--->
-
-<div class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT_FORMAT' | translate}}</label>
-    <div class="col-md-9">
-        <select class="form-control" [(ngModel)]="node.scriptFormat">
-			<option *ngFor="let script of scriptOperations" value="{{script}}">{{script}}</option>
-		</select>
-    </div>
-</div>
-
-<div class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT' | translate}}</label>
-    <div class="col-md-9">
-        <textarea class="form-control" type="text" rows="20" [(ngModel)]="node.script"></textarea>
-    </div>
-</div>
-
+<!--
+/*******************************************************************************
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ *******************************************************************************/
+-->
+
+<div class="form-group row">
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT_FORMAT' | translate}}</label>
+    <div class="col-md-9">
+        <select class="form-control" [(ngModel)]="node.scriptFormat">
+			<option *ngFor="let script of scriptOperations" value="{{script}}">{{script}}</option>
+		</select>
+    </div>
+</div>
+
+<div class="form-group row">
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT' | translate}}</label>
+    <div class="col-md-9">
+        <textarea class="form-control" type="text" rows="20" [(ngModel)]="node.script"></textarea>
+    </div>
+</div>
+
diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts
index 1dd3b7a6..145768fa 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts
@@ -1,24 +1,24 @@
-/*******************************************************************************
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- *******************************************************************************/
-import { AfterViewInit, Component, Input } from '@angular/core';
-
-import { ScriptTask } from "../../../model/workflow/script-task";
-
-@Component({
-    selector: 'b4t-script-task',
-    templateUrl: 'script-task.component.html',
-})
-export class ScriptTaskComponent {
-    @Input() public node: ScriptTask;
-
-    public scriptOperations = ['JavaScript'];
-}
+/*******************************************************************************
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ *******************************************************************************/
+import { AfterViewInit, Component, Input } from '@angular/core';
+
+import { ScriptTask } from "../../../model/workflow/script-task";
+
+@Component({
+    selector: 'b4t-script-task',
+    templateUrl: 'script-task.component.html',
+})
+export class ScriptTaskComponent {
+    @Input() public node: ScriptTask;
+
+    public scriptOperations = ['JavaScript'];
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
index d10128c7..d6aaafd8 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
@@ -1,25 +1,25 @@
-<!--
-/*******************************************************************************
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- *******************************************************************************/
--->
-
-<div class="form-group row">
-    <div class="col-md-10"></div>
-    <div class="col-md-2">
-        <button (click)="create();" type="button" class="btn blue1 pull-right">
-            <i class="fa fa-plus"></i>
-        </button>
-    </div>
-</div>
-
-<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true"
-    [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
+<!--
+/*******************************************************************************
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ *******************************************************************************/
+-->
+
+<div class="form-group row">
+    <div class="col-md-10"></div>
+    <div class="col-md-2">
+        <button (click)="create();" type="button" class="btn blue1 pull-right">
+            <i class="fa fa-plus"></i>
+        </button>
+    </div>
+</div>
+
+<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true"
+    [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
index 96701625..adef3297 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
@@ -1,36 +1,36 @@
-/*******************************************************************************
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- *******************************************************************************/
-import { Component, Input } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
-
-import { ValueSource } from '../../../model/value-source.enum';
-import { Parameter } from '../../../model/workflow/parameter';
-import { StartEvent } from '../../../model/workflow/start-event';
-import { BroadcastService } from '../../../services/broadcast.service';
-import { WorkflowUtil } from '../../../util/workflow-util';
-
-@Component({
-    selector: 'b4t-start-event',
-    templateUrl: 'start-event.component.html',
-})
-export class StartEventComponent {
-    @Input() public node: StartEvent;
-    public sources: ValueSource[] = [ValueSource.String];
-
-    public create(): void {
-        this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String]));
-    }
-
-    public delete(index: number): void {
-        this.node.parameters.splice(index, 1);
-    }
-}
+/*******************************************************************************
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ *******************************************************************************/
+import { Component, Input } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { ValueSource } from '../../../model/value-source.enum';
+import { Parameter } from '../../../model/workflow/parameter';
+import { StartEvent } from '../../../model/workflow/start-event';
+import { BroadcastService } from '../../../services/broadcast.service';
+import { WorkflowUtil } from '../../../util/workflow-util';
+
+@Component({
+    selector: 'b4t-start-event',
+    templateUrl: 'start-event.component.html',
+})
+export class StartEventComponent {
+    @Input() public node: StartEvent;
+    public sources: ValueSource[] = [ValueSource.String];
+
+    public create(): void {
+        this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String]));
+    }
+
+    public delete(index: number): void {
+        this.node.parameters.splice(index, 1);
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html
index 64feb605..e7096ab7 100644
--- a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html
@@ -49,4 +49,4 @@
             <input class="form-control" type="text" [(ngModel)]="sequenceFlow.condition">
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css
index 460dff67..4da64d16 100644
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css
@@ -1,62 +1,62 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-.toolbar-head{
-    color:#404040;
-    font-size: 14px;
-}
-
-.toolbar-head:hover{
-    cursor: pointer;
-}
-
-.fold-icon{
-    width: 15px;
-    font-size: 8px;
-    color: #00abff;
-}
-
-.item{
-    width: 50px;
-    height: 50px;
-    text-align: center;
-    float: left;
-    margin-left: 6px;
-    margin-bottom: 10px;
-}
-
-.item:hover{
-    cursor: pointer;
-}
-
-.item svg{
-    width:24px;
-    height:24px;
-    margin: 4px 13px;
-    display: block;
-    /* fill: #A9B2BA; */
-    fill: #00ABFF;
-}
-
-.item span{
-    font-size: 12px;
-    color: #595959;
-    display: block;
-}
-
-.getway{
-    padding-top: 5px;
-}
-
-.getway div{
-    width: 30px !important;
-    height: 30px !important;
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+.toolbar-head{
+    color:#404040;
+    font-size: 14px;
+}
+
+.toolbar-head:hover{
+    cursor: pointer;
+}
+
+.fold-icon{
+    width: 15px;
+    font-size: 8px;
+    color: #00abff;
+}
+
+.item{
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    float: left;
+    margin-left: 6px;
+    margin-bottom: 10px;
+}
+
+.item:hover{
+    cursor: pointer;
+}
+
+.item svg{
+    width:24px;
+    height:24px;
+    margin: 4px 13px;
+    display: block;
+    /* fill: #A9B2BA; */
+    fill: #00ABFF;
+}
+
+.item span{
+    font-size: 12px;
+    color: #595959;
+    display: block;
+}
+
+.getway{
+    padding-top: 5px;
+}
+
+.getway div{
+    width: 30px !important;
+    height: 30px !important;
+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
index 0c5a7240..19df5efd 100644
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
@@ -1,194 +1,194 @@
-<!--
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
--->
-<accordion>
-    <accordion-group [isOpen]="true" #event>
-        <div accordion-heading class="toolbar-head">
-            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': event?.isOpen, 'fa-chevron-right': !event?.isOpen}"></i>
-            <i class="fa fa-th-list"></i>
-            <span>{{ 'WORKFLOW.BPMN_EVENT' | translate }}</span>
-        </div>
-        <div nodeType="startEvent" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
-                    s15-6.7,15-15S23.3,0,15,0L15,0z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.START_EVENT' | translate }}</span>
-        </div>
-        <div nodeType="endEvent" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
-                s15-6.7,15-15S23.3,0,15,0L15,0z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.END_EVENT' | translate }}</span>
-        </div>
-        <div nodeType="intermediateCatchEvent" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26
-                        c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4
-                        c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z"
-                    />
-                    <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9
-                        c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.TIMER_EVENT' | translate }}</span>
-        </div>
-        <!--
-        <div nodeType="errorStartEvent" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2
-                        s13,5.8,13,13S22.2,28,15,28z" />
-                    <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16
-                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
-                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6
-                        c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z"
-                    />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.ERROR_START_EVENT' | translate }}</span>
-        </div>
-        <div nodeType="errorEndEvent" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4
-                        s11,4.9,11,11S21.1,26,15,26z" />
-                    <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10
-                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
-                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.ERROR_END_EVENT' | translate }}</span>
-        </div>
-      -->
-    </accordion-group>
-    <accordion-group [isOpen]="true" #task>
-        <div accordion-heading class="toolbar-head">
-            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': task?.isOpen, 'fa-chevron-right': !task?.isOpen}"></i>
-            <i class="fa fa-th-list"></i>
-            <span>{{ 'WORKFLOW.BPMN_TASK' | translate }}</span>
-        </div>
-        <div *ngIf="!isCatalog" nodeType="toscaNodeManagementTask" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
-                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
-                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
-                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
-                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
-                    <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1
-                        C25.7,15.5,25.2,15.1,24.7,15.1z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.TOSCA_TASK' | translate }}</span>
-        </div>
-        <div *ngIf="isCatalog" nodeType="restTask" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
-                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
-                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
-                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
-                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
-                    <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2
-                        c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4
-                        c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z"
-                    />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.REST_TASK' | translate }}</span>
-        </div>
-        <div nodeType="scriptTask" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4
-                        c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6
-                        c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4
-                        c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5
-                        C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3
-                        c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8
-                        c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3
-                        c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0
-                        l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5
-                        l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" />
-                    <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
-                        l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" />
-                    <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2
-                        c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" />
-                    <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1
-                        c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.SCRIPT_TASK' | translate }}</span>
-        </div>
-    </accordion-group>
-    <accordion-group [isOpen]="true" #getway>
-        <div accordion-heading class="toolbar-head">
-            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': getway?.isOpen, 'fa-chevron-right': !getway?.isOpen}"></i>
-            <i class="fa fa-th-list"></i>
-            <span>{{ 'WORKFLOW.BPMN_GETWAY' | translate }}</span>
-        </div>
-        <div nodeType="exclusiveGateway" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4
-                        l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z"
-                    />
-                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
-                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
-                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
-                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.EXCLUSIVE_GATEWAY' | translate }}</span>
-        </div>
-        <div nodeType="parallelGateway" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1
-                        s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z" />
-                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
-                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
-                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
-                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.PARALLEL_GATEWAY' | translate }}</span>
-        </div>
-    </accordion-group>
-    <!-- <accordion-group [isOpen]="true" #structural>
-        <div accordion-heading class="toolbar-head">
-            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': structural?.isOpen, 'fa-chevron-right': !structural?.isOpen}"></i>
-            <i class="fa fa-th-list"></i>
-            <span>{{ 'WORKFLOW.BPMN_STRUCTURAL' | translate }}</span>
-        </div>
-        <div nodeType="subProcess" class="item ui-draggable">
-            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <g>
-                    <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4
-                        v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4
-                        c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z"/>
-                    <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5
-                        c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z"/>
-                </g>
-            </svg>
-            <span>{{ 'WORKFLOW.SUB_PROCESS' | translate }}</span>
-        </div>
-    </accordion-group> -->
-</accordion>
+<!--
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+-->
+<accordion>
+    <accordion-group [isOpen]="true" #event>
+        <div accordion-heading class="toolbar-head">
+            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': event?.isOpen, 'fa-chevron-right': !event?.isOpen}"></i>
+            <i class="fa fa-th-list"></i>
+            <span>{{ 'WORKFLOW.BPMN_EVENT' | translate }}</span>
+        </div>
+        <div nodeType="startEvent" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M15,2c7.2,0,13,5.8,13,13s-5.8,13-13,13S2,22.2,2,15S7.8,2,15,2 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
+                    s15-6.7,15-15S23.3,0,15,0L15,0z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.START_EVENT' | translate }}</span>
+        </div>
+        <div nodeType="endEvent" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M15,4c6.1,0,11,4.9,11,11s-4.9,11-11,11S4,21.1,4,15S8.9,4,15,4 M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15
+                s15-6.7,15-15S23.3,0,15,0L15,0z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.END_EVENT' | translate }}</span>
+        </div>
+        <div nodeType="intermediateCatchEvent" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15C30,6.7,23.3,0,15,0z M16,27.9V26
+                        c0-0.6-0.4-1-1-1s-1,0.4-1,1v1.9C7.6,27.5,2.5,22.4,2.1,16H4c0.6,0,1-0.4,1-1s-0.4-1-1-1H2.1C2.5,7.6,7.6,2.5,14,2.1V4
+                        c0,0.6,0.4,1,1,1s1-0.4,1-1V2.1C22.4,2.5,27.5,7.6,27.9,14H26c-0.6,0-1,0.4-1,1s0.4,1,1,1h1.9C27.5,22.4,22.4,27.5,16,27.9z"
+                    />
+                    <path class="st0" d="M20,14h-3.6l2.5-6.6c0.2-0.5-0.1-1.1-0.6-1.3c-0.5-0.2-1.1,0.1-1.3,0.6l-3,8c-0.1,0.3-0.1,0.7,0.1,0.9
+                        c0.2,0.3,0.5,0.4,0.8,0.4h5c0.6,0,1-0.4,1-1S20.6,14,20,14z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.TIMER_EVENT' | translate }}</span>
+        </div>
+        <!--
+        <div nodeType="errorStartEvent" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,28C7.8,28,2,22.2,2,15S7.8,2,15,2
+                        s13,5.8,13,13S22.2,28,15,28z" />
+                    <path class="st0" d="M19.7,12H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3H14c-0.3,0-0.6,0.2-0.8,0.5L9.7,16
+                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
+                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.1,19.9,12,19.7,12z M14.6,22.3l1.2-5.9c0-0.3,0-0.4-0.2-0.6
+                        c-0.2-0.2-0.3-0.3-0.6-0.3h-3.5L14.5,7h2.6l-2,5.4C15,12.8,15,13,15.2,13.2c0.2,0.2,0.3,0.3,0.6,0.3h2.5L14.6,22.3z"
+                    />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.ERROR_START_EVENT' | translate }}</span>
+        </div>
+        <div nodeType="errorEndEvent" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M15,0C6.7,0,0,6.7,0,15s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0z M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4
+                        s11,4.9,11,11S21.1,26,15,26z" />
+                    <path class="st0" d="M19.7,12.4H17l2-5.5c0.1-0.3,0.1-0.5-0.1-0.7c-0.2-0.2-0.3-0.3-0.6-0.3h-4.2c-0.3,0-0.6,0.2-0.8,0.5l-3.5,10
+                        c-0.1,0.3-0.1,0.5,0.1,0.7c0.2,0.2,0.3,0.3,0.6,0.3l3.6,0.1l-1,6.7c-0.1,0.3,0.2,0.8,0.5,0.9c0.1,0,0.2,0,0.3,0
+                        c0.3,0,0.7-0.2,0.9-0.4l5.5-11.1c0.1-0.3,0.1-0.5,0-0.8C20.2,12.6,20,12.4,19.7,12.4z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.ERROR_END_EVENT' | translate }}</span>
+        </div>
+      -->
+    </accordion-group>
+    <accordion-group [isOpen]="true" #task>
+        <div accordion-heading class="toolbar-head">
+            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': task?.isOpen, 'fa-chevron-right': !task?.isOpen}"></i>
+            <i class="fa fa-th-list"></i>
+            <span>{{ 'WORKFLOW.BPMN_TASK' | translate }}</span>
+        </div>
+        <div *ngIf="!isCatalog" nodeType="toscaNodeManagementTask" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
+                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
+                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
+                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
+                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
+                    <path class="st0" d="M24.7,15.1h-5c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h1.5v5.7c0,0.6,0.4,1,1,1s1-0.4,1-1v-5.7h1.5c0.6,0,1-0.4,1-1
+                        C25.7,15.5,25.2,15.1,24.7,15.1z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.TOSCA_TASK' | translate }}</span>
+        </div>
+        <div *ngIf="isCatalog" nodeType="restTask" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M24,29H6c-2.8,0-5-2.2-5-5V6c0-2.8,2.2-5,5-5h18c2.8,0,5,2.2,5,5v18C29,26.8,26.8,29,24,29z M6,3
+                        C4.3,3,3,4.3,3,6v18c0,1.7,1.3,3,3,3h18c1.7,0,3-1.3,3-3V6c0-1.7-1.3-3-3-3H6z" />
+                    <path class="st0" d="M7.6,14.5h7.5c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,14.5,7.6,14.5z" />
+                    <path class="st0" d="M7.6,18.7h3.7c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,18.7,7.6,18.7z" />
+                    <path class="st0" d="M7.6,10.4H19c0.5,0,0.8-0.4,0.8-1s-0.3-1-0.8-1H7.6c-0.5,0-0.8,0.4-0.8,1S7.1,10.4,7.6,10.4z" />
+                    <path class="st0" d="M24.1,22.6l-1.6-2.7c0.9-0.4,1.5-1.2,1.5-2.2c0-1.4-1.2-2.5-2.8-2.5h-1.9c-0.2,0-0.4,0.1-0.6,0.2
+                        c-0.2,0.1-0.3,0.3-0.3,0.6v7c0,0.4,0.3,0.8,0.8,0.8c0.4,0,0.8-0.3,0.8-0.8v-2.8h0.8l1.9,3.2c0.1,0.2,0.4,0.4,0.7,0.4
+                        c0.1,0,0.3,0,0.4-0.1C24.2,23.5,24.4,23,24.1,22.6z M20.1,16.8h1.2c0.6,0,1.2,0.4,1.2,0.9s-0.5,0.9-1.2,0.9h-1.2V16.8z"
+                    />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.REST_TASK' | translate }}</span>
+        </div>
+        <div nodeType="scriptTask" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M24,1H6C3.2,1,1,3.2,1,6v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29,3.2,26.8,1,24,1z M16.9,3.4
+                        c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3L17.7,7l-5.3,5.3c-0.2-0.6-0.5-1.2-0.9-1.6
+                        c-0.4-0.4-1-0.8-1.6-0.9l5.8-5.8C16,3.6,16.4,3.4,16.9,3.4z M10.3,27H6c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h8.2l-7.4,7.4
+                        c-0.1,0.1-0.2,0.2-0.3,0.3c-0.7,0.7-1,1.6-1,2.5c0,0.9,0.4,1.8,1,2.5l5.2,5.2l-1.3,1.3c-0.7,0.7-1,1.6-1,2.5
+                        C9.3,25.5,9.7,26.4,10.3,27z M14.1,25.9c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3
+                        c0-0.5,0.2-0.9,0.5-1.3l1.3-1.3l0.5,0.5l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3C14.6,25.1,14.5,25.5,14.1,25.9z M14.5,21.3l-6.8-6.8
+                        c-0.4-0.4-0.5-0.8-0.5-1.3c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3
+                        c0,0.5-0.2,0.9-0.5,1.3l0.9,0.9c0.2,0.2,0.4,0.2,0.6,0l5.2-5.2l4.4,4.4l0.8,0.8c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3v0
+                        l-5.8,5.8c-0.1-0.6-0.5-1.2-0.9-1.6L14.5,21.3z M27,24c0,1.7-1.3,3-3,3h-8.6l7.9-7.9c0.7-0.7,1-1.6,1-2.5c0-0.9-0.4-1.8-1-2.5
+                        l-0.8-0.8L18.1,9l1.3-1.3c0.7-0.7,1-1.6,1-2.5c0-0.8-0.3-1.6-0.8-2.2H24c1.7,0,3,1.3,3,3V24z" />
+                    <path class="st0" d="M17.2,12.4c-0.3-0.3-0.8-0.3-1.1,0L12.6,16c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2
+                        l3.6-3.6C17.5,13.1,17.5,12.7,17.2,12.4z" />
+                    <path class="st0" d="M18.9,14.2c-0.3-0.3-0.8-0.3-1.1,0l-3.6,3.6c-0.3,0.3-0.3,0.8,0,1.1c0.1,0.1,0.3,0.2,0.5,0.2
+                        c0.2,0,0.4-0.1,0.5-0.2l3.6-3.6C19.2,14.9,19.2,14.4,18.9,14.2z" />
+                    <path class="st0" d="M17.1,20.6l3.6-3.6c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0L16,19.5c-0.3,0.3-0.3,0.8,0,1.1
+                        c0.1,0.1,0.3,0.2,0.5,0.2S17,20.7,17.1,20.6z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.SCRIPT_TASK' | translate }}</span>
+        </div>
+    </accordion-group>
+    <accordion-group [isOpen]="true" #getway>
+        <div accordion-heading class="toolbar-head">
+            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': getway?.isOpen, 'fa-chevron-right': !getway?.isOpen}"></i>
+            <i class="fa fa-th-list"></i>
+            <span>{{ 'WORKFLOW.BPMN_GETWAY' | translate }}</span>
+        </div>
+        <div nodeType="exclusiveGateway" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M16.4,15l3.2-3.2c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L15,13.6l-3.2-3.2c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4
+                        l3.2,3.2l-3.2,3.2c-0.4,0.4-0.4,1,0,1.4s1,0.4,1.4,0l3.2-3.2l3.2,3.2c0.4,0.4,1,0.4,1.4,0s0.4-1,0-1.4L16.4,15z"
+                    />
+                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
+                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
+                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
+                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.EXCLUSIVE_GATEWAY' | translate }}</span>
+        </div>
+        <div nodeType="parallelGateway" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M20.5,14H16V9.5c0-0.6-0.4-1-1-1s-1,0.4-1,1V14H9.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H14v4.5c0,0.6,0.4,1,1,1
+                        s1-0.4,1-1V16h4.5c0.6,0,1-0.4,1-1S21.1,14,20.5,14z" />
+                    <path class="st0" d="M29.1,12.9l-12-12c-1.1-1.1-3.1-1.1-4.2,0l-12,12C0.3,13.4,0,14.2,0,15s0.3,1.6,0.9,2.1l12,12
+                        c0.6,0.6,1.3,0.9,2.1,0.9s1.6-0.3,2.1-0.9l12-12c0.6-0.6,0.9-1.3,0.9-2.1S29.7,13.4,29.1,12.9z M27.7,15.7l-12,12
+                        c-0.4,0.4-1,0.4-1.4,0l-12-12C2.1,15.5,2,15.3,2,15s0.1-0.5,0.3-0.7l12-12C14.5,2.1,14.7,2,15,2s0.5,0.1,0.7,0.3l12,12
+                        c0.2,0.2,0.3,0.4,0.3,0.7S27.9,15.5,27.7,15.7z" />
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.PARALLEL_GATEWAY' | translate }}</span>
+        </div>
+    </accordion-group>
+    <!-- <accordion-group [isOpen]="true" #structural>
+        <div accordion-heading class="toolbar-head">
+            <i class="fa fold-icon" [ngClass]="{'fa-chevron-down': structural?.isOpen, 'fa-chevron-right': !structural?.isOpen}"></i>
+            <i class="fa fa-th-list"></i>
+            <span>{{ 'WORKFLOW.BPMN_STRUCTURAL' | translate }}</span>
+        </div>
+        <div nodeType="subProcess" class="item ui-draggable">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+                <g>
+                    <path class="st0" d="M24.5,1h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V6C29.5,3.2,27.2,1,24.5,1z M20.2,27h-9.4
+                        v-9.1c0-0.3,0.2-0.5,0.5-0.5h8.4c0.3,0,0.5,0.2,0.5,0.5V27z M27.5,24c0,1.7-1.3,3-3,3h-2.3v-9.1c0-1.4-1.1-2.5-2.5-2.5h-8.4
+                        c-1.4,0-2.5,1.1-2.5,2.5V27H6.5c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V24z"/>
+                    <path class="st0" d="M19,21.3h-2.5v-2.5c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1v2.5H12c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.5v2.5
+                        c0,0.6,0.4,1,1,1c0.6,0,1-0.4,1-1v-2.5H19c0.6,0,1-0.4,1-1S19.5,21.3,19,21.3z"/>
+                </g>
+            </svg>
+            <span>{{ 'WORKFLOW.SUB_PROCESS' | translate }}</span>
+        </div>
+    </accordion-group> -->
+</accordion>
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
index dcb93120..1242215c 100644
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
@@ -1,49 +1,49 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-import { AfterViewChecked, Component, OnInit } from '@angular/core';
-
-import { DataService } from '../../services/data/data.service';
-import { BroadcastService } from '../../services/broadcast.service';
-import { JsPlumbService } from '../../services/jsplumb.service';
-
-/**
- * toolbar component contains some basic operations(save) and all of the supported workflow nodes.
- * The supported nodes can be dragged to container component. which will add a new node to the workflow.
- */
-@Component({
-    selector: 'b4t-toolbar',
-    templateUrl: 'toolbar.component.html',
-    styleUrls: ['./toolbar.component.css']
-})
-export class ToolbarComponent implements AfterViewChecked, OnInit {
-    public isCatalog = true;
-    private needInitButton = false;
-
-    constructor(private jsPlumbService: JsPlumbService, private broadcastService: BroadcastService,
-        private dataService: DataService) { }
-
-    public ngOnInit() {
-        this.broadcastService.backendServiceReady$.subscribe(() => {
-            this.isCatalog = 'Catalog' === this.dataService.getBackendType();
-            this.needInitButton = true;
-        });
-    }
-
-    public ngAfterViewChecked() {
-        if (this.needInitButton) {
-            this.jsPlumbService.buttonDraggable();
-            this.jsPlumbService.buttonDroppable();
-            this.needInitButton = false;
-        }
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { AfterViewChecked, Component, OnInit } from '@angular/core';
+
+import { DataService } from '../../services/data/data.service';
+import { BroadcastService } from '../../services/broadcast.service';
+import { JsPlumbService } from '../../services/jsplumb.service';
+
+/**
+ * toolbar component contains some basic operations(save) and all of the supported workflow nodes.
+ * The supported nodes can be dragged to container component. which will add a new node to the workflow.
+ */
+@Component({
+    selector: 'b4t-toolbar',
+    templateUrl: 'toolbar.component.html',
+    styleUrls: ['./toolbar.component.css']
+})
+export class ToolbarComponent implements AfterViewChecked, OnInit {
+    public isCatalog = true;
+    private needInitButton = false;
+
+    constructor(private jsPlumbService: JsPlumbService, private broadcastService: BroadcastService,
+        private dataService: DataService) { }
+
+    public ngOnInit() {
+        this.broadcastService.backendServiceReady$.subscribe(() => {
+            this.isCatalog = 'Catalog' === this.dataService.getBackendType();
+            this.needInitButton = true;
+        });
+    }
+
+    public ngAfterViewChecked() {
+        if (this.needInitButton) {
+            this.jsPlumbService.buttonDraggable();
+            this.jsPlumbService.buttonDroppable();
+            this.needInitButton = false;
+        }
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/directive/resizable/resizable.directive.ts b/sdc-workflow-designer-ui/src/app/directive/resizable/resizable.directive.ts
index b285b595..3bafcc9f 100644
--- a/sdc-workflow-designer-ui/src/app/directive/resizable/resizable.directive.ts
+++ b/sdc-workflow-designer-ui/src/app/directive/resizable/resizable.directive.ts
@@ -1,42 +1,42 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-import { AfterViewInit, Directive, ElementRef } from '@angular/core';
-import * as $ from 'jquery';
-
-import { JsPlumbService } from '../../services/jsplumb.service';
-import { ModelService } from '../../services/model.service';
-
-@Directive({ selector: '[b4tResizable]' })
-export class ResizableDirective implements AfterViewInit {
-
-    constructor(private el: ElementRef,
-                private jsPlumbService: JsPlumbService,
-                private planModelService: ModelService) {
-    }
-
-    public ngAfterViewInit() {
-        console.log('init resizble.');
-        
-        $(this.el.nativeElement).resizable({
-            handles: 'all',
-            resize: (event, ui) => {
-                const element = ui.helper[0];
-                this.planModelService.updatePosition(element.id,
-                    element.offsetLeft, element.offsetTop, element.offsetWidth, element.offsetHeight - 12);
-                this.jsPlumbService.resizeParent(element, element.parentNode);
-                const node = this.planModelService.getNodeMap().get(element.id);
-                this.jsPlumbService.jsplumbInstanceMap.get(node.parentId).revalidate(element.id);
-            },
-        });
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+import * as $ from 'jquery';
+
+import { JsPlumbService } from '../../services/jsplumb.service';
+import { ModelService } from '../../services/model.service';
+
+@Directive({ selector: '[b4tResizable]' })
+export class ResizableDirective implements AfterViewInit {
+
+    constructor(private el: ElementRef,
+                private jsPlumbService: JsPlumbService,
+                private planModelService: ModelService) {
+    }
+
+    public ngAfterViewInit() {
+        console.log('init resizble.');
+        
+        $(this.el.nativeElement).resizable({
+            handles: 'all',
+            resize: (event, ui) => {
+                const element = ui.helper[0];
+                this.planModelService.updatePosition(element.id,
+                    element.offsetLeft, element.offsetTop, element.offsetWidth, element.offsetHeight - 12);
+                this.jsPlumbService.resizeParent(element, element.parentNode);
+                const node = this.planModelService.getNodeMap().get(element.id);
+                this.jsPlumbService.jsplumbInstanceMap.get(node.parentId).revalidate(element.id);
+            },
+        });
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/plan-model.ts b/sdc-workflow-designer-ui/src/app/model/plan-model.ts
index 055bc924..9897f70e 100644
--- a/sdc-workflow-designer-ui/src/app/model/plan-model.ts
+++ b/sdc-workflow-designer-ui/src/app/model/plan-model.ts
@@ -1,17 +1,17 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-import { WorkflowNode } from './workflow/workflow-node';
-
-export class PlanModel {
-    public nodes: WorkflowNode[] = [];
-    public configs: any = {};
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+import { WorkflowNode } from './workflow/workflow-node';
+
+export class PlanModel {
+    public nodes: WorkflowNode[] = [];
+    public configs: any = {};
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/topology/node-template.ts b/sdc-workflow-designer-ui/src/app/model/topology/node-template.ts
index 721ae604..07ebc42e 100644
--- a/sdc-workflow-designer-ui/src/app/model/topology/node-template.ts
+++ b/sdc-workflow-designer-ui/src/app/model/topology/node-template.ts
@@ -1,18 +1,18 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-export class NodeTemplate {
-    public id: string;
-    public name: string;
-    public type: string;
-    public namespace: string;
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+export class NodeTemplate {
+    public id: string;
+    public name: string;
+    public type: string;
+    public namespace: string;
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/error-event.ts b/sdc-workflow-designer-ui/src/app/model/workflow/error-event.ts
index 7285402a..96ba0e7d 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/error-event.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/error-event.ts
@@ -1,18 +1,18 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-import { ValueSource } from '../value-source.enum';
-import { Parameter } from './parameter';
-import { WorkflowNode } from './workflow-node';
-
-export interface ErrorEvent extends WorkflowNode {
-    parameter?: Parameter;
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+import { ValueSource } from '../value-source.enum';
+import { Parameter } from './parameter';
+import { WorkflowNode } from './workflow-node';
+
+export interface ErrorEvent extends WorkflowNode {
+    parameter?: Parameter;
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/position.ts b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
index 7593b70d..8ec4ed56 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
@@ -1,15 +1,15 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-export class Position {
-    constructor(public left: number, public top: number, public width = 56, public height = 56) { }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+export class Position {
+    constructor(public left: number, public top: number, public width = 56, public height = 56) { }
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/script-task.ts b/sdc-workflow-designer-ui/src/app/model/workflow/script-task.ts
index 392376ad..880f38a0 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/script-task.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/script-task.ts
@@ -1,17 +1,17 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-import { WorkflowNode } from './workflow-node';
-
-export interface ScriptTask extends WorkflowNode {
-    scriptFormat: string;
-    script?: string;
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+import { WorkflowNode } from './workflow-node';
+
+export interface ScriptTask extends WorkflowNode {
+    scriptFormat: string;
+    script?: string;
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/sub-process.ts b/sdc-workflow-designer-ui/src/app/model/workflow/sub-process.ts
index 0da453e4..e000ed25 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/sub-process.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/sub-process.ts
@@ -1,15 +1,15 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-import { WorkflowNode } from './workflow-node';
-export interface SubProcess extends WorkflowNode {
-    children?: WorkflowNode[];
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+import { WorkflowNode } from './workflow-node';
+export interface SubProcess extends WorkflowNode {
+    children?: WorkflowNode[];
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/tosca-node-task.ts b/sdc-workflow-designer-ui/src/app/model/workflow/tosca-node-task.ts
index 986f0188..7767b640 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/tosca-node-task.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/tosca-node-task.ts
@@ -1,22 +1,22 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-import { NodeTemplate } from '../topology/node-template';
-import { Parameter } from './parameter';
-import { WorkflowNode } from './workflow-node';
-
-export interface ToscaNodeTask extends WorkflowNode {
-    input?: Parameter[];
-    output?: Parameter[];
-    nodeInterface?: string;
-    operation?: string;
-    template?: NodeTemplate;
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+import { NodeTemplate } from '../topology/node-template';
+import { Parameter } from './parameter';
+import { WorkflowNode } from './workflow-node';
+
+export interface ToscaNodeTask extends WorkflowNode {
+    input?: Parameter[];
+    output?: Parameter[];
+    nodeInterface?: string;
+    operation?: string;
+    template?: NodeTemplate;
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/workflow-element.ts b/sdc-workflow-designer-ui/src/app/model/workflow/workflow-element.ts
index 9b0e2fe0..e41fc93a 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/workflow-element.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/workflow-element.ts
@@ -1,14 +1,14 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-export interface WorkflowElement {
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+export interface WorkflowElement {
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
index af567b9a..6d80e91e 100644
--- a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
@@ -81,7 +81,7 @@ export class BroadcastService {
      * broadcast datas
      * this method will catch the exceptions for the broadcast
      * @param subject will broadcast data
-     * @param data will be broadcated
+     * @param data will be broadcasted
      */
     public broadcast(subject: Subject<any>, data: any) {
         try {
diff --git a/sdc-workflow-designer-ui/src/app/services/data/in-memory-data.service.ts b/sdc-workflow-designer-ui/src/app/services/data/in-memory-data.service.ts
index e1ead992..a7449185 100644
--- a/sdc-workflow-designer-ui/src/app/services/data/in-memory-data.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data/in-memory-data.service.ts
@@ -31,7 +31,7 @@ export class InMemoryDataService implements InMemoryDbService {
                     name: 'workflow1',
                     nodes: [],
                     configs: {
-                        microservices: [{
+                        restConfigs: [{
                             definition: "/s/swagger",
                             name: "test",
                             swaggerJson: JSON.stringify(swagger),
@@ -47,7 +47,7 @@ export class InMemoryDataService implements InMemoryDbService {
                     name: 'workflow2',
                     nodes: [],
                     configs: {
-                        microservices: []
+                        restConfigs: []
                     }
                 },
             },
@@ -61,9 +61,11 @@ export class InMemoryDataService implements InMemoryDbService {
         const mockobject = {};
 
         const setting = {
-            "BackendType":"Catalog"
-        }
+            "BackendType":"SDC",
+        };
+
+        const tenant = {tenant: "tenant1"};
 
-        return { workflows, swagger, mockarray,mockobject, setting};
+        return { workflows, swagger, mockarray,mockobject, setting, tenant};
     }
 }
diff --git a/sdc-workflow-designer-ui/src/app/services/data/mockdata.ts b/sdc-workflow-designer-ui/src/app/services/data/mockdata.ts
index b7f9f90c..ad89e475 100644
--- a/sdc-workflow-designer-ui/src/app/services/data/mockdata.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data/mockdata.ts
@@ -1,4 +1,4 @@
 
-import {swaggerFjh} from './swagger';
+export const swaggerFjh = {"info":{"version":"1.0.0","contact":{"url":"https://gerrit.onap.org/r/#/admin/projects/vfc/nfvo/lcm","name":"ONAP VFC team","email":"onap-discuss@lists.onap.org"},"description":"VFC Network Service Lifecycle Management Rest API.","title":"ONAP VFC Network Service Lifecycle Management API"},"paths":{"/ns/sfcs/{sfcInstId}":{"delete":{"responses":{"204":{"description":"successful operation","schema":{"$ref":"#/definitions/DeleteResponse"}},"404":{"description":"the sfc instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"sfcInstId"}],"produces":["application/json"],"tags":["sfc"],"summary":"delete sfc","consumes":["application/json"],"operationId":"delete_sfc"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/SfcInfo"}},"404":{"description":"the sfc instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"description":"sfc instance id","required":true,"type":"string","name":"sfcInstId","in":"path"}],"produces":["application/json"],"tags":["sfc"],"summary":"query the specified sfc info","consumes":["application/json"],"operationId":"query_sfc"}},"/ns/{nsInstanceId}/postdeal":{"post":{"responses":{"202":{"description":""}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"nsInstanceId"},{"schema":{"$ref":"#/definitions/NSInstPostDetailRequest"},"description":"request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["postdeal"],"summary":"ns postdeal","consumes":["application/json"],"operationId":"ns_postdeal"}},"/ns/vnfs":{"post":{"responses":{"201":{"description":"","schema":{"$ref":"#/definitions/VnfPostResponse"}}},"description":"","parameters":[{"schema":{"$ref":"#/definitions/VnfPostRequest"},"description":"instantiate request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["vnf"],"summary":"vnf create","consumes":["application/json"],"operationId":"create_vnf"}},"/ns/{ns_instance_id}/heal":{"post":{"responses":{"202":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"500":{"description":"the url is invalid"}},"parameters":[{"required":true,"type":"string","description":"Identifier of the NS instance.","in":"path","name":"ns_instance_id"},{"schema":{"$ref":"#/definitions/NsHealRequest"},"description":"healVnfData","required":true,"name":"healVnfData","in":"body"}],"tags":["ns"],"description":"ns heal","summary":"ns heal","operationId":"ns_heal"}},"/jobs/{jobId}":{"post":{"responses":{"202":{"description":""}},"parameters":[{"required":true,"type":"string","description":"","in":"path","name":"jobId"},{"schema":{"$ref":"#/definitions/JobProgressRequest"},"description":"request param","required":true,"name":"body","in":"body"}],"tags":["job"],"description":"","summary":"jobstatus","operationId":"post_jobprogress"},"get":{"responses":{"202":{"description":"","schema":{"$ref":"#/definitions/JobDetailInfo"}}},"parameters":[{"required":true,"type":"string","description":"job Id","in":"path","name":"jobId"},{"required":true,"type":"string","description":"job response message id","in":"query","name":"responseId"}],"tags":["job"],"description":"","summary":"jobstatus","operationId":"get_jobstatus"}},"/ns/vls/{vlId}":{"delete":{"responses":{"204":{"description":"successful operation","schema":{"$ref":"#/definitions/DeleteVlResponse"}},"404":{"description":"the vl instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"vlId"}],"produces":["application/json"],"tags":["vl"],"summary":"delete vl","consumes":["application/json"],"operationId":"delete_vl"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/VlInfo"}},"404":{"description":"the vl instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"description":"vl instance id","required":true,"type":"string","name":"vlId","in":"path"}],"produces":["application/json"],"tags":["vl"],"summary":"query the specified vl info","consumes":["application/json"],"operationId":"query_vl"}},"/ns/vls":{"post":{"responses":{"201":{"description":"","schema":{"$ref":"#/definitions/VlPostResponse"}}},"description":"","parameters":[{"schema":{"$ref":"#/definitions/VlPostRequest"},"description":"instantiate request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["vl"],"summary":"vl create","consumes":["application/json"],"operationId":"create_vl"}},"/ns/sfcs":{"post":{"responses":{"201":{"description":"","schema":{"$ref":"#/definitions/SfcPostResponse"}}},"description":"","parameters":[{"schema":{"$ref":"#/definitions/SfcPostRequest"},"description":"request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["sfc"],"summary":"sfc create","consumes":["application/json"],"operationId":"create_sfc"}},"/ns/{ns_instance_id}":{"delete":{"responses":{"204":{"description":"The NS instance resource and the associated NS identifier were deleted successfully."}},"parameters":[{"required":true,"type":"string","description":"Identifier of the NS instance.","in":"path","name":"ns_instance_id"}],"tags":["ns"],"description":"ns delete","summary":"ns delete","operationId":"ns_delete"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/NsInstanceInfo"}}},"parameters":[],"tags":["ns"],"description":"ns get","summary":"ns get","operationId":"ns_instance_get"}},"/ns/vnfs/{vnfInstId}":{"delete":{"responses":{"204":{"description":"successful operation","schema":{"$ref":"#/definitions/DeleteResponse"}},"404":{"description":"the vl instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"vnfInstId"}],"produces":["application/json"],"tags":["vnf"],"summary":"delete vnf","consumes":["application/json"],"operationId":"delete_vnf"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/VnfInfo"}},"404":{"description":"the vnf instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"description":"vnf instance id","required":true,"type":"string","name":"vnfInstId","in":"path"}],"produces":["application/json"],"tags":["vnf"],"summary":"query the specified vnf info","consumes":["application/json"],"operationId":"query_vnf"}},"/ns":{"post":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/NsCreateResponse"}}},"parameters":[{"schema":{"$ref":"#/definitions/NsCreateRequest"},"description":"NS Instance Create Request","required":true,"name":"NSCreateRequest","in":"body"}],"tags":["ns"],"description":"ns create","summary":"ns create","operationId":"ns_create"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/NsInstancesInfo"}}},"parameters":[{"required":true,"type":"string","description":"job response message id","in":"query","name":"csarId"}],"tags":["ns"],"description":"ns get","summary":"ns get","operationId":"ns_instantces_get"}},"/ns/{ns_instance_id}/terminate":{"post":{"responses":{"202":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"500":{"description":"the url is invalid"}},"parameters":[{"required":true,"type":"string","description":"Identifier of the NS instance.","in":"path","name":"ns_instance_id"},{"schema":{"$ref":"#/definitions/NsTerminateRequest"},"description":"NsTerminateRequest","required":true,"name":"NsTerminateRequest","in":"body"}],"tags":["ns"],"description":"ns terminate","summary":"ns terminate","operationId":"ns_terminate"}},"/ns/{nsInstanceId}/scale":{"post":{"responses":{"200":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"201":{"description":"Invalid Request"}},"parameters":[{"required":true,"type":"string","description":"","in":"path","name":"nsInstanceId"},{"schema":{"$ref":"#/definitions/NsScaleRequest"},"description":"Scale NS Request Body","required":true,"name":"ScaleNSRequest","in":"body"}],"tags":["ns"],"description":"ns scale","summary":"ns scale","operationId":"ns_scale"}},"/mandb/{modelName}":{"delete":{"responses":{"204":{"description":"The tables were deleted successfully."}},"description":"ns table delete","parameters":[{"required":true,"type":"string","description":"model Name.","in":"path","name":"modelName"}],"produces":["application/json"],"tags":["db"],"summary":"ns table delete","consumes":["application/json"],"operationId":"ns_table_delete"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/TableInfo"}},"500":{"description":"the url is invalid"}},"description":"query ns table info","parameters":[{"required":true,"type":"string","description":"model Name.","in":"path","name":"modelName"}],"produces":["application/json"],"tags":["db"],"summary":"query ns table info","consumes":["application/json"],"operationId":"query_ns_table"}},"/ns/{nsInstanceId}/Instantiate":{"post":{"responses":{"200":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"201":{"description":"Invalid Request"}},"parameters":[{"required":true,"type":"string","description":"","in":"path","name":"nsInstanceId"},{"schema":{"$ref":"#/definitions/NsInstantiateRequest"},"description":"NS Instantiate Request Body","required":true,"name":"NSInstantiateRequest","in":"body"}],"tags":["ns"],"description":"ns Instantiate","summary":"ns Instantiate","operationId":"ns_Instantiate"}}},"schemes":["http","https"],"produces":["application/json"],"basePath":"/api/nslcm/v1","definitions":{"NsInstanceInfo":{"type":"object","properties":{"nsState":{"type":"string"},"vnfInfo":{"items":{"$ref":"#/definitions/vnfInfo"},"type":"array"},"nsInstanceId":{"type":"string"},"nsdId":{"type":"string"},"vlInfo":{"items":{"$ref":"#/definitions/vlInfo"},"type":"array"},"nsName":{"type":"string"},"vnffgInfo":{"items":{"$ref":"#/definitions/vnffgInfo"},"type":"array"},"description":{"type":"string"}}},"JobDetailInfo":{"type":"object","properties":{"responseDescriptor":{"type":"object","properties":{"status":{"type":"string"},"responseHistoryList":{"items":{"$ref":"#/definitions/jobResponseInfo"},"type":"array"},"responseId":{"type":"string"},"errorCode":{"type":"string"},"progress":{"type":"string"},"statusDescription":{"type":"string"}}},"jobId":{"type":"string"}}},"VnfInfo":{"type":"object","properties":{"vnfInstId":{"type":"string"},"vnfName":{"type":"string"},"vnfStatus":{"type":"string"}}},"DeleteResponse":{"type":"object","properties":{"result":{"enum":[0,1],"type":"integer"},"detail":{"type":"string"}}},"NsHealRequest":{"type":"object","properties":{"vnfInstanceId":{"type":"string"},"cause":{"type":"string"},"additionalParams":{"type":"object","properties":{"action":{"type":"string"},"actionvminfo":{"type":"object","properties":{"vmname":{"type":"string"},"vmid":{"type":"string"}}}}}}},"NsScaleRequest":{"type":"object","properties":{"scaleNsByStepsData":{"$ref":"#/definitions/NsScaleByStepsData"},"scaleType":{"type":"string"}}},"jobResponseInfo":{"type":"object","properties":{"status":{"type":"string"},"progress":{"type":"string"},"responseId":{"type":"string"},"statusDescription":{"type":"string"},"errorCode":{"type":"string"}}},"NSInstPostDetailRequest":{"type":"object","properties":{"status":{"type":"string"}}},"VlInfo":{"type":"object","properties":{"vlId":{"type":"string"},"vlStatus":{"type":"string"},"vlName":{"type":"string"}}},"VnfPostResponse":{"type":"object","properties":{"vnfInstId":{"type":"string"},"jobId":{"type":"string"}}},"NsCreateRequest":{"type":"object","properties":{"nsName":{"type":"string"},"csarId":{"type":"string","description":"the NS package ID"},"description":{"type":"string"}}},"VlPostResponse":{"type":"object","properties":{"vlId":{"type":"string"},"result":{"enum":[0,1],"type":"integer"},"detail":{"type":"string"}}},"SfcPostRequest":{"type":"object","properties":{"sdnControllerId":{"type":"string"},"vnfInstanceData":{"items":{"type":"object"},"type":"array"},"additionalParamForVnf":{"items":{"type":"object"},"type":"array"},"nsInstanceId":{"type":"string"},"jobId":{"type":"string"},"additionalParamForNs":{"items":{"type":"object"},"type":"array"},"context":{"type":"string"},"sapData":{"items":{"type":"object"},"type":"array"},"fpindex":{"type":"string"}}},"NsTerminateRequest":{"type":"object","properties":{"gracefulTerminationTimeout":{"type":"string"},"terminationType":{"type":"string"}}},"JobProgressRequest":{"type":"object","properties":{"progress":{"type":"string"},"errcode":{"type":"string"},"desc":{"type":"string"}}},"SfcInfo":{"type":"object","properties":{"sfcName":{"type":"string"},"sfcInstId":{"type":"string"},"sfcStatus":{"type":"string"}}},"vnfInfo":{"type":"object","properties":{"vnfInstanceId":{"type":"string"},"vnfdId":{"type":"string"},"vnfInstanceName":{"type":"string"}}},"LocationConstraint":{"type":"object","properties":{"locationConstraints":{"type":"object","properties":{"vimid":{"type":"string"}}},"vnfProfileId":{"type":"string"}}},"NsCreateResponse":{"type":"object","properties":{"nsInstanceId":{"type":"string"}}},"VlPostRequest":{"type":"object","properties":{"vnfInstanceData":{"items":{"type":"object"},"type":"array"},"additionalParamForVnf":{"items":{"type":"object"},"type":"array"},"nsInstanceId":{"type":"string"},"flavourId":{"type":"string"},"pnfInfo":{"items":{"type":"object"},"type":"array"},"extNSVirtualLink":{"items":{"type":"object"},"type":"array"},"additionalParamForNs":{"items":{"type":"object"},"type":"array"},"context":{"type":"string"},"sapData":{"items":{"type":"object"},"type":"array"},"nestedNsInstanceId":{"items":{"type":"object"},"type":"array"},"jobId":{"type":"string"},"locationConstraints":{"items":{"type":"object"},"type":"array"},"vlIndex":{"type":"string"}}},"VnfPostRequest":{"type":"object","properties":{"vnfInstanceData":{"items":{"type":"object"},"type":"array"},"vnfIndex":{"type":"string"},"additionalParamForVnf":{"items":{"type":"object"},"type":"array"},"nsInstanceId":{"type":"string"},"flavourId":{"type":"string"},"pnfInfo":{"items":{"type":"object"},"type":"array"},"extNSVirtualLink":{"items":{"type":"object"},"type":"array"},"additionalParamForNs":{"items":{"type":"object"},"type":"array"},"context":{"type":"string"},"sapData":{"items":{"type":"object"},"type":"array"},"nestedNsInstanceId":{"items":{"type":"object"},"type":"array"},"jobId":{"type":"string"},"locationConstraints":{"items":{"type":"object"},"type":"array"}}},"DeleteVlResponse":{"type":"object","properties":{"result":{"enum":[0,1],"type":"integer"},"detail":{"type":"string"}}},"vlInfo":{"type":"object","properties":{"vldId":{"type":"string"},"vlInstanceName":{"type":"string"},"vlInstanceId":{"type":"string"},"relatedCpInstanceId":{"items":{"$ref":"#/definitions/cpInfo"},"type":"array"}}},"cpInfo":{"type":"object","properties":{"cpInstanceId":{"type":"string"},"cpdId":{"type":"string"},"cpInstanceName":{"type":"string"}}},"SfcPostResponse":{"type":"object","properties":{"sfcInstId":{"type":"string"},"jobId":{"type":"string"}}},"NsInstantiateRequest":{"type":"object","properties":{"additionalParamForNs":{"type":"string"},"LocationConstraints":{"items":{"$ref":"#/definitions/LocationConstraint"},"type":"array"}}},"JobInfo":{"type":"object","properties":{"jobId":{"type":"string"}}},"NsInstancesInfo":{"items":{"$ref":"#/definitions/NsInstanceInfo"},"type":"array"},"NsScaleByStepsData":{"type":"object","properties":{"numberOfSteps":{"type":"integer"},"scalingDirection":{"type":"string"},"aspectId":{"type":"string"}}},"vnffgInfo":{"type":"object","properties":{"cpId":{"type":"string"},"virtualLinkId":{"type":"string"},"vnfId":{"type":"string"},"pnfId":{"type":"string"},"nfp":{"type":"string"},"vnffgInstanceId":{"type":"string"}}},"TableInfo":{"type":"object","properties":{"count":{"type":"string"}}}},"swagger":"2.0","consumes":["application/json"]};
 
 export const workflowFJH = {"id":"fjh","name":"fjh","nodes":[{"id":"node0","name":"startEvent","type":"startEvent","position":{"top":31,"left":31,"width":200,"height":100},"connection":[{"sourceRef":"node0","targetRef":"node23"}],"parameters":[{"name":"vlCount","value":"","valueSource":"String","type":"String"},{"name":"vnfCount","value":"","valueSource":"String","type":"String"},{"name":"sfcCount","value":"","valueSource":"String","type":"String"},{"name":"object_context","value":"","valueSource":"String","type":"String"},{"name":"nsInstanceId","value":"","valueSource":"String","type":"String"},{"name":"object_additionalParamForNs","value":"","valueSource":"String","type":"String"},{"name":"object_additionalParamForVnf","value":"","valueSource":"String","type":"String"},{"name":"jobId","value":"","valueSource":"String","type":"String"},{"name":"sdnControllerId","value":"","valueSource":"String","type":"String"},{"name":"templateid","value":"","valueSource":"String","type":"String"},{"name":"instanceid","value":"","valueSource":"String","type":"String"},{"name":"sdnolcmurl","value":"","valueSource":"String","type":"String"},{"name":"statusurl","value":"","valueSource":"String","type":"String"}]},{"id":"node1","name":"endEvent","type":"endEvent","position":{"top":668,"left":955,"width":200,"height":100},"connection":[]},{"id":"node2","name":"exclusiveGateway","type":"exclusiveGateway","position":{"top":120,"left":169,"width":200,"height":100},"connection":[{"sourceRef":"node2","targetRef":"node3","condition":"${ vl_index <= vlCount and vl_status='active' }","name":"未完成"},{"sourceRef":"node2","targetRef":"node4","condition":"!( vl_index <= vlCount and vl_status='active' )","name":"创建完成"}]},{"id":"node3","name":"createVL","type":"restTask","position":{"top":213,"left":142,"width":200,"height":100},"connection":[{"sourceRef":"node3","targetRef":"node11"}],"produces":["application/json"],"consumes":["application/json"],"parameters":[{"name":"body","valueSource":"String","type":"String","position":"body","schema":{"$ref":"#/definitions/VlPostRequest"}}],"responses":[{"description":"","schema":{"$ref":"#/definitions/VlPostResponse"}}],"restConfigId":"nslcm","path":"/ns/vls","method":"post"},{"id":"node4","name":"restTask","type":"restTask","position":{"top":115,"left":358,"width":200,"height":100},"connection":[{"sourceRef":"node4","targetRef":"node5"}],"produces":[],"consumes":[],"parameters":[],"responses":[],"restConfigId":"nslcm","path":"","method":""},{"id":"node5","name":"exclusiveGateway","type":"exclusiveGateway","position":{"top":212,"left":383,"width":200,"height":100},"connection":[{"sourceRef":"node5","targetRef":"node6","condition":"未完成"},{"sourceRef":"node5","targetRef":"node12","condition":"创建完成"}]},{"id":"node6","name":"createVNF","type":"restTask","position":{"top":306,"left":352,"width":200,"height":100},"connection":[{"sourceRef":"node6","targetRef":"node7"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node7","name":"intermediateCatchEvent","type":"intermediateCatchEvent","position":{"top":558,"left":443,"width":200,"height":100},"connection":[{"sourceRef":"node7","targetRef":"node8"}],"timerEventDefinition":{"type":"timeDuration"}},{"id":"node8","name":"query_vnf nslcm","type":"restTask","position":{"top":639,"left":216,"width":200,"height":100},"connection":[{"sourceRef":"node8","targetRef":"node9"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node9","name":"exclusiveGateway","type":"exclusiveGateway","position":{"top":539,"left":264,"width":200,"height":100},"connection":[{"sourceRef":"node9","targetRef":"node7","condition":"未完成"},{"sourceRef":"node9","targetRef":"node10","condition":"已完成"}]},{"id":"node10","name":"scriptTask","type":"scriptTask","position":{"top":303,"left":239,"width":200,"height":100},"connection":[{"sourceRef":"node10","targetRef":"node5"}]},{"id":"node11","name":"scriptTask","type":"scriptTask","position":{"top":207,"left":34,"width":200,"height":100},"connection":[{"sourceRef":"node11","targetRef":"node2"}]},{"id":"node12","name":"restTask","type":"restTask","position":{"top":205,"left":732,"width":200,"height":100},"connection":[{"sourceRef":"node12","targetRef":"node13"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node13","name":"exclusiveGateway","type":"exclusiveGateway","position":{"top":287,"left":757,"width":200,"height":100},"connection":[{"sourceRef":"node13","targetRef":"node14","condition":"未结束"},{"sourceRef":"node13","targetRef":"node18","condition":"已结束"}]},{"id":"node14","name":"createSfc","type":"restTask","position":{"top":440,"left":726,"width":200,"height":100},"connection":[{"sourceRef":"node14","targetRef":"node15"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node15","name":"intermediateCatchEvent","type":"intermediateCatchEvent","position":{"top":551,"left":754,"width":200,"height":100},"connection":[{"sourceRef":"node15","targetRef":"node16"}],"timerEventDefinition":{"type":"timeDuration"}},{"id":"node16","name":"restTask","type":"restTask","position":{"top":642,"left":589,"width":200,"height":100},"connection":[{"sourceRef":"node16","targetRef":"node17"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node17","name":"exclusiveGateway","type":"exclusiveGateway","position":{"top":551,"left":614,"width":200,"height":100},"connection":[{"sourceRef":"node17","targetRef":"node15","condition":"未结束"},{"sourceRef":"node17","targetRef":"node19","condition":"已结束"}]},{"id":"node18","name":"restTask","type":"restTask","position":{"top":282,"left":927,"width":200,"height":100},"connection":[{"sourceRef":"node18","targetRef":"node20"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node19","name":"scriptTask","type":"scriptTask","position":{"top":275,"left":588,"width":200,"height":100},"connection":[{"sourceRef":"node19","targetRef":"node13"}]},{"id":"node20","name":"Assign_all_status","type":"scriptTask","position":{"top":380,"left":928,"width":200,"height":100},"connection":[{"sourceRef":"node20","targetRef":"node21"}]},{"id":"node21","name":"post_do","type":"restTask","position":{"top":497,"left":929,"width":200,"height":100},"connection":[{"sourceRef":"node21","targetRef":"node22"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node22","name":"jobstatus","type":"restTask","position":{"top":586,"left":927,"width":200,"height":100},"connection":[{"sourceRef":"node22","targetRef":"node1"}],"produces":[],"consumes":[],"parameters":[],"responses":[]},{"id":"node23","name":"scriptTask","type":"scriptTask","position":{"top":16,"left":143,"width":200,"height":100},"connection":[{"sourceRef":"node23","targetRef":"node2"}],"scriptFormate":"javascript","script":"execution.setVariable(\"vl_index\", 1);\nexecution.setVariable(\"vl_status\", \"active\");"}],"configs":{"restConfigs":[{"id": "nslcm", "name":"nslcm","version":"v1","swagger":swaggerFjh,"definition":""}]}};
diff --git a/sdc-workflow-designer-ui/src/app/services/data/swagger.ts b/sdc-workflow-designer-ui/src/app/services/data/swagger.ts
deleted file mode 100644
index 5a9cc939..00000000
--- a/sdc-workflow-designer-ui/src/app/services/data/swagger.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const swaggerFjh = {"info":{"version":"1.0.0","contact":{"url":"https://gerrit.onap.org/r/#/admin/projects/vfc/nfvo/lcm","name":"ONAP VFC team","email":"onap-discuss@lists.onap.org"},"description":"VFC Network Service Lifecycle Management Rest API.","title":"ONAP VFC Network Service Lifecycle Management API"},"paths":{"/ns/sfcs/{sfcInstId}":{"delete":{"responses":{"204":{"description":"successful operation","schema":{"$ref":"#/definitions/DeleteResponse"}},"404":{"description":"the sfc instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"sfcInstId"}],"produces":["application/json"],"tags":["sfc"],"summary":"delete sfc","consumes":["application/json"],"operationId":"delete_sfc"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/SfcInfo"}},"404":{"description":"the sfc instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"description":"sfc instance id","required":true,"type":"string","name":"sfcInstId","in":"path"}],"produces":["application/json"],"tags":["sfc"],"summary":"query the specified sfc info","consumes":["application/json"],"operationId":"query_sfc"}},"/ns/{nsInstanceId}/postdeal":{"post":{"responses":{"202":{"description":""}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"nsInstanceId"},{"schema":{"$ref":"#/definitions/NSInstPostDetailRequest"},"description":"request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["postdeal"],"summary":"ns postdeal","consumes":["application/json"],"operationId":"ns_postdeal"}},"/ns/vnfs":{"post":{"responses":{"201":{"description":"","schema":{"$ref":"#/definitions/VnfPostResponse"}}},"description":"","parameters":[{"schema":{"$ref":"#/definitions/VnfPostRequest"},"description":"instantiate request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["vnf"],"summary":"vnf create","consumes":["application/json"],"operationId":"create_vnf"}},"/ns/{ns_instance_id}/heal":{"post":{"responses":{"202":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"500":{"description":"the url is invalid"}},"parameters":[{"required":true,"type":"string","description":"Identifier of the NS instance.","in":"path","name":"ns_instance_id"},{"schema":{"$ref":"#/definitions/NsHealRequest"},"description":"healVnfData","required":true,"name":"healVnfData","in":"body"}],"tags":["ns"],"description":"ns heal","summary":"ns heal","operationId":"ns_heal"}},"/jobs/{jobId}":{"post":{"responses":{"202":{"description":""}},"parameters":[{"required":true,"type":"string","description":"","in":"path","name":"jobId"},{"schema":{"$ref":"#/definitions/JobProgressRequest"},"description":"request param","required":true,"name":"body","in":"body"}],"tags":["job"],"description":"","summary":"jobstatus","operationId":"post_jobprogress"},"get":{"responses":{"202":{"description":"","schema":{"$ref":"#/definitions/JobDetailInfo"}}},"parameters":[{"required":true,"type":"string","description":"job Id","in":"path","name":"jobId"},{"required":true,"type":"string","description":"job response message id","in":"query","name":"responseId"}],"tags":["job"],"description":"","summary":"jobstatus","operationId":"get_jobstatus"}},"/ns/vls/{vlId}":{"delete":{"responses":{"204":{"description":"successful operation","schema":{"$ref":"#/definitions/DeleteVlResponse"}},"404":{"description":"the vl instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"vlId"}],"produces":["application/json"],"tags":["vl"],"summary":"delete vl","consumes":["application/json"],"operationId":"delete_vl"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/VlInfo"}},"404":{"description":"the vl instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"description":"vl instance id","required":true,"type":"string","name":"vlId","in":"path"}],"produces":["application/json"],"tags":["vl"],"summary":"query the specified vl info","consumes":["application/json"],"operationId":"query_vl"}},"/ns/vls":{"post":{"responses":{"201":{"description":"","schema":{"$ref":"#/definitions/VlPostResponse"}}},"description":"","parameters":[{"schema":{"$ref":"#/definitions/VlPostRequest"},"description":"instantiate request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["vl"],"summary":"vl create","consumes":["application/json"],"operationId":"create_vl"}},"/ns/sfcs":{"post":{"responses":{"201":{"description":"","schema":{"$ref":"#/definitions/SfcPostResponse"}}},"description":"","parameters":[{"schema":{"$ref":"#/definitions/SfcPostRequest"},"description":"request param","required":true,"name":"body","in":"body"}],"produces":["application/json"],"tags":["sfc"],"summary":"sfc create","consumes":["application/json"],"operationId":"create_sfc"}},"/ns/{ns_instance_id}":{"delete":{"responses":{"204":{"description":"The NS instance resource and the associated NS identifier were deleted successfully."}},"parameters":[{"required":true,"type":"string","description":"Identifier of the NS instance.","in":"path","name":"ns_instance_id"}],"tags":["ns"],"description":"ns delete","summary":"ns delete","operationId":"ns_delete"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/NsInstanceInfo"}}},"parameters":[],"tags":["ns"],"description":"ns get","summary":"ns get","operationId":"ns_instance_get"}},"/ns/vnfs/{vnfInstId}":{"delete":{"responses":{"204":{"description":"successful operation","schema":{"$ref":"#/definitions/DeleteResponse"}},"404":{"description":"the vl instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"required":true,"type":"string","description":"","in":"path","name":"vnfInstId"}],"produces":["application/json"],"tags":["vnf"],"summary":"delete vnf","consumes":["application/json"],"operationId":"delete_vnf"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/VnfInfo"}},"404":{"description":"the vnf instance id is wrong"},"500":{"description":"the url is invalid"}},"description":"","parameters":[{"description":"vnf instance id","required":true,"type":"string","name":"vnfInstId","in":"path"}],"produces":["application/json"],"tags":["vnf"],"summary":"query the specified vnf info","consumes":["application/json"],"operationId":"query_vnf"}},"/ns":{"post":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/NsCreateResponse"}}},"parameters":[{"schema":{"$ref":"#/definitions/NsCreateRequest"},"description":"NS Instance Create Request","required":true,"name":"NSCreateRequest","in":"body"}],"tags":["ns"],"description":"ns create","summary":"ns create","operationId":"ns_create"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/NsInstancesInfo"}}},"parameters":[{"required":true,"type":"string","description":"job response message id","in":"query","name":"csarId"}],"tags":["ns"],"description":"ns get","summary":"ns get","operationId":"ns_instantces_get"}},"/ns/{ns_instance_id}/terminate":{"post":{"responses":{"202":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"500":{"description":"the url is invalid"}},"parameters":[{"required":true,"type":"string","description":"Identifier of the NS instance.","in":"path","name":"ns_instance_id"},{"schema":{"$ref":"#/definitions/NsTerminateRequest"},"description":"NsTerminateRequest","required":true,"name":"NsTerminateRequest","in":"body"}],"tags":["ns"],"description":"ns terminate","summary":"ns terminate","operationId":"ns_terminate"}},"/ns/{nsInstanceId}/scale":{"post":{"responses":{"200":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"201":{"description":"Invalid Request"}},"parameters":[{"required":true,"type":"string","description":"","in":"path","name":"nsInstanceId"},{"schema":{"$ref":"#/definitions/NsScaleRequest"},"description":"Scale NS Request Body","required":true,"name":"ScaleNSRequest","in":"body"}],"tags":["ns"],"description":"ns scale","summary":"ns scale","operationId":"ns_scale"}},"/mandb/{modelName}":{"delete":{"responses":{"204":{"description":"The tables were deleted successfully."}},"description":"ns table delete","parameters":[{"required":true,"type":"string","description":"model Name.","in":"path","name":"modelName"}],"produces":["application/json"],"tags":["db"],"summary":"ns table delete","consumes":["application/json"],"operationId":"ns_table_delete"},"get":{"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/TableInfo"}},"500":{"description":"the url is invalid"}},"description":"query ns table info","parameters":[{"required":true,"type":"string","description":"model Name.","in":"path","name":"modelName"}],"produces":["application/json"],"tags":["db"],"summary":"query ns table info","consumes":["application/json"],"operationId":"query_ns_table"}},"/ns/{nsInstanceId}/Instantiate":{"post":{"responses":{"200":{"description":"","schema":{"$ref":"#/definitions/JobInfo"}},"201":{"description":"Invalid Request"}},"parameters":[{"required":true,"type":"string","description":"","in":"path","name":"nsInstanceId"},{"schema":{"$ref":"#/definitions/NsInstantiateRequest"},"description":"NS Instantiate Request Body","required":true,"name":"NSInstantiateRequest","in":"body"}],"tags":["ns"],"description":"ns Instantiate","summary":"ns Instantiate","operationId":"ns_Instantiate"}}},"schemes":["http","https"],"produces":["application/json"],"basePath":"/api/nslcm/v1","definitions":{"NsInstanceInfo":{"type":"object","properties":{"nsState":{"type":"string"},"vnfInfo":{"items":{"$ref":"#/definitions/vnfInfo"},"type":"array"},"nsInstanceId":{"type":"string"},"nsdId":{"type":"string"},"vlInfo":{"items":{"$ref":"#/definitions/vlInfo"},"type":"array"},"nsName":{"type":"string"},"vnffgInfo":{"items":{"$ref":"#/definitions/vnffgInfo"},"type":"array"},"description":{"type":"string"}}},"JobDetailInfo":{"type":"object","properties":{"responseDescriptor":{"type":"object","properties":{"status":{"type":"string"},"responseHistoryList":{"items":{"$ref":"#/definitions/jobResponseInfo"},"type":"array"},"responseId":{"type":"string"},"errorCode":{"type":"string"},"progress":{"type":"string"},"statusDescription":{"type":"string"}}},"jobId":{"type":"string"}}},"VnfInfo":{"type":"object","properties":{"vnfInstId":{"type":"string"},"vnfName":{"type":"string"},"vnfStatus":{"type":"string"}}},"DeleteResponse":{"type":"object","properties":{"result":{"enum":[0,1],"type":"integer"},"detail":{"type":"string"}}},"NsHealRequest":{"type":"object","properties":{"vnfInstanceId":{"type":"string"},"cause":{"type":"string"},"additionalParams":{"type":"object","properties":{"action":{"type":"string"},"actionvminfo":{"type":"object","properties":{"vmname":{"type":"string"},"vmid":{"type":"string"}}}}}}},"NsScaleRequest":{"type":"object","properties":{"scaleNsByStepsData":{"$ref":"#/definitions/NsScaleByStepsData"},"scaleType":{"type":"string"}}},"jobResponseInfo":{"type":"object","properties":{"status":{"type":"string"},"progress":{"type":"string"},"responseId":{"type":"string"},"statusDescription":{"type":"string"},"errorCode":{"type":"string"}}},"NSInstPostDetailRequest":{"type":"object","properties":{"status":{"type":"string"}}},"VlInfo":{"type":"object","properties":{"vlId":{"type":"string"},"vlStatus":{"type":"string"},"vlName":{"type":"string"}}},"VnfPostResponse":{"type":"object","properties":{"vnfInstId":{"type":"string"},"jobId":{"type":"string"}}},"NsCreateRequest":{"type":"object","properties":{"nsName":{"type":"string"},"csarId":{"type":"string","description":"the NS package ID"},"description":{"type":"string"}}},"VlPostResponse":{"type":"object","properties":{"vlId":{"type":"string"},"result":{"enum":[0,1],"type":"integer"},"detail":{"type":"string"}}},"SfcPostRequest":{"type":"object","properties":{"sdnControllerId":{"type":"string"},"vnfInstanceData":{"items":{"type":"object"},"type":"array"},"additionalParamForVnf":{"items":{"type":"object"},"type":"array"},"nsInstanceId":{"type":"string"},"jobId":{"type":"string"},"additionalParamForNs":{"items":{"type":"object"},"type":"array"},"context":{"type":"string"},"sapData":{"items":{"type":"object"},"type":"array"},"fpindex":{"type":"string"}}},"NsTerminateRequest":{"type":"object","properties":{"gracefulTerminationTimeout":{"type":"string"},"terminationType":{"type":"string"}}},"JobProgressRequest":{"type":"object","properties":{"progress":{"type":"string"},"errcode":{"type":"string"},"desc":{"type":"string"}}},"SfcInfo":{"type":"object","properties":{"sfcName":{"type":"string"},"sfcInstId":{"type":"string"},"sfcStatus":{"type":"string"}}},"vnfInfo":{"type":"object","properties":{"vnfInstanceId":{"type":"string"},"vnfdId":{"type":"string"},"vnfInstanceName":{"type":"string"}}},"LocationConstraint":{"type":"object","properties":{"locationConstraints":{"type":"object","properties":{"vimid":{"type":"string"}}},"vnfProfileId":{"type":"string"}}},"NsCreateResponse":{"type":"object","properties":{"nsInstanceId":{"type":"string"}}},"VlPostRequest":{"type":"object","properties":{"vnfInstanceData":{"items":{"type":"object"},"type":"array"},"additionalParamForVnf":{"items":{"type":"object"},"type":"array"},"nsInstanceId":{"type":"string"},"flavourId":{"type":"string"},"pnfInfo":{"items":{"type":"object"},"type":"array"},"extNSVirtualLink":{"items":{"type":"object"},"type":"array"},"additionalParamForNs":{"items":{"type":"object"},"type":"array"},"context":{"type":"string"},"sapData":{"items":{"type":"object"},"type":"array"},"nestedNsInstanceId":{"items":{"type":"object"},"type":"array"},"jobId":{"type":"string"},"locationConstraints":{"items":{"type":"object"},"type":"array"},"vlIndex":{"type":"string"}}},"VnfPostRequest":{"type":"object","properties":{"vnfInstanceData":{"items":{"type":"object"},"type":"array"},"vnfIndex":{"type":"string"},"additionalParamForVnf":{"items":{"type":"object"},"type":"array"},"nsInstanceId":{"type":"string"},"flavourId":{"type":"string"},"pnfInfo":{"items":{"type":"object"},"type":"array"},"extNSVirtualLink":{"items":{"type":"object"},"type":"array"},"additionalParamForNs":{"items":{"type":"object"},"type":"array"},"context":{"type":"string"},"sapData":{"items":{"type":"object"},"type":"array"},"nestedNsInstanceId":{"items":{"type":"object"},"type":"array"},"jobId":{"type":"string"},"locationConstraints":{"items":{"type":"object"},"type":"array"}}},"DeleteVlResponse":{"type":"object","properties":{"result":{"enum":[0,1],"type":"integer"},"detail":{"type":"string"}}},"vlInfo":{"type":"object","properties":{"vldId":{"type":"string"},"vlInstanceName":{"type":"string"},"vlInstanceId":{"type":"string"},"relatedCpInstanceId":{"items":{"$ref":"#/definitions/cpInfo"},"type":"array"}}},"cpInfo":{"type":"object","properties":{"cpInstanceId":{"type":"string"},"cpdId":{"type":"string"},"cpInstanceName":{"type":"string"}}},"SfcPostResponse":{"type":"object","properties":{"sfcInstId":{"type":"string"},"jobId":{"type":"string"}}},"NsInstantiateRequest":{"type":"object","properties":{"additionalParamForNs":{"type":"string"},"LocationConstraints":{"items":{"$ref":"#/definitions/LocationConstraint"},"type":"array"}}},"JobInfo":{"type":"object","properties":{"jobId":{"type":"string"}}},"NsInstancesInfo":{"items":{"$ref":"#/definitions/NsInstanceInfo"},"type":"array"},"NsScaleByStepsData":{"type":"object","properties":{"numberOfSteps":{"type":"integer"},"scalingDirection":{"type":"string"},"aspectId":{"type":"string"}}},"vnffgInfo":{"type":"object","properties":{"cpId":{"type":"string"},"virtualLinkId":{"type":"string"},"vnfId":{"type":"string"},"pnfId":{"type":"string"},"nfp":{"type":"string"},"vnffgInstanceId":{"type":"string"}}},"TableInfo":{"type":"object","properties":{"count":{"type":"string"}}}},"swagger":"2.0","consumes":["application/json"]};
diff --git a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
index c6cf60a8..e90efa7e 100644
--- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
@@ -1,562 +1,573 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-
-import { Injectable } from '@angular/core';
-import * as jsp from 'jsplumb';
-
-import { Subscription } from 'rxjs/Subscription';
-import { WorkflowNode } from '../model/workflow/workflow-node';
-import { BroadcastService } from './broadcast.service';
-import { ModelService } from './model.service';
-import { SequenceFlow } from '../model/workflow/sequence-flow';
-import { Position } from '../model/workflow/position';
-
-/**
- * JsPlumbService
- * provides all of the operations about jsplumb plugin.
- */
-@Injectable()
-export class JsPlumbService {
-    public jsplumbInstanceMap = new Map<string, any>();
-    public subscriptionMap = new Map<string, Subscription>();
-
-    private padding = 20;
-    private rootClass = 'canvas';
-    private selectNodes: WorkflowNode[] = [];
-
-    constructor(private modelService: ModelService, private broadcastService: BroadcastService) {
-        this.broadcastService.selectedElement$.subscribe(elements => {
-            this.selectNodes = [];
-            if (elements && 0 < elements.length) {
-                for (let index = 0; index < elements.length; index++) {
-                    let element = elements[index];
-                    if (this.modelService.isNode(element)) {
-                        let node = element as WorkflowNode;
-                        this.selectNodes.push(node);
-                    }
-                }
-            }
-        });
-    }
-
-    public connectChildrenNodes(parentNodeId: string) {
-        const jsplumbInstance = this.jsplumbInstanceMap.get(parentNodeId);
-
-        const nodes: WorkflowNode[] = this.modelService.getChildrenNodes(parentNodeId);
-        nodes.forEach(node => this.connect4OneNode(node, jsplumbInstance));
-    }
-
-    public connect4OneNode(node: WorkflowNode, jsplumbInstance: any) {
-        node.connection.forEach(sequenceFlow => {
-            const connection = jsplumbInstance.connect({
-                source: sequenceFlow.sourceRef,
-                target: sequenceFlow.targetRef,
-            });
-            if (sequenceFlow.name) {
-                connection.setLabel(sequenceFlow.name);
-            }
-        });
-    }
-
-    public initJsPlumbInstance(id: string) {
-        if (this.jsplumbInstanceMap.get(id)) {
-            return;
-        }
-        const jsplumbInstance = jsp.jsPlumb.getInstance();
-
-        jsplumbInstance.importDefaults({
-            Anchor: "Continuous",
-            Endpoint: "Blank",
-            Container: "pallete",
-            ReattachConnections: true,
-            Connector: ['Flowchart', {
-                stub: [0, 0],
-                cornerRadius: 5,
-                alwaysRespectStubs: true
-            }],
-            PaintStyle: {
-                stroke: "#7D8695",
-                strokeWidth: 1,
-                radius: 1,
-                outlineStroke: "transform",
-                outlineWidth: 4
-            },
-            ConnectorStyle: {
-                stroke: "#7D8695",
-                strokeWidth: 1,
-                outlineStroke: "transform",
-                outlineWidth: 4
-            },
-            ConnectorHoverStyle: {
-                stroke: "#00ABFF",
-                strokeWidth: 2,
-                outlineStroke: "transform",
-                outlineWidth: 4
-            },
-            ConnectionOverlays: [
-                ['Arrow', {
-                    location: 1,
-                    id: 'arrow',
-                    cssClass: 'icon-port',
-                    width: 11,
-                    length: 12
-                }],
-                ['Label', { label: '', id: 'label' }]
-            ]
-        });
-
-        // add connection to model data while a new connection is build
-        jsplumbInstance.bind('connection', info => {
-            this.modelService.addConnection(info.connection.sourceId, info.connection.targetId);
-
-            this.subscribe4Connection(info.connection);
-
-            info.connection.bind('click', (connection, event) => {
-                if ('Label' === connection.type) {
-                    return;
-                }
-                event.stopPropagation();
-                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);
-                this.broadcastService.broadcast(this.broadcastService.showProperty, null);
-                this.broadcastService.broadcast(this.broadcastService.selectedElement, [sequenceFlow]);
-            });
-
-            info.connection.bind('dblclick', connection => {
-                if ('Label' === connection.type) {
-                    return;
-                }
-                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);
-                this.broadcastService.broadcast(this.broadcastService.showProperty, sequenceFlow);
-            });
-        });
-
-        this.jsplumbInstanceMap.set(id, jsplumbInstance);
-    }
-
-    private subscribe4Connection(connection: any) {
-        const pre = connection.sourceId + connection.targetId;
-        let sequenceFlowSubscription = this.subscriptionMap.get(pre + 'sequenceFlowSubscription');
-        if (sequenceFlowSubscription && !sequenceFlowSubscription.closed) {
-            sequenceFlowSubscription.unsubscribe();
-        }
-
-        let currentThis = this;
-        sequenceFlowSubscription = this.broadcastService.selectedElement$.subscribe(elements => {
-            let selected = false;
-            if (elements && 0 < elements.length) {
-                for (let index = 0; index < elements.length; index++) {
-                    let element = elements[index];
-                    if (!this.modelService.isNode(element)) {
-                        let sequence = element as SequenceFlow;
-                        if (sequence.sourceRef === connection.sourceId
-                            && sequence.targetRef === connection.targetId) {
-                            selected = true;
-                        }
-                    }
-                }
-            }
-            if (selected) {
-                connection.setPaintStyle({
-                    stroke: '#00ABFF',
-                    strokeWidth: 1,
-                    radius: 1,
-                    outlineStroke: "transform",
-                    outlineWidth: 4
-                });
-            } else {
-                connection.setPaintStyle({
-                    stroke: '#7D8695',
-                    strokeWidth: 1,
-                    radius: 1,
-                    outlineStroke: "transform",
-                    outlineWidth: 4
-                });
-            }
-        });
-        this.subscriptionMap.set(pre + 'sequenceFlowSubscription', sequenceFlowSubscription);
-    }
-
-    private unsubscription4Connection(connectionSelection: any) {
-        connectionSelection.each(connection => {
-            const pre = connection.sourceId + connection.targetId;
-            this.subscriptionMap.get(pre + 'sequenceFlowSubscription').unsubscribe();
-        });
-    }
-
-    public deleteConnect(sourceId: string, targetId: string) {
-        const sourceNode = this.modelService.getNodeMap().get(sourceId);
-        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);
-        const connectionSelection = jsplumbInstance.select({ source: sourceId, target: targetId });
-        this.unsubscription4Connection(connectionSelection);
-        connectionSelection.delete();
-    }
-
-    public setLabel(sourceId: string, targetId: string, label: string) {
-        const sourceNode = this.modelService.getNodeMap().get(sourceId);
-        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);
-        const connections = jsplumbInstance.select({ source: sourceId, target: targetId });
-        connections.setLabel(label);
-    }
-
-    public getParentNodeId(id: string): string {
-        const nodeElement = jsp.jsPlumb.getSelector('#' + id);
-        const parentNode = this.getParentNodeEl(nodeElement[0]);
-
-        return parentNode ? parentNode.id : null;
-    }
-
-    public initNode(node: WorkflowNode) {
-        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
-
-        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).draggable(node.id, {
-            scope: 'node',
-            filter: '.ui-resizable-handle',
-            classes: {
-                'ui-draggable': 'dragging'
-            },
-            // grid: [5, 5],
-            drag: event => {
-                // out of container edge, reset to minimal value.
-                if (0 > event.pos[0]) {
-                    event.el.style.left = '0px';
-                }
-                if (0 > event.pos[1]) {
-                    event.el.style.top = '0px';
-                }
-
-                if (0 < this.selectNodes.length) {
-                    let moveAll = false;
-                    this.selectNodes.forEach(element => {
-                        if (element.id === event.el.id) {
-                            moveAll = true;
-                        }
-                    });
-                    if (moveAll) {
-                        this.selectNodes.forEach(selectNode => {
-                            if (selectNode.id !== event.el.id) {
-                                selectNode.position.left += event.e.movementX;
-                                selectNode.position.left = 0 > selectNode.position.left ? 0 : selectNode.position.left;
-                                selectNode.position.top += event.e.movementY;
-                                selectNode.position.top = 0 > selectNode.position.top ? 0 : selectNode.position.top;
-                            }
-                            jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));
-                        });
-                    }
-                }
-            },
-            stop: event => {
-                this.selectNodes.forEach(selectNode => {
-                    jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));
-                });
-            }
-        });
-
-        jsplumbInstance.makeTarget(node.id, {
-            maxConnections: -1,
-            beforeDrop: function (info) {
-                const sourceId = info.sourceId;
-                const targetId = info.targetId;
-                if (sourceId === targetId) {
-                    return false;
-                }
-                const sameConnections = this.instance.getConnections({ source: sourceId, target: targetId });
-                if (sameConnections && 0 < sameConnections.length) {
-                    return false;
-                }
-                return true;
-            }
-
-        });
-
-        jsplumbInstance.makeSource(node.id, {
-            filter: '.anchor, .anchor *',
-            maxConnections: -1,
-        });
-    }
-
-    public nodeDroppable(node: WorkflowNode, rank: number) {
-        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
-
-        const selector = jsplumbInstance.getSelector('#' + node.id);
-        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).droppable(selector, {
-            scope: 'node',
-            rank,
-            tolerance: 'pointer',
-            drop: event => {
-                if (!this.isChildNode(event.drop.el, event.drag.el)) {
-                    this.drop(event);
-                }
-                return true;
-            },
-            canDrop: drag => {
-                const nodeMap = this.modelService.getNodeMap();
-                const ancestorNode = nodeMap.get(drag.el.id);
-
-                const isAncestor = this.modelService.isDescendantNode(ancestorNode, node.id);
-                return !isAncestor;
-            },
-        });
-    }
-
-    private isChildNode(childElement, parentElement) {
-        while (childElement !== parentElement) {
-            childElement = childElement.parentNode;
-            if (childElement.classList.contains('canvas')) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    private drop(event) {
-        const dragEl = event.drag.el;
-        const dropEl = event.drop.el;
-
-        this.resizeParent(dragEl, dropEl);
-
-        const nodeLeft = dragEl.getBoundingClientRect().left;
-        const nodeTop = dragEl.getBoundingClientRect().top;
-        const parentLeft = dropEl.getBoundingClientRect().left;
-        const parentTop = dropEl.getBoundingClientRect().top;
-        const left = nodeLeft - parentLeft + dropEl.scrollLeft;
-        const top = nodeTop - parentTop + dropEl.scrollTop;
-        dragEl.style.top = top + 'px';
-        dragEl.style.left = left + 'px';
-
-        // 12 is title height
-        this.modelService.updatePosition(dragEl.id, left, top, dragEl.getBoundingClientRect().width, dragEl.getBoundingClientRect().height - 12);
-
-        const originalParentNode = this.getParentNodeEl(dragEl);
-        const originalParentNodeId = originalParentNode ? originalParentNode.id : this.modelService.rootNodeId;
-
-        const targetParentNodeId = dropEl.classList.contains('node') ? dropEl.id : this.modelService.rootNodeId;
-        this.changeParent(dragEl.id, originalParentNodeId, targetParentNodeId);
-    }
-
-    private changeParent(id: string, originalParentNodeId: string, targetParentNodeId: string) {
-        if (originalParentNodeId !== targetParentNodeId) {
-            this.jsplumbInstanceMap.get(originalParentNodeId).removeAllEndpoints(id);
-            this.modelService.changeParent(id, originalParentNodeId, targetParentNodeId);
-        }
-    }
-
-    private getParentNodeEl(element) {
-        while (!(element.parentNode.classList.contains('node') || element.parentNode.classList.contains('canvas'))) {
-            element = element.parentNode;
-        }
-
-        if (element.parentNode.classList.contains('canvas')) { // top level node
-            return null;
-        } else {
-            return element.parentNode;
-        }
-    }
-
-    public canvasDroppable() {
-        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
-        const canvasSelector = jsplumbInstance.getSelector('.canvas');
-        jsplumbInstance.droppable(canvasSelector, {
-            scope: 'node',
-            rank: 0,
-            grid: [5, 5],
-            drop: event => this.drop(event),
-        });
-    }
-
-    public buttonDraggable() {
-        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
-        const selector = jsplumbInstance.getSelector('.item');
-        jsplumbInstance.draggable(selector, {
-            scope: 'btn',
-            clone: true
-        });
-    }
-
-    public buttonDroppable() {
-        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
-        const selector = jsplumbInstance.getSelector('.canvas');
-        jsplumbInstance.droppable(selector, {
-            scope: 'btn',
-            // grid: [5, 5],
-            drop: event => {
-                const el = jsplumbInstance.getSelector(event.drag.el);
-                const type = el.attributes.nodeType.value;
-                // Mouse position minus drop canvas start position plus scroll position.
-                let left = event.e.x - event.drop.pagePosition[0] + event.drop.el.scrollLeft;
-                let top = event.e.y - event.drop.pagePosition[1] + event.drop.el.scrollTop;
-                if (0 > left) {
-                    left = 0;
-                }
-                if (0 > top) {
-                    top = 0;
-                }
-                const name = event.drag.el.children[1].innerText;
-                this.modelService.addNode(name, type, left, top);
-            },
-        });
-    }
-
-    public remove(node: WorkflowNode) {
-        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
-
-        // unsubscription4Connection
-        const connectionsAsSource = jsplumbInstance.select({ source: node.id });
-        this.unsubscription4Connection(connectionsAsSource);
-        const connectionsAsTarget = jsplumbInstance.select({ target: node.id });
-        this.unsubscription4Connection(connectionsAsTarget);
-
-        jsplumbInstance.remove(node.id);
-    }
-
-    public resizeParent(element: any, parentElement: any) {
-        if (parentElement.classList.contains(this.rootClass)) {
-            return;
-        }
-
-        if (!parentElement.classList.contains('node')) {
-            this.resizeParent(element, parentElement.parentNode);
-            return;
-        }
-
-        const leftResized = this.resizeParentLeft(element, parentElement);
-        const rightResized = this.resizeParentRight(element, parentElement);
-        const topResized = this.resizeParentTop(element, parentElement);
-        const bottomResized = this.resizeParentBottom(element, parentElement);
-
-        if (leftResized || rightResized || topResized || bottomResized) {
-            if (parentElement.classList.contains('node')) {
-                const rect = parentElement.getBoundingClientRect();
-                this.modelService.updatePosition(parentElement.id,
-                    parentElement.offsetLeft,
-                    parentElement.offsetTop,
-                    // title height
-                    rect.width, rect.height - 12);
-            }
-            this.resizeParent(parentElement, parentElement.parentNode);
-        }
-    }
-
-    private resizeParentLeft(element: any, parentElement: any): boolean {
-        let resized = false;
-
-        const actualLeft = element.getBoundingClientRect().left;
-        const actualParentLeft = parentElement.getBoundingClientRect().left;
-
-        if (actualLeft - this.padding < actualParentLeft) {
-            const width = actualParentLeft - actualLeft + this.padding;
-
-            this.translateElement(parentElement, -width, 0, width, 0);
-            this.translateChildren(parentElement, element, width, 0);
-            resized = true;
-        }
-
-        return resized;
-    }
-
-    private resizeParentRight(element: any, parentElement: any): boolean {
-        let resized = false;
-
-        const actualLeft = element.getBoundingClientRect().left;
-        const actualRight = actualLeft + element.offsetWidth;
-
-        const actualParentLeft = parentElement.getBoundingClientRect().left;
-
-        if ((actualParentLeft + parentElement.offsetWidth) < actualRight + this.padding) {
-            this.setElementWidth(parentElement, actualRight + this.padding - actualParentLeft);
-            resized = true;
-        }
-
-        return resized;
-    }
-
-    private resizeParentBottom(element: any, parentElement: any): boolean {
-        let resized = false;
-
-        const actualTop = element.getBoundingClientRect().top;
-        const actualBottom = actualTop + element.offsetHeight;
-
-        const actualParentTop = parentElement.getBoundingClientRect().top;
-        const actualParentBottom = actualParentTop + parentElement.offsetHeight;
-
-        if (actualParentBottom < actualBottom + this.padding) {
-            this.setElementHeight(parentElement, actualBottom + this.padding - actualParentTop);
-            resized = true;
-        }
-
-        return resized;
-    }
-
-    private resizeParentTop(element: any, parentElement: any): boolean {
-        let resized = false;
-
-        const actualTop = element.getBoundingClientRect().top;
-        const actualParentTop = parentElement.getBoundingClientRect().top;
-
-        if (actualTop - this.padding < actualParentTop) {
-            const height = actualParentTop - actualTop + this.padding;
-
-            this.translateElement(parentElement, 0, -height, 0, height);
-            this.translateChildren(parentElement, element, 0, height);
-            resized = true;
-        }
-
-        return resized;
-    }
-
-    private translateElement(element, left: number, top: number, width: number, height: number) {
-        const offsetLeft = element.offsetLeft + left;
-        element.style.left = offsetLeft + 'px';
-
-        const offsetTop = element.offsetTop + top;
-        element.style.top = offsetTop + 'px';
-
-        const offsetWidth = element.offsetWidth + width;
-        element.style.width = offsetWidth + 'px';
-
-        const offsetHeight = element.offsetHeight + height;
-        element.style.height = offsetHeight + 'px';
-
-        if (element.classList.contains('node')) {
-            const node = this.modelService.getNodeMap().get(element.id);
-            this.jsplumbInstanceMap.get(node.parentId).revalidate(element.id);
-        }
-    }
-
-    private translateChildren(parentElment, excludeElement, left: number, top: number) {
-        const len = parentElment.children.length;
-        for (let i = 0; i < len; i++) {
-            const childElment = parentElment.children[i];
-            if (childElment.localName === 'b4t-node') {
-                this.translateElement(childElment.children[0], left, top, 0, 0);
-            }
-        }
-    }
-
-    private setElementHeight(element, height: number) {
-        element.style.height = height + 'px';
-    }
-
-    private setElementWidth(element, width: number) {
-        element.style.width = width + 'px';
-    }
-
-    private getActualPosition(element, offset: string) {
-        let actualPosition = element[offset];
-        let current = element.offsetParent;
-        while (current !== null) {
-            actualPosition += element[offset];
-            current = current.offsetParent;
-        }
-        return actualPosition;
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { Injectable } from '@angular/core';
+import * as jsp from 'jsplumb';
+
+import { Subscription } from 'rxjs/Subscription';
+import { WorkflowNode } from '../model/workflow/workflow-node';
+import { BroadcastService } from './broadcast.service';
+import { ModelService } from './model.service';
+import { SequenceFlow } from '../model/workflow/sequence-flow';
+import { Position } from '../model/workflow/position';
+
+/**
+ * JsPlumbService
+ * provides all of the operations about jsplumb plugin.
+ */
+@Injectable()
+export class JsPlumbService {
+    public jsplumbInstanceMap = new Map<string, any>();
+    public subscriptionMap = new Map<string, Subscription>();
+
+    private padding = 20;
+    private rootClass = 'canvas';
+    private selectNodes: WorkflowNode[] = [];
+
+    constructor(private modelService: ModelService, private broadcastService: BroadcastService) {
+        this.broadcastService.selectedElement$.subscribe(elements => {
+            this.selectNodes = [];
+            if (elements && 0 < elements.length) {
+                for (let index = 0; index < elements.length; index++) {
+                    let element = elements[index];
+                    if (this.modelService.isNode(element)) {
+                        let node = element as WorkflowNode;
+                        this.selectNodes.push(node);
+                    }
+                }
+            }
+        });
+
+        this.broadcastService.planModel$.subscribe(Workflow => {
+            this.jsplumbInstanceMap.get(this.modelService.rootNodeId).reset();
+            this.unsubscriptionAll();
+            this.buttonDraggable();
+            this.buttonDroppable();
+        });
+    }
+
+    private unsubscriptionAll() {
+        this.subscriptionMap.forEach(subscription => subscription.unsubscribe());
+    }
+
+    public connectChildrenNodes(parentNodeId: string) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(parentNodeId);
+
+        const nodes: WorkflowNode[] = this.modelService.getChildrenNodes(parentNodeId);
+        nodes.forEach(node => this.connect4OneNode(node, jsplumbInstance));
+    }
+
+    public connect4OneNode(node: WorkflowNode, jsplumbInstance: any) {
+        node.connection.forEach(sequenceFlow => {
+            const connection = jsplumbInstance.connect({
+                source: sequenceFlow.sourceRef,
+                target: sequenceFlow.targetRef,
+            });
+            if (sequenceFlow.name) {
+                connection.setLabel(sequenceFlow.name);
+            }
+        });
+    }
+
+    public initJsPlumbInstance(id: string) {
+        if (this.jsplumbInstanceMap.get(id)) {
+            return;
+        }
+        const jsplumbInstance = jsp.jsPlumb.getInstance();
+
+        jsplumbInstance.importDefaults({
+            Anchor: "Continuous",
+            Endpoint: "Blank",
+            Container: "pallete",
+            ReattachConnections: true,
+            Connector: ['Flowchart', {
+                stub: [0, 0],
+                cornerRadius: 5,
+                alwaysRespectStubs: true
+            }],
+            PaintStyle: {
+                stroke: "#7D8695",
+                strokeWidth: 1,
+                radius: 1,
+                outlineStroke: "transform",
+                outlineWidth: 4
+            },
+            ConnectorStyle: {
+                stroke: "#7D8695",
+                strokeWidth: 1,
+                outlineStroke: "transform",
+                outlineWidth: 4
+            },
+            ConnectorHoverStyle: {
+                stroke: "#00ABFF",
+                strokeWidth: 2,
+                outlineStroke: "transform",
+                outlineWidth: 4
+            },
+            ConnectionOverlays: [
+                ['Arrow', {
+                    location: 1,
+                    id: 'arrow',
+                    cssClass: 'icon-port',
+                    width: 11,
+                    length: 12
+                }],
+                ['Label', { label: '', id: 'label' }]
+            ]
+        });
+
+        // add connection to model data while a new connection is build
+        jsplumbInstance.bind('connection', info => {
+            this.modelService.addConnection(info.connection.sourceId, info.connection.targetId);
+
+            this.subscribe4Connection(info.connection);
+
+            info.connection.bind('click', (connection, event) => {
+                if ('Label' === connection.type) {
+                    return;
+                }
+                event.stopPropagation();
+                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);
+                this.broadcastService.broadcast(this.broadcastService.showProperty, null);
+                this.broadcastService.broadcast(this.broadcastService.selectedElement, [sequenceFlow]);
+            });
+
+            info.connection.bind('dblclick', connection => {
+                if ('Label' === connection.type) {
+                    return;
+                }
+                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);
+                this.broadcastService.broadcast(this.broadcastService.showProperty, sequenceFlow);
+            });
+        });
+
+        this.jsplumbInstanceMap.set(id, jsplumbInstance);
+    }
+
+    private subscribe4Connection(connection: any) {
+        const pre = connection.sourceId + connection.targetId;
+        let sequenceFlowSubscription = this.subscriptionMap.get(pre + 'sequenceFlowSubscription');
+        if (sequenceFlowSubscription && !sequenceFlowSubscription.closed) {
+            sequenceFlowSubscription.unsubscribe();
+        }
+
+        let currentThis = this;
+        sequenceFlowSubscription = this.broadcastService.selectedElement$.subscribe(elements => {
+            let selected = false;
+            if (elements && 0 < elements.length) {
+                for (let index = 0; index < elements.length; index++) {
+                    let element = elements[index];
+                    if (!this.modelService.isNode(element)) {
+                        let sequence = element as SequenceFlow;
+                        if (sequence.sourceRef === connection.sourceId
+                            && sequence.targetRef === connection.targetId) {
+                            selected = true;
+                        }
+                    }
+                }
+            }
+            if (selected) {
+                connection.setPaintStyle({
+                    stroke: '#00ABFF',
+                    strokeWidth: 1,
+                    radius: 1,
+                    outlineStroke: "transform",
+                    outlineWidth: 4
+                });
+            } else {
+                connection.setPaintStyle({
+                    stroke: '#7D8695',
+                    strokeWidth: 1,
+                    radius: 1,
+                    outlineStroke: "transform",
+                    outlineWidth: 4
+                });
+            }
+        });
+        this.subscriptionMap.set(pre + 'sequenceFlowSubscription', sequenceFlowSubscription);
+    }
+
+    private unsubscription4Connection(connectionSelection: any) {
+        connectionSelection.each(connection => {
+            const pre = connection.sourceId + connection.targetId;
+            this.subscriptionMap.get(pre + 'sequenceFlowSubscription').unsubscribe();
+        });
+    }
+
+    public deleteConnect(sourceId: string, targetId: string) {
+        const sourceNode = this.modelService.getNodeMap().get(sourceId);
+        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);
+        const connectionSelection = jsplumbInstance.select({ source: sourceId, target: targetId });
+        this.unsubscription4Connection(connectionSelection);
+        connectionSelection.delete();
+    }
+
+    public setLabel(sourceId: string, targetId: string, label: string) {
+        const sourceNode = this.modelService.getNodeMap().get(sourceId);
+        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);
+        const connections = jsplumbInstance.select({ source: sourceId, target: targetId });
+        connections.setLabel(label);
+    }
+
+    public getParentNodeId(id: string): string {
+        const nodeElement = jsp.jsPlumb.getSelector('#' + id);
+        const parentNode = this.getParentNodeEl(nodeElement[0]);
+
+        return parentNode ? parentNode.id : null;
+    }
+
+    public initNode(node: WorkflowNode) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
+
+        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).draggable(node.id, {
+            scope: 'node',
+            filter: '.ui-resizable-handle',
+            classes: {
+                'ui-draggable': 'dragging'
+            },
+            // grid: [5, 5],
+            drag: event => {
+                // out of container edge, reset to minimal value.
+                if (0 > event.pos[0]) {
+                    event.el.style.left = '0px';
+                }
+                if (0 > event.pos[1]) {
+                    event.el.style.top = '0px';
+                }
+
+                if (0 < this.selectNodes.length) {
+                    let moveAll = false;
+                    this.selectNodes.forEach(element => {
+                        if (element.id === event.el.id) {
+                            moveAll = true;
+                        }
+                    });
+                    if (moveAll) {
+                        this.selectNodes.forEach(selectNode => {
+                            if (selectNode.id !== event.el.id) {
+                                selectNode.position.left += event.e.movementX;
+                                selectNode.position.left = 0 > selectNode.position.left ? 0 : selectNode.position.left;
+                                selectNode.position.top += event.e.movementY;
+                                selectNode.position.top = 0 > selectNode.position.top ? 0 : selectNode.position.top;
+                            }
+                            jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));
+                        });
+                    }
+                }
+            },
+            stop: event => {
+                this.selectNodes.forEach(selectNode => {
+                    jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));
+                });
+            }
+        });
+
+        jsplumbInstance.makeTarget(node.id, {
+            maxConnections: -1,
+            beforeDrop: function (info) {
+                const sourceId = info.sourceId;
+                const targetId = info.targetId;
+                if (sourceId === targetId) {
+                    return false;
+                }
+                const sameConnections = this.instance.getConnections({ source: sourceId, target: targetId });
+                if (sameConnections && 0 < sameConnections.length) {
+                    return false;
+                }
+                return true;
+            }
+
+        });
+
+        jsplumbInstance.makeSource(node.id, {
+            filter: '.anchor, .anchor *',
+            maxConnections: -1,
+        });
+    }
+
+    public nodeDroppable(node: WorkflowNode, rank: number) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
+
+        const selector = jsplumbInstance.getSelector('#' + node.id);
+        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).droppable(selector, {
+            scope: 'node',
+            rank,
+            tolerance: 'pointer',
+            drop: event => {
+                if (!this.isChildNode(event.drop.el, event.drag.el)) {
+                    this.drop(event);
+                }
+                return true;
+            },
+            canDrop: drag => {
+                const nodeMap = this.modelService.getNodeMap();
+                const ancestorNode = nodeMap.get(drag.el.id);
+
+                const isAncestor = this.modelService.isDescendantNode(ancestorNode, node.id);
+                return !isAncestor;
+            },
+        });
+    }
+
+    private isChildNode(childElement, parentElement) {
+        while (childElement !== parentElement) {
+            childElement = childElement.parentNode;
+            if (childElement.classList.contains('canvas')) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    private drop(event) {
+        const dragEl = event.drag.el;
+        const dropEl = event.drop.el;
+
+        this.resizeParent(dragEl, dropEl);
+
+        const nodeLeft = dragEl.getBoundingClientRect().left;
+        const nodeTop = dragEl.getBoundingClientRect().top;
+        const parentLeft = dropEl.getBoundingClientRect().left;
+        const parentTop = dropEl.getBoundingClientRect().top;
+        const left = nodeLeft - parentLeft + dropEl.scrollLeft;
+        const top = nodeTop - parentTop + dropEl.scrollTop;
+        dragEl.style.top = top + 'px';
+        dragEl.style.left = left + 'px';
+
+        // 12 is title height
+        this.modelService.updatePosition(dragEl.id, left, top, dragEl.getBoundingClientRect().width, dragEl.getBoundingClientRect().height - 12);
+
+        const originalParentNode = this.getParentNodeEl(dragEl);
+        const originalParentNodeId = originalParentNode ? originalParentNode.id : this.modelService.rootNodeId;
+
+        const targetParentNodeId = dropEl.classList.contains('node') ? dropEl.id : this.modelService.rootNodeId;
+        this.changeParent(dragEl.id, originalParentNodeId, targetParentNodeId);
+    }
+
+    private changeParent(id: string, originalParentNodeId: string, targetParentNodeId: string) {
+        if (originalParentNodeId !== targetParentNodeId) {
+            this.jsplumbInstanceMap.get(originalParentNodeId).removeAllEndpoints(id);
+            this.modelService.changeParent(id, originalParentNodeId, targetParentNodeId);
+        }
+    }
+
+    private getParentNodeEl(element) {
+        while (!(element.parentNode.classList.contains('node') || element.parentNode.classList.contains('canvas'))) {
+            element = element.parentNode;
+        }
+
+        if (element.parentNode.classList.contains('canvas')) { // top level node
+            return null;
+        } else {
+            return element.parentNode;
+        }
+    }
+
+    public canvasDroppable() {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
+        const canvasSelector = jsplumbInstance.getSelector('.canvas');
+        jsplumbInstance.droppable(canvasSelector, {
+            scope: 'node',
+            rank: 0,
+            grid: [5, 5],
+            drop: event => this.drop(event),
+        });
+    }
+
+    public buttonDraggable() {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
+        const selector = jsplumbInstance.getSelector('.item');
+        jsplumbInstance.draggable(selector, {
+            scope: 'btn',
+            clone: true
+        });
+    }
+
+    public buttonDroppable() {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
+        const selector = jsplumbInstance.getSelector('.canvas');
+        jsplumbInstance.droppable(selector, {
+            scope: 'btn',
+            // grid: [5, 5],
+            drop: event => {
+                const el = jsplumbInstance.getSelector(event.drag.el);
+                const type = el.attributes.nodeType.value;
+                // Mouse position minus drop canvas start position plus scroll position.
+                let left = event.e.x - event.drop.pagePosition[0] + event.drop.el.scrollLeft;
+                let top = event.e.y - event.drop.pagePosition[1] + event.drop.el.scrollTop;
+                if (0 > left) {
+                    left = 0;
+                }
+                if (0 > top) {
+                    top = 0;
+                }
+                const name = event.drag.el.children[1].innerText;
+                this.modelService.addNode(name, type, left, top);
+            },
+        });
+    }
+
+    public remove(node: WorkflowNode) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
+
+        // unsubscription4Connection
+        const connectionsAsSource = jsplumbInstance.select({ source: node.id });
+        this.unsubscription4Connection(connectionsAsSource);
+        const connectionsAsTarget = jsplumbInstance.select({ target: node.id });
+        this.unsubscription4Connection(connectionsAsTarget);
+
+        jsplumbInstance.remove(node.id);
+    }
+
+    public resizeParent(element: any, parentElement: any) {
+        if (parentElement.classList.contains(this.rootClass)) {
+            return;
+        }
+
+        if (!parentElement.classList.contains('node')) {
+            this.resizeParent(element, parentElement.parentNode);
+            return;
+        }
+
+        const leftResized = this.resizeParentLeft(element, parentElement);
+        const rightResized = this.resizeParentRight(element, parentElement);
+        const topResized = this.resizeParentTop(element, parentElement);
+        const bottomResized = this.resizeParentBottom(element, parentElement);
+
+        if (leftResized || rightResized || topResized || bottomResized) {
+            if (parentElement.classList.contains('node')) {
+                const rect = parentElement.getBoundingClientRect();
+                this.modelService.updatePosition(parentElement.id,
+                    parentElement.offsetLeft,
+                    parentElement.offsetTop,
+                    // title height
+                    rect.width, rect.height - 12);
+            }
+            this.resizeParent(parentElement, parentElement.parentNode);
+        }
+    }
+
+    private resizeParentLeft(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualLeft = element.getBoundingClientRect().left;
+        const actualParentLeft = parentElement.getBoundingClientRect().left;
+
+        if (actualLeft - this.padding < actualParentLeft) {
+            const width = actualParentLeft - actualLeft + this.padding;
+
+            this.translateElement(parentElement, -width, 0, width, 0);
+            this.translateChildren(parentElement, element, width, 0);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private resizeParentRight(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualLeft = element.getBoundingClientRect().left;
+        const actualRight = actualLeft + element.offsetWidth;
+
+        const actualParentLeft = parentElement.getBoundingClientRect().left;
+
+        if ((actualParentLeft + parentElement.offsetWidth) < actualRight + this.padding) {
+            this.setElementWidth(parentElement, actualRight + this.padding - actualParentLeft);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private resizeParentBottom(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualTop = element.getBoundingClientRect().top;
+        const actualBottom = actualTop + element.offsetHeight;
+
+        const actualParentTop = parentElement.getBoundingClientRect().top;
+        const actualParentBottom = actualParentTop + parentElement.offsetHeight;
+
+        if (actualParentBottom < actualBottom + this.padding) {
+            this.setElementHeight(parentElement, actualBottom + this.padding - actualParentTop);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private resizeParentTop(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualTop = element.getBoundingClientRect().top;
+        const actualParentTop = parentElement.getBoundingClientRect().top;
+
+        if (actualTop - this.padding < actualParentTop) {
+            const height = actualParentTop - actualTop + this.padding;
+
+            this.translateElement(parentElement, 0, -height, 0, height);
+            this.translateChildren(parentElement, element, 0, height);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private translateElement(element, left: number, top: number, width: number, height: number) {
+        const offsetLeft = element.offsetLeft + left;
+        element.style.left = offsetLeft + 'px';
+
+        const offsetTop = element.offsetTop + top;
+        element.style.top = offsetTop + 'px';
+
+        const offsetWidth = element.offsetWidth + width;
+        element.style.width = offsetWidth + 'px';
+
+        const offsetHeight = element.offsetHeight + height;
+        element.style.height = offsetHeight + 'px';
+
+        if (element.classList.contains('node')) {
+            const node = this.modelService.getNodeMap().get(element.id);
+            this.jsplumbInstanceMap.get(node.parentId).revalidate(element.id);
+        }
+    }
+
+    private translateChildren(parentElment, excludeElement, left: number, top: number) {
+        const len = parentElment.children.length;
+        for (let i = 0; i < len; i++) {
+            const childElment = parentElment.children[i];
+            if (childElment.localName === 'b4t-node') {
+                this.translateElement(childElment.children[0], left, top, 0, 0);
+            }
+        }
+    }
+
+    private setElementHeight(element, height: number) {
+        element.style.height = height + 'px';
+    }
+
+    private setElementWidth(element, width: number) {
+        element.style.width = width + 'px';
+    }
+
+    private getActualPosition(element, offset: string) {
+        let actualPosition = element[offset];
+        let current = element.offsetParent;
+        while (current !== null) {
+            actualPosition += element[offset];
+            current = current.offsetParent;
+        }
+        return actualPosition;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/model.service.ts b/sdc-workflow-designer-ui/src/app/services/model.service.ts
index 81cad031..b0ce69f3 100644
--- a/sdc-workflow-designer-ui/src/app/services/model.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/model.service.ts
@@ -1,513 +1,513 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-import { Injectable } from '@angular/core';
-import { isNullOrUndefined } from 'util';
-
-import { PlanModel } from '../model/plan-model';
-import { PlanTreeviewItem } from '../model/plan-treeview-item';
-import { RestConfig } from '../model/rest-config';
-import { Swagger, SwaggerModel, SwaggerModelSimple, SwaggerPrimitiveObject, SwaggerReferenceObject } from '../model/swagger';
-import { ErrorEvent } from '../model/workflow/error-event';
-import { IntermediateCatchEvent } from '../model/workflow/intermediate-catch-event';
-import { NodeType } from '../model/workflow/node-type.enum';
-import { Parameter } from '../model/workflow/parameter';
-import { Position } from '../model/workflow/position';
-import { RestTask } from '../model/workflow/rest-task';
-import { SequenceFlow } from '../model/workflow/sequence-flow';
-import { StartEvent } from '../model/workflow/start-event';
-import { SubProcess } from '../model/workflow/sub-process';
-import { ToscaNodeTask } from '../model/workflow/tosca-node-task';
-import { WorkflowNode } from '../model/workflow/workflow-node';
-import { NodeTemplate } from '../model/topology/node-template';
-import { ValueSource } from '../model/value-source.enum';
-import { BroadcastService } from './broadcast.service';
-import { RestService } from './rest.service';
-import { SwaggerTreeConverterService } from './swagger-tree-converter.service';
-import { ScriptTask } from "../model/workflow/script-task";
-import { TimerEventDefinition, TimerEventDefinitionType } from "../model/workflow/timer-event-definition";
-
-/**
- * ModelService
- * provides all operations about plan model.
- */
-@Injectable()
-export class ModelService {
-    public rootNodeId = 'root';
-
-    private planModel: PlanModel = new PlanModel();
-
-    constructor(private broadcastService: BroadcastService, private restService: RestService) {
-        this.broadcastService.planModel$.subscribe(plan => {
-            plan.nodes.forEach(node => {
-                switch (node.type) {
-                    case NodeType[NodeType.startEvent]:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                    case NodeType[NodeType.endEvent]:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                    case NodeType[NodeType.restTask]:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                    case NodeType[NodeType.errorStartEvent]:
-                    case NodeType[NodeType.errorEndEvent]:
-                        node.position.width = 26;
-                        node.position.height = 26;
-                        break;
-                    case NodeType[NodeType.toscaNodeManagementTask]:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                    case NodeType[NodeType.subProcess]:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                    case NodeType[NodeType.intermediateCatchEvent]:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                    case NodeType[NodeType.scriptTask]:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                    case NodeType[NodeType.exclusiveGateway]:
-                    case NodeType[NodeType.parallelGateway]:
-                        node.position.width = 26;
-                        node.position.height = 26;
-                        break;
-                    default:
-                        node.position.width = 56;
-                        node.position.height = 56;
-                        break;
-                }
-            });
-            this.planModel = plan;
-        });
-        this.broadcastService.updateModelRestConfig$.subscribe(restConfigs => {
-            this.updateRestConfig(restConfigs);
-        });
-    }
-
-    public getChildrenNodes(parentId: string): WorkflowNode[] {
-        if (!parentId || parentId === this.rootNodeId) {
-            return this.planModel.nodes;
-        } else {
-            const node = this.getNodeMap().get(parentId);
-            if (node.type === 'subProcess') {
-                return (<SubProcess>node).children;
-            } else {
-                return [];
-            }
-        }
-    }
-
-    public getNodes(): WorkflowNode[] {
-        return this.planModel.nodes;
-    }
-
-    public getSequenceFlow(sourceRef: string, targetRef: string): SequenceFlow {
-        const node = this.getNodeMap().get(sourceRef);
-        if (node) {
-            const sequenceFlow = node.connection.find(tmp => tmp.targetRef === targetRef);
-            return sequenceFlow;
-        } else {
-            return null;
-        }
-    }
-
-    public addNode(name: string, type: string, left: number, top: number) {
-        const id = this.createId();
-        const workflowPos = new Position(left, top);
-        const node = this.createNodeByType(id, name, type, workflowPos);
-        this.planModel.nodes.push(node);
-    }
-
-    private createNodeByType(id: string, name: string, type: string, position: Position): WorkflowNode {
-        const bigPosition = new Position(position.left, position.top, 56, 56);
-        const smallPosition = new Position(position.left, position.top, 26, 26);
-        switch (type) {
-            case NodeType[NodeType.startEvent]:
-                let startEventNode: StartEvent = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: [], parameters: []
-                };
-                return startEventNode;
-            case NodeType[NodeType.endEvent]:
-                let endEventNode: WorkflowNode = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: []
-                };
-                return endEventNode;
-            case NodeType[NodeType.restTask]:
-                let restTaskNode: RestTask = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: [], produces: [], consumes: [], parameters: [], responses: []
-                };
-                return restTaskNode;
-            case NodeType[NodeType.errorStartEvent]:
-            case NodeType[NodeType.errorEndEvent]:
-                let errorEventNode: ErrorEvent = {
-                    id: id, type: type, name: '', parentId: this.rootNodeId,
-                    position: smallPosition, connection: [], parameter: new Parameter('errorRef', '', ValueSource[ValueSource.String])
-                };
-                return errorEventNode;
-            case NodeType[NodeType.toscaNodeManagementTask]:
-                let toscaNodeTask: ToscaNodeTask = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: [], input: [], output: [], template: new NodeTemplate()
-                };
-                return toscaNodeTask;
-            case NodeType[NodeType.subProcess]:
-                let subProcess: SubProcess = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: [], children: []
-                };
-                return subProcess;
-            case NodeType[NodeType.intermediateCatchEvent]:
-                let intermediateCatchEvent: IntermediateCatchEvent = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: [], timerEventDefinition: <TimerEventDefinition>{ type: TimerEventDefinitionType[TimerEventDefinitionType.timeDuration] }
-                };
-                return intermediateCatchEvent;
-            case NodeType[NodeType.scriptTask]:
-                let scriptTask: ScriptTask = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: [], scriptFormat: 'JavaScript'
-                };
-                return scriptTask;
-            case NodeType[NodeType.exclusiveGateway]:
-            case NodeType[NodeType.parallelGateway]:
-                let getway: WorkflowNode = {
-                    id: id, type: type, name: '', parentId: this.rootNodeId,
-                    position: smallPosition, connection: []
-                };
-                return getway;
-            default:
-                let node: WorkflowNode = {
-                    id: id, type: type, name: name, parentId: this.rootNodeId,
-                    position: bigPosition, connection: []
-                };
-                return node;
-        }
-    }
-
-    public isNode(object: any): boolean {
-        return undefined !== object.type;
-    }
-
-    // public createNodeByJson(obj: any): WorkflowNode {
-    // let node;
-    // switch (obj.type) {
-    //     case NodeType[NodeType.startEvent]:
-    //         node = new StartEvent(obj.name, obj.id, obj.type, this.rootNodeId, obj.position);
-    //         node.parameters = obj.parameters;
-    //         return node;
-    //     case NodeType[NodeType.restTask]:
-    //         node = new RestTask(obj.name, obj.id, obj.type, this.rootNodeId, obj.position);
-    //         node.
-    //     case NodeType[NodeType.errorStartEvent]:
-    //         return new ErrorEvent(type, id, type, this.rootNodeId, position);
-    //     case NodeType[NodeType.errorEndEvent]:
-    //         return new ErrorEvent(type, id, type, this.rootNodeId, position);
-    //     case NodeType[NodeType.toscaNodeManagementTask]:
-    //         return new ToscaNodeTask(type, id, type, this.rootNodeId, position);
-    //     case NodeType[NodeType.subProcess]:
-    //         return new SubProcess(type, id, type, this.rootNodeId, position);
-    //     case NodeType[NodeType.intermediateCatchEvent]:
-    //         return new IntermediateCatchEvent(type, id, type, this.rootNodeId, position);
-    //     case NodeType[NodeType.scriptTask]:
-    //         return new ScriptTask(type, id, type, this.rootNodeId, position);
-    //     default:
-    //         return new WorkflowNode(type, id, type, this.rootNodeId, position);
-    // }
-    // return node;
-    // }
-
-    public changeParent(id: string, originalParentId: string, targetParentId: string) {
-        if (originalParentId === targetParentId) {
-            return;
-        }
-
-        const node: WorkflowNode = this.deleteNode(originalParentId, id);
-        node.parentId = targetParentId;
-
-        if (targetParentId) {
-            this.addChild(targetParentId, node);
-        } else {
-            this.planModel.nodes.push(node);
-        }
-    }
-
-    public updatePosition(id: string, left: number, top: number, width: number, height: number) {
-        const node = this.getNodeMap().get(id);
-        node.position.left = left;
-        node.position.top = top;
-        node.position.width = width;
-        node.position.height = height;
-    }
-
-    public updateRestConfig(restConfigs: RestConfig[]): void {
-        this.planModel.configs = { restConfigs: restConfigs };
-        // console.log(this.planModel.configs);
-    }
-
-    public getNodeMap(): Map<string, WorkflowNode> {
-        const map = new Map<string, WorkflowNode>();
-        this.toNodeMap(this.planModel.nodes, map);
-        return map;
-    }
-
-    public getAncestors(id: string): WorkflowNode[] {
-        const nodeMap = this.getNodeMap();
-        const ancestors = [];
-
-        let ancestor = nodeMap.get(id);
-        do {
-            ancestor = this.getParentNode(ancestor.id, nodeMap);
-            if (ancestor && ancestor.id !== id) {
-                ancestors.push(ancestor);
-            }
-        } while (ancestor);
-
-        return ancestors;
-    }
-
-    private getParentNode(id: string, nodeMap: Map<string, WorkflowNode>): WorkflowNode {
-        let parentNode;
-        nodeMap.forEach((node, key) => {
-            if (NodeType[NodeType.subProcess] === node.type) {
-                const childNode = (<SubProcess>node).children.find(child => child.id === id);
-                if (childNode) {
-                    parentNode = node;
-                }
-            }
-
-        });
-
-        return parentNode;
-    }
-
-    public isDescendantNode(node: WorkflowNode, descendantId: string): boolean {
-        if (NodeType[NodeType.subProcess] !== node.type) {
-            return false;
-        }
-        const tmp = (<SubProcess>node).children.find(child => {
-            return child.id === descendantId || (NodeType[NodeType.subProcess] === child.type && this.isDescendantNode(<SubProcess>child, descendantId));
-        });
-
-        return tmp !== undefined;
-    }
-
-    private toNodeMap(nodes: WorkflowNode[], map: Map<string, WorkflowNode>) {
-        nodes.forEach(node => {
-            if (node.type === 'subProcess') {
-                this.toNodeMap((<SubProcess>node).children, map);
-            }
-            map.set(node.id, node);
-        });
-    }
-
-    public addConnection(sourceId: string, targetId: string) {
-        const node = this.getNodeMap().get(sourceId);
-        if (node) {
-            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);
-            if (index === -1) {
-                const sequenceFlow: SequenceFlow = { sourceRef: sourceId, targetRef: targetId };
-                node.connection.push(sequenceFlow);
-            }
-        }
-    }
-
-    public deleteConnection(sourceId: string, targetId: string) {
-        const node = this.getNodeMap().get(sourceId);
-        if (node) {
-            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);
-            if (index !== -1) {
-                node.connection.splice(index, 1);
-            }
-        }
-    }
-
-    public deleteNode(parentId: string, nodeId: string): WorkflowNode {
-        const nodeMap = this.getNodeMap();
-
-        const nodes = this.getChildrenNodes(parentId);
-
-        // delete related connections
-        nodes.forEach(node => this.deleteConnection(node.id, nodeId));
-
-        // delete current node
-        const index = nodes.findIndex(node => node.id === nodeId);
-        if (index !== -1) {
-            const node = nodes.splice(index, 1)[0];
-            node.connection = [];
-            return node;
-        }
-
-        return null;
-    }
-
-    public addChild(parentId: string, child: WorkflowNode) {
-        this.getChildrenNodes(parentId).push(child);
-    }
-
-    public deleteChild(node: SubProcess, id: string): WorkflowNode {
-        const index = node.children.findIndex(child => child.id === id);
-        if (index !== -1) {
-            const deletedNode = node.children.splice(index, 1);
-            return deletedNode[0];
-        }
-
-        return null;
-    }
-
-    public getPlanParameters(nodeId: string): PlanTreeviewItem[] {
-        const preNodeList = new Array<WorkflowNode>();
-        this.getPreNodes(nodeId, this.getNodeMap(), preNodeList);
-
-        return this.loadNodeOutputs(preNodeList);
-    }
-
-    private loadNodeOutputs(nodes: WorkflowNode[]): PlanTreeviewItem[] {
-        const params = new Array<PlanTreeviewItem>();
-        nodes.forEach(node => {
-            switch (node.type) {
-                case NodeType[NodeType.startEvent]:
-                    params.push(this.loadOutput4StartEvent(<StartEvent>node));
-                    break;
-                case NodeType[NodeType.toscaNodeManagementTask]:
-                    params.push(this.loadOutput4ToscaNodeTask(<ToscaNodeTask>node));
-                    break;
-                case NodeType[NodeType.restTask]:
-                    params.push(this.loadOutput4RestTask(<RestTask>node));
-                    break;
-                default:
-                    break;
-            }
-        });
-
-        return params;
-    }
-
-    private loadOutput4StartEvent(node: StartEvent): PlanTreeviewItem {
-        const startItem = new PlanTreeviewItem(node.name, `[${node.id}]`, [], false);
-        node.parameters.map(param =>
-            startItem.children.push(new PlanTreeviewItem(param.name, `[${param.name}]`, [])));
-        return startItem;
-    }
-
-    private loadOutput4ToscaNodeTask(node: ToscaNodeTask): PlanTreeviewItem {
-        const item = new PlanTreeviewItem(node.name, `[${node.id}]`, [], false);
-        item.children.push(this.createStatusCodeTreeViewItem(node.id));
-        const responseItem = this.createResponseTreeViewItem(node.id);
-        item.children.push(responseItem);
-
-        node.output.map(param =>
-            responseItem.children.push(new PlanTreeviewItem(param.name, `${responseItem.value}.[${param.name}]`, [])));
-        return item;
-    }
-
-    private loadOutput4RestTask(node: RestTask): PlanTreeviewItem {
-        const item = new PlanTreeviewItem(node.name, `[${node.id}]`, [], false);
-        item.children.push(this.createStatusCodeTreeViewItem(node.id));
-
-        if (node.responses.length !== 0) { // load rest responses
-            const responseItem = this.createResponseTreeViewItem(node.id);
-            item.children.push(responseItem);
-            // todo: should list all available response or only the first one?
-            if (node.responses[0]) {
-                const swagger = this.restService.getSwaggerInfo(node.restConfigId);
-                const SwaggerReferenceObject = node.responses[0].schema as SwaggerReferenceObject;
-                const swaggerDefinition = this.restService.getDefinition(swagger, SwaggerReferenceObject.$ref);
-                this.loadParamsBySwaggerDefinition(responseItem, swagger, swaggerDefinition);
-            }
-        }
-
-        return item;
-    }
-
-    private loadParamsBySwaggerDefinition(parentItem: PlanTreeviewItem, swagger: Swagger, definition: any) {
-        Object.getOwnPropertyNames(definition.properties).map(key => {
-            const property = definition.properties[key];
-            const value = `${parentItem.value}.[${key}]`;
-            const propertyItem = new PlanTreeviewItem(key, value, []);
-            parentItem.children.push(propertyItem);
-
-            // reference to swagger.ts function getSchemaObject()
-            if (property instanceof SwaggerReferenceObject) {
-                // handle reference parameter.
-                const propertyDefinition = this.restService.getDefinition(swagger, property.$ref);
-                this.loadParamsBySwaggerDefinition(propertyItem, swagger, propertyDefinition);
-            } else if (property instanceof SwaggerModelSimple) {
-                // handle object parameter.
-                this.loadParamsBySwaggerDefinition(propertyItem, swagger, property);
-            } else {
-                // skip
-            }
-
-            return propertyItem;
-        });
-    }
-
-    private createStatusCodeTreeViewItem(nodeId: string): PlanTreeviewItem {
-        return new PlanTreeviewItem('statusCode', `[${nodeId}].[statusCode]`, []);
-    }
-
-    private createResponseTreeViewItem(nodeId: string): PlanTreeviewItem {
-        return new PlanTreeviewItem('response', `[${nodeId}].[responseBody]`, []);
-    }
-
-    public getPreNodes(nodeId: string, nodeMap: Map<string, WorkflowNode>, preNodes: WorkflowNode[]) {
-        const preNode4CurrentNode = [];
-        nodeMap.forEach(node => {
-            if (this.isPreNode(node, nodeId)) {
-                const existNode = preNodes.find(tmpNode => tmpNode.id === node.id);
-                if (existNode) {
-                    // current node already exists. this could avoid loop circle.
-                } else {
-                    preNode4CurrentNode.push(node);
-                    preNodes.push(node);
-                }
-            }
-        });
-
-        preNode4CurrentNode.forEach(node => this.getPreNodes(node.id, nodeMap, preNodes));
-    }
-
-    public isPreNode(preNode: WorkflowNode, id: string): boolean {
-        const targetNode = preNode.connection.find(connection => connection.targetRef === id);
-        return targetNode !== undefined;
-    }
-
-    public save() {
-        console.log('****************** save data *********************');
-        console.log(this.planModel);
-
-        this.broadcastService.broadcast(this.broadcastService.saveEvent, this.planModel);
-    }
-
-    private createId() {
-        const nodeMap = this.getNodeMap();
-
-        for (let i = 0; i < nodeMap.size; i++) {
-            const key = 'node' + i;
-            if (!nodeMap.get(key)) {
-                return key;
-            }
-        }
-
-        return 'node' + nodeMap.size;
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+import { Injectable } from '@angular/core';
+import { isNullOrUndefined } from 'util';
+
+import { PlanModel } from '../model/plan-model';
+import { PlanTreeviewItem } from '../model/plan-treeview-item';
+import { RestConfig } from '../model/rest-config';
+import { Swagger, SwaggerModel, SwaggerModelSimple, SwaggerPrimitiveObject, SwaggerReferenceObject } from '../model/swagger';
+import { ErrorEvent } from '../model/workflow/error-event';
+import { IntermediateCatchEvent } from '../model/workflow/intermediate-catch-event';
+import { NodeType } from '../model/workflow/node-type.enum';
+import { Parameter } from '../model/workflow/parameter';
+import { Position } from '../model/workflow/position';
+import { RestTask } from '../model/workflow/rest-task';
+import { SequenceFlow } from '../model/workflow/sequence-flow';
+import { StartEvent } from '../model/workflow/start-event';
+import { SubProcess } from '../model/workflow/sub-process';
+import { ToscaNodeTask } from '../model/workflow/tosca-node-task';
+import { WorkflowNode } from '../model/workflow/workflow-node';
+import { NodeTemplate } from '../model/topology/node-template';
+import { ValueSource } from '../model/value-source.enum';
+import { BroadcastService } from './broadcast.service';
+import { RestService } from './rest.service';
+import { SwaggerTreeConverterService } from './swagger-tree-converter.service';
+import { ScriptTask } from "../model/workflow/script-task";
+import { TimerEventDefinition, TimerEventDefinitionType } from "../model/workflow/timer-event-definition";
+
+/**
+ * ModelService
+ * provides all operations about plan model.
+ */
+@Injectable()
+export class ModelService {
+    public rootNodeId = 'root';
+
+    private planModel: PlanModel = new PlanModel();
+
+    constructor(private broadcastService: BroadcastService, private restService: RestService) {
+        this.broadcastService.planModel$.subscribe(plan => {
+            plan.nodes.forEach(node => {
+                switch (node.type) {
+                    case NodeType[NodeType.startEvent]:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                    case NodeType[NodeType.endEvent]:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                    case NodeType[NodeType.restTask]:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                    case NodeType[NodeType.errorStartEvent]:
+                    case NodeType[NodeType.errorEndEvent]:
+                        node.position.width = 26;
+                        node.position.height = 26;
+                        break;
+                    case NodeType[NodeType.toscaNodeManagementTask]:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                    case NodeType[NodeType.subProcess]:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                    case NodeType[NodeType.intermediateCatchEvent]:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                    case NodeType[NodeType.scriptTask]:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                    case NodeType[NodeType.exclusiveGateway]:
+                    case NodeType[NodeType.parallelGateway]:
+                        node.position.width = 26;
+                        node.position.height = 26;
+                        break;
+                    default:
+                        node.position.width = 56;
+                        node.position.height = 56;
+                        break;
+                }
+            });
+            this.planModel = plan;
+        });
+        this.broadcastService.updateModelRestConfig$.subscribe(restConfigs => {
+            this.updateRestConfig(restConfigs);
+        });
+    }
+
+    public getChildrenNodes(parentId: string): WorkflowNode[] {
+        if (!parentId || parentId === this.rootNodeId) {
+            return this.planModel.nodes;
+        } else {
+            const node = this.getNodeMap().get(parentId);
+            if (node.type === 'subProcess') {
+                return (<SubProcess>node).children;
+            } else {
+                return [];
+            }
+        }
+    }
+
+    public getNodes(): WorkflowNode[] {
+        return this.planModel.nodes;
+    }
+
+    public getSequenceFlow(sourceRef: string, targetRef: string): SequenceFlow {
+        const node = this.getNodeMap().get(sourceRef);
+        if (node) {
+            const sequenceFlow = node.connection.find(tmp => tmp.targetRef === targetRef);
+            return sequenceFlow;
+        } else {
+            return null;
+        }
+    }
+
+    public addNode(name: string, type: string, left: number, top: number) {
+        const id = this.createId();
+        const workflowPos = new Position(left, top);
+        const node = this.createNodeByType(id, name, type, workflowPos);
+        this.planModel.nodes.push(node);
+    }
+
+    private createNodeByType(id: string, name: string, type: string, position: Position): WorkflowNode {
+        const bigPosition = new Position(position.left, position.top, 56, 56);
+        const smallPosition = new Position(position.left, position.top, 26, 26);
+        switch (type) {
+            case NodeType[NodeType.startEvent]:
+                let startEventNode: StartEvent = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: [], parameters: []
+                };
+                return startEventNode;
+            case NodeType[NodeType.endEvent]:
+                let endEventNode: WorkflowNode = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: []
+                };
+                return endEventNode;
+            case NodeType[NodeType.restTask]:
+                let restTaskNode: RestTask = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: [], produces: [], consumes: [], parameters: [], responses: []
+                };
+                return restTaskNode;
+            case NodeType[NodeType.errorStartEvent]:
+            case NodeType[NodeType.errorEndEvent]:
+                let errorEventNode: ErrorEvent = {
+                    id: id, type: type, name: '', parentId: this.rootNodeId,
+                    position: smallPosition, connection: [], parameter: new Parameter('errorRef', '', ValueSource[ValueSource.String])
+                };
+                return errorEventNode;
+            case NodeType[NodeType.toscaNodeManagementTask]:
+                let toscaNodeTask: ToscaNodeTask = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: [], input: [], output: [], template: new NodeTemplate()
+                };
+                return toscaNodeTask;
+            case NodeType[NodeType.subProcess]:
+                let subProcess: SubProcess = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: [], children: []
+                };
+                return subProcess;
+            case NodeType[NodeType.intermediateCatchEvent]:
+                let intermediateCatchEvent: IntermediateCatchEvent = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: [], timerEventDefinition: <TimerEventDefinition>{ type: TimerEventDefinitionType[TimerEventDefinitionType.timeDuration] }
+                };
+                return intermediateCatchEvent;
+            case NodeType[NodeType.scriptTask]:
+                let scriptTask: ScriptTask = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: [], scriptFormat: 'JavaScript'
+                };
+                return scriptTask;
+            case NodeType[NodeType.exclusiveGateway]:
+            case NodeType[NodeType.parallelGateway]:
+                let getway: WorkflowNode = {
+                    id: id, type: type, name: '', parentId: this.rootNodeId,
+                    position: smallPosition, connection: []
+                };
+                return getway;
+            default:
+                let node: WorkflowNode = {
+                    id: id, type: type, name: name, parentId: this.rootNodeId,
+                    position: bigPosition, connection: []
+                };
+                return node;
+        }
+    }
+
+    public isNode(object: any): boolean {
+        return undefined !== object.type;
+    }
+
+    // public createNodeByJson(obj: any): WorkflowNode {
+    // let node;
+    // switch (obj.type) {
+    //     case NodeType[NodeType.startEvent]:
+    //         node = new StartEvent(obj.name, obj.id, obj.type, this.rootNodeId, obj.position);
+    //         node.parameters = obj.parameters;
+    //         return node;
+    //     case NodeType[NodeType.restTask]:
+    //         node = new RestTask(obj.name, obj.id, obj.type, this.rootNodeId, obj.position);
+    //         node.
+    //     case NodeType[NodeType.errorStartEvent]:
+    //         return new ErrorEvent(type, id, type, this.rootNodeId, position);
+    //     case NodeType[NodeType.errorEndEvent]:
+    //         return new ErrorEvent(type, id, type, this.rootNodeId, position);
+    //     case NodeType[NodeType.toscaNodeManagementTask]:
+    //         return new ToscaNodeTask(type, id, type, this.rootNodeId, position);
+    //     case NodeType[NodeType.subProcess]:
+    //         return new SubProcess(type, id, type, this.rootNodeId, position);
+    //     case NodeType[NodeType.intermediateCatchEvent]:
+    //         return new IntermediateCatchEvent(type, id, type, this.rootNodeId, position);
+    //     case NodeType[NodeType.scriptTask]:
+    //         return new ScriptTask(type, id, type, this.rootNodeId, position);
+    //     default:
+    //         return new WorkflowNode(type, id, type, this.rootNodeId, position);
+    // }
+    // return node;
+    // }
+
+    public changeParent(id: string, originalParentId: string, targetParentId: string) {
+        if (originalParentId === targetParentId) {
+            return;
+        }
+
+        const node: WorkflowNode = this.deleteNode(originalParentId, id);
+        node.parentId = targetParentId;
+
+        if (targetParentId) {
+            this.addChild(targetParentId, node);
+        } else {
+            this.planModel.nodes.push(node);
+        }
+    }
+
+    public updatePosition(id: string, left: number, top: number, width: number, height: number) {
+        const node = this.getNodeMap().get(id);
+        node.position.left = left;
+        node.position.top = top;
+        node.position.width = width;
+        node.position.height = height;
+    }
+
+    public updateRestConfig(restConfigs: RestConfig[]): void {
+        this.planModel.configs = { restConfigs: restConfigs };
+        // console.log(this.planModel.configs);
+    }
+
+    public getNodeMap(): Map<string, WorkflowNode> {
+        const map = new Map<string, WorkflowNode>();
+        this.toNodeMap(this.planModel.nodes, map);
+        return map;
+    }
+
+    public getAncestors(id: string): WorkflowNode[] {
+        const nodeMap = this.getNodeMap();
+        const ancestors = [];
+
+        let ancestor = nodeMap.get(id);
+        do {
+            ancestor = this.getParentNode(ancestor.id, nodeMap);
+            if (ancestor && ancestor.id !== id) {
+                ancestors.push(ancestor);
+            }
+        } while (ancestor);
+
+        return ancestors;
+    }
+
+    private getParentNode(id: string, nodeMap: Map<string, WorkflowNode>): WorkflowNode {
+        let parentNode;
+        nodeMap.forEach((node, key) => {
+            if (NodeType[NodeType.subProcess] === node.type) {
+                const childNode = (<SubProcess>node).children.find(child => child.id === id);
+                if (childNode) {
+                    parentNode = node;
+                }
+            }
+
+        });
+
+        return parentNode;
+    }
+
+    public isDescendantNode(node: WorkflowNode, descendantId: string): boolean {
+        if (NodeType[NodeType.subProcess] !== node.type) {
+            return false;
+        }
+        const tmp = (<SubProcess>node).children.find(child => {
+            return child.id === descendantId || (NodeType[NodeType.subProcess] === child.type && this.isDescendantNode(<SubProcess>child, descendantId));
+        });
+
+        return tmp !== undefined;
+    }
+
+    private toNodeMap(nodes: WorkflowNode[], map: Map<string, WorkflowNode>) {
+        nodes.forEach(node => {
+            if (node.type === 'subProcess') {
+                this.toNodeMap((<SubProcess>node).children, map);
+            }
+            map.set(node.id, node);
+        });
+    }
+
+    public addConnection(sourceId: string, targetId: string) {
+        const node = this.getNodeMap().get(sourceId);
+        if (node) {
+            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);
+            if (index === -1) {
+                const sequenceFlow: SequenceFlow = { sourceRef: sourceId, targetRef: targetId };
+                node.connection.push(sequenceFlow);
+            }
+        }
+    }
+
+    public deleteConnection(sourceId: string, targetId: string) {
+        const node = this.getNodeMap().get(sourceId);
+        if (node) {
+            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);
+            if (index !== -1) {
+                node.connection.splice(index, 1);
+            }
+        }
+    }
+
+    public deleteNode(parentId: string, nodeId: string): WorkflowNode {
+        const nodeMap = this.getNodeMap();
+
+        const nodes = this.getChildrenNodes(parentId);
+
+        // delete related connections
+        nodes.forEach(node => this.deleteConnection(node.id, nodeId));
+
+        // delete current node
+        const index = nodes.findIndex(node => node.id === nodeId);
+        if (index !== -1) {
+            const node = nodes.splice(index, 1)[0];
+            node.connection = [];
+            return node;
+        }
+
+        return null;
+    }
+
+    public addChild(parentId: string, child: WorkflowNode) {
+        this.getChildrenNodes(parentId).push(child);
+    }
+
+    public deleteChild(node: SubProcess, id: string): WorkflowNode {
+        const index = node.children.findIndex(child => child.id === id);
+        if (index !== -1) {
+            const deletedNode = node.children.splice(index, 1);
+            return deletedNode[0];
+        }
+
+        return null;
+    }
+
+    public getPlanParameters(nodeId: string): PlanTreeviewItem[] {
+        const preNodeList = new Array<WorkflowNode>();
+        this.getPreNodes(nodeId, this.getNodeMap(), preNodeList);
+
+        return this.loadNodeOutputs(preNodeList);
+    }
+
+    private loadNodeOutputs(nodes: WorkflowNode[]): PlanTreeviewItem[] {
+        const params = new Array<PlanTreeviewItem>();
+        nodes.forEach(node => {
+            switch (node.type) {
+                case NodeType[NodeType.startEvent]:
+                    params.push(this.loadOutput4StartEvent(<StartEvent>node));
+                    break;
+                case NodeType[NodeType.toscaNodeManagementTask]:
+                    params.push(this.loadOutput4ToscaNodeTask(<ToscaNodeTask>node));
+                    break;
+                case NodeType[NodeType.restTask]:
+                    params.push(this.loadOutput4RestTask(<RestTask>node));
+                    break;
+                default:
+                    break;
+            }
+        });
+
+        return params;
+    }
+
+    private loadOutput4StartEvent(node: StartEvent): PlanTreeviewItem {
+        const startItem = new PlanTreeviewItem(node.name, `[${node.id}]`, [], false);
+        node.parameters.map(param =>
+            startItem.children.push(new PlanTreeviewItem(param.name, `[${param.name}]`, [])));
+        return startItem;
+    }
+
+    private loadOutput4ToscaNodeTask(node: ToscaNodeTask): PlanTreeviewItem {
+        const item = new PlanTreeviewItem(node.name, `[${node.id}]`, [], false);
+        item.children.push(this.createStatusCodeTreeViewItem(node.id));
+        const responseItem = this.createResponseTreeViewItem(node.id);
+        item.children.push(responseItem);
+
+        node.output.map(param =>
+            responseItem.children.push(new PlanTreeviewItem(param.name, `${responseItem.value}.[${param.name}]`, [])));
+        return item;
+    }
+
+    private loadOutput4RestTask(node: RestTask): PlanTreeviewItem {
+        const item = new PlanTreeviewItem(node.name, `[${node.id}]`, [], false);
+        item.children.push(this.createStatusCodeTreeViewItem(node.id));
+
+        if (node.responses.length !== 0) { // load rest responses
+            const responseItem = this.createResponseTreeViewItem(node.id);
+            item.children.push(responseItem);
+            // todo: should list all available response or only the first one?
+            if (node.responses[0]) {
+                const swagger = this.restService.getSwaggerInfo(node.restConfigId);
+                const SwaggerReferenceObject = node.responses[0].schema as SwaggerReferenceObject;
+                const swaggerDefinition = this.restService.getDefinition(swagger, SwaggerReferenceObject.$ref);
+                this.loadParamsBySwaggerDefinition(responseItem, swagger, swaggerDefinition);
+            }
+        }
+
+        return item;
+    }
+
+    private loadParamsBySwaggerDefinition(parentItem: PlanTreeviewItem, swagger: Swagger, definition: any) {
+        Object.getOwnPropertyNames(definition.properties).map(key => {
+            const property = definition.properties[key];
+            const value = `${parentItem.value}.[${key}]`;
+            const propertyItem = new PlanTreeviewItem(key, value, []);
+            parentItem.children.push(propertyItem);
+
+            // reference to swagger.ts function getSchemaObject()
+            if (property instanceof SwaggerReferenceObject) {
+                // handle reference parameter.
+                const propertyDefinition = this.restService.getDefinition(swagger, property.$ref);
+                this.loadParamsBySwaggerDefinition(propertyItem, swagger, propertyDefinition);
+            } else if (property instanceof SwaggerModelSimple) {
+                // handle object parameter.
+                this.loadParamsBySwaggerDefinition(propertyItem, swagger, property);
+            } else {
+                // skip
+            }
+
+            return propertyItem;
+        });
+    }
+
+    private createStatusCodeTreeViewItem(nodeId: string): PlanTreeviewItem {
+        return new PlanTreeviewItem('statusCode', `[${nodeId}].[statusCode]`, []);
+    }
+
+    private createResponseTreeViewItem(nodeId: string): PlanTreeviewItem {
+        return new PlanTreeviewItem('response', `[${nodeId}].[responseBody]`, []);
+    }
+
+    public getPreNodes(nodeId: string, nodeMap: Map<string, WorkflowNode>, preNodes: WorkflowNode[]) {
+        const preNode4CurrentNode = [];
+        nodeMap.forEach(node => {
+            if (this.isPreNode(node, nodeId)) {
+                const existNode = preNodes.find(tmpNode => tmpNode.id === node.id);
+                if (existNode) {
+                    // current node already exists. this could avoid loop circle.
+                } else {
+                    preNode4CurrentNode.push(node);
+                    preNodes.push(node);
+                }
+            }
+        });
+
+        preNode4CurrentNode.forEach(node => this.getPreNodes(node.id, nodeMap, preNodes));
+    }
+
+    public isPreNode(preNode: WorkflowNode, id: string): boolean {
+        const targetNode = preNode.connection.find(connection => connection.targetRef === id);
+        return targetNode !== undefined;
+    }
+
+    public save() {
+        console.log('****************** save data *********************');
+        console.log(this.planModel);
+
+        this.broadcastService.broadcast(this.broadcastService.saveEvent, this.planModel);
+    }
+
+    private createId() {
+        const nodeMap = this.getNodeMap();
+
+        for (let i = 0; i < nodeMap.size; i++) {
+            const key = 'node' + i;
+            if (!nodeMap.get(key)) {
+                return key;
+            }
+        }
+
+        return 'node' + nodeMap.size;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/rest.service.ts b/sdc-workflow-designer-ui/src/app/services/rest.service.ts
index 52bddfe3..1db51471 100644
--- a/sdc-workflow-designer-ui/src/app/services/rest.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/rest.service.ts
@@ -27,32 +27,48 @@ import { NoticeService } from './notice.service';
 export class RestService {
 
     private restConfigs: RestConfig[] = [];
-    private runtimeURL = '/openoapi/catalog/v1/sys/config';
-    private msbPublishServiceURL = '/api/msdiscover/v1/publishservicelist';
+    // private runtimeURL = '/openoapi/catalog/v1/sys/config';
+    private runtimeURL = '/api/tenant';
+    // private msbPublishServiceURL = '/api/msdiscover/v1/publishservicelist';
+    private msbPublishServiceURL = '/api/mockarray';
 
     constructor(private broadcastService: BroadcastService, private http: Http, private noticeService: NoticeService) {
         this.broadcastService.planModel$.subscribe(planModel => {
             planModel.configs.restConfigs.forEach(element => {
-                this.restConfigs.push(element);
+                this.addRestConfig(element);
             });
         });
-        // this.initSwaggerInfoByMSB();
+        this.initSwaggerInfoByMSB();
     }
 
-    public addRestConfig(): RestConfig {
-        let index = 0;
-        this.restConfigs.forEach(config => {
-            const currentId = parseInt(config.id);
-            if (currentId > index) {
-                index = currentId;
-            }
+    public addRestConfig(config: RestConfig) {
+        const idSet = new Set<string>();
+        this.restConfigs.forEach(rc => {
+            idSet.add(rc.id);
         });
 
-        index += 1;
+        if(idSet.has(config.id)) {
+            return false;
+        } else {
+            this.restConfigs.push(config);
+            return true;
+        }
+    }
 
-        const restConfig = new RestConfig(index.toString(), 'new Config', '', '', '');
-        this.restConfigs.push(restConfig);
+    public newRestConfig(): RestConfig {
+        const idSet = new Set<string>();
+        this.restConfigs.forEach(rc => {
+            idSet.add(rc.id);
+        });
 
+        let index = 0;
+        for(; index <= idSet.size; index++) {
+            if(!idSet.has(index + '')) {
+                break;
+            }
+        }
+
+        const restConfig = new RestConfig(index.toString(), 'new Config', '', '', '');
         return restConfig;
     }
 
@@ -125,7 +141,7 @@ export class RestService {
                         // this service don't have sawgger file.
                         if ('/activiti-rest' !== serviceInfo.publish_url) {
                             const id = serviceInfo.serviceName + '.' + serviceInfo.version;
-                            restConfigs.push(new RestConfig(id, serviceInfo.serviceName, serviceInfo.version, serviceInfo.publish_url, ''));
+                            this.addRestConfig(new RestConfig(id, serviceInfo.serviceName, serviceInfo.version, serviceInfo.publish_url, ''));
                             let swaggerUrl = '';
                             if (undefined !== serviceInfo.swagger_url && '' !== serviceInfo.swagger_url) {
                                 swaggerUrl = serviceInfo.publish_url + '/' + serviceInfo.swagger_url;
diff --git a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts
index 448edc62..a09906ac 100644
--- a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts
+++ b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts
@@ -11,18 +11,22 @@
  */
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
-import { RadioButtonModule, SplitButtonModule, TreeModule } from 'primeng/primeng';
 import { RouterModule } from '@angular/router';
+import { RadioButtonModule } from 'primeng/primeng';
+import { TreeModule } from 'primeng/primeng';
+import { SplitButtonModule } from 'primeng/primeng';
 
 const module = [
     CommonModule,
     FormsModule,
-    RadioButtonModule,
+    ReactiveFormsModule,
+    // HttpModule,
     RouterModule,
+    RadioButtonModule,
     SplitButtonModule,
-    TreeModule,
+    TreeModule
 ];
 
 @NgModule({
diff --git a/sdc-workflow-designer-ui/src/app/util/workflow-util.ts b/sdc-workflow-designer-ui/src/app/util/workflow-util.ts
index 504e0903..fae54b48 100644
--- a/sdc-workflow-designer-ui/src/app/util/workflow-util.ts
+++ b/sdc-workflow-designer-ui/src/app/util/workflow-util.ts
@@ -1,30 +1,30 @@
-/**
- * Copyright (c) 2017 ZTE Corporation.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * and the Apache License 2.0 which both accompany this distribution,
- * and are available at http://www.eclipse.org/legal/epl-v10.html
- * and http://www.apache.org/licenses/LICENSE-2.0
- *
- * Contributors:
- *     ZTE - initial API and implementation and/or initial documentation
- */
-export class WorkflowUtil {
-    public static deepClone(source: any) {
-        if (source === null || typeof source !== 'object') {
-            return source;
-        } else {
-            if (source instanceof Array) {
-                const target = [];
-                source.forEach(item => target.push(WorkflowUtil.deepClone(item)));
-                return target;
-            } else {
-                const target = {};
-                for (const key in source) {
-                    target[key] = WorkflowUtil.deepClone(source[key]);
-                }
-                return target;
-            }
-        }
-    }
-}
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ *     ZTE - initial API and implementation and/or initial documentation
+ */
+export class WorkflowUtil {
+    public static deepClone(source: any) {
+        if (source === null || typeof source !== 'object') {
+            return source;
+        } else {
+            if (source instanceof Array) {
+                const target = [];
+                source.forEach(item => target.push(WorkflowUtil.deepClone(item)));
+                return target;
+            } else {
+                const target = {};
+                for (const key in source) {
+                    target[key] = WorkflowUtil.deepClone(source[key]);
+                }
+                return target;
+            }
+        }
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/assets/i18n/en.json b/sdc-workflow-designer-ui/src/assets/i18n/en.json
index bbd827b1..400bf320 100644
--- a/sdc-workflow-designer-ui/src/assets/i18n/en.json
+++ b/sdc-workflow-designer-ui/src/assets/i18n/en.json
@@ -1,46 +1,46 @@
-{
-    "WORKFLOW": {
-        "BPMN_EVENT": "Event",
-        "BPMN_TASK": "Task",
-        "BPMN_GETWAY": "Getway",
-        "BPMN_STRUCTURAL": "Structural",
-        "SETTING": "Setting",
-        "SAVE": "Save",
-        "TEST": "Test",
-        "BACK": "Back",
-        "START_EVENT": "Start",
-        "END_EVENT": "End",
-        "ERROR_START_EVENT": "Error Start",
-        "ERROR_END_EVENT": "Error End",
-        "TOSCA_TASK": "TOSCA",
-        "REST_TASK": "REST",
-        "SCRIPT_TASK": "SCRIPT",
-        "TIMER_EVENT": "Timer",
-        "EXCLUSIVE_GATEWAY": "Exclusive",
-        "PARALLEL_GATEWAY": "Parallel",
-        "SUB_PROCESS": "SubProcess",
-        "NODE_NAME": "Name",
-        "NODE_TYPE": "Type",
-        "TOSCA_NODE": "Node",
-        "TOSCA_INTERFACE": "Interface",
-        "TOSCA_OPERATION": "Operation",
-        "REST_SERVICE": "Service",
-        "REST_PATH": "Path",
-        "REST_METHOD": "Method",
-        "TIMER_TYPE": "Type",
-        "TIMER_DURATION": "Duration",
-        "TIMER_DATE": "Date",
-        "TIMER_CYCLE": "Cycle",
-        "CONNECTION_NAME": "Name",
-        "CONNECTION_SOURCE": "Source",
-        "CONNECTION_TARGET": "Target",
-        "CONNECTION_CONDITION": "Condition",
-        "SCRIPT_FORMAT":"Script Format",
-        "SCRIPT":"Script",
-
-        "MSG": {
-            "SWAGGER_NOT_EXISTS": "Swagger did not exist, please check the 'swagger.json' or service status.",
-            "SAVE_SUCCESS": "Save successful."
-        }
-    }
-}
+{
+    "WORKFLOW": {
+        "BPMN_EVENT": "Event",
+        "BPMN_TASK": "Task",
+        "BPMN_GETWAY": "Getway",
+        "BPMN_STRUCTURAL": "Structural",
+        "SETTING": "Setting",
+        "SAVE": "Save",
+        "TEST": "Test",
+        "BACK": "Back",
+        "START_EVENT": "Start",
+        "END_EVENT": "End",
+        "ERROR_START_EVENT": "Error Start",
+        "ERROR_END_EVENT": "Error End",
+        "TOSCA_TASK": "TOSCA",
+        "REST_TASK": "REST",
+        "SCRIPT_TASK": "SCRIPT",
+        "TIMER_EVENT": "Timer",
+        "EXCLUSIVE_GATEWAY": "Exclusive",
+        "PARALLEL_GATEWAY": "Parallel",
+        "SUB_PROCESS": "SubProcess",
+        "NODE_NAME": "Name",
+        "NODE_TYPE": "Type",
+        "TOSCA_NODE": "Node",
+        "TOSCA_INTERFACE": "Interface",
+        "TOSCA_OPERATION": "Operation",
+        "REST_SERVICE": "Service",
+        "REST_PATH": "Path",
+        "REST_METHOD": "Method",
+        "TIMER_TYPE": "Type",
+        "TIMER_DURATION": "Duration",
+        "TIMER_DATE": "Date",
+        "TIMER_CYCLE": "Cycle",
+        "CONNECTION_NAME": "Name",
+        "CONNECTION_SOURCE": "Source",
+        "CONNECTION_TARGET": "Target",
+        "CONNECTION_CONDITION": "Condition",
+        "SCRIPT_FORMAT":"Script Format",
+        "SCRIPT":"Script",
+
+        "MSG": {
+            "SWAGGER_NOT_EXISTS": "Swagger did not exist, please check the 'swagger.json' or service status.",
+            "SAVE_SUCCESS": "Save successful."
+        }
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json b/sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json
index cee61f99..1e04f583 100644
--- a/sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json
+++ b/sdc-workflow-designer-ui/src/assets/i18n/zh-CN.json
@@ -1,46 +1,46 @@
-{
-    "WORKFLOW": {
-        "BPMN_EVENT": "事件",
-        "BPMN_TASK": "任务",
-        "BPMN_GETWAY": "网关",
-        "BPMN_STRUCTURAL": "结构",
-        "SETTING": "设置",
-        "SAVE": "保存",
-        "TEST": "测试",
-        "BACK": "返回",
-        "START_EVENT": "开始",
-        "END_EVENT": "结束",
-        "ERROR_START_EVENT": "异常开始",
-        "ERROR_END_EVENT": "异常结束",
-        "TOSCA_TASK": "TOSCA",
-        "REST_TASK": "REST",
-        "SCRIPT_TASK": "脚本",
-        "TIMER_EVENT": "定时器",
-        "EXCLUSIVE_GATEWAY": "唯一条件",
-        "PARALLEL_GATEWAY": "并行条件",
-        "SUB_PROCESS": "子流程",
-        "NODE_NAME": "名称",
-        "NODE_TYPE": "类型",
-        "TOSCA_NODE": "节点",
-        "TOSCA_INTERFACE": "接口",
-        "TOSCA_OPERATION": "方法",
-        "REST_SERVICE": "服务",
-        "REST_PATH": "路径",
-        "REST_METHOD": "方法",
-        "TIMER_TYPE": "类型",
-        "TIMER_DURATION": "间隔",
-        "TIMER_DATE": "固定日期",
-        "TIMER_CYCLE": "循环日期",
-        "CONNECTION_NAME": "名称",
-        "CONNECTION_SOURCE": "源",
-        "CONNECTION_TARGET": "目标",
-        "CONNECTION_CONDITION": "条件",
-        "SCRIPT_FORMAT":"脚本类型",
-        "SCRIPT":"脚本",
-
-        "MSG": {
-            "SWAGGER_NOT_EXISTS": "Swagger信息不存在请检查'swagger.json'或服务状态。",
-            "SAVE_SUCCESS": "保存成功"
-        }
-    }
-}
+{
+    "WORKFLOW": {
+        "BPMN_EVENT": "事件",
+        "BPMN_TASK": "任务",
+        "BPMN_GETWAY": "网关",
+        "BPMN_STRUCTURAL": "结构",
+        "SETTING": "设置",
+        "SAVE": "保存",
+        "TEST": "测试",
+        "BACK": "返回",
+        "START_EVENT": "开始",
+        "END_EVENT": "结束",
+        "ERROR_START_EVENT": "异常开始",
+        "ERROR_END_EVENT": "异常结束",
+        "TOSCA_TASK": "TOSCA",
+        "REST_TASK": "REST",
+        "SCRIPT_TASK": "脚本",
+        "TIMER_EVENT": "定时器",
+        "EXCLUSIVE_GATEWAY": "唯一条件",
+        "PARALLEL_GATEWAY": "并行条件",
+        "SUB_PROCESS": "子流程",
+        "NODE_NAME": "名称",
+        "NODE_TYPE": "类型",
+        "TOSCA_NODE": "节点",
+        "TOSCA_INTERFACE": "接口",
+        "TOSCA_OPERATION": "方法",
+        "REST_SERVICE": "服务",
+        "REST_PATH": "路径",
+        "REST_METHOD": "方法",
+        "TIMER_TYPE": "类型",
+        "TIMER_DURATION": "间隔",
+        "TIMER_DATE": "固定日期",
+        "TIMER_CYCLE": "循环日期",
+        "CONNECTION_NAME": "名称",
+        "CONNECTION_SOURCE": "源",
+        "CONNECTION_TARGET": "目标",
+        "CONNECTION_CONDITION": "条件",
+        "SCRIPT_FORMAT":"脚本类型",
+        "SCRIPT":"脚本",
+
+        "MSG": {
+            "SWAGGER_NOT_EXISTS": "Swagger信息不存在请检查'swagger.json'或服务状态。",
+            "SAVE_SUCCESS": "保存成功"
+        }
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/styles.css b/sdc-workflow-designer-ui/src/styles.css
index 174f7b49..63e18c3d 100644
--- a/sdc-workflow-designer-ui/src/styles.css
+++ b/sdc-workflow-designer-ui/src/styles.css
@@ -95,22 +95,22 @@ body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon{
     width: 160px;
 }
 
-/*IE����������*/
+/*IE滚动条设置*/
 body{
-    /*���Ǽ�ͷ����ɫ*/
+    /*三角箭头的颜色*/
     scrollbar-arrow-color: #00abff;
-    /*���������鰴ť����ɫ*/
+    /*滚动条滑块按钮的颜色*/
     scrollbar-face-color: #00abff;
-    /*������������ɫ*/
+    /*滚动条整体颜色*/
     scrollbar-highlight-color: transparent;
-    /*��������Ӱ*/
+    /*滚动条阴影*/
     scrollbar-shadow-color: #000;
-    /*�����������ɫ*/
+    /*滚动条轨道颜色*/
     scrollbar-track-color: transparent;
 }
 
-/*Chrome����������*/
-/*���������岿��,����Ҫ����*/
+/*Chrome滚动条设置*/
+/*滚动条整体部分,必须要设置*/
 ::-webkit-scrollbar
 {
 	width: 4px;
@@ -119,20 +119,20 @@ body{
 	margin-right: 2px;
 }
 
-/*���������*/
+/*滚动条的轨道*/
 ::-webkit-scrollbar-track
 {
 	border-radius: 2px;
 	background-color: transparent;
 }
 
-/*�������Ļ��鰴ť*/
+/*滚动条的滑块按钮*/
 ::-webkit-scrollbar-thumb{
     border-radius: 2px;
     background-color: #00abff;
 }
 
-/*���������������˵İ�ť*/
+/*滚动条的上下两端的按钮*/
 ::-webkit-scrollbar-button{
     width: 0;
     height: 0;
-- 
cgit 1.2.3-korg