@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.
958 lines • 148 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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 { Node } from '../objects/node';
import { Connector, BezierSegment, StraightSegment } from '../objects/connector';
import { Point } from '../primitives/point';
import { BpmnSubEvent } from '../objects/node';
import { PathPort, PointPort } from '../objects/port';
import { rotatePoint, cloneObject, randomId, getBounds } from '../utility/base-util';
import { Rect } from '../primitives/rect';
import { getFreeHandPath, getPolygonPath } from '../utility/path-util';
import { canOutConnect, canInConnect, canAllowDrop, canPortInConnect, canPortOutConnect } from '../utility/constraints-util';
import { transformPointByMatrix, rotateMatrix, identityMatrix } from '../primitives/matrix';
import { NodeConstraints, DiagramEvent, PortConstraints, DiagramConstraints, DiagramAction, FlipDirection } from './../enum/enum';
import { TextElement } from '../core/elements/text-element';
import { PathElement } from '../core/elements/path-element';
import { contains } from './actions';
import { Selector } from '../objects/node';
import { getInOutConnectPorts, cloneBlazorObject, checkPort } from '../utility/diagram-util';
import { initializeCSPTemplate, isBlazor } from '@syncfusion/ej2-base';
import { findAngle } from '../utility/connector';
import { updateLaneBoundsWithSelector } from './container-interaction';
/**
* Defines the interactive tools
*/
var ToolBase = /** @class */ (function () {
/**
* Initializes the tool
*
* @param {CommandHandler} command Command that is corresponding to the current action
* @param protectChange
*/
function ToolBase(command, protectChange) {
if (protectChange === void 0) { protectChange = false; }
/**
* Command that is corresponding to the current action
*/
this.commandHandler = null;
// protected deepDiffer: DeepDiffMapper = new DeepDiffMapper();
/**
* Sets/Gets whether the interaction is being done
*/
this.inAction = false;
/**
* Sets/Gets the protect change
*/
this.isProtectChange = false;
/**
* Sets/Gets the current element that is under mouse
*/
this.currentElement = null;
/** @private */
this.blocked = false;
this.isTooltipVisible = false;
/** @private */
this.childTable = {};
/**
* Sets/Gets the previous object when mouse down
*/
this.undoElement = { nodes: [], connectors: [] };
this.checkProperty = true;
this.undoParentElement = { nodes: [], connectors: [] };
this.undoContainerElement = { nodes: [], connectors: [] };
this.commandHandler = command;
this.isProtectChange = protectChange;
}
ToolBase.prototype.startAction = function (currentElement) {
this.currentElement = currentElement;
this.inAction = true;
};
/**
* @param args
* @private
*/
ToolBase.prototype.mouseDown = function (args) {
this.currentElement = args.source;
this.startPosition = this.currentPosition = this.prevPosition = args.position;
this.isTooltipVisible = true;
this.startAction(args.source);
this.checkProperty = true;
// Bug fix - EJ2-44495 -Node does not gets selected on slight movement of mouse when drag constraints disabled for node
this.mouseDownElement = args.source;
};
ToolBase.prototype.checkPropertyValue = function () {
if (this.checkProperty) {
this.commandHandler.startTransaction(this.isProtectChange);
}
};
/**
* @param args
* @private
*/
ToolBase.prototype.mouseMove = function (args) {
this.currentPosition = args.position;
if (this.inAction) {
this.commandHandler.startTransaction(this.isProtectChange);
this.checkProperty = false;
}
//this.currentElement = currentElement;
return !this.blocked;
};
/**
* @param args
* @private
*/
ToolBase.prototype.mouseUp = function (args) {
this.checkPropertyValue();
this.currentPosition = args.position;
// this.currentElement = currentElement;
this.isTooltipVisible = false;
this.commandHandler.endTransaction(this.isProtectChange);
this.endAction();
// Bug fix - EJ2-44495 -Node does not gets selected on slight movement of mouse when drag constraints disabled for node
this.mouseDownElement = null;
};
ToolBase.prototype.endAction = function () {
if (!this.isTooltipVisible) {
this.commandHandler.closeTooltip();
}
this.commandHandler = null;
this.currentElement = null;
this.currentPosition = null;
this.inAction = false;
this.blocked = false;
};
/**
* @param args
* @private
*/
ToolBase.prototype.mouseWheel = function (args) {
this.currentPosition = args.position;
};
/**
* @param args
* @private
*/
ToolBase.prototype.mouseLeave = function (args) {
this.mouseUp(args);
};
ToolBase.prototype.updateSize = function (shape, startPoint, endPoint, corner, initialBounds, angle) {
shape = this.commandHandler.renderContainerHelper(shape) || shape;
var horizontalsnap = { snapped: false, offset: 0, left: false, right: false };
var verticalsnap = { snapped: false, offset: 0, top: false, bottom: false };
var difx = this.currentPosition.x - this.startPosition.x;
var dify = this.currentPosition.y - this.startPosition.y;
var snapEnabled = (!(shape instanceof TextElement)) && this.commandHandler.snappingModule
&& this.commandHandler.snappingModule.canSnap();
var snapLine = snapEnabled ? this.commandHandler.snappingModule.getLayer() : null;
var rotateAngle = (shape instanceof TextElement) ? angle : shape.rotateAngle;
var matrix;
matrix = identityMatrix();
rotateMatrix(matrix, -rotateAngle, 0, 0);
var x = shape.offsetX;
var y = shape.offsetY;
var w = shape.width;
var h = shape.height;
x = x - w * shape.pivot.x;
y = y - h * shape.pivot.y;
var deltaWidth = 0;
var deltaHeight = 0;
var diff;
var width = (shape instanceof TextElement) ? shape.actualSize.width : shape.width;
var height = (shape instanceof TextElement) ? shape.actualSize.height : shape.height;
switch (corner) {
case 'ResizeWest':
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
deltaHeight = 1;
difx = snapEnabled ? this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :
difx;
dify = 0;
deltaWidth = (initialBounds.width - difx) / width;
break;
case 'ResizeEast':
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
difx = snapEnabled ? this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :
difx;
dify = 0;
deltaWidth = (initialBounds.width + difx) / width;
deltaHeight = 1;
break;
case 'ResizeNorth':
deltaWidth = 1;
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
dify = snapEnabled ? this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :
dify;
deltaHeight = (initialBounds.height - dify) / height;
break;
case 'ResizeSouth':
deltaWidth = 1;
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
dify = snapEnabled ? this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :
dify;
deltaHeight = (initialBounds.height + dify) / height;
break;
case 'ResizeNorthEast':
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
difx = snapEnabled ? this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :
difx;
dify = snapEnabled ? this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) :
dify;
deltaWidth = (initialBounds.width + difx) / width;
deltaHeight = (initialBounds.height - dify) / height;
break;
case 'ResizeNorthWest':
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
dify = !snapEnabled ? dify : this.commandHandler.snappingModule.snapTop(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);
difx = !snapEnabled ? difx : this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);
deltaWidth = (initialBounds.width - difx) / width;
deltaHeight = (initialBounds.height - dify) / height;
break;
case 'ResizeSouthEast':
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
dify = !snapEnabled ? dify : this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);
difx = !snapEnabled ? difx : this.commandHandler.snappingModule.snapRight(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds);
deltaHeight = (initialBounds.height + dify) / height;
deltaWidth = (initialBounds.width + difx) / width;
break;
case 'ResizeSouthWest':
diff = transformPointByMatrix(matrix, ({ x: difx, y: dify }));
difx = diff.x;
dify = diff.y;
dify = snapEnabled ? this.commandHandler.snappingModule.snapBottom(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) : dify;
difx = snapEnabled ? this.commandHandler.snappingModule.snapLeft(horizontalsnap, verticalsnap, snapLine, difx, dify, shape, endPoint === startPoint, initialBounds) : difx;
deltaWidth = (initialBounds.width - difx) / width;
deltaHeight = (initialBounds.height + dify) / height;
break;
}
return { width: deltaWidth, height: deltaHeight };
};
ToolBase.prototype.getPivot = function (corner) {
switch (corner) {
case 'ResizeWest':
return { x: 1, y: 0.5 };
case 'ResizeEast':
return { x: 0, y: 0.5 };
case 'ResizeNorth':
return { x: 0.5, y: 1 };
case 'ResizeSouth':
return { x: 0.5, y: 0 };
case 'ResizeNorthEast':
return { x: 0, y: 1 };
case 'ResizeNorthWest':
return { x: 1, y: 1 };
case 'ResizeSouthEast':
return { x: 0, y: 0 };
case 'ResizeSouthWest':
return { x: 1, y: 0 };
}
return { x: 0.5, y: 0.5 };
};
//method to get node shape name
ToolBase.prototype.getShapeType = function () {
var shape;
// eslint-disable-next-line no-constant-condition
if (this.commandHandler.diagram.drawingObject.shape.type === 'Image' ||
this.commandHandler.diagram.drawingObject.shape.type === 'HTML' ||
this.commandHandler.diagram.drawingObject.shape.type === 'Native' ||
this.commandHandler.diagram.drawingObject.shape.type === 'Path') {
shape = this.commandHandler.diagram.drawingObject.shape.type;
}
else {
shape = this.commandHandler.diagram.drawingObject.shape.shape;
}
return shape;
};
//EJ2-52203-Method to trigger ElementDraw Event when we draw node or connector with the drawing Tool
ToolBase.prototype.triggerElementDrawEvent = function (source, state, objectType, elementType, isMouseDownAction) {
var arg = {
source: source, state: state, objectType: objectType, cancel: false, elementType: elementType
};
this.commandHandler.triggerEvent(DiagramEvent.elementDraw, arg);
if (isMouseDownAction && arg.cancel) {
{
this.commandHandler.diagram.resetTool();
this.inAction = false;
}
}
};
return ToolBase;
}());
export { ToolBase };
/**
* Helps to select the objects
*/
var SelectTool = /** @class */ (function (_super) {
__extends(SelectTool, _super);
function SelectTool(commandHandler, protectChange, action) {
var _this = _super.call(this, commandHandler, true) || this;
_this.action = action;
return _this;
}
/**
* @param args
* @private
*/
SelectTool.prototype.mouseDown = function (args) {
this.inAction = true;
_super.prototype.mouseDown.call(this, args);
};
/**
* @param args
* @private
*/
SelectTool.prototype.mouseMove = function (args) {
_super.prototype.mouseMove.call(this, args);
//draw selected region
if (this.inAction && Point.equals(this.currentPosition, this.prevPosition) === false) {
var rect = Rect.toBounds([this.prevPosition, this.currentPosition]);
this.commandHandler.clearSelectedItems();
this.commandHandler.drawSelectionRectangle(rect.x, rect.y, rect.width, rect.height);
}
return !this.blocked;
};
/**
* @param args
* @private
*/
SelectTool.prototype.mouseUp = function (args, button) {
this.checkPropertyValue();
//rubber band selection
if (!this.commandHandler.isUserHandle(this.currentPosition)) {
if (Point.equals(this.currentPosition, this.prevPosition) === false && this.inAction) {
var region = Rect.toBounds([this.prevPosition, this.currentPosition]);
this.commandHandler.doRubberBandSelection(region);
}
else {
//single selection
var arrayNodes = this.commandHandler.getSelectedObject();
if (!this.commandHandler.hasSelection() || !args.info || !args.info.ctrlKey) {
// 948882: Improper Selection Behavior When Node Drag Constraint is Disabled
if (button !== 2 || !arrayNodes.some(function (obj) { return obj === args.source; })) {
this.commandHandler.clearSelection(args.source === null ? true : false);
if (this.action === 'LabelSelect') {
this.commandHandler.labelSelect(args.source, args.sourceWrapper, arrayNodes);
}
else if (args.source) {
this.commandHandler.selectObjects([args.source], false, arrayNodes);
}
}
}
else {
//handling multiple selection
if (args && args.source) {
if (!this.commandHandler.isSelected(args.source)) {
this.commandHandler.selectObjects([args.source], true);
}
else {
if (args.clickCount === 1) {
this.commandHandler.unSelect(args.source);
// this.commandHandler.updateBlazorSelector();
}
}
}
}
}
}
this.inAction = false;
_super.prototype.mouseUp.call(this, args);
};
/**
* @param args
* @private
*/
SelectTool.prototype.mouseLeave = function (args) {
if (this.inAction) {
this.mouseUp(args);
}
};
return SelectTool;
}(ToolBase));
export { SelectTool };
var FixedUserHandleTool = /** @class */ (function (_super) {
__extends(FixedUserHandleTool, _super);
function FixedUserHandleTool() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* @param args
* @private
*/
FixedUserHandleTool.prototype.mouseUp = function (args) {
this.checkPropertyValue();
this.inAction = false;
var val = args.source;
var fixedUserHandle;
var iconId = args.sourceWrapper.id;
for (var i = 0; i < val.fixedUserHandles.length; i++) {
if (iconId.indexOf(val.fixedUserHandles[parseInt(i.toString(), 10)].id) > -1) {
fixedUserHandle = val.fixedUserHandles[parseInt(i.toString(), 10)];
}
}
var arg = {
fixedUserHandle: fixedUserHandle,
element: args.source
};
var trigger = DiagramEvent.fixedUserHandleClick;
this.commandHandler.triggerEvent(trigger, arg);
_super.prototype.mouseUp.call(this, args);
};
return FixedUserHandleTool;
}(ToolBase));
export { FixedUserHandleTool };
/**
* Helps to edit the selected connectors
*/
var ConnectTool = /** @class */ (function (_super) {
__extends(ConnectTool, _super);
function ConnectTool(commandHandler, endPoint) {
var _this = _super.call(this, commandHandler, true) || this;
_this.isConnected = false;
_this.endPoint = endPoint;
return _this;
}
/**
* @param args
* @private
*/
ConnectTool.prototype.mouseDown = function (args) {
return __awaiter(this, void 0, void 0, function () {
var oldValue, connectors, i, segment, segmentpoint1, segmentpoint2;
return __generator(this, function (_a) {
this.inAction = true;
this.undoElement = undefined;
if (!(this instanceof ConnectorDrawingTool)) {
this.undoElement = cloneObject(args.source);
}
_super.prototype.mouseDown.call(this, args);
if (args.source && args.source.connectors) {
oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };
connectors = args.source.connectors[0];
this.oldConnector = cloneObject(connectors);
}
// Sets the selected segment
if (this.endPoint === 'BezierSourceThumb' || this.endPoint === 'BezierTargetThumb') {
for (i = 0; i < connectors.segments.length; i++) {
segment = connectors.segments[parseInt(i.toString(), 10)];
segmentpoint1 = !Point.isEmptyPoint(segment.point1) ? segment.point1 : segment.bezierPoint1;
segmentpoint2 = !Point.isEmptyPoint(segment.point2) ? segment.point2 : segment.bezierPoint2;
//(EJ2-70650)-Unable to drag bezier control thumb, when we increase handleSize value
//Added below code for drag the bezier control thumb while increasing handle size(For hitPadding)
if (this.currentElement.handleSize !== connectors.hitPadding) {
connectors.hitPadding = this.currentElement.handleSize;
}
if (contains(this.currentPosition, segmentpoint1, connectors.hitPadding) ||
contains(this.currentPosition, segmentpoint2, connectors.hitPadding)) {
this.selectedSegment = segment;
}
}
}
this.currentPosition = args.position;
return [2 /*return*/];
});
});
};
/**
* @param args
* @private
*/
ConnectTool.prototype.mouseUp = function (args) {
return __awaiter(this, void 0, void 0, function () {
var connector, nodeEndId, portEndId, arg, oldValues, newValues, connector, targetPortName, targetNodeNode, target, arg, obj, entry, trigger, obj, entry, connector;
return __generator(this, function (_a) {
if (!isBlazor() && this.isConnected && args.source.connectors) {
connector = args.source.connectors[0];
nodeEndId = this.endPoint === 'ConnectorSourceEnd' ? 'sourceID' : 'targetID';
portEndId = this.endPoint === 'ConnectorSourceEnd' ? 'sourcePortID' : 'targetPortID';
arg = {
connector: cloneBlazorObject(connector),
oldValue: { nodeId: this.oldConnector["" + nodeEndId], portId: this.oldConnector["" + portEndId] },
newValue: { nodeId: connector["" + nodeEndId], portId: connector["" + portEndId] }, cancel: false,
state: 'Changed', connectorEnd: this.endPoint
};
//875655- ConnectionChange Event not triggered in Changed state for port change in same node
if (connector["" + nodeEndId] !== this.oldConnector["" + nodeEndId] || connector["" + portEndId] !== this.oldConnector["" + portEndId]) {
this.commandHandler.triggerEvent(DiagramEvent.connectionChange, arg);
this.isConnected = false;
}
}
this.checkPropertyValue();
this.commandHandler.updateSelector();
this.commandHandler.removeSnap();
if ((!(this instanceof ConnectorDrawingTool)) && ((this.endPoint === 'ConnectorSourceEnd' &&
args.source.connectors.length &&
((!Point.equals(args.source.connectors[0].sourcePoint, this.undoElement.connectors[0].sourcePoint) ||
(args.source.connectors[0].sourceID !== this.undoElement.connectors[0].sourceID)))) ||
(this.endPoint === 'ConnectorTargetEnd' &&
((!Point.equals(args.source.connectors[0].targetPoint, this.undoElement.connectors[0].targetPoint))
|| (args.source.connectors[0].targetID !== this.undoElement.connectors[0].targetID))))) {
oldValues = void 0;
newValues = void 0;
connector = void 0;
if (args.source && args.source.connectors && this.endPoint === 'ConnectorSourceEnd') {
//941055: The sourcePointChange event's old and new values are the same
oldValues = { x: this.oldConnector.sourcePoint.x, y: this.oldConnector.sourcePoint.y };
connector = args.source.connectors[0];
newValues = { x: connector.sourcePoint.x, y: connector.sourcePoint.y };
}
else if (args.source && args.source.connectors && this.endPoint === 'ConnectorTargetEnd') {
oldValues = { x: this.oldConnector.targetPoint.x, y: this.oldConnector.targetPoint.y };
connector = args.source.connectors[0];
newValues = { x: connector.targetPoint.x, y: connector.targetPoint.y };
}
targetPortName = void 0;
targetNodeNode = void 0;
if (args.target) {
target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
targetNodeNode = target.id;
if (target instanceof PointPort) {
//941055: The target node is undefined while connected to the port
targetPortName = target.id;
targetNodeNode = args.target.id;
}
}
// 947614: Property Change does not log into history within connection change event completed state
if (this.commandHandler.diagram.diagramActions & DiagramAction.ToolAction) {
this.commandHandler.diagram.diagramActions &= ~DiagramAction.ToolAction;
}
arg = {
connector: connector, state: 'Completed', targetNode: targetNodeNode,
oldValue: oldValues, newValue: newValues, cancel: false, targetPort: targetPortName
};
if (this.undoElement && args.source) {
obj = void 0;
obj = cloneObject(args.source);
entry = {
type: 'ConnectionChanged', redoObject: cloneObject(obj), undoObject: cloneObject(this.undoElement),
category: 'Internal'
};
this.commandHandler.addHistoryEntry(entry);
}
trigger = this.endPoint === 'ConnectorSourceEnd' ? DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;
this.commandHandler.triggerEvent(trigger, arg);
//this.commandHandler.removeTerminalSegment(connector as Connector, true);
}
else if (!(this instanceof ConnectorDrawingTool) &&
(this.endPoint === 'BezierTargetThumb' || this.endPoint === 'BezierSourceThumb')) {
if (this.undoElement && args.source) {
obj = cloneObject(args.source);
entry = {
type: 'SegmentChanged', redoObject: obj, undoObject: this.undoElement, category: 'Internal'
};
this.commandHandler.addHistoryEntry(entry);
}
}
// this.commandHandler.updateBlazorSelector();
this.canCancel = undefined;
this.tempArgs = undefined;
//(EJ2-66201) - Exception occurs when mouse-hover on ports in node
if (args.source && args.source.connectors) {
connector = args.source.connectors[0];
if (connector.isBezierEditing) {
connector.isBezierEditing = false;
}
}
_super.prototype.mouseUp.call(this, args);
return [2 /*return*/];
});
});
};
/* tslint:disable */
/**
* @param args
* @private
*/
ConnectTool.prototype.mouseMove = function (args) {
var _this = this;
_super.prototype.mouseMove.call(this, args);
var tempArgs;
if ((!(this instanceof ConnectorDrawingTool)) && ((this.endPoint === 'ConnectorSourceEnd' &&
Point.equals(args.source.connectors[0].sourcePoint, this.undoElement.connectors[0].sourcePoint)) ||
(this.endPoint === 'ConnectorTargetEnd' &&
Point.equals(args.source.connectors[0].targetPoint, this.undoElement.connectors[0].targetPoint)))) {
var oldValue = void 0;
var connectors = void 0;
if (args.source && args.source.connectors) {
oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };
connectors = args.source.connectors[0];
}
var targetPort = void 0;
var targetNode = void 0;
if (args.target) {
targetNode = args.target.id;
var target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
(target instanceof PointPort || target instanceof BpmnSubEvent) ? targetPort = target.id : targetNode = target.id;
}
var arg = {
connector: connectors, state: 'Start', targetNode: targetNode,
oldValue: oldValue, newValue: oldValue, cancel: false, targetPort: targetPort
};
var trigger = this.endPoint === 'ConnectorSourceEnd' ?
DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;
this.commandHandler.triggerEvent(trigger, arg);
}
this.currentPosition = args.position;
if (this.currentPosition && this.prevPosition) {
var diffX = this.currentPosition.x - this.prevPosition.x;
var diffY = this.currentPosition.y - this.prevPosition.y;
var newValue = void 0;
var oldValue = void 0;
var inPort = void 0;
var outPort = void 0;
this.currentPosition = this.commandHandler.snapConnectorEnd(this.currentPosition);
var connector = void 0;
if (args.source && args.source.connectors) {
newValue = { x: this.currentPosition.x, y: this.currentPosition.y };
oldValue = { x: this.prevPosition.x, y: this.prevPosition.y };
connector = args.source.connectors[0];
}
var targetPortId = void 0;
var targetNodeId = void 0;
var target = void 0;
if (args.target) {
target = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
(target instanceof PointPort || target instanceof PathPort) ? targetPortId = target.id : targetNodeId = target.id;
}
var arg = {
connector: connector, state: 'Progress', targetNode: targetNodeId,
oldValue: oldValue, newValue: newValue, cancel: false, targetPort: targetPortId
};
if (!(this instanceof ConnectorDrawingTool)) {
var trigger = this.endPoint === 'ConnectorSourceEnd' ?
DiagramEvent.sourcePointChange : DiagramEvent.targetPointChange;
this.commandHandler.triggerEvent(trigger, arg);
}
if (args.target) {
inPort = getInOutConnectPorts(args.target, true);
outPort = getInOutConnectPorts(args.target, false);
}
if (!arg.cancel && this.inAction && this.endPoint !== undefined && (diffX !== 0 || diffY !== 0)) {
if (this.endPoint === 'ConnectorSourceEnd' && connector && connector.type === 'Orthogonal' && connector.segments && connector.segments.length > 0) {
var connectorSegment = connector.segments[0];
var direction_1 = connectorSegment.direction;
var tryDragConnector = function (targetPortId, targetNodeId, newPosition) {
_this.blocked = !_this.commandHandler.dragConnectorEnds(_this.endPoint, args.source, newPosition ? newPosition : _this.currentPosition, _this.selectedSegment, targetNodeId ? args.target : undefined, targetPortId);
};
var sourceChanged = connector.sourcePortID !== targetPortId || connector.sourceID !== targetNodeId;
// Case 1: Disconnect if dragging to empty space
if (sourceChanged && !targetNodeId && !targetPortId) {
if (this.commandHandler.canDisconnect(this.endPoint, args, targetPortId, targetNodeId)) {
tempArgs = this.commandHandler.disConnect(args.source, this.endPoint, this.canCancel);
this.isConnected = true;
tryDragConnector(targetPortId, targetNodeId);
}
}
// Case 2: Connect to a port
else if (targetPortId && connector.sourcePortID !== targetPortId) {
if (this.checkConnect(target)) {
tryDragConnector(targetPortId, args.target.id);
tempArgs = this.commandHandler.connect(this.endPoint, args, this.canCancel);
this.isConnected = true;
}
}
// Case 3: Connect to a node
else if (target instanceof Node) {
if (sourceChanged) {
if (this.commandHandler.canDisconnect(this.endPoint, args, targetPortId, targetNodeId)) {
tempArgs = this.commandHandler.disConnect(args.source, this.endPoint, this.canCancel);
}
}
if (canOutConnect(target)) {
var corners_1 = targetNodeId
? this.commandHandler.diagram.nameTable["" + targetNodeId].wrapper.corners
: undefined;
var getNewPosition = function () {
if (!direction_1 || !corners_1) {
return _this.currentPosition;
}
switch (direction_1) {
case 'Bottom':
return corners_1.bottomCenter;
case 'Top':
return corners_1.topCenter;
case 'Left':
return corners_1.middleLeft;
case 'Right':
return corners_1.middleRight;
default:
return _this.currentPosition;
}
};
tryDragConnector(undefined, args.target.id, getNewPosition());
tempArgs = this.commandHandler.connect(this.endPoint, args, this.canCancel);
this.isConnected = true;
}
else {
tryDragConnector(undefined, undefined);
}
}
// Case 4: Connect to connector port
else if (target instanceof PathPort) {
this.blocked = !this.commandHandler.dragConnectorEnds(this.endPoint, args.source, this.currentPosition, this.selectedSegment, args.target, targetPortId);
tempArgs = this.commandHandler.connect(this.endPoint, args, this.canCancel);
}
}
else {
// EJ2-65331 - The condition checks whether the cancel argument is true or false
if (!arg.cancel) {
this.blocked = !this.commandHandler.dragConnectorEnds(this.endPoint, args.source, this.currentPosition, this.selectedSegment, args.target, targetPortId);
this.commandHandler.updateSelector();
}
if (args.target && ((this.endPoint === 'ConnectorSourceEnd' && (canOutConnect(args.target) || canPortOutConnect(outPort)))
|| (this.endPoint === 'ConnectorTargetEnd' && (canInConnect(args.target) || canPortInConnect(inPort))))) {
if (this.commandHandler.canDisconnect(this.endPoint, args, targetPortId, targetNodeId)) {
tempArgs = this.commandHandler.disConnect(args.source, this.endPoint, this.canCancel);
this.isConnected = true;
}
var target_1 = this.commandHandler.findTarget(args.targetWrapper, args.target, this.endPoint === 'ConnectorSourceEnd', true);
if (target_1 instanceof Node) {
if ((canInConnect(target_1) && this.endPoint === 'ConnectorTargetEnd')
|| (canOutConnect(target_1) && this.endPoint === 'ConnectorSourceEnd')) {
tempArgs = this.commandHandler.connect(this.endPoint, args, this.canCancel);
this.isConnected = true;
}
}
else {
var isConnect = this.checkConnect(target_1);
if (isConnect) {
this.isConnected = true;
tempArgs = this.commandHandler.connect(this.endPoint, args, this.canCancel);
}
}
}
else if (this.endPoint.indexOf('Bezier') === -1) {
this.isConnected = true;
tempArgs = this.commandHandler.disConnect(args.source, this.endPoint, this.canCancel);
this.commandHandler.updateSelector();
}
}
}
if (this.commandHandler.canEnableDefaultTooltip()) {
var content_1 = this.getTooltipContent(args.position);
var contentTemp = function () {
return content_1;
};
this.commandHandler.showTooltip(args.source, args.position, initializeCSPTemplate(contentTemp), 'ConnectTool', this.isTooltipVisible);
this.isTooltipVisible = false;
}
if (tempArgs) {
this.tempArgs = tempArgs;
}
}
this.prevPosition = this.currentPosition;
return !this.blocked;
};
/**
* @param args
* @private
*/
ConnectTool.prototype.mouseLeave = function (args) {
this.mouseUp(args);
};
ConnectTool.prototype.getTooltipContent = function (position) {
return 'X:' + Math.round(position.x) + ' ' + 'Y:' + Math.round(position.y);
};
ConnectTool.prototype.checkConnect = function (target) {
if (canPortInConnect(target) && this.endPoint === 'ConnectorTargetEnd') {
return true;
}
else if (canPortOutConnect(target) && this.endPoint === 'ConnectorSourceEnd') {
return true;
}
else if (!(target.constraints & PortConstraints.None) && !canPortInConnect(target) && !canPortOutConnect(target)
&& (target.constraints === undefined || (target.constraints & (PortConstraints.Default & ~(PortConstraints.InConnect | PortConstraints.OutConnect))) > 0)) {
return true;
}
return false;
};
/** @private */
ConnectTool.prototype.endAction = function () {
_super.prototype.endAction.call(this);
this.prevPosition = null;
this.endPoint = null;
};
return ConnectTool;
}(ToolBase));
export { ConnectTool };
/**
* Drags the selected objects
*/
var MoveTool = /** @class */ (function (_super) {
__extends(MoveTool, _super);
function MoveTool(commandHandler, objType) {
var _this = _super.call(this, commandHandler, true) || this;
/** @private */
_this.currentTarget = null;
_this.isStartAction = false;
_this.canCancel = false;
_this.canTrigger = false;
_this.objectType = objType;
return _this;
}
/**
* @param args
* @private
*/
MoveTool.prototype.mouseDown = function (args) {
if (args.source instanceof Node || args.source instanceof Connector) {
var arrayNodes = this.commandHandler.getSelectedObject();
this.commandHandler.selectObjects([args.source], args.info && args.info.ctrlKey, arrayNodes);
var selectedObject = { nodes: [], connectors: [] };
if (args.source instanceof Node) {
selectedObject.nodes.push(cloneObject(args.source));
}
else {
selectedObject.connectors.push(cloneObject(args.source));
}
this.undoElement = cloneObject(selectedObject);
//909582-History change event args old value is undefined upon node drag
var wrapper = args.source.wrapper;
this.undoElement.offsetX = wrapper.offsetX;
this.undoElement.offsetY = wrapper.offsetY;
}
else {
this.undoElement = cloneObject(args.source);
}
//951087-Undo function doesn't retain connector segments after node move actions.
this.commandHandler.trackConnectorChange(this.undoElement);
this.undoParentElement = this.commandHandler.getSubProcess(args.source);
this.undoContainerElement = this.commandHandler.getContainer(args.source);
if (this.objectType === 'Port') {
this.portId = args.sourceWrapper.id;
}
this.commandHandler.insertBlazorConnector(args.source);
_super.prototype.mouseDown.call(this, args);
this.initialOffset = { x: 0, y: 0 };
};
MoveTool.prototype.getPort = function (args) {
var port;
var sourceId = args.source.id;
var sourcePorts = args.source.ports;
for (var i = 0; i < sourcePorts.length; i++) {
if (args.sourceWrapper.id === sourceId + '_' + sourcePorts[parseInt(i.toString(), 10)].id) {
port = sourcePorts[parseInt(i.toString(), 10)];
break;
}
}
return port;
};
/* tslint:disable */
/**
* @param args
* @param isPreventHistory
* @param args
* @param isPreventHistory
* @private
*/
MoveTool.prototype.mouseUp = function (args, isPreventHistory) {
return __awaiter(this, void 0, void 0, function () {
var oldValues, newValues, obj, historyAdded, object, redoObject, wrapper, isSubGroupSelection, currentSelection, i, isSelector, isSingleSelectedObject, isSameSize, isDifferentPosition, isDifferentSourcePoint, isDifferentTargetPoint, arg, canAddHistory, nameTable, i, entry, entry_1, entry_2, snappedPoint, canSplit, i, i, arg, nodes, isEndGroup, temp, i, i, helper, entry, port, nodePorts, connPorts, i, i, arg;
return __generator(this, function (_a) {
this.checkPropertyValue();
historyAdded = false;
redoObject = { nodes: [], connectors: [] };
if (this.objectType !== 'Port') {
if (args.source instanceof Node || args.source instanceof Connector) {
if (args.source instanceof Node) {
redoObject.nodes.push(cloneObject(args.source));
}
else {
redoObject.connectors.push(cloneObject(args.source));
}
obj = cloneObject(redoObject);
wrapper = args.source.wrapper;
obj.offsetX = wrapper.offsetX;
obj.offsetY = wrapper.offsetY;
}
else {
obj = cloneObject(args.source);
}
//951087-Undo funciton doesn't retain connector segments after node move actions.
this.commandHandler.trackConnectorChange(obj);
object = this.commandHandler.renderContainerHelper(args.source) || args.source || this.commandHandler.renderContainerHelper(args.source);
if ((object.id === 'helper') || (object.id !== 'helper')) {
isSubGroupSelection = false;
if (object instanceof Selector) {
currentSelection = cloneObject(object);
// check currentSelection.selectedObjects array contains same object of this.undoElement.selectedObjects array
if (currentSelection.selectedObjects.length === this.undoElement.selectedObjects.length) {
for (i = 0; i < currentSelection.selectedObjects.length; i++) {
if (currentSelection.selectedObjects[parseInt(i.toString(), 10)].id !==
this.undoElement.selectedObjects[parseInt(i.toString(), 10)].id) {
isSubGroupSelection = true;
break;
}
}
}
}
isSelector = object instanceof Selector;
isSingleSelectedObject = object instanceof Selector && object.selectedObjects && object.selectedObjects.length === 1;
isSameSize = object instanceof Selector && Math.round(object.width) === Math.round(this.undoElement.width) && Math.round(object.height) === Math.round(this.undoElement.height);
isDifferentPosition = object.offsetX !== this.undoElement.offsetX || object.offsetY !== this.undoElement.offsetY;
isDifferentSourcePoint = object.sourcePoint !== this.undoElement.sourcePoint;
isDifferentTargetPoint = object.targetPoint !== this.undoElement.targetPoint;
if (!isSubGroupSelection &&
(((isSelector && (isSameSize || isSingleSelectedObject)) || !isSelector) && (isDifferentPosition || isDifferentSourcePoint || isDifferentTargetPoint))
|| this.isSelectionHasConnec