diff options
| author |   Lvbo163 <lv.bo163@zte.com.cn> | 2017-08-28 14:19:17 +0800 |
|---|---|---|
| committer | Lvbo163 <lv.bo163@zte.com.cn> | 2017-08-28 16:23:33 +0800 |
| commit | df81658e252dd886f30e984f1aa4a5f3917cd134 (patch) | |
| tree | b39bc64ce878902038842b1da412aaba4a2d989f /sdc-workflow-designer-ui/src/app/services | |
| parent | f721b1af7e3496427ee9c46d5bb46103c49505c6 (diff) | |
WorkFlow Diagram Editor
create workflow diagram editor area, install jsplumb package to support node drag and node connections.
Change-Id: Ie68d0f88ef1cc855c1e55e51e918111c6fba4116
Issue-ID: SDC-70
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 | 95 |
1 files changed, 95 insertions, 0 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 new file mode 100644 index 00000000..7012ccc3 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts @@ -0,0 +1,95 @@ +/**
+ * 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 * as jsp from 'jsplumb';
+
+/**
+ * JsPlumbService
+ * provides all of the operations about jsplumb plugin.
+ */
+@Injectable()
+export class JsPlumbService {
+ private jsplumbInstance;
+
+ constructor() {
+
+ }
+
+
+ public initJsPlumbInstance() {
+ this.jsplumbInstance = jsp.jsPlumb.getInstance({
+ Container: 'container'
+ });
+
+ this.jsplumbInstance.importDefaults({
+ Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],
+ Connector: [
+ 'Flowchart',
+ { cornerRadius: 0, stub: 0, gap: 3 },
+ ],
+ ConnectionOverlays: [
+ [
+ 'Arrow',
+ { direction: 1, foldback: 1, location: 1, width: 10, length: 10 },
+ ],
+ ['Label', { label: '', id: 'label', cssClass: 'aLabel' }],
+ ],
+ Endpoint: 'Blank',
+ PaintStyle: {
+ strokeWidth: 4,
+ stroke: 'black',
+ },
+ HoverPaintStyle: {
+ strokeWidth: 4,
+ stroke: 'blue',
+ },
+ });
+
+ // 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();
+ });
+ });
+
+ });
+
+ }
+
+ public initNode(selectorString: string) {
+ const selector = this.jsplumbInstance.getSelector(selectorString);
+
+ this.jsplumbInstance.draggable(selector, {
+ // stop(event) {
+ // node.position.left = event.pos[0];
+ // node.position.top = event.pos[1];
+ // },
+ });
+
+ this.jsplumbInstance.makeTarget(selector, {
+ detachable: false,
+ isTarget: true,
+ maxConnections: -1,
+ });
+
+ this.jsplumbInstance.makeSource(selector, {
+ filter: '.anchor, .anchor *',
+ detachable: false,
+ isSource: true,
+ maxConnections: -1,
+ });
+
+ } +}
|