diff options
author | Lvbo163 <lv.bo163@zte.com.cn> | 2018-01-12 10:47:38 +0800 |
---|---|---|
committer | Lvbo163 <lv.bo163@zte.com.cn> | 2018-01-12 10:47:38 +0800 |
commit | 22050d0684629bf50dedd9eda20242c6aae62337 (patch) | |
tree | e1eba9724cd9e81905dcb7b5f811914a5ff9c010 /sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts | |
parent | f093dcdbc4012a64c11a293052afbc74d84c8c5a (diff) |
change file encoding
change pc to unix
Issue-ID: SDC-910
Change-Id: I3fde01a1b8c8daa4ea34622f369fb2e04b59b47f
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
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.ts | 1135 |
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; + } +} |