support add workflow node

add toolbar, support add workflow nodes to edit area

Issue-ID: SDC-255

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

12 files changed, 218 insertions, 39 deletions

diff --git a/sdc-workflow-designer-ui/src/app/app.component.css b/sdc-workflow-designer-ui/src/app/app.component.css
index 06cc8b00..762d14b9 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.css
+++ b/sdc-workflow-designer-ui/src/app/app.component.css
@@ -14,6 +14,5 @@
  .container {

      width: 100%;

      height: 100%;

-     background-color: cadetblue;

  }

 

diff --git a/sdc-workflow-designer-ui/src/app/app.component.html b/sdc-workflow-designer-ui/src/app/app.component.html
index fe3b4550..f09e0a73 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.html
+++ b/sdc-workflow-designer-ui/src/app/app.component.html
@@ -14,7 +14,9 @@
 
 <!--The content below is only a placeholder and can be replaced.-->
 
+<b4t-toolbar></b4t-toolbar>
+
 <div id="container" class="container">
-    <b4t-node *ngFor="let node of nodes" [node]="node"></b4t-node>
+    <b4t-node *ngFor="let node of getNodes(); let last = last;" [node]="node" [last]="last"></b4t-node>
 </div>
 
diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index 32500abb..b02ce675 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -12,6 +12,8 @@
 
 import { Component, AfterViewInit } from '@angular/core';
 import { JsPlumbService } from "./services/jsplumb.service";
+import { WorkflowService } from "./services/workflow.service";
+import { WorkflowNode } from "./model/workflow-node";
 
 @Component({
   selector: 'app-root',
@@ -19,31 +21,13 @@ import { JsPlumbService } from "./services/jsplumb.service";
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements AfterViewInit {
-    constructor(private jsplumbService: JsPlumbService) {}
+    constructor(private jsplumbService: JsPlumbService, private workflowService: WorkflowService) {}
 
-    public nodes = [
-        {
-            id: '001',
-            name: 'node001',
-            top: 50,
-            left: 50,
-        },
-        {
-            id: '002',
-            name: 'node002',
-            top: 250,
-            left: 50,
-        },
-        {
-            id: '003',
-            name: 'node003',
-            top: 140,
-            left: 450,
-        },
-    ];
+    public getNodes(): WorkflowNode[] {
+        return this.workflowService.getNodes();
+    }
 
     ngAfterViewInit(): void {
-        this.jsplumbService.initJsPlumbInstance();
-        this.jsplumbService.initNode('.node');
+        this.jsplumbService.buttonDroppable();
     }
 }
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index de2b3c08..3d57ce19 100644
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -16,16 +16,19 @@ import { NgModule } from '@angular/core';
 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";
 
 @NgModule({
     declarations: [
         AppComponent,
         NodeComponent,
+        ToolbarComponent,
     ],
     imports: [
         BrowserModule
     ],
-    providers: [JsPlumbService],
+    providers: [JsPlumbService, WorkflowService],
     bootstrap: [AppComponent]
 })
 export class AppModule { }
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 72700551..a178e6f5 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,8 +11,7 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 -->

-<div class="node" [style.top]="node.top + 'px'"

-     [style.left]="node.left + 'px'">

+<div class="node" [style.top]="node.top + 'px'" [style.left]="node.left + 'px'">

      <div>{{node.name}}</div>

     <div class="anchor anchors anchor-left">

         <span class="left">

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 12f23cc5..c2686fbb 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
@@ -22,11 +22,19 @@ import { JsPlumbService } from '../../services/jsplumb.service';
     styleUrls: ['./node.component.css'],

     templateUrl: 'node.component.html',

 })

-export class NodeComponent {

+export class NodeComponent implements AfterViewInit {

+

     @Input() public node: Node;

+    @Input() public last: boolean;

 

     constructor(private jsPlumbService: JsPlumbService) {

 

     }

 

+    ngAfterViewInit(): void {

+        if(this.last) {

+            this.jsPlumbService.initNode('.node');

+        }

+    }

+

 }

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
new file mode 100644
index 00000000..94559eff
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css
@@ -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

+ */

+

+.toolbar {

+    padding: 10px 30px 0px 10px;

+    position: fixed;

+    top: 0px;

+    left: 0px;

+    width: 100%;

+    z-index: 4;

+}

+

+button {

+    transition: all 0s;

+    height: 30px;

+}

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
new file mode 100644
index 00000000..5d028b90
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
@@ -0,0 +1,23 @@
+<!--

+/**

+ * 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="toolbar">

+    <div class="row">

+        <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'startEvent'">

+            <span>startEvent</span>

+        </button>

+        <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'endEvent'">

+            <span>endEvent</span>

+        </button>

+    </div>

+</div>

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
new file mode 100644
index 00000000..5fdb6ce5
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.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 { AfterViewInit, Component } from '@angular/core';

+

+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 AfterViewInit {

+

+    constructor(private jsPlumbService: JsPlumbService) {

+    }

+

+    public ngAfterViewInit() {

+        this.jsPlumbService.buttonDraggable();

+    }

+

+}

diff --git a/sdc-workflow-designer-ui/src/app/model/workflow-node.ts b/sdc-workflow-designer-ui/src/app/model/workflow-node.ts
new file mode 100644
index 00000000..21f366fa
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow-node.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 { Injectable } from '@angular/core';

+

+/**

+ * WorkflowNode

+ */

+export class WorkflowNode {

+    constructor(public id: string, public name: string, public type: string, public top: number, public left: number) {}

+}

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;

+    }

+}