diff options
| author |   Lvbo163 <lv.bo163@zte.com.cn> | 2017-08-29 10:07:13 +0800 |
|---|---|---|
| committer | Lvbo163 <lv.bo163@zte.com.cn> | 2017-08-29 10:07:13 +0800 |
| commit | 95141017fb4dfe5c3ad4b9dcc255ccd949944ccf (patch) | |
| tree | 4891a20aeffb39876e5f4595c3183d18a4d9b668 /sdc-workflow-designer-ui/src/app/services | |
| parent | df81658e252dd886f30e984f1aa4a5f3917cd134 (diff) | |
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>
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/services')
| -rw-r--r-- | sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts | 42 | ||||
| -rw-r--r-- | sdc-workflow-designer-ui/src/app/services/workflow.service.ts | 59 |
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;
+ }
+}
|