diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src')
14 files changed, 220 insertions, 40 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;
+ }
+}
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 @@ <head> <meta charset="utf-8"> <title>Workflow Designer</title> - <base href="/"> + <base href="/lvbo"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> 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; } |