UNPKG

@syncfusion/ej2-diagrams

Version:

Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.

1,071 lines (1,070 loc) 402 kB
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; var __generator = (this && this.__generator) || function (thisArg, body) { var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; import { Connector, getBezierPoints, isEmptyVector } from '../objects/connector'; import { Node, BpmnSubEvent, Native, Container } from '../objects/node'; import { PathElement } from '../core/elements/path-element'; import { TextElement } from '../core/elements/text-element'; import { OrthogonalSegment } from '../objects/connector'; import { Rect } from '../primitives/rect'; import { Diagram } from '../../diagram/diagram'; import { identityMatrix, rotateMatrix, transformPointByMatrix, scaleMatrix } from './../primitives/matrix'; import { cloneObject as clone, cloneObject, getBounds, getFunction } from './../utility/base-util'; import { completeRegion, sort, findObjectIndex, intersect3, getAnnotationPosition, findParentInSwimlane, findPortIndex } from './../utility/diagram-util'; import { updatePathElement, cloneBlazorObject, getUserHandlePosition, cloneSelectedObjects } from './../utility/diagram-util'; import { randomId, cornersPointsBeforeRotation } from './../utility/base-util'; import { Selector } from '../objects/node'; import { hasSelection, isSelected, hasSingleConnection, contains } from './actions'; import { DiagramEvent, ConnectorConstraints, NodeConstraints, BezierSmoothness, FlipDirection } from '../enum/enum'; import { BlazorAction } from '../enum/enum'; import { canSelect, canMove, canRotate, canDragSourceEnd, canDragTargetEnd, canSingleSelect, canDrag } from './../utility/constraints-util'; import { canMultiSelect, canContinuousDraw, canInConnect, canOutConnect } from './../utility/constraints-util'; import { canPanX, canPanY, canPageEditable } from './../utility/constraints-util'; import { SnapConstraints, DiagramTools, DiagramAction, RealAction } from '../enum/enum'; import { getDiagramElement, getAdornerLayerSvg, getHTMLLayer, getAdornerLayer, getSelectorElement, setAttributeHtml } from '../utility/dom-util'; import { Point } from '../primitives/point'; import { Size } from '../primitives/size'; import { getObjectType, getPoint, intersect2, getOffsetOfConnector, canShowCorner } from './../utility/diagram-util'; import { selectionHasConnector } from './../utility/diagram-util'; import { Layer } from '../diagram/layer'; import { SelectorConstraints, DiagramConstraints } from '../enum/enum'; import { remove, isBlazor, isNullOrUndefined, initializeCSPTemplate } from '@syncfusion/ej2-base'; import { PolyLineDrawingTool } from './tool'; import { getOppositeDirection, getPortDirection, findAngle } from './../utility/connector'; import { swapBounds, findPoint, orthoConnection2Segment, getIntersection } from './../utility/connector'; import { ShapeAnnotation, PathAnnotation } from '../objects/annotation'; import { PathPort, Port } from '../objects/port'; import { renderContainerHelper } from './container-interaction'; import { checkChildNodeInContainer, checkParentAsContainer, addChildToContainer } from './container-interaction'; import { renderStackHighlighter } from './container-interaction'; import { getConnectors, updateConnectorsProperties, canLaneInterchange, findLane, checkSameLaneNodes, isParentNodeSelected } from './../utility/swim-lane-util'; import { swimLaneSelection, pasteSwimLane, gridSelection } from '../utility/swim-lane-util'; import { DiagramHtmlElement } from '../core/elements/html-element'; import { Overview } from '../../overview/overview'; import { addContainerChild, dropContainerChild, getChildrenBound, removeGElement, adjustContainerSize } from '../utility/container-util'; /** * Defines the behavior of commands */ var CommandHandler = /** @class */ (function () { function CommandHandler(diagram) { /** @private */ this.clipboardData = {}; // private newNodeObject: Object[] = []; // private newConnectorObject: Object[] = []; /** @private */ this.diagramObject = {}; /** @private */ this.newSelectedObjects = {}; /** @private */ this.oldSelectedObjects = {}; /** @private */ this.changedNodeZIndexes = {}; /** @private */ this.connectorsTable = []; /** @private */ this.PreventConnectorSplit = false; /** @private */ this.processTable = {}; /** @private */ this.containerChildTable = {}; /** @private */ this.isContainer = false; /** @private */ this.canUpdateTemplate = false; /** @private */ this.cloningInProgress = false; this.childTable = {}; this.objectStore = []; this.parentTable = {}; this.blazor = 'Blazor'; this.blazorInterop = 'sfBlazor'; this.cloneGroupChildCollection = []; this.diagram = diagram; } Object.defineProperty(CommandHandler.prototype, "snappingModule", { /** @private */ get: function () { return this.diagram.snappingModule; }, enumerable: true, configurable: true }); Object.defineProperty(CommandHandler.prototype, "layoutAnimateModule", { /** @private */ get: function () { return this.diagram.layoutAnimateModule; }, enumerable: true, configurable: true }); /** * startTransaction method\ * * @returns { void } startTransaction method .\ * @param {boolean} protectChange - provide the options value. * @private */ CommandHandler.prototype.startTransaction = function (protectChange) { this.state = { element: this.diagram.selectedItems, backup: null }; if (protectChange) { this.diagram.protectPropertyChange(true); } getAdornerLayer(this.diagram.element.id).style.pointerEvents = 'none'; }; /** * endTransaction method\ * * @returns { void } endTransaction method .\ * @param {boolean} protectChange - provide the options value. * @private */ CommandHandler.prototype.endTransaction = function (protectChange) { this.state = null; if (protectChange) { this.diagram.protectPropertyChange(false); } getAdornerLayer(this.diagram.element.id).style.pointerEvents = 'all'; }; /** * setFocus method\ * * @returns { void } setFocus method .\ * @private */ CommandHandler.prototype.setFocus = function () { document.getElementById(this.diagram.element.id).focus(); }; /** * showTooltip method\ * * @returns { void } showTooltip method .\ * @param {IElement} node - provide the options value. * @param {PointModel} position - provide the position value. * @param {string | HTMLElement} content - provide the content value. * @param {string} toolName - provide the toolName value. * @param {boolean} isTooltipVisible - provide the isTooltipVisible value. * @private */ CommandHandler.prototype.showTooltip = function (node, position, content, toolName, isTooltipVisible) { var _this = this; var targetId; var targetEle; var isNative = false; if (node instanceof Selector) { if ((node.nodes.length === 1) && node.connectors.length === 0) { targetId = node.nodes[0].id; if (node.nodes[0].shape && node.nodes[0].shape instanceof Native) { isNative = true; } } else if ((node.nodes.length === 0) && node.connectors.length === 1) { targetId = node.connectors[0].id; } else { targetEle = document.getElementById(this.diagram.element.id + '_SelectorElement'); } } else if (node instanceof Node) { targetId = node.id; if (node.shape && (node.shape instanceof Native)) { isNative = true; } } else { targetId = node.id; } if (isNullOrUndefined(targetEle) && !isNullOrUndefined(targetId)) { var idName = isNative ? '_content_native_element' : '_groupElement'; targetEle = document.getElementById(targetId + idName); } if (isTooltipVisible) { this.diagram.tooltipObject.position = 'BottomCenter'; this.diagram.tooltipObject.animation = { open: { delay: 0, duration: 0 } }; this.diagram.tooltipObject.openDelay = 0; this.diagram.tooltipObject.closeDelay = 0; } if (this.diagram.selectedItems.setTooltipTemplate) { var template = void 0; var setTooltipTemplate = getFunction(this.diagram.selectedItems.setTooltipTemplate); if (setTooltipTemplate) { template = setTooltipTemplate(node, this.diagram); } if (template instanceof HTMLElement) { content = template.cloneNode(true); } else { content = template ? template : content; } } //840454- support to provide isSticky property for tooltip in diagram control this.diagram.tooltipObject.isSticky = false; if (node.tooltip) { this.diagram.tooltipObject.openOn = node.tooltip.openOn; } // Task 834121: Content-Security-Policy support for diagram if (typeof content === 'string') { this.diagram.tooltipObject.content = initializeCSPTemplate(function () { return content; }); } else { this.diagram.tooltipObject.content = content; } this.diagram.tooltipObject.offsetX = 0; this.diagram.tooltipObject.offsetY = 0; this.diagram.tooltipObject.refresh(targetEle); if (isTooltipVisible) { setTimeout(function () { _this.diagram.tooltipObject.open(targetEle); }, 1); } }; /** * Split the connector, when the node is dropped onto it and establish connection with that dropped node. * * @returns { void } connectorSplit method .\ * @param {NodeModel} droppedObject - Provide the dropped node id * @param {ConnectorModel} targetConnector - Provide the connector id * @private */ CommandHandler.prototype.connectorSplit = function (droppedObject, targetConnector) { var droppedNodeId = droppedObject.id; var existingConnector = cloneObject(targetConnector); var connectorIndex = this.diagram.connectors.indexOf(targetConnector); var nodeIndex = this.diagram.nodes.indexOf(droppedObject); var droppedNode = cloneObject(droppedObject); var connectorOldChanges = {}; var nodeOldChanges = {}; var nodeOldProperty = { offsetX: droppedNode.offsetX, offsetY: droppedNode.offsetY }; var connectorOldProperty = { sourceID: existingConnector.sourceID, sourcePoint: existingConnector.sourcePoint, sourcePortID: existingConnector.sourcePortID, targetID: existingConnector.targetID, targetPoint: existingConnector.targetPoint, targetPortID: existingConnector.targetPortID }; connectorOldChanges[parseInt(connectorIndex.toString(), 10)] = connectorOldProperty; nodeOldChanges[parseInt(nodeIndex.toString(), 10)] = nodeOldProperty; var connectorNewChanges = {}; var nodeNewChanges = {}; var nodeNewProperty = {}; var connectorNewProperty = {}; //Split the connector based on the dropped node if (existingConnector.sourceID !== '' && existingConnector.targetID !== '') { connectorNewProperty.targetID = this.ConnectorTargetChange(targetConnector, droppedNodeId); } else if (existingConnector.sourceID !== '' && existingConnector.targetID === '') { this.nodeOffsetChange(nodeNewProperty, droppedNode, targetConnector.targetPoint); connectorNewProperty.targetID = this.ConnectorTargetChange(targetConnector, droppedNodeId); } else if ((existingConnector.sourceID === '' && existingConnector.targetID === '') || (existingConnector.sourceID === '' && existingConnector.targetID !== '')) { this.nodeOffsetChange(nodeNewProperty, droppedNode, targetConnector.sourcePoint); connectorNewProperty.sourceID = this.ConnectorSourceChange(targetConnector, droppedNodeId); } connectorNewChanges[parseInt(connectorIndex.toString(), 10)] = connectorNewProperty; nodeNewChanges[parseInt(nodeIndex.toString(), 10)] = nodeNewProperty; this.diagram.nodePropertyChange(droppedObject, nodeOldProperty, nodeNewProperty); this.diagram.updateSelector(); this.diagram.connectorPropertyChange(targetConnector, connectorOldProperty, connectorNewProperty); //Check Whether the connector connects with the node if (existingConnector.sourceID !== '' && existingConnector.targetID !== '') { var newConnector = { id: 'connector ' + droppedNodeId, constraints: ConnectorConstraints.Default | ConnectorConstraints.AllowDrop, sourceID: droppedNodeId }; // 28029: Update new connectors source and target end type and styles newConnector.type = existingConnector.type; newConnector.style = existingConnector.style; newConnector.sourceDecorator = existingConnector.sourceDecorator; newConnector.targetDecorator = existingConnector.targetDecorator; newConnector.targetID = existingConnector.targetID; //Check whether the connector connects with the ports if (existingConnector.targetPortID !== '') { newConnector.targetPortID = existingConnector.targetPortID; } this.diagram.add(newConnector); } var entry = { type: 'PropertyChanged', redoObject: { nodes: nodeNewChanges }, undoObject: { nodes: nodeOldChanges }, category: 'Internal' }; this.diagram.addHistoryEntry(entry); var entry1 = { type: 'PropertyChanged', redoObject: { connectors: connectorNewChanges }, undoObject: { connectors: connectorOldChanges }, category: 'Internal' }; this.diagram.addHistoryEntry(entry1); }; CommandHandler.prototype.nodeOffsetChange = function (propertyChangeArg, node, nodeNewOffset) { propertyChangeArg.offsetX = node.offsetX = nodeNewOffset.x; propertyChangeArg.offsetY = node.offsetY = nodeNewOffset.y; }; CommandHandler.prototype.ConnectorTargetChange = function (connector, newTarget) { connector.targetID = newTarget; return newTarget; }; CommandHandler.prototype.ConnectorSourceChange = function (connector, newTarget) { connector.sourceID = newTarget; return newTarget; }; /** * closeTooltip method\ * * @returns { void } closeTooltip method .\ * @private */ CommandHandler.prototype.closeTooltip = function () { this.diagram.tooltipObject.close(); }; /** * canEnableDefaultTooltip method\ * * @returns { boolean } canEnableDefaultTooltip method .\ * @private */ CommandHandler.prototype.canEnableDefaultTooltip = function () { if (this.diagram.selectedItems.constraints & SelectorConstraints.ToolTip) { return true; } else { return false; } }; /** * updateSelector method\ * * @returns { void } updateSelector method .\ * @private */ CommandHandler.prototype.updateSelector = function () { this.diagram.updateSelector(); }; // /** // * updateConnectorValue method\ // * // * @returns { void } updateConnectorValue method .\ // * @param {IBlazorConnectionChangeEventArgs} args - provide the options value. // * @private // */ // public updateConnectorValue(args: IBlazorConnectionChangeEventArgs): void { // //remove Blazor code // } /** * triggerEvent method\ * * @returns { Promise<void | object | IBlazorConnectionChangeEventArgs> } triggerEvent method .\ * @param {DiagramEvent} event - provide the options value. * @param {Object} args - provide the args value. * @private */ CommandHandler.prototype.triggerEvent = function (event, args) { return __awaiter(this, void 0, void 0, function () { var temparg; return __generator(this, function (_a) { switch (_a.label) { case 0: if (!(event === DiagramEvent.drop || event === DiagramEvent.positionChange || event === DiagramEvent.connectionChange)) return [3 /*break*/, 3]; if (this.diagram.currentSymbol) { return [2 /*return*/]; } if (event === DiagramEvent.drop) { args.source = cloneBlazorObject(this.diagram); } if (!(this.diagram.currentDrawingObject instanceof Connector && event !== DiagramEvent.positionChange)) return [3 /*break*/, 2]; return [4 /*yield*/, this.diagram.triggerEvent(event, args)]; case 1: return [2 /*return*/, _a.sent()]; case 2: if (this.diagram.currentDrawingObject && event !== DiagramEvent.positionChange) { return [2 /*return*/]; } _a.label = 3; case 3: return [4 /*yield*/, this.diagram.triggerEvent(event, args)]; case 4: temparg = _a.sent(); return [2 /*return*/, temparg]; } }); }); }; /** * dragOverElement method\ * * @returns { void } dragOverElement method .\ * @param {MouseEventArgs} args - provide the options value. * @param {PointModel} currentPosition - provide the args value. * @private */ CommandHandler.prototype.dragOverElement = function (args, currentPosition) { if (this.diagram.currentSymbol) { var dragOverArg = { element: cloneBlazorObject(args.source), target: cloneBlazorObject(args.target), mousePosition: cloneBlazorObject(currentPosition), diagram: cloneBlazorObject(this.diagram) }; this.triggerEvent(DiagramEvent.dragOver, dragOverArg); } }; /** * disConnect method\ * * @returns { IConnectionChangeEventArgs | IBlazorConnectionChangeEventArgs } disConnect method .\ * @param {IElement} obj - provide the obj value. * @param {string} endPoint - provide the endPoint value. * @param {boolean} canCancel - provide the canCancel value. * @private */ CommandHandler.prototype.disConnect = function (obj, endPoint, canCancel) { var oldChanges = {}; var newChanges = {}; var returnargs; var selectorModel; var connector; if (obj instanceof Selector) { selectorModel = obj; connector = selectorModel.connectors[0]; } else if (obj instanceof Connector && this.diagram.currentDrawingObject) { connector = this.diagram.currentDrawingObject; } if (obj && connector && (hasSingleConnection(this.diagram) || this.diagram.currentDrawingObject)) { if (endPoint && (endPoint === 'ConnectorSourceEnd' || endPoint === 'ConnectorTargetEnd')) { var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID'; var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID'; if (connector["" + nodeEndId]) { //connector.sourceID || connector.targetID oldChanges["" + nodeEndId] = connector["" + nodeEndId]; connector["" + nodeEndId] = ''; newChanges["" + nodeEndId] = connector["" + nodeEndId]; if (connector.sourcePortID || connector.targetPortID) { oldChanges["" + portEndId] = connector["" + portEndId]; connector["" + portEndId] = ''; newChanges["" + portEndId] = connector["" + portEndId]; } returnargs = this.connectionEventChange(connector, oldChanges, newChanges, endPoint, canCancel); } } else if ((endPoint !== 'OrthoThumb' && endPoint !== 'SegmentEnd') && (connector.sourceID || connector.targetID)) { oldChanges = { sourceID: connector.sourceID, sourcePortID: connector.sourcePortID, targetID: connector.targetID, targetPortID: connector.targetPortID }; connector.sourceID = ''; connector.sourcePortID = ''; connector.targetID = ''; connector.targetPortID = ''; newChanges = { sourceID: connector.sourceID, sourcePortID: connector.sourcePortID, targetID: connector.targetID, targetPortID: connector.targetPortID }; var arg = { connector: cloneBlazorObject(connector), oldValue: oldChanges, newValue: newChanges, cancel: false, state: 'Changing', connectorEnd: endPoint }; this.triggerEvent(DiagramEvent.connectionChange, arg); if (arg.cancel) { connector.sourceID = oldChanges.sourceID; connector.sourcePortID = oldChanges.sourcePortID; connector.targetID = oldChanges.targetID; connector.targetPortID = oldChanges.targetPortID; } else { this.diagram.connectorPropertyChange(connector, oldChanges, newChanges); this.diagram.updateDiagramObject(connector); arg = { connector: connector, oldValue: oldChanges, newValue: newChanges, cancel: false, state: 'Changed', connectorEnd: endPoint }; this.triggerEvent(DiagramEvent.connectionChange, arg); } } } return returnargs; }; CommandHandler.prototype.connectionEventChange = function (connector, oldChanges, newChanges, endPoint, canCancel) { var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID'; var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID'; var connectedNode; if (this.enableCloneObject) { connectedNode = this.diagram.nameTable[newChanges["" + nodeEndId]]; var nodeObject = cloneObject(connectedNode); this.diagram.insertValue(nodeObject, true); } var returnargs; var arg = { cancel: false, state: 'Changing', connectorEnd: endPoint, connector: cloneBlazorObject(connector), oldValue: { nodeId: oldChanges["" + nodeEndId], portId: oldChanges["" + portEndId] }, newValue: { nodeId: newChanges["" + nodeEndId], portId: newChanges["" + portEndId] } }; this.triggerEvent(DiagramEvent.connectionChange, arg); if (arg.cancel) { connector["" + nodeEndId] = oldChanges["" + nodeEndId]; connector["" + portEndId] = oldChanges["" + portEndId]; newChanges = oldChanges; } this.diagram.connectorPropertyChange(connector, oldChanges, newChanges); this.diagram.updateDiagramObject(connector); arg = { connector: cloneBlazorObject(connector), oldValue: { nodeId: oldChanges["" + nodeEndId], portId: oldChanges["" + portEndId] }, newValue: { nodeId: newChanges["" + nodeEndId], portId: newChanges["" + portEndId] }, cancel: false, state: 'Changing', connectorEnd: endPoint }; if (this.enableCloneObject) { if (connectedNode === undefined) { connectedNode = this.diagram.nameTable[oldChanges["" + nodeEndId]]; var nodeObject = cloneObject(connectedNode); this.diagram.insertValue(nodeObject, true); } } if (this.diagram.bpmnModule) { if (connector.isBpmnAnnotationConnector) { var textAnnotationNode = this.diagram.nameTable[connector.targetID]; textAnnotationNode.shape.textAnnotation.textAnnotationTarget = connector.sourceID; } } return returnargs; }; // /** // * insertBlazorObject method\ // * // * @returns { void } insertBlazorObject method .\ // * @param {IElement} object - provide the object value. // * @param {boolean} isNode - provide the isNode value. // * @private // */ // public insertBlazorObject(object: SelectorModel | Node | Connector, isNode?: boolean): void { // } // /** // * updatePropertiesToBlazor method\ // * // * @returns { void } updatePropertiesToBlazor method .\ // * @param {MouseEventArgs} args - provide the args value. // * @param {PointModel} labelDrag - provide the labelDrag value. // * @private // */ // public updatePropertiesToBlazor(args: MouseEventArgs, labelDrag: boolean): void { // this.enableCloneObject(false); // this.ismouseEvents(false); // // this.getBlazorOldValues(args, labelDrag); // // this.updateBlazorSelector(); // } // /** // * insertSelectedObjects method\ // * // * @returns { void } insertSelectedObjects method .\ // * @private // */ // public insertSelectedObjects(): void { // // this.oldSelectedObjects = cloneSelectedObjects(this.diagram); // } /** * findTarget method\ * * @returns { NodeModel | PointPortModel | ShapeAnnotationModel | PathAnnotationModel } findTarget method .\ * @param {DiagramElement} element - provide the element value. * @param {IElement} argsTarget - provide the argsTarget value. * @param {boolean} source - provide the source value. * @param {boolean} connection - provide the connection value. * @private */ CommandHandler.prototype.findTarget = function (element, argsTarget, source, connection) { var target; if (argsTarget instanceof Node) { if (element && element.id === argsTarget.id + '_content') { return argsTarget; } if (source && argsTarget.shape.type === 'Bpmn' && ((!isBlazor() && argsTarget.shape.shape === 'Activity'))) { if (argsTarget.shape.activity.subProcess.type === 'Transaction') { var transaction = argsTarget.shape.activity.subProcess.transaction; if (transaction.success.visible && element.id.indexOf(argsTarget.id + '_success') === 0) { return transaction.success; } if (transaction.cancel.visible && element.id.indexOf(argsTarget.id + '_cancel') === 0) { return transaction.cancel; } if (transaction.failure.visible && element.id.indexOf(argsTarget.id + '_failure') === 0) { return transaction.failure; } } } if (element instanceof PathElement || element instanceof DiagramHtmlElement) { var nodePort = this.findMatch(argsTarget.ports, argsTarget.id, element.id); if (nodePort) { return nodePort; } var nodeFixedUserHandle = this.findMatch(argsTarget.fixedUserHandles, argsTarget.id, element.id); if (nodeFixedUserHandle) { return nodeFixedUserHandle; } } } // Feature 826644: Support to add ports to the connector. // Added below condition to find the target connector port. if (argsTarget instanceof Connector) { if (element && element.id === argsTarget.id + '_path') { return argsTarget; } if (element instanceof PathElement || element instanceof DiagramHtmlElement) { var connectorPort = this.findMatch(argsTarget.ports, argsTarget.id, element.id); if (connectorPort) { return connectorPort; } var connectorFixedUserHandle = this.findMatch(argsTarget.fixedUserHandles, argsTarget.id, element.id); if (connectorFixedUserHandle) { return connectorFixedUserHandle; } } } if (!connection) { var annotation = void 0; for (var i = 0; i < argsTarget.annotations.length; i++) { annotation = argsTarget.annotations[parseInt(i.toString(), 10)]; if (element.id === argsTarget.id + '_' + annotation.id) { return annotation; } } } return argsTarget; }; CommandHandler.prototype.findMatch = function (items, targetID, elementID) { for (var i = 0; i < items.length; i++) { var item = items[parseInt(i.toString(), 10)]; if (elementID === targetID + '_' + item.id || elementID === targetID + '_' + item.id + '_shape') { return item; } } }; /** * canDisconnect method\ * * @returns { boolean } canDisconnect method .\ * @param {string} endPoint - provide the endPoint value. * @param {MouseEventArgs} args - provide the args value. * @param {string} targetPortId - provide the targetPortId value. * @param {string} targetNodeId - provide the targetNodeId value. * @private */ CommandHandler.prototype.canDisconnect = function (endPoint, args, targetPortId, targetNodeId) { var selector; var connect; if (args.source instanceof Selector) { selector = args.source; connect = selector.connectors[0]; } else if (args.source instanceof Connector && this.diagram.currentDrawingObject) { connect = this.diagram.currentDrawingObject; } var targetObject = this.findTarget(args.targetWrapper, args.target, endPoint === 'ConnectorSourceEnd', true); var nodeEnd = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID'; var portEnd = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID'; if (connect["" + nodeEnd] !== targetNodeId || connect["" + portEnd] !== targetPortId) { return true; } return false; }; /* tslint:disable */ /** * connect method\ * * @returns { IConnectionChangeEventArgs | IBlazorConnectionChangeEventArgs } connect method .\ * @param {string} endPoint - provide the endPoint value. * @param {MouseEventArgs} args - provide the args value. * @param {boolean} canCancel - provide the canCancel value. * @private */ CommandHandler.prototype.connect = function (endPoint, args, canCancel) { var checkBlazor; var newChanges = {}; var oldChanges = {}; var oldNodeId; var oldPortId; var selectorModel; var connector; var returnargs; if (args.source instanceof Selector) { selectorModel = args.source; connector = selectorModel.connectors[0]; } else if (args.source instanceof Connector && this.diagram.currentDrawingObject) { connector = this.diagram.currentDrawingObject; } // 962382: Drawing polyLine from port and node else if (this.diagram.eventHandler.tool && this.diagram.eventHandler.tool instanceof PolyLineDrawingTool && this.diagram.eventHandler.tool.drawingObject) { connector = this.diagram.eventHandler.tool.drawingObject; } var target = this.findTarget((args.targetWrapper || args.sourceWrapper), (args.target || args.actualObject), endPoint === 'ConnectorSourceEnd', true); var nodeEndId = endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID'; var portEndId = endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID'; if (target instanceof Node) { oldChanges["" + nodeEndId] = connector["" + nodeEndId]; connector["" + nodeEndId] = target.id; newChanges["" + nodeEndId] = connector["" + nodeEndId]; oldChanges["" + portEndId] = connector["" + portEndId]; returnargs = this.connectionEventChange(connector, oldChanges, newChanges, endPoint, canCancel); } else if (target instanceof Port || target instanceof BpmnSubEvent) { oldNodeId = connector["" + nodeEndId]; oldPortId = connector["" + portEndId]; connector["" + portEndId] = target.id; connector["" + nodeEndId] = (args.target && args.target.id || args.actualObject.id); newChanges["" + nodeEndId] = connector["" + nodeEndId]; newChanges["" + portEndId] = connector["" + portEndId]; var arg = { connector: cloneBlazorObject(connector), oldValue: { nodeId: oldNodeId, portId: oldPortId }, newValue: { nodeId: newChanges["" + nodeEndId], portId: newChanges["" + portEndId] }, cancel: false, state: 'Changing', connectorEnd: endPoint }; if (!checkBlazor) { this.triggerEvent(DiagramEvent.connectionChange, arg); } if (arg.cancel) { connector["" + nodeEndId] = oldNodeId; connector["" + portEndId] = oldPortId; newChanges["" + nodeEndId] = oldNodeId; newChanges["" + portEndId] = oldPortId; } else { this.diagram.connectorPropertyChange(connector, oldChanges, newChanges); this.diagram.updateDiagramObject(connector); arg = { connector: cloneBlazorObject(connector), oldValue: { nodeId: oldNodeId, portId: oldPortId }, newValue: { nodeId: newChanges["" + nodeEndId], portId: newChanges["" + portEndId] }, cancel: false, state: 'Changing', connectorEnd: endPoint }; } } this.renderHighlighter(args, undefined, endPoint === 'ConnectorSourceEnd'); return returnargs; }; /* tslint:enable */ /** @private */ /** * cut method\ * * @returns { void } cut method .\ * @private */ CommandHandler.prototype.cut = function () { var index; this.clipboardData.pasteIndex = 0; if (this.diagram.undoRedoModule) { this.diagram.historyManager.startGroupAction(); } this.clipboardData.clipObject = this.copyObjects(); if (this.diagram.undoRedoModule) { this.diagram.historyManager.endGroupAction(); } if (this.diagram.mode !== 'SVG') { this.diagram.refreshDiagramLayer(); } }; // private UpdateBlazorDiagramModelLayers(layer: Layer, isRemove: boolean): void { // comment blazor code // } /** * addLayer method\ * * @returns { void } addLayer method .\ * @param {LayerModel} layer - provide the endPoint value. * @param {Object[]} objects - provide the args value. * @param {boolean} isServerUpdate - provide the canCancel value. * @private */ CommandHandler.prototype.addLayer = function (layer, objects, isServerUpdate) { if (isServerUpdate === void 0) { isServerUpdate = true; } layer.id = layer.id || randomId(); layer.zIndex = this.diagram.layers.length; var isEnableServerDatabind = this.diagram.allowServerDataBinding; this.diagram.enableServerDataBinding(false); layer = new Layer(this.diagram, 'layers', layer, true); this.diagram.enableServerDataBinding(isEnableServerDatabind); layer.objectZIndex = -1; layer.zIndexTable = {}; this.diagram.layers.push(layer); // if (isServerUpdate) { // this.UpdateBlazorDiagramModelLayers(layer as Layer, false); // } this.diagram.layerZIndexTable[layer.zIndex] = layer.id; this.diagram.activeLayer = layer; var layers = layer.objects; if (objects) { for (var i = 0; i < objects.length; i++) { this.diagram.add(objects[parseInt(i.toString(), 10)]); } } }; /** * getObjectLayer method\ * * @returns { LayerModel } getObjectLayer method .\ * @param {string} objectName - provide the endPoint value. * @private */ CommandHandler.prototype.getObjectLayer = function (objectName) { var layers = this.diagram.layers; if (layers.length > 1) { for (var i = 0; i < layers.length; i++) { var objIndex = layers[parseInt(i.toString(), 10)].objects.indexOf(objectName); if (objIndex > -1) { return layers[parseInt(i.toString(), 10)]; } } } return this.diagram.activeLayer; }; /** * getLayer method\ * * @returns { LayerModel } getLayer method .\ * @param {string} layerName - provide the endPoint value. * @private */ CommandHandler.prototype.getLayer = function (layerName) { var layers = this.diagram.layers; for (var i = 0; i < layers.length; i++) { if (layers[parseInt(i.toString(), 10)].id === layerName) { return layers[parseInt(i.toString(), 10)]; } } return undefined; }; /** * removeLayer method\ * * @returns { void } removeLayer method .\ * @param {string} layerId - provide the endPoint value. * @param {boolean} isServerUpdate - provide the endPoint value. * @private */ CommandHandler.prototype.removeLayer = function (layerId, isServerUpdate) { if (isServerUpdate === void 0) { isServerUpdate = true; } var layers = this.getLayer(layerId); if (layers) { var index = this.diagram.layers.indexOf(layers); var layerObject = layers.objects; for (var i = layerObject.length - 1; i >= 0; i--) { this.diagram.unSelect(this.diagram.nameTable[layerObject[parseInt(i.toString(), 10)]]); this.diagram.remove(this.diagram.nameTable[layerObject[parseInt(i.toString(), 10)]]); if (layers.id !== 'default_layer') { if (this.diagram.activeLayer.id === layerId) { this.diagram.activeLayer = this.diagram.layers[this.diagram.layers.length - 1]; } } } // if (isServerUpdate) { // this.UpdateBlazorDiagramModelLayers(this.diagram.layers[parseInt(index.toString(), 10)] as Layer, true); // } delete this.diagram.layerZIndexTable[layers.zIndex]; this.diagram.layers.splice(index, 1); if (this.diagram.mode !== 'SVG') { this.diagram.refreshDiagramLayer(); } } }; /** * moveObjects method\ * * @returns { void } moveObjects method .\ * @param {string[]]} objects - provide the objects value. * @param {string} targetLayer - provide the targetLayer value. * @private */ CommandHandler.prototype.moveObjects = function (objects, targetLayer) { this.diagram.startGroupAction(); var connectorObjectsDetails = {}; var childNodes = []; for (var i = 0; i < objects.length; i++) { var obj = this.diagram.nameTable[objects[parseInt(i.toString(), 10)]]; if (obj instanceof Node) { var detail = { inEdges: obj.inEdges, outEdges: obj.outEdges }; connectorObjectsDetails["" + obj.id] = cloneObject(detail); } else if (obj instanceof Connector) { var detail = { sourceID: obj.sourceID, targetID: obj.targetID, sourcePortID: obj.sourcePortID, targetPortID: obj.targetPortID }; connectorObjectsDetails["" + obj.id] = cloneObject(detail); } } var layer = this.getLayer(targetLayer) || this.diagram.activeLayer; this.diagram.setActiveLayer(layer.id); var targerNodes; for (var _i = 0, objects_1 = objects; _i < objects_1.length; _i++) { var i = objects_1[_i]; var layer_1 = this.getObjectLayer(i); var index = layer_1.objects.indexOf(i); if (index > -1) { targerNodes = this.diagram.nameTable["" + i]; childNodes = []; if (targerNodes.children) { for (var _a = 0, _b = targerNodes.children; _a < _b.length; _a++) { var node = _b[_a]; childNodes.push(this.diagram.nameTable["" + node]); } } this.diagram.unSelect(targerNodes); //875087 - Restrict removing dependent connectors when moveing between layers this.diagram.deleteDependentConnector = false; this.diagram.remove(this.diagram.nameTable["" + i]); this.diagram.deleteDependentConnector = true; if (childNodes.length > 0) { var addedObj = void 0; for (var _c = 0, childNodes_1 = childNodes; _c < childNodes_1.length; _c++) { var node = childNodes_1[_c]; addedObj = this.diagram.add(node); this.setConnectorDetails(addedObj || node, connectorObjectsDetails); targerNodes.children.push(addedObj.id); } addedObj = this.diagram.add(targerNodes); this.setConnectorDetails(addedObj || targerNodes, connectorObjectsDetails); } else { var addedObj = this.diagram.add(targerNodes); this.setConnectorDetails(addedObj || targerNodes, connectorObjectsDetails); } if (targerNodes.parentId) { var parentId = targerNodes.parentId; var group = this.diagram.nameTable["" + parentId]; this.diagram.addChildToGroup(group, targerNodes.id); } } } this.diagram.endGroupAction(); }; CommandHandler.prototype.setConnectorDetails = function (obj, connectorObjectsDetails) { var details = connectorObjectsDetails[obj.id]; if (obj instanceof Node) { if (details) { if (details.inEdges && details.inEdges.length > 0) { for (var i = 0; i < details.inEdges.length; i++) { var con = this.diagram.nameTable[details.inEdges[parseInt(i.toString(), 10)]]; con.targetID = obj.id; } } if (details.outEdges && details.outEdges.length > 0) { for (var i = 0; i < details.outEdges.length; i++) { var con = this.diagram.nameTable[details.outEdges[parseInt(i.toString(), 10)]]; con.sourceID = obj.id; } } } } else if (obj instanceof Connector) { if (details) { obj.sourceID = details.sourceID; obj.targetID = details.targetID; obj.sourcePortID = details.sourcePortID; obj.targetPortID = details.targetPortID; } } }; /** * cloneLayer method\ * * @returns { void } cloneLayer method .\ * @param {string[]} layerName - provide the objects value. * @private */ CommandHandler.prototype.cloneLayer = function (layerName) { var layers = this.diagram.layers; var layer = this.getLayer(layerName); if (layer) { var cloneObject_1 = []; var newlayer = { id: layerName + '_' + randomId(), objects: [], visible: true, lock: false }; this.addLayer(newlayer, null, true); newlayer.zIndex = this.diagram.layers.length - 1; var multiSelect = cloneObject_1.length !== 1; for (var _i = 0, _a = layer.objects; _i < _a.length; _i++) { var obj = _a[_i]; cloneObject_1.push(this.diagram.nameTable["" + obj]); } this.paste(cloneObject_1); } }; /** * copy method\ * * @returns { void } copy method .\ * @private */ CommandHandler.prototype.copy = function () { this.clipboardData.pasteIndex = 1; this.clipboardData.clipObject = this.copyObjects(); return this.clipboardData.clipObject; }; /** * copyObjects method\ * * @returns { Object[] } copyObjects method .\ * @private */ CommandHandler.prototype.copyObjects = function () { var selectedItems = []; var obj = []; this.clipboardData.childTable = {}; var laneCollection = {}; if (this.diagram.selectedItems.connectors.length > 0) { //908602 - Issue in Cut connectors selectedItems = selectedItems.concat(this.diagram.selectedItems.connectors); for (var j = 0; j < selectedItems.length; j++) { var element = void 0; //To copy text annotation node while copying the text annotation connector. if (this.diagram.bpmnModule && selectedItems[parseInt(j.toString(), 10)].isBpmnAnnotationConnector) { element = cloneObject((this.diagram.nameTable[selectedItems[parseInt(j.toString(), 10)].targetID])); } else { element = cloneObject((selectedItems[parseInt(j.toString(), 10)])); } obj.push(element); } } if (this.diagram.selectedItems.nodes.length > 0) { selectedItems = selectedItems.concat(this.diagram.selectedItems.nodes); var _loop_1 = function (j) { if (!this_1.diagram.selectedItems.nodes[parseInt(j.toString(), 10)].isPhase) { //958739 - Cut paste multi-selected lane throws exception var laneParentId_1; this_1.diagram.selectedItems.nodes.forEach(function (node) {