From: Lvbo163 <lv.bo163@zte.com.cn>
Date: Thu, 31 Aug 2017 06:29:07 +0000 (+0800)
Subject: support set parameter for workflow
X-Git-Tag: v1.0.0~63
X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=626d74e4c51aa47da5d5d643b5b7a04188b5552a;p=sdc%2Fsdc-workflow-designer.git

support set parameter for workflow

support set input and output params for start event

Issue-ID: SDC-120

Change-Id: Ib5a87692e06817b2676b3f2f2223e1ced117b5c9
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
---

diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index 931e7354..99334596 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -13,8 +13,8 @@
 import { Component, AfterViewInit, OnInit } from '@angular/core';
 import { JsPlumbService } from "./services/jsplumb.service";
 import { WorkflowService } from "./services/workflow.service";
-import { WorkflowNode } from "./model/workflow-node";
-import { Workflow } from "./model/workflow";
+import { WorkflowNode } from "./model/workflow/workflow-node";
+import { Workflow } from "./model/workflow/workflow";
 import { DataAccessService } from "./services/data-access/data-access.service";
 import { ActivatedRoute } from "@angular/router";
 
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index 4b6a3a96..5b054262 100644
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -28,13 +28,17 @@ import { RouterModule } from "@angular/router";
 import { BroadcastService } from "./services/broadcast.service";
 import { PropertiesComponent } from "./components/property/properties.component";
 import { CanvasComponent } from "./components/canvas/canvas.component";
+import { StartEventParametersComponent } from "./components/property/start-event-parameters/start-event-parameters.component";
+import { ParameterComponent } from "./components/parameter/parameter.component";
 
 @NgModule({
     declarations: [
         AppComponent,
         CanvasComponent,
         NodeComponent,
+        ParameterComponent,
         PropertiesComponent,
+        StartEventParametersComponent,
         ToolbarComponent,
     ],
     imports: [
diff --git a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
index e1a40297..ee002963 100644
--- a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts
@@ -17,7 +17,7 @@ import { JsPlumbService } from '../../services/jsplumb.service';
 import { ActivatedRoute } from "@angular/router";
 import { DataAccessService } from "../../services/data-access/data-access.service";
 import { WorkflowService } from "../../services/workflow.service";
-import { Workflow } from "../../model/workflow";
+import { Workflow } from "../../model/workflow/workflow";
 
 /**
  * main canvas, it contains two parts: canvas and node property component
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 24e657ca..08b7322d 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,10 +1,31 @@
+/**
+ * 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 {
-     position:absolute;
-     width: 100px;
-     height: 50px;
-     border: 2px solid black;
- }
+    border: 1px solid transparent;
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    z-index: 2;
+}
 
+.node:hover {
+    border: 1px solid #123456;
+    box-shadow: 2px 2px 19px #444;
+    -o-box-shadow: 2px 2px 19px #444;
+    -webkit-box-shadow: 2px 2px 19px #444;
+    -moz-box-shadow: 2px 2px 19px #fff;
+    opacity: 0.9;
+}
 
 /**
  * Anchors
@@ -53,7 +74,7 @@
     left: 40%;
 }
 
-/*右箭头*/
+/*right-arrow*/
 .right {
     width: 10px;
     height: 10px;
@@ -86,7 +107,7 @@
     left: -2px;
 }
 
-/*左箭头*/
+/*left-arrow*/
 .left {
     width: 10px;
     height: 10px;
@@ -103,7 +124,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 5; /*兼容ie8-*/
+    z-index: 5;
     border-top: 5px transparent dashed;
     border-left: 5px transparent dashed;
     border-bottom: 5px transparent dashed;
@@ -119,7 +140,7 @@
     left: 2px;
 }
 
-/*上箭头*/
+/*top-arrow*/
 .top {
     width: 9px;
     height: 9px;
@@ -152,7 +173,7 @@
     border-bottom: 4px white solid;
 }
 
-/*下箭头*/
+/*bottom-arrow*/
 .bottom {
     width: 9px;
     height: 9px;
@@ -185,3 +206,32 @@
 .bottom-arrow2 {
     border-top: 4px white solid;
 }
+
+
+.node .startEvent {
+    border-radius: 30px;
+    background-size: cover;
+    border: 1px solid rgb(0, 0, 0);
+    height: 30px;
+    width: 30px;
+}
+
+.node .endEvent {
+    border-radius: 30px;
+    background-size: cover;
+    border: 2px solid rgb(0, 0, 0);
+    height: 30px;
+    width: 30px;
+}
+
+.node .name {
+    padding: 10px 15px;
+}
+
+.node:hover {
+    border: 1px dotted #000;
+}
+
+.node.focus {
+    border: 1px dotted red;
+}
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 f875718d..090f324d 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
@@ -11,30 +11,34 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 -->
-<div class="node" id="{{node.id}}" (dblclick)="showProperties()" [style.top]="node.top + 'px'" [style.left]="node.left + 'px'">
-    <div>{{node.name}}</div>
-    <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 class="anchor anchors anchor-top">
-        <span class="top">
-            <i class="top-arrow1"></i>
-            <i class="top-arrow2"></i>
-        </span>
-    </div>
-    <div class="anchor anchors anchor-bottom">
-        <span class="bottom">
-            <i class="bottom-arrow1"></i>
-            <i class="bottom-arrow2"></i>
-        </span>
-    </div>
+
+<div (dblclick)="showProperties()" class="node" id="{{node.id}}" [style.top]="node.position.top + 'px'"
+[style.left]="node.position.left + 'px'">
+<div [class]="node.type">
+
+</div>
+<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 class="anchor anchors anchor-top">
+   <span class="top">
+       <i class="top-arrow1"></i>
+       <i class="top-arrow2"></i>
+   </span>
+</div>
+<div class="anchor anchors anchor-bottom">
+   <span class="bottom">
+       <i class="bottom-arrow1"></i>
+       <i class="bottom-arrow2"></i>
+   </span>
+</div>
 </div>
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 24b784fe..676ba998 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
@@ -14,7 +14,7 @@ import { Component, AfterViewInit, Input } from '@angular/core';
 
 import { JsPlumbService } from '../../services/jsplumb.service';
 import { BroadcastService } from "../../services/broadcast.service";
-import { WorkflowNode } from "../../model/workflow-node";
+import { WorkflowNode } from "../../model/workflow/workflow-node";
 
 /**
  * workflow node component
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
new file mode 100644
index 00000000..da7dfb1d
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
@@ -0,0 +1,32 @@
+<!--
+/**
+ * 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 *ngIf="showLabel" class="col-md-3 text-md-right">
+        <input *ngIf="canEditName" class="form-control" type="text" [(ngModel)]="param.name">
+        <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label>
+    </div>
+    <div [ngClass]="valueGroupClass">
+        <div [ngSwitch]="param.valueSource">
+            <input *ngSwitchCase="sourceEnum[sourceEnum.String]" [ngClass]="valueClass" class="form-control"
+                type="text" [ngModel]="param.value" (ngModelChange)="modelChange($event)">
+            <!-- TODO add plan and Top parameters -->
+        </div>
+    </div>
+    <div *ngIf="canDelete" class="col-md-2">
+        <button type="button" class="btn oes-red-bg pull-right" (click)="deleteParam()">
+            <i class="fa fa-minus"></i>
+        </button>
+    </div>
+</div>
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
new file mode 100644
index 00000000..f42caf66
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
@@ -0,0 +1,67 @@
+/**
+ * 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, OnInit, Output } from '@angular/core';
+
+import { ValueSource } from '../../model/value-source.enum';
+import { Parameter } from '../../model/workflow/parameter';
+import { DataAccessService } from "../../services/data-access/data-access.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',
+    templateUrl: 'parameter.component.html',
+})
+export class ParameterComponent implements OnInit {
+    @Input() public param: Parameter;
+    @Input() public valueSource: ValueSource[];
+    @Input() public canEditName: boolean;
+    @Input() public showLabel = true;
+    @Input() public canDelete: boolean;
+    @Output() public paramChange = new EventEmitter<Parameter>();
+    @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>();
+
+    public sourceEnum = ValueSource;
+    public valueGroupClass;
+    public valueClass;
+    public showValueSource: boolean = true;
+
+    constructor(private dataAccessService: DataAccessService) { }
+
+    public ngOnInit(): void {
+        if (1 === this.valueSource.length) {
+            this.showValueSource = false;
+        }
+        this.valueClass = {
+            'col-md-9': this.showValueSource,
+            'col-md-12': !this.showValueSource
+        };
+
+        this.valueGroupClass = {
+            'col-md-7': this.canDelete,
+            'col-md-9': !this.canDelete
+        };
+    }
+
+    public deleteParam(): void {
+        this.delete.emit();
+    }
+
+    public modelChange(value: any) {
+        this.param.value = value;
+        this.paramChange.emit(this.param)
+    }
+
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
index 00aea176..d7a8500d 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
@@ -38,6 +38,6 @@
     </div>
 
     <!-- TODO  add property for different node types -->
-    <span>TODO: property for different node types</span>
 
+    <b4t-start-event-parameters *ngIf="'startEvent' == node.type" [node]="node"></b4t-start-event-parameters>
 </div>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
index bedf682f..0630f94b 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
@@ -12,7 +12,7 @@
 
 import { AfterViewInit, Component } from '@angular/core';
 
-import { WorkflowNode } from '../../model/workflow-node';
+import { WorkflowNode } from '../../model/workflow/workflow-node';
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
 import { WorkflowService } from '../../services/workflow.service';
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html
new file mode 100644
index 00000000..d6aaafd8
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html
@@ -0,0 +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>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts
new file mode 100644
index 00000000..65838792
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts
@@ -0,0 +1,35 @@
+/*******************************************************************************
+ * 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, ViewChild } 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';
+
+@Component({
+    selector: 'b4t-start-event-parameters',
+    templateUrl: 'start-event-parameters.component.html',
+})
+export class StartEventParametersComponent {
+    @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/model/value-source.enum.ts b/sdc-workflow-designer-ui/src/app/model/value-source.enum.ts
new file mode 100644
index 00000000..4a9ca78a
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/value-source.enum.ts
@@ -0,0 +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
+ *******************************************************************************/
+
+export enum ValueSource {
+    String,
+    Plan,
+    // Topology, // TODO implement Topology properties in R2
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/value-type.enum.ts b/sdc-workflow-designer-ui/src/app/model/value-type.enum.ts
new file mode 100644
index 00000000..ab6d07b8
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/value-type.enum.ts
@@ -0,0 +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
+ *******************************************************************************/
+
+export enum ValueType {
+    String,
+    Number,
+    Date,
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/end-event.ts b/sdc-workflow-designer-ui/src/app/model/workflow/end-event.ts
new file mode 100644
index 00000000..300af898
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/end-event.ts
@@ -0,0 +1,15 @@
+import {WorkflowNode} from './workflow-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
+ */
+
+export class EndEvent extends WorkflowNode {
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/node-type.enum.ts b/sdc-workflow-designer-ui/src/app/model/workflow/node-type.enum.ts
new file mode 100644
index 00000000..994b3b67
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/node-type.enum.ts
@@ -0,0 +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
+ *******************************************************************************/
+
+export enum NodeType {
+    startEvent,
+    endEvent,
+    toscaNodeManagementTask,
+    restTask,
+    exclusiveGateway,
+    parallelGateway,
+    subProcess,
+    intermediateCatchEvent,
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/parameter.ts b/sdc-workflow-designer-ui/src/app/model/workflow/parameter.ts
new file mode 100644
index 00000000..cc87a6fa
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/parameter.ts
@@ -0,0 +1,20 @@
+/**
+ * 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 { ValueType } from '../value-type.enum';
+
+export class Parameter {
+    constructor(public name: string, public value: string, public valueSource: string,
+                public type: string = ValueType[ValueType.String]) {
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow-node.ts b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
similarity index 73%
rename from sdc-workflow-designer-ui/src/app/model/workflow-node.ts
rename to sdc-workflow-designer-ui/src/app/model/workflow/position.ts
index 21f366fa..b690f4d6 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow-node.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
@@ -13,8 +13,9 @@
 import { Injectable } from '@angular/core';
 
 /**
- * WorkflowNode
+ * Position
+ * Workflow node position
  */
-export class WorkflowNode {
-    constructor(public id: string, public name: string, public type: string, public top: number, public left: number) {}
+export class Position {
+    constructor(public top: number, public left: number, public width?: number, public height?: number) { }
 }
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/sequence-flow.ts b/sdc-workflow-designer-ui/src/app/model/workflow/sequence-flow.ts
new file mode 100644
index 00000000..492cc84d
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/sequence-flow.ts
@@ -0,0 +1,16 @@
+/**
+ * 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 SequenceFlow {
+
+    constructor(public sourceRef: string, public targetRef: string, public name?: string, public condition?:string) { }
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/start-event.ts b/sdc-workflow-designer-ui/src/app/model/workflow/start-event.ts
new file mode 100644
index 00000000..d609f7ca
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/start-event.ts
@@ -0,0 +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 { Parameter } from './parameter';
+import { WorkflowNode } from './workflow-node';
+
+export class StartEvent extends WorkflowNode {
+    public parameters: Parameter[] = [];
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/workflow-node.ts b/sdc-workflow-designer-ui/src/app/model/workflow/workflow-node.ts
new file mode 100644
index 00000000..9e54be13
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/workflow-node.ts
@@ -0,0 +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 { Position } from './position';
+import { SequenceFlow } from './sequence-flow';
+
+export class WorkflowNode {
+    public constructor(public id: string, public name: string, public type: string, public position: Position, public sequenceFlows: SequenceFlow[]) {}
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow.ts b/sdc-workflow-designer-ui/src/app/model/workflow/workflow.ts
similarity index 100%
rename from sdc-workflow-designer-ui/src/app/model/workflow.ts
rename to sdc-workflow-designer-ui/src/app/model/workflow/workflow.ts
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 82e4cbbb..d5be2316 100644
--- a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
@@ -12,7 +12,7 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 
-import { WorkflowNode } from '../model/workflow-node';
+import { WorkflowNode } from '../model/workflow/workflow-node';
 
 /**
  * BroadcastService
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
index 5eaf6351..abd73558 100644
--- a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
@@ -11,10 +11,10 @@
  */
 
 import { Injectable } from '@angular/core';
-import { WorkflowNode } from "../../model/workflow-node";
+import { WorkflowNode } from "../../model/workflow/workflow-node";
 import { Observable } from "rxjs/Observable";
 import { HttpService } from "../../util/http.service";
-import { Workflow } from "../../model/workflow";
+import { Workflow } from "../../model/workflow/workflow";
 
 /**
  * CatalogService
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
index cec6ae25..74fc8c3b 100644
--- a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
@@ -13,9 +13,9 @@
 import { Injectable } from '@angular/core';
 import { CatalogService } from "./catalog.service";
 import { Observable } from "rxjs/Observable";
-import { WorkflowNode } from "../../model/workflow-node";
+import { WorkflowNode } from "../../model/workflow/workflow-node";
 import { HttpService } from "../../util/http.service";
-import { Workflow } from "../../model/workflow";
+import { Workflow } from "../../model/workflow/workflow";
 
 /**
  * SdcService
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 d192a82d..8d3d6552 100644
--- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
@@ -58,8 +58,11 @@ export class JsPlumbService {
 
         // add connection to model data while a new connection is build
         this.jsplumbInstance.bind('connection', info => {
+            this.workflowService.addSequenceFlow(info.connection.sourceId, info.connection.targetId);
+
             info.connection.bind('click', connection => {
                 this.jsplumbInstance.select({ connections: [connection] }).delete();
+                this.workflowService.deleteSequenceFlow(connection.sourceId, connection.targetId);
             });
         });
 
diff --git a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
index d9a949ea..a36b51ad 100644
--- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
@@ -11,10 +11,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { WorkflowNode } from "../model/workflow-node";
+import { WorkflowNode } from "../model/workflow/workflow-node";
 import { DataAccessService } from "./data-access/data-access.service";
 import { Observable } from "rxjs/Observable";
-import { Workflow } from "../model/workflow";
+import { Workflow } from "../model/workflow/workflow";
+import { Position } from "../model/workflow/position";
+import { NodeType } from "../model/workflow/node-type.enum";
+import { StartEvent } from "../model/workflow/start-event";
+import { SequenceFlow } from "../model/workflow/sequence-flow";
 
 /**
  * WorkflowService
@@ -34,22 +38,55 @@ export class WorkflowService {
     }
 
     public addNode(name: string, type: string, top: number, left: number): WorkflowNode {
-        const node = new WorkflowNode(this.createId(), name, type, top, left);
+        let node: WorkflowNode;
+        switch (type) {
+            case NodeType[NodeType.startEvent]:
+                node = new StartEvent(this.createId(), name, type, new Position(top, left), []);
+                break;
+            default:
+                node = new WorkflowNode(this.createId(), name, type, new Position(top, left), []);
+                break;
+        }
+
         this.workflow.nodes.push(node);
         return node;
     }
 
     public deleteNode(nodeId: string): WorkflowNode {
+        // delete related connections
+        this.workflow.nodes.forEach(node => this.deleteSequenceFlow(node.id, nodeId));
+
         // delete current node
         const index = this.workflow.nodes.findIndex(node => node.id === nodeId);
         if (index !== -1) {
             const node = this.workflow.nodes.splice(index, 1)[0];
+            node.sequenceFlows = [];
             return node;
         }
 
         return undefined;
     }
 
+    public addSequenceFlow(sourceId: string, targetId: string) {
+        const node = this.getNodeById(sourceId);
+        if (node) {
+            const index = node.sequenceFlows.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);
+            if (index === -1) {
+                node.sequenceFlows.push(new SequenceFlow(sourceId, targetId));
+            }
+        }
+    }
+
+    public deleteSequenceFlow(sourceId: string, targetId: string) {
+        const node = this.getNodeById(sourceId);
+        if (node) {
+            const index = node.sequenceFlows.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);
+            if (index !== -1) {
+                node.sequenceFlows.splice(index, 1);
+            }
+        }
+    }
+
     public getNodeById(sourceId: string): WorkflowNode {
         return this.workflow.nodes.find(node => node.id === sourceId);
     }