aboutsummaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts')
-rw-r--r--sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts1135
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;
+ }
+}