summaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src')
-rw-r--r--sdc-workflow-designer-ui/src/app/app.component.css1
-rw-r--r--sdc-workflow-designer-ui/src/app/app.component.html4
-rw-r--r--sdc-workflow-designer-ui/src/app/app.component.ts30
-rw-r--r--sdc-workflow-designer-ui/src/app/app.module.ts5
-rw-r--r--sdc-workflow-designer-ui/src/app/components/node/node.component.html3
-rw-r--r--sdc-workflow-designer-ui/src/app/components/node/node.component.ts10
-rw-r--r--sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.css25
-rw-r--r--sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html23
-rw-r--r--sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts35
-rw-r--r--sdc-workflow-designer-ui/src/app/model/workflow-node.ts20
-rw-r--r--sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts42
-rw-r--r--sdc-workflow-designer-ui/src/app/services/workflow.service.ts59
-rw-r--r--sdc-workflow-designer-ui/src/index.html2
-rw-r--r--sdc-workflow-designer-ui/src/styles.css1
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;
}