2 files changed, 91 insertions, 10 deletions
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 7012ccc3..33c88d4f 100644
--- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
@@ -12,6 +12,7 @@
 
 import { Injectable } from '@angular/core';
 import * as jsp from 'jsplumb';
+import { WorkflowService } from "./workflow.service";
 
 /**
  * JsPlumbService
@@ -21,8 +22,8 @@ import * as jsp from 'jsplumb';
 export class JsPlumbService {
     private jsplumbInstance;
 
-    constructor() {
-
+    constructor(private workflowService: WorkflowService) {
+        this.initJsPlumbInstance();
     }
 
 
@@ -57,13 +58,9 @@ export class JsPlumbService {
 
         // add connection to model data while a new connection is build
         this.jsplumbInstance.bind('connection', info => {
-            this.jsplumbInstance.bind('connection', info => {
-
-				info.connection.bind('click', connection => {
-					this.jsplumbInstance.select({ connections: [connection] }).delete();
-				});
-			});
-			
+            info.connection.bind('click', connection => {
+                this.jsplumbInstance.select({ connections: [connection] }).delete();
+            });
         });
 
     }
@@ -91,5 +88,30 @@ export class JsPlumbService {
             maxConnections: -1,
         });
 
-    }
+    }
+
+    public buttonDraggable() {
+        const selector = this.jsplumbInstance.getSelector('.toolbar .item');
+        this.jsplumbInstance.draggable(selector,
+            {
+                scope: 'btn',
+                clone: true,
+            });
+    }
+
+    public buttonDroppable() {
+        const selector = this.jsplumbInstance.getSelector('.container');
+        this.jsplumbInstance.droppable(selector, {
+            scope: 'btn',
+            drop: event => {
+                const el = this.jsplumbInstance.getSelector(event.drag.el);
+                const type = el.attributes.nodeType.value;
+                const left = event.e.clientX - event.drop.position[0];
+                const top = event.e.clientY - event.drop.position[1];
+
+                this.workflowService.addNode(type, type, top, left);
+            },
+        });
+    }
+
 }
diff --git a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
new file mode 100644
index 00000000..59e1fd54
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
@@ -0,0 +1,59 @@
+/**
+ * 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 { WorkflowNode } from "../model/workflow-node";
+
+/**
+ * WorkflowService
+ * provides all of the operations about workflow operations.
+ */
+@Injectable()
+export class WorkflowService {
+    public nodes: WorkflowNode[] = [];
+
+    public getNodes(): WorkflowNode[] {
+        return this.nodes;
+    }
+
+    public addNode(name: string, type: string,  top: number, left: number) {
+        this.nodes.push(new WorkflowNode(this.createId(), name, type, top, left));
+    }
+
+    public deleteNode(nodeId: string): WorkflowNode {
+        // delete current node
+        const index = this.nodes.findIndex(node => node.id === nodeId);
+        if (index !== -1) {
+            const node = this.nodes.splice(index, 1)[0];
+            return node;
+        }
+
+        return undefined;
+    }
+
+    public getNode(sourceId: string): WorkflowNode {
+        return this.nodes.find(node => node.id === sourceId);
+    }
+
+    private createId() {
+        const idSet = new Set();
+        this.nodes.forEach(node => idSet.add(node.id));
+
+        for (let i = 0; i < idSet.size; i++) {
+            if (!idSet.has('node' + i)) {
+                return 'node' + i;
+            }
+        }
+
+        return 'node' + idSet.size;
+    }
+}