From 95141017fb4dfe5c3ad4b9dcc255ccd949944ccf Mon Sep 17 00:00:00 2001 From: Lvbo163 Date: Tue, 29 Aug 2017 10:07:13 +0800 Subject: support add workflow node add toolbar, support add workflow nodes to edit area Issue-ID: SDC-255 Change-Id: I84353644c3947a3298f3f71e51085311456a33e3 Signed-off-by: Lvbo163 --- sdc-workflow-designer-ui/package.json | 2 +- sdc-workflow-designer-ui/src/app/app.component.css | 1 - .../src/app/app.component.html | 4 +- sdc-workflow-designer-ui/src/app/app.component.ts | 30 +++-------- sdc-workflow-designer-ui/src/app/app.module.ts | 5 +- .../src/app/components/node/node.component.html | 3 +- .../src/app/components/node/node.component.ts | 10 +++- .../app/components/toolbar/toolbar.component.css | 25 +++++++++ .../app/components/toolbar/toolbar.component.html | 23 +++++++++ .../app/components/toolbar/toolbar.component.ts | 35 +++++++++++++ .../src/app/model/workflow-node.ts | 20 ++++++++ .../src/app/services/jsplumb.service.ts | 42 +++++++++++---- .../src/app/services/workflow.service.ts | 59 ++++++++++++++++++++++ sdc-workflow-designer-ui/src/index.html | 2 +- sdc-workflow-designer-ui/src/styles.css | 1 + 15 files changed, 221 insertions(+), 41 deletions(-) create mode 100644 sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css create mode 100644 sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts create mode 100644 sdc-workflow-designer-ui/src/app/model/workflow-node.ts create mode 100644 sdc-workflow-designer-ui/src/app/services/workflow.service.ts (limited to 'sdc-workflow-designer-ui') diff --git a/sdc-workflow-designer-ui/package.json b/sdc-workflow-designer-ui/package.json index fbdca728..1270dece 100644 --- a/sdc-workflow-designer-ui/package.json +++ b/sdc-workflow-designer-ui/package.json @@ -4,7 +4,7 @@ "license": "MIT", "scripts": { "ng": "ng", - "start": "ng serve", + "start": "ng serve --host 10.90.74.215 --disable-host-check=true", "build": "ng build", "test": "ng test", "lint": "ng lint", 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 @@ + +
- +
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 */ --> -
+
{{node.name}}
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 @@ + +
+
+ + +
+
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; + } +} diff --git a/sdc-workflow-designer-ui/src/index.html b/sdc-workflow-designer-ui/src/index.html index e876fc8c..1eab7e58 100644 --- a/sdc-workflow-designer-ui/src/index.html +++ b/sdc-workflow-designer-ui/src/index.html @@ -16,7 +16,7 @@ Workflow Designer - + diff --git a/sdc-workflow-designer-ui/src/styles.css b/sdc-workflow-designer-ui/src/styles.css index 30d6d116..94388033 100644 --- a/sdc-workflow-designer-ui/src/styles.css +++ b/sdc-workflow-designer-ui/src/styles.css @@ -13,4 +13,5 @@ body, html { height: 100%; margin: 0px; + background-color: cadetblue; } -- cgit 1.2.3-korg