change file encoding

change pc to unix

Issue-ID: SDC-910

Change-Id: I3fde01a1b8c8daa4ea34622f369fb2e04b59b47f
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>

1 files changed, 573 insertions, 562 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 c6cf60a8..e90efa7e 100644
--- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
@@ -1,562 +1,573 @@
-/**

- * 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';

-

-import { Subscription } from 'rxjs/Subscription';

-import { WorkflowNode } from '../model/workflow/workflow-node';

-import { BroadcastService } from './broadcast.service';

-import { ModelService } from './model.service';

-import { SequenceFlow } from '../model/workflow/sequence-flow';

-import { Position } from '../model/workflow/position';

-

-/**

- * JsPlumbService

- * provides all of the operations about jsplumb plugin.

- */

-@Injectable()

-export class JsPlumbService {

-    public jsplumbInstanceMap = new Map<string, any>();

-    public subscriptionMap = new Map<string, Subscription>();

-

-    private padding = 20;

-    private rootClass = 'canvas';

-    private selectNodes: WorkflowNode[] = [];

-

-    constructor(private modelService: ModelService, private broadcastService: BroadcastService) {

-        this.broadcastService.selectedElement$.subscribe(elements => {

-            this.selectNodes = [];

-            if (elements && 0 < elements.length) {

-                for (let index = 0; index < elements.length; index++) {

-                    let element = elements[index];

-                    if (this.modelService.isNode(element)) {

-                        let node = element as WorkflowNode;

-                        this.selectNodes.push(node);

-                    }

-                }

-            }

-        });

-    }

-

-    public connectChildrenNodes(parentNodeId: string) {

-        const jsplumbInstance = this.jsplumbInstanceMap.get(parentNodeId);

-

-        const nodes: WorkflowNode[] = this.modelService.getChildrenNodes(parentNodeId);

-        nodes.forEach(node => this.connect4OneNode(node, jsplumbInstance));

-    }

-

-    public connect4OneNode(node: WorkflowNode, jsplumbInstance: any) {

-        node.connection.forEach(sequenceFlow => {

-            const connection = jsplumbInstance.connect({

-                source: sequenceFlow.sourceRef,

-                target: sequenceFlow.targetRef,

-            });

-            if (sequenceFlow.name) {

-                connection.setLabel(sequenceFlow.name);

-            }

-        });

-    }

-

-    public initJsPlumbInstance(id: string) {

-        if (this.jsplumbInstanceMap.get(id)) {

-            return;

-        }

-        const jsplumbInstance = jsp.jsPlumb.getInstance();

-

-        jsplumbInstance.importDefaults({

-            Anchor: "Continuous",

-            Endpoint: "Blank",

-            Container: "pallete",

-            ReattachConnections: true,

-            Connector: ['Flowchart', {

-                stub: [0, 0],

-                cornerRadius: 5,

-                alwaysRespectStubs: true

-            }],

-            PaintStyle: {

-                stroke: "#7D8695",

-                strokeWidth: 1,

-                radius: 1,

-                outlineStroke: "transform",

-                outlineWidth: 4

-            },

-            ConnectorStyle: {

-                stroke: "#7D8695",

-                strokeWidth: 1,

-                outlineStroke: "transform",

-                outlineWidth: 4

-            },

-            ConnectorHoverStyle: {

-                stroke: "#00ABFF",

-                strokeWidth: 2,

-                outlineStroke: "transform",

-                outlineWidth: 4

-            },

-            ConnectionOverlays: [

-                ['Arrow', {

-                    location: 1,

-                    id: 'arrow',

-                    cssClass: 'icon-port',

-                    width: 11,

-                    length: 12

-                }],

-                ['Label', { label: '', id: 'label' }]

-            ]

-        });

-

-        // add connection to model data while a new connection is build

-        jsplumbInstance.bind('connection', info => {

-            this.modelService.addConnection(info.connection.sourceId, info.connection.targetId);

-

-            this.subscribe4Connection(info.connection);

-

-            info.connection.bind('click', (connection, event) => {

-                if ('Label' === connection.type) {

-                    return;

-                }

-                event.stopPropagation();

-                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);

-                this.broadcastService.broadcast(this.broadcastService.showProperty, null);

-                this.broadcastService.broadcast(this.broadcastService.selectedElement, [sequenceFlow]);

-            });

-

-            info.connection.bind('dblclick', connection => {

-                if ('Label' === connection.type) {

-                    return;

-                }

-                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);

-                this.broadcastService.broadcast(this.broadcastService.showProperty, sequenceFlow);

-            });

-        });

-

-        this.jsplumbInstanceMap.set(id, jsplumbInstance);

-    }

-

-    private subscribe4Connection(connection: any) {

-        const pre = connection.sourceId + connection.targetId;

-        let sequenceFlowSubscription = this.subscriptionMap.get(pre + 'sequenceFlowSubscription');

-        if (sequenceFlowSubscription && !sequenceFlowSubscription.closed) {

-            sequenceFlowSubscription.unsubscribe();

-        }

-

-        let currentThis = this;

-        sequenceFlowSubscription = this.broadcastService.selectedElement$.subscribe(elements => {

-            let selected = false;

-            if (elements && 0 < elements.length) {

-                for (let index = 0; index < elements.length; index++) {

-                    let element = elements[index];

-                    if (!this.modelService.isNode(element)) {

-                        let sequence = element as SequenceFlow;

-                        if (sequence.sourceRef === connection.sourceId

-                            && sequence.targetRef === connection.targetId) {

-                            selected = true;

-                        }

-                    }

-                }

-            }

-            if (selected) {

-                connection.setPaintStyle({

-                    stroke: '#00ABFF',

-                    strokeWidth: 1,

-                    radius: 1,

-                    outlineStroke: "transform",

-                    outlineWidth: 4

-                });

-            } else {

-                connection.setPaintStyle({

-                    stroke: '#7D8695',

-                    strokeWidth: 1,

-                    radius: 1,

-                    outlineStroke: "transform",

-                    outlineWidth: 4

-                });

-            }

-        });

-        this.subscriptionMap.set(pre + 'sequenceFlowSubscription', sequenceFlowSubscription);

-    }

-

-    private unsubscription4Connection(connectionSelection: any) {

-        connectionSelection.each(connection => {

-            const pre = connection.sourceId + connection.targetId;

-            this.subscriptionMap.get(pre + 'sequenceFlowSubscription').unsubscribe();

-        });

-    }

-

-    public deleteConnect(sourceId: string, targetId: string) {

-        const sourceNode = this.modelService.getNodeMap().get(sourceId);

-        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);

-        const connectionSelection = jsplumbInstance.select({ source: sourceId, target: targetId });

-        this.unsubscription4Connection(connectionSelection);

-        connectionSelection.delete();

-    }

-

-    public setLabel(sourceId: string, targetId: string, label: string) {

-        const sourceNode = this.modelService.getNodeMap().get(sourceId);

-        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);

-        const connections = jsplumbInstance.select({ source: sourceId, target: targetId });

-        connections.setLabel(label);

-    }

-

-    public getParentNodeId(id: string): string {

-        const nodeElement = jsp.jsPlumb.getSelector('#' + id);

-        const parentNode = this.getParentNodeEl(nodeElement[0]);

-

-        return parentNode ? parentNode.id : null;

-    }

-

-    public initNode(node: WorkflowNode) {

-        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);

-

-        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).draggable(node.id, {

-            scope: 'node',

-            filter: '.ui-resizable-handle',

-            classes: {

-                'ui-draggable': 'dragging'

-            },

-            // grid: [5, 5],

-            drag: event => {

-                // out of container edge, reset to minimal value.

-                if (0 > event.pos[0]) {

-                    event.el.style.left = '0px';

-                }

-                if (0 > event.pos[1]) {

-                    event.el.style.top = '0px';

-                }

-

-                if (0 < this.selectNodes.length) {

-                    let moveAll = false;

-                    this.selectNodes.forEach(element => {

-                        if (element.id === event.el.id) {

-                            moveAll = true;

-                        }

-                    });

-                    if (moveAll) {

-                        this.selectNodes.forEach(selectNode => {

-                            if (selectNode.id !== event.el.id) {

-                                selectNode.position.left += event.e.movementX;

-                                selectNode.position.left = 0 > selectNode.position.left ? 0 : selectNode.position.left;

-                                selectNode.position.top += event.e.movementY;

-                                selectNode.position.top = 0 > selectNode.position.top ? 0 : selectNode.position.top;

-                            }

-                            jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));

-                        });

-                    }

-                }

-            },

-            stop: event => {

-                this.selectNodes.forEach(selectNode => {

-                    jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));

-                });

-            }

-        });

-

-        jsplumbInstance.makeTarget(node.id, {

-            maxConnections: -1,

-            beforeDrop: function (info) {

-                const sourceId = info.sourceId;

-                const targetId = info.targetId;

-                if (sourceId === targetId) {

-                    return false;

-                }

-                const sameConnections = this.instance.getConnections({ source: sourceId, target: targetId });

-                if (sameConnections && 0 < sameConnections.length) {

-                    return false;

-                }

-                return true;

-            }

-

-        });

-

-        jsplumbInstance.makeSource(node.id, {

-            filter: '.anchor, .anchor *',

-            maxConnections: -1,

-        });

-    }

-

-    public nodeDroppable(node: WorkflowNode, rank: number) {

-        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);

-

-        const selector = jsplumbInstance.getSelector('#' + node.id);

-        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).droppable(selector, {

-            scope: 'node',

-            rank,

-            tolerance: 'pointer',

-            drop: event => {

-                if (!this.isChildNode(event.drop.el, event.drag.el)) {

-                    this.drop(event);

-                }

-                return true;

-            },

-            canDrop: drag => {

-                const nodeMap = this.modelService.getNodeMap();

-                const ancestorNode = nodeMap.get(drag.el.id);

-

-                const isAncestor = this.modelService.isDescendantNode(ancestorNode, node.id);

-                return !isAncestor;

-            },

-        });

-    }

-

-    private isChildNode(childElement, parentElement) {

-        while (childElement !== parentElement) {

-            childElement = childElement.parentNode;

-            if (childElement.classList.contains('canvas')) {

-                return false;

-            }

-        }

-

-        return true;

-    }

-

-    private drop(event) {

-        const dragEl = event.drag.el;

-        const dropEl = event.drop.el;

-

-        this.resizeParent(dragEl, dropEl);

-

-        const nodeLeft = dragEl.getBoundingClientRect().left;

-        const nodeTop = dragEl.getBoundingClientRect().top;

-        const parentLeft = dropEl.getBoundingClientRect().left;

-        const parentTop = dropEl.getBoundingClientRect().top;

-        const left = nodeLeft - parentLeft + dropEl.scrollLeft;

-        const top = nodeTop - parentTop + dropEl.scrollTop;

-        dragEl.style.top = top + 'px';

-        dragEl.style.left = left + 'px';

-

-        // 12 is title height

-        this.modelService.updatePosition(dragEl.id, left, top, dragEl.getBoundingClientRect().width, dragEl.getBoundingClientRect().height - 12);

-

-        const originalParentNode = this.getParentNodeEl(dragEl);

-        const originalParentNodeId = originalParentNode ? originalParentNode.id : this.modelService.rootNodeId;

-

-        const targetParentNodeId = dropEl.classList.contains('node') ? dropEl.id : this.modelService.rootNodeId;

-        this.changeParent(dragEl.id, originalParentNodeId, targetParentNodeId);

-    }

-

-    private changeParent(id: string, originalParentNodeId: string, targetParentNodeId: string) {

-        if (originalParentNodeId !== targetParentNodeId) {

-            this.jsplumbInstanceMap.get(originalParentNodeId).removeAllEndpoints(id);

-            this.modelService.changeParent(id, originalParentNodeId, targetParentNodeId);

-        }

-    }

-

-    private getParentNodeEl(element) {

-        while (!(element.parentNode.classList.contains('node') || element.parentNode.classList.contains('canvas'))) {

-            element = element.parentNode;

-        }

-

-        if (element.parentNode.classList.contains('canvas')) { // top level node

-            return null;

-        } else {

-            return element.parentNode;

-        }

-    }

-

-    public canvasDroppable() {

-        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);

-        const canvasSelector = jsplumbInstance.getSelector('.canvas');

-        jsplumbInstance.droppable(canvasSelector, {

-            scope: 'node',

-            rank: 0,

-            grid: [5, 5],

-            drop: event => this.drop(event),

-        });

-    }

-

-    public buttonDraggable() {

-        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);

-        const selector = jsplumbInstance.getSelector('.item');

-        jsplumbInstance.draggable(selector, {

-            scope: 'btn',

-            clone: true

-        });

-    }

-

-    public buttonDroppable() {

-        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);

-        const selector = jsplumbInstance.getSelector('.canvas');

-        jsplumbInstance.droppable(selector, {

-            scope: 'btn',

-            // grid: [5, 5],

-            drop: event => {

-                const el = jsplumbInstance.getSelector(event.drag.el);

-                const type = el.attributes.nodeType.value;

-                // Mouse position minus drop canvas start position plus scroll position.

-                let left = event.e.x - event.drop.pagePosition[0] + event.drop.el.scrollLeft;

-                let top = event.e.y - event.drop.pagePosition[1] + event.drop.el.scrollTop;

-                if (0 > left) {

-                    left = 0;

-                }

-                if (0 > top) {

-                    top = 0;

-                }

-                const name = event.drag.el.children[1].innerText;

-                this.modelService.addNode(name, type, left, top);

-            },

-        });

-    }

-

-    public remove(node: WorkflowNode) {

-        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);

-

-        // unsubscription4Connection

-        const connectionsAsSource = jsplumbInstance.select({ source: node.id });

-        this.unsubscription4Connection(connectionsAsSource);

-        const connectionsAsTarget = jsplumbInstance.select({ target: node.id });

-        this.unsubscription4Connection(connectionsAsTarget);

-

-        jsplumbInstance.remove(node.id);

-    }

-

-    public resizeParent(element: any, parentElement: any) {

-        if (parentElement.classList.contains(this.rootClass)) {

-            return;

-        }

-

-        if (!parentElement.classList.contains('node')) {

-            this.resizeParent(element, parentElement.parentNode);

-            return;

-        }

-

-        const leftResized = this.resizeParentLeft(element, parentElement);

-        const rightResized = this.resizeParentRight(element, parentElement);

-        const topResized = this.resizeParentTop(element, parentElement);

-        const bottomResized = this.resizeParentBottom(element, parentElement);

-

-        if (leftResized || rightResized || topResized || bottomResized) {

-            if (parentElement.classList.contains('node')) {

-                const rect = parentElement.getBoundingClientRect();

-                this.modelService.updatePosition(parentElement.id,

-                    parentElement.offsetLeft,

-                    parentElement.offsetTop,

-                    // title height

-                    rect.width, rect.height - 12);

-            }

-            this.resizeParent(parentElement, parentElement.parentNode);

-        }

-    }

-

-    private resizeParentLeft(element: any, parentElement: any): boolean {

-        let resized = false;

-

-        const actualLeft = element.getBoundingClientRect().left;

-        const actualParentLeft = parentElement.getBoundingClientRect().left;

-

-        if (actualLeft - this.padding < actualParentLeft) {

-            const width = actualParentLeft - actualLeft + this.padding;

-

-            this.translateElement(parentElement, -width, 0, width, 0);

-            this.translateChildren(parentElement, element, width, 0);

-            resized = true;

-        }

-

-        return resized;

-    }

-

-    private resizeParentRight(element: any, parentElement: any): boolean {

-        let resized = false;

-

-        const actualLeft = element.getBoundingClientRect().left;

-        const actualRight = actualLeft + element.offsetWidth;

-

-        const actualParentLeft = parentElement.getBoundingClientRect().left;

-

-        if ((actualParentLeft + parentElement.offsetWidth) < actualRight + this.padding) {

-            this.setElementWidth(parentElement, actualRight + this.padding - actualParentLeft);

-            resized = true;

-        }

-

-        return resized;

-    }

-

-    private resizeParentBottom(element: any, parentElement: any): boolean {

-        let resized = false;

-

-        const actualTop = element.getBoundingClientRect().top;

-        const actualBottom = actualTop + element.offsetHeight;

-

-        const actualParentTop = parentElement.getBoundingClientRect().top;

-        const actualParentBottom = actualParentTop + parentElement.offsetHeight;

-

-        if (actualParentBottom < actualBottom + this.padding) {

-            this.setElementHeight(parentElement, actualBottom + this.padding - actualParentTop);

-            resized = true;

-        }

-

-        return resized;

-    }

-

-    private resizeParentTop(element: any, parentElement: any): boolean {

-        let resized = false;

-

-        const actualTop = element.getBoundingClientRect().top;

-        const actualParentTop = parentElement.getBoundingClientRect().top;

-

-        if (actualTop - this.padding < actualParentTop) {

-            const height = actualParentTop - actualTop + this.padding;

-

-            this.translateElement(parentElement, 0, -height, 0, height);

-            this.translateChildren(parentElement, element, 0, height);

-            resized = true;

-        }

-

-        return resized;

-    }

-

-    private translateElement(element, left: number, top: number, width: number, height: number) {

-        const offsetLeft = element.offsetLeft + left;

-        element.style.left = offsetLeft + 'px';

-

-        const offsetTop = element.offsetTop + top;

-        element.style.top = offsetTop + 'px';

-

-        const offsetWidth = element.offsetWidth + width;

-        element.style.width = offsetWidth + 'px';

-

-        const offsetHeight = element.offsetHeight + height;

-        element.style.height = offsetHeight + 'px';

-

-        if (element.classList.contains('node')) {

-            const node = this.modelService.getNodeMap().get(element.id);

-            this.jsplumbInstanceMap.get(node.parentId).revalidate(element.id);

-        }

-    }

-

-    private translateChildren(parentElment, excludeElement, left: number, top: number) {

-        const len = parentElment.children.length;

-        for (let i = 0; i < len; i++) {

-            const childElment = parentElment.children[i];

-            if (childElment.localName === 'b4t-node') {

-                this.translateElement(childElment.children[0], left, top, 0, 0);

-            }

-        }

-    }

-

-    private setElementHeight(element, height: number) {

-        element.style.height = height + 'px';

-    }

-

-    private setElementWidth(element, width: number) {

-        element.style.width = width + 'px';

-    }

-

-    private getActualPosition(element, offset: string) {

-        let actualPosition = element[offset];

-        let current = element.offsetParent;

-        while (current !== null) {

-            actualPosition += element[offset];

-            current = current.offsetParent;

-        }

-        return actualPosition;

-    }

-}

+/**
+ * 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';
+
+import { Subscription } from 'rxjs/Subscription';
+import { WorkflowNode } from '../model/workflow/workflow-node';
+import { BroadcastService } from './broadcast.service';
+import { ModelService } from './model.service';
+import { SequenceFlow } from '../model/workflow/sequence-flow';
+import { Position } from '../model/workflow/position';
+
+/**
+ * JsPlumbService
+ * provides all of the operations about jsplumb plugin.
+ */
+@Injectable()
+export class JsPlumbService {
+    public jsplumbInstanceMap = new Map<string, any>();
+    public subscriptionMap = new Map<string, Subscription>();
+
+    private padding = 20;
+    private rootClass = 'canvas';
+    private selectNodes: WorkflowNode[] = [];
+
+    constructor(private modelService: ModelService, private broadcastService: BroadcastService) {
+        this.broadcastService.selectedElement$.subscribe(elements => {
+            this.selectNodes = [];
+            if (elements && 0 < elements.length) {
+                for (let index = 0; index < elements.length; index++) {
+                    let element = elements[index];
+                    if (this.modelService.isNode(element)) {
+                        let node = element as WorkflowNode;
+                        this.selectNodes.push(node);
+                    }
+                }
+            }
+        });
+
+        this.broadcastService.planModel$.subscribe(Workflow => {
+            this.jsplumbInstanceMap.get(this.modelService.rootNodeId).reset();
+            this.unsubscriptionAll();
+            this.buttonDraggable();
+            this.buttonDroppable();
+        });
+    }
+
+    private unsubscriptionAll() {
+        this.subscriptionMap.forEach(subscription => subscription.unsubscribe());
+    }
+
+    public connectChildrenNodes(parentNodeId: string) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(parentNodeId);
+
+        const nodes: WorkflowNode[] = this.modelService.getChildrenNodes(parentNodeId);
+        nodes.forEach(node => this.connect4OneNode(node, jsplumbInstance));
+    }
+
+    public connect4OneNode(node: WorkflowNode, jsplumbInstance: any) {
+        node.connection.forEach(sequenceFlow => {
+            const connection = jsplumbInstance.connect({
+                source: sequenceFlow.sourceRef,
+                target: sequenceFlow.targetRef,
+            });
+            if (sequenceFlow.name) {
+                connection.setLabel(sequenceFlow.name);
+            }
+        });
+    }
+
+    public initJsPlumbInstance(id: string) {
+        if (this.jsplumbInstanceMap.get(id)) {
+            return;
+        }
+        const jsplumbInstance = jsp.jsPlumb.getInstance();
+
+        jsplumbInstance.importDefaults({
+            Anchor: "Continuous",
+            Endpoint: "Blank",
+            Container: "pallete",
+            ReattachConnections: true,
+            Connector: ['Flowchart', {
+                stub: [0, 0],
+                cornerRadius: 5,
+                alwaysRespectStubs: true
+            }],
+            PaintStyle: {
+                stroke: "#7D8695",
+                strokeWidth: 1,
+                radius: 1,
+                outlineStroke: "transform",
+                outlineWidth: 4
+            },
+            ConnectorStyle: {
+                stroke: "#7D8695",
+                strokeWidth: 1,
+                outlineStroke: "transform",
+                outlineWidth: 4
+            },
+            ConnectorHoverStyle: {
+                stroke: "#00ABFF",
+                strokeWidth: 2,
+                outlineStroke: "transform",
+                outlineWidth: 4
+            },
+            ConnectionOverlays: [
+                ['Arrow', {
+                    location: 1,
+                    id: 'arrow',
+                    cssClass: 'icon-port',
+                    width: 11,
+                    length: 12
+                }],
+                ['Label', { label: '', id: 'label' }]
+            ]
+        });
+
+        // add connection to model data while a new connection is build
+        jsplumbInstance.bind('connection', info => {
+            this.modelService.addConnection(info.connection.sourceId, info.connection.targetId);
+
+            this.subscribe4Connection(info.connection);
+
+            info.connection.bind('click', (connection, event) => {
+                if ('Label' === connection.type) {
+                    return;
+                }
+                event.stopPropagation();
+                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);
+                this.broadcastService.broadcast(this.broadcastService.showProperty, null);
+                this.broadcastService.broadcast(this.broadcastService.selectedElement, [sequenceFlow]);
+            });
+
+            info.connection.bind('dblclick', connection => {
+                if ('Label' === connection.type) {
+                    return;
+                }
+                const sequenceFlow = this.modelService.getSequenceFlow(connection.sourceId, connection.targetId);
+                this.broadcastService.broadcast(this.broadcastService.showProperty, sequenceFlow);
+            });
+        });
+
+        this.jsplumbInstanceMap.set(id, jsplumbInstance);
+    }
+
+    private subscribe4Connection(connection: any) {
+        const pre = connection.sourceId + connection.targetId;
+        let sequenceFlowSubscription = this.subscriptionMap.get(pre + 'sequenceFlowSubscription');
+        if (sequenceFlowSubscription && !sequenceFlowSubscription.closed) {
+            sequenceFlowSubscription.unsubscribe();
+        }
+
+        let currentThis = this;
+        sequenceFlowSubscription = this.broadcastService.selectedElement$.subscribe(elements => {
+            let selected = false;
+            if (elements && 0 < elements.length) {
+                for (let index = 0; index < elements.length; index++) {
+                    let element = elements[index];
+                    if (!this.modelService.isNode(element)) {
+                        let sequence = element as SequenceFlow;
+                        if (sequence.sourceRef === connection.sourceId
+                            && sequence.targetRef === connection.targetId) {
+                            selected = true;
+                        }
+                    }
+                }
+            }
+            if (selected) {
+                connection.setPaintStyle({
+                    stroke: '#00ABFF',
+                    strokeWidth: 1,
+                    radius: 1,
+                    outlineStroke: "transform",
+                    outlineWidth: 4
+                });
+            } else {
+                connection.setPaintStyle({
+                    stroke: '#7D8695',
+                    strokeWidth: 1,
+                    radius: 1,
+                    outlineStroke: "transform",
+                    outlineWidth: 4
+                });
+            }
+        });
+        this.subscriptionMap.set(pre + 'sequenceFlowSubscription', sequenceFlowSubscription);
+    }
+
+    private unsubscription4Connection(connectionSelection: any) {
+        connectionSelection.each(connection => {
+            const pre = connection.sourceId + connection.targetId;
+            this.subscriptionMap.get(pre + 'sequenceFlowSubscription').unsubscribe();
+        });
+    }
+
+    public deleteConnect(sourceId: string, targetId: string) {
+        const sourceNode = this.modelService.getNodeMap().get(sourceId);
+        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);
+        const connectionSelection = jsplumbInstance.select({ source: sourceId, target: targetId });
+        this.unsubscription4Connection(connectionSelection);
+        connectionSelection.delete();
+    }
+
+    public setLabel(sourceId: string, targetId: string, label: string) {
+        const sourceNode = this.modelService.getNodeMap().get(sourceId);
+        const jsplumbInstance = this.jsplumbInstanceMap.get(sourceNode.parentId);
+        const connections = jsplumbInstance.select({ source: sourceId, target: targetId });
+        connections.setLabel(label);
+    }
+
+    public getParentNodeId(id: string): string {
+        const nodeElement = jsp.jsPlumb.getSelector('#' + id);
+        const parentNode = this.getParentNodeEl(nodeElement[0]);
+
+        return parentNode ? parentNode.id : null;
+    }
+
+    public initNode(node: WorkflowNode) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
+
+        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).draggable(node.id, {
+            scope: 'node',
+            filter: '.ui-resizable-handle',
+            classes: {
+                'ui-draggable': 'dragging'
+            },
+            // grid: [5, 5],
+            drag: event => {
+                // out of container edge, reset to minimal value.
+                if (0 > event.pos[0]) {
+                    event.el.style.left = '0px';
+                }
+                if (0 > event.pos[1]) {
+                    event.el.style.top = '0px';
+                }
+
+                if (0 < this.selectNodes.length) {
+                    let moveAll = false;
+                    this.selectNodes.forEach(element => {
+                        if (element.id === event.el.id) {
+                            moveAll = true;
+                        }
+                    });
+                    if (moveAll) {
+                        this.selectNodes.forEach(selectNode => {
+                            if (selectNode.id !== event.el.id) {
+                                selectNode.position.left += event.e.movementX;
+                                selectNode.position.left = 0 > selectNode.position.left ? 0 : selectNode.position.left;
+                                selectNode.position.top += event.e.movementY;
+                                selectNode.position.top = 0 > selectNode.position.top ? 0 : selectNode.position.top;
+                            }
+                            jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));
+                        });
+                    }
+                }
+            },
+            stop: event => {
+                this.selectNodes.forEach(selectNode => {
+                    jsplumbInstance.revalidate(jsplumbInstance.getSelector('#' + selectNode.id));
+                });
+            }
+        });
+
+        jsplumbInstance.makeTarget(node.id, {
+            maxConnections: -1,
+            beforeDrop: function (info) {
+                const sourceId = info.sourceId;
+                const targetId = info.targetId;
+                if (sourceId === targetId) {
+                    return false;
+                }
+                const sameConnections = this.instance.getConnections({ source: sourceId, target: targetId });
+                if (sameConnections && 0 < sameConnections.length) {
+                    return false;
+                }
+                return true;
+            }
+
+        });
+
+        jsplumbInstance.makeSource(node.id, {
+            filter: '.anchor, .anchor *',
+            maxConnections: -1,
+        });
+    }
+
+    public nodeDroppable(node: WorkflowNode, rank: number) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
+
+        const selector = jsplumbInstance.getSelector('#' + node.id);
+        this.jsplumbInstanceMap.get(this.modelService.rootNodeId).droppable(selector, {
+            scope: 'node',
+            rank,
+            tolerance: 'pointer',
+            drop: event => {
+                if (!this.isChildNode(event.drop.el, event.drag.el)) {
+                    this.drop(event);
+                }
+                return true;
+            },
+            canDrop: drag => {
+                const nodeMap = this.modelService.getNodeMap();
+                const ancestorNode = nodeMap.get(drag.el.id);
+
+                const isAncestor = this.modelService.isDescendantNode(ancestorNode, node.id);
+                return !isAncestor;
+            },
+        });
+    }
+
+    private isChildNode(childElement, parentElement) {
+        while (childElement !== parentElement) {
+            childElement = childElement.parentNode;
+            if (childElement.classList.contains('canvas')) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    private drop(event) {
+        const dragEl = event.drag.el;
+        const dropEl = event.drop.el;
+
+        this.resizeParent(dragEl, dropEl);
+
+        const nodeLeft = dragEl.getBoundingClientRect().left;
+        const nodeTop = dragEl.getBoundingClientRect().top;
+        const parentLeft = dropEl.getBoundingClientRect().left;
+        const parentTop = dropEl.getBoundingClientRect().top;
+        const left = nodeLeft - parentLeft + dropEl.scrollLeft;
+        const top = nodeTop - parentTop + dropEl.scrollTop;
+        dragEl.style.top = top + 'px';
+        dragEl.style.left = left + 'px';
+
+        // 12 is title height
+        this.modelService.updatePosition(dragEl.id, left, top, dragEl.getBoundingClientRect().width, dragEl.getBoundingClientRect().height - 12);
+
+        const originalParentNode = this.getParentNodeEl(dragEl);
+        const originalParentNodeId = originalParentNode ? originalParentNode.id : this.modelService.rootNodeId;
+
+        const targetParentNodeId = dropEl.classList.contains('node') ? dropEl.id : this.modelService.rootNodeId;
+        this.changeParent(dragEl.id, originalParentNodeId, targetParentNodeId);
+    }
+
+    private changeParent(id: string, originalParentNodeId: string, targetParentNodeId: string) {
+        if (originalParentNodeId !== targetParentNodeId) {
+            this.jsplumbInstanceMap.get(originalParentNodeId).removeAllEndpoints(id);
+            this.modelService.changeParent(id, originalParentNodeId, targetParentNodeId);
+        }
+    }
+
+    private getParentNodeEl(element) {
+        while (!(element.parentNode.classList.contains('node') || element.parentNode.classList.contains('canvas'))) {
+            element = element.parentNode;
+        }
+
+        if (element.parentNode.classList.contains('canvas')) { // top level node
+            return null;
+        } else {
+            return element.parentNode;
+        }
+    }
+
+    public canvasDroppable() {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
+        const canvasSelector = jsplumbInstance.getSelector('.canvas');
+        jsplumbInstance.droppable(canvasSelector, {
+            scope: 'node',
+            rank: 0,
+            grid: [5, 5],
+            drop: event => this.drop(event),
+        });
+    }
+
+    public buttonDraggable() {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
+        const selector = jsplumbInstance.getSelector('.item');
+        jsplumbInstance.draggable(selector, {
+            scope: 'btn',
+            clone: true
+        });
+    }
+
+    public buttonDroppable() {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(this.modelService.rootNodeId);
+        const selector = jsplumbInstance.getSelector('.canvas');
+        jsplumbInstance.droppable(selector, {
+            scope: 'btn',
+            // grid: [5, 5],
+            drop: event => {
+                const el = jsplumbInstance.getSelector(event.drag.el);
+                const type = el.attributes.nodeType.value;
+                // Mouse position minus drop canvas start position plus scroll position.
+                let left = event.e.x - event.drop.pagePosition[0] + event.drop.el.scrollLeft;
+                let top = event.e.y - event.drop.pagePosition[1] + event.drop.el.scrollTop;
+                if (0 > left) {
+                    left = 0;
+                }
+                if (0 > top) {
+                    top = 0;
+                }
+                const name = event.drag.el.children[1].innerText;
+                this.modelService.addNode(name, type, left, top);
+            },
+        });
+    }
+
+    public remove(node: WorkflowNode) {
+        const jsplumbInstance = this.jsplumbInstanceMap.get(node.parentId);
+
+        // unsubscription4Connection
+        const connectionsAsSource = jsplumbInstance.select({ source: node.id });
+        this.unsubscription4Connection(connectionsAsSource);
+        const connectionsAsTarget = jsplumbInstance.select({ target: node.id });
+        this.unsubscription4Connection(connectionsAsTarget);
+
+        jsplumbInstance.remove(node.id);
+    }
+
+    public resizeParent(element: any, parentElement: any) {
+        if (parentElement.classList.contains(this.rootClass)) {
+            return;
+        }
+
+        if (!parentElement.classList.contains('node')) {
+            this.resizeParent(element, parentElement.parentNode);
+            return;
+        }
+
+        const leftResized = this.resizeParentLeft(element, parentElement);
+        const rightResized = this.resizeParentRight(element, parentElement);
+        const topResized = this.resizeParentTop(element, parentElement);
+        const bottomResized = this.resizeParentBottom(element, parentElement);
+
+        if (leftResized || rightResized || topResized || bottomResized) {
+            if (parentElement.classList.contains('node')) {
+                const rect = parentElement.getBoundingClientRect();
+                this.modelService.updatePosition(parentElement.id,
+                    parentElement.offsetLeft,
+                    parentElement.offsetTop,
+                    // title height
+                    rect.width, rect.height - 12);
+            }
+            this.resizeParent(parentElement, parentElement.parentNode);
+        }
+    }
+
+    private resizeParentLeft(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualLeft = element.getBoundingClientRect().left;
+        const actualParentLeft = parentElement.getBoundingClientRect().left;
+
+        if (actualLeft - this.padding < actualParentLeft) {
+            const width = actualParentLeft - actualLeft + this.padding;
+
+            this.translateElement(parentElement, -width, 0, width, 0);
+            this.translateChildren(parentElement, element, width, 0);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private resizeParentRight(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualLeft = element.getBoundingClientRect().left;
+        const actualRight = actualLeft + element.offsetWidth;
+
+        const actualParentLeft = parentElement.getBoundingClientRect().left;
+
+        if ((actualParentLeft + parentElement.offsetWidth) < actualRight + this.padding) {
+            this.setElementWidth(parentElement, actualRight + this.padding - actualParentLeft);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private resizeParentBottom(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualTop = element.getBoundingClientRect().top;
+        const actualBottom = actualTop + element.offsetHeight;
+
+        const actualParentTop = parentElement.getBoundingClientRect().top;
+        const actualParentBottom = actualParentTop + parentElement.offsetHeight;
+
+        if (actualParentBottom < actualBottom + this.padding) {
+            this.setElementHeight(parentElement, actualBottom + this.padding - actualParentTop);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private resizeParentTop(element: any, parentElement: any): boolean {
+        let resized = false;
+
+        const actualTop = element.getBoundingClientRect().top;
+        const actualParentTop = parentElement.getBoundingClientRect().top;
+
+        if (actualTop - this.padding < actualParentTop) {
+            const height = actualParentTop - actualTop + this.padding;
+
+            this.translateElement(parentElement, 0, -height, 0, height);
+            this.translateChildren(parentElement, element, 0, height);
+            resized = true;
+        }
+
+        return resized;
+    }
+
+    private translateElement(element, left: number, top: number, width: number, height: number) {
+        const offsetLeft = element.offsetLeft + left;
+        element.style.left = offsetLeft + 'px';
+
+        const offsetTop = element.offsetTop + top;
+        element.style.top = offsetTop + 'px';
+
+        const offsetWidth = element.offsetWidth + width;
+        element.style.width = offsetWidth + 'px';
+
+        const offsetHeight = element.offsetHeight + height;
+        element.style.height = offsetHeight + 'px';
+
+        if (element.classList.contains('node')) {
+            const node = this.modelService.getNodeMap().get(element.id);
+            this.jsplumbInstanceMap.get(node.parentId).revalidate(element.id);
+        }
+    }
+
+    private translateChildren(parentElment, excludeElement, left: number, top: number) {
+        const len = parentElment.children.length;
+        for (let i = 0; i < len; i++) {
+            const childElment = parentElment.children[i];
+            if (childElment.localName === 'b4t-node') {
+                this.translateElement(childElment.children[0], left, top, 0, 0);
+            }
+        }
+    }
+
+    private setElementHeight(element, height: number) {
+        element.style.height = height + 'px';
+    }
+
+    private setElementWidth(element, width: number) {
+        element.style.width = width + 'px';
+    }
+
+    private getActualPosition(element, offset: string) {
+        let actualPosition = element[offset];
+        let current = element.offsetParent;
+        while (current !== null) {
+            actualPosition += element[offset];
+            current = current.offsetParent;
+        }
+        return actualPosition;
+    }
+}