From df81658e252dd886f30e984f1aa4a5f3917cd134 Mon Sep 17 00:00:00 2001
From: Lvbo163 <lv.bo163@zte.com.cn>
Date: Mon, 28 Aug 2017 14:19:17 +0800
Subject: 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>
---
 .../src/app/services/jsplumb.service.ts            | 95 ++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts

(limited to 'sdc-workflow-designer-ui/src/app/services')

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,
+        });
+
+    }
+}
-- 
cgit 1.2.3-korg