@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.
831 lines • 719 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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
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 };
}
};
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable valid-jsdoc */
/* eslint-disable valid-jsdoc */
/* eslint-disable prefer-spread */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsdoc/require-returns */
/* eslint-disable valid-jsdoc */
/* eslint-disable jsdoc/require-param */
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable valid-jsdoc */
/* eslint-disable jsdoc/require-returns */
import { Component, Property, Complex, Collection, EventHandler, L10n, Droppable, remove, isBlazor, Fetch } from '@syncfusion/ej2-base';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { Browser, Event } from '@syncfusion/ej2-base';
import { CanvasRenderer } from './rendering/canvas-renderer';
import { SvgRenderer } from './rendering/svg-renderer';
import { DiagramRenderer } from './rendering/renderer';
import { PageSettings, ScrollSettings } from './diagram/page-settings';
import { ServiceLocator } from './objects/service';
import { GroupableView } from './core/containers/container';
import { Node, BpmnShape, SwimLane, UmlClassMethod, UmlEnumerationMember, UmlClassAttribute, Lane, Container } from './objects/node';
import { cloneBlazorObject, cloneSelectedObjects, findObjectIndex, getConnectorArrowType, selectionHasConnector, isLabelFlipped, rotateAfterFlip, getSwimLaneChildren, removeUnnecessaryNodes } from './utility/diagram-util';
import { checkBrowserInfo } from './utility/diagram-util';
import { updateDefaultValues, getPoint } from './utility/diagram-util';
import { flipConnector, updatePortEdges, alignElement, setConnectorDefaults, getPreviewSize } from './utility/diagram-util';
import { Connector } from './objects/connector';
import { SnapSettings } from './diagram/grid-lines';
import { RulerSettings } from './diagram/ruler-settings';
import { removeRulerElements, updateRuler, getRulerSize } from './ruler/ruler';
import { renderRuler, renderOverlapElement } from './ruler/ruler';
import { Size } from './primitives/size';
import { Keys, KeyModifiers, DiagramTools, AnnotationConstraints, NodeConstraints, ScrollActions, ConnectorConstraints } from './enum/enum';
import { RendererAction } from './enum/enum';
import { BlazorAction } from './enum/enum';
import { DiagramConstraints, SelectorConstraints, PortVisibility, DiagramEvent } from './enum/enum';
import { DiagramAction, ThumbsConstraints } from './enum/enum';
import { RealAction, ElementAction, FlipDirection, PortConstraints } from './enum/enum';
import { PathElement } from './core/elements/path-element';
import { TextElement } from './core/elements/text-element';
import { updateStyle, removeItem, updateConnector, updateShape, setUMLActivityDefaults, findNodeByName } from './utility/diagram-util';
import { setSwimLaneDefaults } from './utility/diagram-util';
import { checkPortRestriction, serialize, deserialize, updateHyperlink, getObjectType, removeGradient, getChild } from './utility/diagram-util';
import { Rect } from './primitives/rect';
import { getPortShape } from './objects/dictionary/common';
import { ShapeAnnotation, PathAnnotation } from './objects/annotation';
import { Canvas } from './core/containers/canvas';
import { GridPanel, ColumnDefinition } from './core/containers/grid';
import { DataSource } from './diagram/data-source';
import { Layout } from './layout/layout-base';
import { Selector, Text } from './objects/node';
import { DiagramEventHandler } from './interaction/event-handlers';
import { CommandHandler } from './interaction/command-manager';
import { DiagramScroller } from './interaction/scroller';
import { contains, isSelected } from './interaction/actions';
import { SpatialSearch } from './interaction/spatial-search/spatial-search';
import { setAttributeSvg, setAttributeHtml, measureHtmlText, removeElement, createMeasureElements, getDomIndex, clearDecoratorPathCache } from './utility/dom-util';
import { getDiagramElement, getScrollerWidth, getHTMLLayer, createUserHandleTemplates } from './utility/dom-util';
import { getBackgroundLayer, createHtmlElement, createSvgElement, getNativeLayerSvg, getUserHandleLayer } from './utility/dom-util';
import { getPortLayerSvg, getDiagramLayerSvg, applyStyleAgainstCsp } from './utility/dom-util';
import { getAdornerLayerSvg, getSelectorElement, getGridLayerSvg, getBackgroundLayerSvg } from './utility/dom-util';
import { CommandManager, ContextMenuSettings } from './diagram/keyboard-commands';
import { canDelete, canInConnect, canOutConnect, canRotate, canVitualize, canDrawThumbs } from './utility/constraints-util';
import { canPortInConnect, canPortOutConnect } from './utility/constraints-util';
import { canResize, canSingleSelect, canZoomPan, canZoomTextEdit, canMultiSelect } from './utility/constraints-util';
import { canDragSourceEnd, canDragTargetEnd, canDragSegmentThumb, enableReadOnly, canMove } from './utility/constraints-util';
import { findAnnotation, arrangeChild, getInOutConnectPorts, removeChildNodes, canMeasureDecoratorPath } from './utility/diagram-util';
import { randomId, cloneObject, extendObject, getFunction, getBounds } from './utility/base-util';
import { DiagramTooltip, initTooltip } from './objects/tooltip';
import { PointPort, PathPort } from './objects/port';
import { canShadow } from './utility/constraints-util';
import { Layer } from './diagram/layer';
import { DiagramNativeElement } from './core/elements/native-element';
import { DiagramHtmlElement } from './core/elements/html-element';
import { canAllowDrop } from './utility/constraints-util';
import { checkParentAsContainer, addChildToContainer, updateLaneBoundsAfterAddChild } from './interaction/container-interaction';
import { getConnectors, updateConnectorsProperties, phaseDefine, findLane } from './utility/swim-lane-util';
import { swimLaneMeasureAndArrange } from './utility/swim-lane-util';
import { arrangeChildNodesInSwimLane, updateHeaderMaxWidth, updatePhaseMaxWidth } from './utility/swim-lane-util';
import { addLane, addPhase } from './utility/swim-lane-util';
import { SerializationSettings } from './diagram/serialization-settings';
import { removeSwimLane, removeLane, removePhase, removeLaneChildNode } from './utility/swim-lane-util';
import { RowDefinition } from './core/containers/grid';
import { CustomCursorAction } from './diagram/custom-cursor';
import { LineRouting } from './interaction/line-routing';
import { DiagramSettings } from '../diagram/diagram-settings';
import { StackPanel } from './core/containers/stack-panel';
import { ConnectorFixedUserHandle, NodeFixedUserHandle } from './objects/fixed-user-handle';
import { Point } from './primitives/point';
import { getClassAttributesChild, getClassMembersChild, getClassNodesChild } from './utility/uml-util';
import { getIntersectionPoints, getPortDirection } from './utility/connector';
import { dragContainerChild, updateContainerDocks, setSizeForContainer, removeChildFromContainer, updateChildWrapper, addContainerChild, removeChild, dropContainerChild } from './utility/container-util';
import { identityMatrix, rotateMatrix, transformPointByMatrix, scaleMatrix } from './primitives/matrix';
import { UmlSequenceDiagram } from './diagram/sequence-diagram';
/**
* Represents the Diagram control
* ```html
* <div id='diagram'/>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* width:'1000px', height:'500px' });
* diagram.appendTo('#diagram');
* ```
*/
var Diagram = /** @class */ (function (_super) {
__extends(Diagram, _super);
/**
* Constructor for creating the widget
*/
function Diagram(options, element) {
var _this = _super.call(this, options, element) || this;
/** @private */
_this.version = 17.1;
/** @private */
_this.checkMenu = false;
/** @private */
_this.isServerUpdate = false;
/** @private */
_this.oldNodeObjects = [];
/** @private */
_this.oldDiagramObject = {};
/** @private */
_this.oldConnectorObjects = [];
_this.preventOverviewRefresh = false;
/** @private */
_this.canEnableBlazorObject = false;
/** @private */
_this.connectorTable = {};
/** @private */
_this.groupTable = {};
/** @private */
_this.scrollActions = ScrollActions.None;
/** @private */
_this.blazorActions = BlazorAction.Default;
/** @private */
_this.activeLabel = { id: '', parentId: '', isGroup: false, text: undefined };
/** @private */
_this.textEditing = false;
/** @private */
_this.isTriggerEvent = false;
/** @private */
_this.preventNodesUpdate = false;
/** @private */
_this.preventConnectorsUpdate = false;
/** @private */
_this.callBlazorModel = true;
/** @private */
_this.isRowHeightUpdate = false;
/** @private */
_this.selectionConnectorsList = [];
/** @private */
_this.deleteVirtualObject = false;
_this.canLayout = true;
_this.cancelPositionChange = false;
_this.isRefreshed = false;
/** @private */
_this.swimlaneChildTable = {};
/** @private */
_this.swimlaneZIndexTable = {};
/** @private */
_this.canExpand = false;
/** @private */
_this.itemType = 'PublicMethod';
_this.changedConnectorCollection = [];
_this.changedNodesCollection = [];
_this.previousNodeCollection = [];
_this.previousConnectorCollection = [];
_this.crudDeleteNodes = [];
_this.previousSelectedObjects = [];
// Group update to server when BlazorAction is isGroupAction;
_this.blazorAddorRemoveCollection = [];
_this.blazorRemoveIndexCollection = [];
_this.diagramid = 88123;
_this.portCenterPoint = [];
/** @private */
_this.selectedObject = { helperObject: undefined, actualObject: undefined };
/** @private */
_this.deleteDependentConnector = true;
/** @private */
_this.scaleValue = 1;
_this.routedConnectors = [];
/** @private */
_this.pathDataStorage = new Map();
// To check current action is undo or redo
_this.isUndo = false;
// Groups that either have connectors with flip applied or a non-zero rotation
/**@private */
_this.connectorOrRotatedGroups = [];
// To indicate the connector inside group is flipping.
/**@private */
_this.connectorFlipInProgress = false;
// Indicates whether the current action is part of an undo or redo operation
/** @private */
_this.checkUndoRedo = false;
/** @private */
_this.activeLayerObjectsSet = new Set();
/**@private */
_this.isScrollOffsetInverted = true;
/**@private */
_this.initNodeTemplate = false;
/**
* Stores diagram nodes and connectors temporarily before they are initialized and appended to the nameTable.
* @private
*/
_this.tempTable = {};
/**
* Indicates whether the diagram is being refreshed during deserialization.
* @private
*/
_this.deserializing = false;
_this.mermaidNodeBaseCollection = [];
_this.bangShape = 'M0 0 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,-3.7200001525878905 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 25.78437614440918,3.7200001525878905 a15.470625686645507,15.470625686645507 1 0,0 15.470625686645507,12.276000503540038 a12.376500549316406,12.376500549316406 1 0,0 0,12.648000518798828 a15.470625686645507,15.470625686645507 1 0,0 -15.470625686645507,12.276000503540038 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,5.580000228881835 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,0 a15.470625686645507,15.470625686645507 1 0,0 -25.78437614440918,-5.580000228881835 a15.470625686645507,15.470625686645507 1 0,0 -10.313750457763673,-12.276000503540038 a12.376500549316406,12.376500549316406 1 0,0 0,-12.648000518798828 a15.470625686645507,15.470625686645507 1 0,0 10.313750457763673,-12.276000503540038 H0 V0 Z';
_this.cloudShape = 'M0 0 a16.18875045776367,16.18875045776367 0 0,1 26.981250762939453,-10.792500305175782 a37.77375106811523,37.77375106811523 1 0,1 43.17000122070313,-10.792500305175782 a26.981250762939453,26.981250762939453 1 0,1 37.77375106811523,21.585000610351564 a16.18875045776367,16.18875045776367 1 0,1 16.18875045776367,13.020000534057615 a21.585000610351564,21.585000610351564 1 0,1 -16.18875045776367,24.180000991821288 a26.981250762939453,16.18875045776367 1 0,1 -26.981250762939453,16.18875045776367 a37.77375106811523,37.77375106811523 1 0,1 -53.962501525878906,0 a16.18875045776367,16.18875045776367 1 0,1 -26.981250762939453,-16.18875045776367 a16.18875045776367,16.18875045776367 1 0,1 -10.792500305175782,-13.020000534057615 a21.585000610351564,21.585000610351564 1 0,1 10.792500305175782,-24.180000991821288 H0 V0 Z';
_this.renderTimer = null;
var child;
var node;
//Removed isBlazor code
_this.ignoreCollectionWatch = true;
for (var i = 0; options && options.nodes && i < options.nodes.length; i++) {
child = options.nodes[parseInt(i.toString(), 10)];
node = _this.nodes[parseInt(i.toString(), 10)];
if (child.children && child.children.length > 0) {
if (!child.style || !child.style.fill) {
node.style.fill = 'transparent';
}
if (!child.style || !child.style.strokeColor) {
node.style.strokeColor = 'transparent';
}
}
if (child.shape && child.shape.type === 'UmlActivity') {
setUMLActivityDefaults(child, node);
}
if (child.shape && (child.shape.type === 'SwimLane' || child.shape.type === 'Container')) {
setSwimLaneDefaults(child, node);
}
// Removed isBlazor code
if (_this.nodeDefaults) {
updateDefaultValues(node, child, _this.nodeDefaults);
}
_this.updateAnnotationText(node.annotations);
}
if (options && options.connectors) {
for (var i = 0; options && options.connectors && i < options.connectors.length; i++) {
child = options.connectors[parseInt(i.toString(), 10)];
node = _this.connectors[parseInt(i.toString(), 10)];
//Removed isBlazor code
if (_this.connectorDefaults) {
updateDefaultValues(node, child, _this.connectorDefaults);
}
_this.updateAnnotationText(node.annotations);
}
}
for (var i = 0; options && options.connectors && i < options.connectors.length; i++) {
var defaultConnector = options.connectors[parseInt(i.toString(), 10)];
var connector = _this.connectors[parseInt(i.toString(), 10)];
if (defaultConnector.shape && defaultConnector.shape.type !== 'None') {
setConnectorDefaults(defaultConnector, connector);
}
//Removed isBlazor code
}
return _this;
}
Diagram.prototype.updateAnnotationText = function (annotations) {
//Removed isBlazor code
};
Diagram.prototype.clearCollection = function (isConnector) {
var collection = [];
var obj;
for (var _i = 0, _a = Object.keys(this.nameTable); _i < _a.length; _i++) {
var key = _a[_i];
obj = this.nameTable["" + key];
if (obj && ((isConnector && obj instanceof Connector) || (!isConnector && obj instanceof Node))) {
collection.push(obj);
}
}
this.clearObjects(collection);
};
/**
* Updates the diagram control when the objects are changed by comparing new and old property values.
*
* @param {DiagramModel} newProp - A object that lists the new values of the changed properties.
* @param {DiagramModel} oldProp - A object that lists the old values of the changed properties.
*/
/* tslint:disable */
Diagram.prototype.onPropertyChanged = function (newProp, oldProp) {
var _this = this;
// Model Changed
// Bug 842506: After multiple group node rotations, the undo functionality is not working.
// Below condition is used to restrict onPropertyChange when we rotate group node using button at runtime.
if (!this.rotateUsingButton) {
var newValue = void 0;
var oldValue = void 0;
var isPropertyChanged = true;
var refreshLayout = false;
var refereshColelction = false;
var bpmnAnnotationConnector = void 0;
if (this.diagramActions & DiagramAction.Render) {
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'width':
case 'height':
this.element.style.width = this.getSizeValue(this.width);
this.element.style.height = this.getSizeValue(this.height);
this.eventHandler.updateViewPortSize(this.element);
for (var _b = 0, _c = this.views; _b < _c.length; _b++) {
var view = _c[_b];
var temp = this.views["" + view];
if (!(temp instanceof Diagram)) {
temp.updateView(temp);
}
}
break;
case 'nodes':
if (newProp.nodes.length > 0 && oldProp.nodes.length === 0) {
this.clearCollection();
refereshColelction = true;
}
else {
for (var _d = 0, _e = Object.keys(newProp.nodes); _d < _e.length; _d++) {
var key = _e[_d];
var index = Number(key);
var actualObject = this.nodes[parseInt(index.toString(), 10)];
var changedProp = newProp.nodes[parseInt(index.toString(), 10)];
if (newProp.nodes[parseInt(index.toString(), 10)].style
&& newProp.nodes[parseInt(index.toString(), 10)].style.gradient) {
this.updateGradient(newProp.nodes[parseInt(index.toString(), 10)], oldProp.nodes[parseInt(index.toString(), 10)], this.nodes[parseInt(index.toString(), 10)]);
this.nodes[parseInt(index.toString(), 10)].oldGradientValue
= cloneObject(newProp.nodes[parseInt(index.toString(), 10)].style.gradient);
}
refreshLayout = refreshLayout || changedProp.excludeFromLayout !== undefined;
/* eslint-disable */
if (newProp.nodes[index] && newProp.nodes[index].shape
&& newProp.nodes[index].shape.textAnnotation
&& newProp.nodes[index].shape.textAnnotation.textAnnotationTarget !== '') {
bpmnAnnotationConnector = cloneObject(this.nameTable[actualObject.inEdges[0]]);
}
/* eslint-enable */
this.nodePropertyChange(actualObject, oldProp.nodes[parseInt(index.toString(), 10)], changedProp, undefined, true, true);
var args = {
element: cloneBlazorObject(actualObject), cause: this.diagramActions,
diagramAction: this.getDiagramAction(this.diagramActions),
oldValue: cloneBlazorObject(oldProp.nodes[parseInt(index.toString(), 10)]),
newValue: cloneBlazorObject(newProp.nodes[parseInt(index.toString(), 10)])
};
// Removed isBlazor code
this.triggerEvent(DiagramEvent.propertyChange, args);
if (isPropertyChanged) {
isPropertyChanged = false;
}
}
if (this.mode === 'Canvas') {
this.refreshDiagramLayer();
}
}
break;
case 'connectors':
// eslint-disable-next-line no-case-declarations
var oldObject = void 0;
if (newProp.connectors.length > 0 && oldProp.connectors.length === 0) {
this.clearCollection(true);
refereshColelction = true;
}
else {
for (var _f = 0, _g = Object.keys(newProp.connectors); _f < _g.length; _f++) {
var key = _g[_f];
var index = Number(key);
var actualObject = this.connectors[parseInt(index.toString(), 10)];
var changedProp = newProp.connectors[parseInt(index.toString(), 10)];
// 927220: Improper Connector State After Undo When Connecting via Button
var changedPoints = {
sourcePoint: { x: actualObject.sourcePoint.x, y: actualObject.sourcePoint.y },
targetPoint: { x: actualObject.targetPoint.x, y: actualObject.targetPoint.y }
};
if (changedProp && (changedProp.sourceDecorator || changedProp.targetDecorator)) {
this.diagramActions |= DiagramAction.DecoratorPropertyChange;
}
this.connectorPropertyChange(actualObject, oldProp.connectors[parseInt(index.toString(), 10)], changedProp, true, true);
// 927220: Improper Connector State After Undo When Connecting via Button
if (newProp.connectors[parseInt(index.toString(), 10)].sourceID &&
!newProp.connectors[parseInt(index.toString(), 10)].sourcePoint) {
oldProp.connectors[parseInt(index.toString(), 10)].sourcePoint = {
x: changedPoints.sourcePoint.x,
y: changedPoints.sourcePoint.y
};
newProp.connectors[parseInt(index.toString(), 10)].sourcePoint = {
x: actualObject.sourcePoint.x,
y: actualObject.sourcePoint.y
};
}
if (newProp.connectors[parseInt(index.toString(), 10)].targetID &&
!newProp.connectors[parseInt(index.toString(), 10)].targetPoint) {
oldProp.connectors[parseInt(index.toString(), 10)].targetPoint = {
x: changedPoints.targetPoint.x,
y: changedPoints.targetPoint.y
};
newProp.connectors[parseInt(index.toString(), 10)].targetPoint = {
x: actualObject.targetPoint.x,
y: actualObject.targetPoint.y
};
}
if (changedProp && (changedProp.sourceDecorator || changedProp.targetDecorator)) {
this.diagramActions = this.diagramActions & ~DiagramAction.DecoratorPropertyChange;
}
var args = {
element: cloneBlazorObject(actualObject), cause: this.diagramActions,
diagramAction: this.getDiagramAction(this.diagramActions),
oldValue: cloneBlazorObject(oldProp.connectors[parseInt(index.toString(), 10)]),
newValue: cloneBlazorObject(newProp.connectors[parseInt(index.toString(), 10)])
};
// Removed isBlazor code
this.triggerEvent(DiagramEvent.propertyChange, args);
if (actualObject && actualObject.parentId && this.nameTable[actualObject.parentId].shape.type === 'UmlClassifier') {
this.updateConnectorEdges(this.nameTable[actualObject.parentId] || actualObject);
}
if (isPropertyChanged) {
isPropertyChanged = false;
}
}
this.updateBridging();
if (this.mode === 'Canvas') {
this.refreshDiagramLayer();
}
}
break;
case 'bridgeDirection':
this.updateBridging();
if (this.mode === 'Canvas') {
this.refreshDiagramLayer();
}
break;
case 'backgroundColor':
this.intOffPageBackground();
break;
case 'pageSettings':
this.validatePageSize();
this.updatePage();
break;
case 'selectedItems':
if (newProp.selectedItems.userHandles && this.selectedItems.wrapper && this.selectedItems.userHandles) {
if (this.selectedItems.userHandles.length > 0) {
this.renderSelector(true);
break;
}
}
if (newProp.selectedItems.constraints) {
this.renderSelector(true);
break;
}
break;
case 'snapSettings':
this.updateSnapSettings(newProp);
break;
case 'commandManager':
this.initCommands();
break;
case 'layout':
refreshLayout = true;
break;
case 'segmentThumbShape':
this.updateSelector();
break;
case 'dataSourceSettings':
this.clear();
if (this.layout.type === 'None') {
refereshColelction = true;
}
else {
//EJ2-837322- Duplicate nodes and connectors are created after reset for layout type 'None'
this.initObjects();
refreshLayout = true;
}
break;
case 'tooltip':
initTooltip(this);
break;
case 'rulerSettings':
this.updateRulerSettings(newProp);
break;
case 'layers':
this.updateLayer(newProp);
break;
case 'scrollSettings':
this.scrollActions |= ScrollActions.PropertyChange;
this.updateScrollSettings(newProp);
this.scrollActions &= ~ScrollActions.PropertyChange;
break;
case 'locale':
if (newProp.locale !== oldProp.locale) {
// 927339: Diagram Layout Rendering correctly When Locale is Set by removing the line
_super.prototype.refresh.call(this);
}
break;
case 'contextMenuSettings':
if (newProp.contextMenuSettings.showCustomMenuOnly !== undefined) {
this.contextMenuSettings.showCustomMenuOnly = newProp.contextMenuSettings.showCustomMenuOnly;
}
if (newProp.contextMenuSettings.show !== undefined) {
this.contextMenuSettings.show = newProp.contextMenuSettings.show;
}
if (newProp.contextMenuSettings.items) {
var items = newProp.contextMenuSettings.items;
for (var _h = 0, _j = Object.keys(items); _h < _j.length; _h++) {
var key = _j[_h];
var index = Number(key);
this.contextMenuSettings.items[parseInt(index.toString(), 10)] = items[parseInt(index.toString(), 10)];
}
if (this.contextMenuModule) {
this.contextMenuModule.refreshItems();
}
else {
console.warn('[WARNING] :: Module "DiagramContextMenu" is not available in Diagram component! You either misspelled the module name or forgot to load it.');
}
}
break;
case 'serializationSettings':
if (newProp.serializationSettings.preventDefaults !== undefined) {
this.serializationSettings.preventDefaults = newProp.serializationSettings.preventDefaults;
}
break;
case 'tool':
// 912436: Mouse cursor flickers when entering the diagram canvas after the tool is changed at runtime
this.eventHandler.updateTool();
break;
case 'constraints':
if (((newProp.constraints & DiagramConstraints.LineRouting) !==
(oldProp.constraints & DiagramConstraints.LineRouting)) ||
((newProp.constraints & DiagramConstraints.AvoidLineOverlapping) !==
(oldProp.constraints & DiagramConstraints.AvoidLineOverlapping))) {
this.resetSegments();
}
break;
}
}
if (refreshLayout && !refereshColelction) {
if (oldProp.layout && oldProp.layout.connectionPointOrigin === 'DifferentPoint' && newProp.layout.connectionPointOrigin === 'SamePoint'
|| (oldProp.layout && newProp.layout && !newProp.layout.enableRouting && oldProp.layout.enableRouting)) {
for (var i = 0; i < this.nodes.length; i++) {
var node = this.nodes[parseInt(i.toString(), 10)];
if ((node.ports && node.ports.length > 0)) {
var ports = [];
for (var j = node.ports.length - 1; j >= 0; j--) {
if (node.ports[parseInt(j.toString(), 10)].id.split('_')[1] === 'LineDistribution') {
ports.push(node.ports[parseInt(j.toString(), 10)]);
}
}
this.removePorts(node, ports);
}
}
for (var j = 0; j < this.connectors.length; j++) {
var connector = this.connectors[parseInt(j.toString(), 10)];
var sourcePortid = connector.sourcePortID;
var targetPortId = connector.targetPortID;
//const oldSegment: OrthogonalSegmentModel = (connector.segments as OrthogonalSegmentModel);
connector.sourcePortID = '';
connector.targetPortID = '';
connector.sourcePortWrapper = undefined;
connector.targetPortWrapper = undefined;
connector.segments = [];
this.connectorPropertyChange(connector, {
sourcePortID: sourcePortid, targetPortID: targetPortId
}, { sourcePortID: '', targetPortID: '' });
}
}
this.doLayout();
this.renderReactTemplates();
}
if (isPropertyChanged && this.propertyChange) {
var args = {
element: cloneBlazorObject(this), cause: this.diagramActions,
diagramAction: this.getDiagramAction(this.diagramActions),
oldValue: cloneBlazorObject(oldProp), newValue: cloneBlazorObject(newProp)
};
// Removed isBlazor code
this.triggerEvent(DiagramEvent.propertyChange, args);
}
/**Feature(EJ2-60228): Need to add Object ID in the history change event argument*/
if (!refereshColelction && (this.canLogChange()) && (this.modelChanged(newProp, oldProp))) {
var propertyObjects = [];
var nodeObjects = [];
var connObjects = [];
var nodeIndex = void 0;
var laneIndex = void 0;
if (newProp.nodes && Object.keys(newProp.nodes).length > 0) {
for (var _k = 0, _l = Object.keys(newProp.nodes); _k < _l.length; _k++) {
var key = _l[_k];
nodeIndex = parseInt(key, 10);
nodeObjects.push(this.nodes[parseInt(nodeIndex.toString(), 10)].id);
//962315 - Exception when editing lane header annotation at runtime
if (newProp.nodes[parseInt(nodeIndex.toString(), 10)]
&& newProp.nodes[parseInt(nodeIndex.toString(), 10)].shape
&& newProp.nodes[parseInt(nodeIndex.toString(), 10)].shape.lanes) {
/* eslint-disable */
for (var _m = 0, _o = Object.keys(newProp.nodes[parseInt(nodeIndex.toString(), 10)].shape.lanes); _m < _o.length; _m++) {
var key2 = _o[_m];
laneIndex = parseInt(key2, 10);
}
/* eslint-enable */
}
}
}
if (newProp.connectors && Object.keys(newProp.connectors).length > 0) {
for (var _p = 0, _q = Object.keys(newProp.connectors); _p < _q.length; _p++) {
var key = _q[_p];
var connIndex = parseInt(key, 10);
connObjects.push(this.connectors[parseInt(connIndex.toString(), 10)].id);
}
}
propertyObjects = nodeObjects.concat(connObjects);
//To prevent history entry for text annotation connector while dragging node.
var textCon = connObjects.filter(function (id) { return _this.nameTable["" + id].isBpmnAnnotationConnector; });
/* eslint-disable */
if (textCon.length === 0) {
//historyEntry to store BPMNtextAnnotation connector positionchange.
if (newProp.nodes && newProp.nodes[nodeIndex] && newProp.nodes[nodeIndex].shape
&& newProp.nodes[nodeIndex].shape.textAnnotation
&& newProp.nodes[nodeIndex].shape.textAnnotation.textAnnotationTarget !== '') {
var obj = this.nameTable[this.nodes[parseInt(nodeIndex.toString(), 10)].inEdges[0]];
this.startGroupAction();
var connectorEntry = { type: 'ConnectionChanged', undoObject: bpmnAnnotationConnector, redoObject: cloneObject(obj), category: 'Internal' };
var entry = { type: 'PropertyChanged', undoObject: oldProp, redoObject: newProp, category: 'Internal' };
if (this.historyManager) {
this.addHistoryEntry(connectorEntry);
this.addHistoryEntry(entry, propertyObjects);
}
this.endGroupAction();
}
else {
var entry = { type: 'PropertyChanged', undoObject: oldProp, redoObject: newProp, category: 'Internal' };
if (this.historyManager && !this.isRowHeightUpdate) {
this.addHistoryEntry(entry, propertyObjects);
if ((newProp.nodes && newProp.nodes[nodeIndex] && newProp.nodes[nodeIndex].shape
&& newProp.nodes[nodeIndex].shape.lanes
&& newProp.nodes[nodeIndex].shape.lanes[laneIndex]
&& newProp.nodes[nodeIndex].shape.lanes[laneIndex].children)
&& !(this.diagramActions & DiagramAction.UndoRedo)) {
this.endGroupAction();
}
}
this.isRowHeightUpdate = false;
}
}
}
this.resetDiagramActions();
if (refereshColelction) {
this.initObjects(true);
this.refreshDiagramLayer();
if (refreshLayout) {
this.doLayout();
}
}
var scrollAlone = ((Object.keys(newProp).length === 1) && newProp.scrollSettings !== undefined);
if (!refereshColelction) {
for (var _r = 0, _s = this.views; _r < _s.length; _r++) {
var temp = _s[_r];
var view = this.views["" + temp];
if (!(view instanceof Diagram)) {
if (newProp.scrollSettings && newProp.scrollSettings.currentZoom !== oldProp.scrollSettings.currentZoom) {
//view.updateHtmlLayer(view);
}
if (!scrollAlone) {
this.refreshCanvasDiagramLayer(view);
}
}
}
}
}
}
else {
this.rotateUsingButton = false;
}
};
/* tslint:enable */
Diagram.prototype.updateSnapSettings = function (newProp) {
if (newProp.snapSettings.constraints !== undefined || newProp.snapSettings.horizontalGridlines ||
newProp.snapSettings.verticalGridlines || newProp.snapSettings.gridType) {
this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);
}
};
// This private method has been specially provided to update only the node old gradient value in oldProperty.
// This issue belong to core team but we fixed in our end.
// https://syncfusion.atlassian.net/browse/EJ2-49232
Diagram.prototype.updateGradient = function (newProp, oldProp, nodeObj) {
if (nodeObj.oldGradientValue) {
var linearNode = nodeObj;
var radialNode = nodeObj;
var linearProp = oldProp.style.gradient;
var radialProp = oldProp.style.gradient;
for (var _i = 0, _a = Object.keys(newProp.style.gradient); _i < _a.length; _i++) {
var key = _a[_i];
switch (key) {
case 'type':
if (linearNode.type) {
linearProp.type = linearNode.type;
}
break;
case 'x1':
if (linearNode.x1) {
linearProp.x1 = linearNode.x1;
}
break;
case 'x2':
if (linearNode.x2) {
linearProp.x2 = linearNode.x2;
}
break;
case 'y1':
if (linearNode.y1) {
linearProp.y1 = linearNode.y1;
}
break;
case 'y2':
if (linearNode.y2) {
linearProp.y2 = linearNode.y2;
}
break;
case 'cx':
if (radialNode.cx) {
radialProp.cx = radialNode.cx;
}
break;
case 'cy':
if (radialNode.cy) {
radialProp.cy = radialNode.cy;
}
break;
case 'fx':
if (radialNode.fx) {
radialProp.fx = radialNode.fx;
}
break;
case 'fy':
if (radialNode.fy) {
radialProp.fy = radialNode.fy;
}
break;
case 'r':
if (radialNode.r) {
radialProp.r = radialNode.r;
}
break;
case 'stops':
if (nodeObj.oldGradientValue.stops) {
var stops = (Object.values(cloneObject(nodeObj.oldGradientValue.stops)));
stops.pop();
oldProp.style.gradient.stops = stops;
}
break;
}
}
}
};
Diagram.prototype.updateRulerSettings = function (newProp) {
if (newProp.rulerSettings.dynamicGrid !== undefined) {
this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings, this.hRuler, this.vRuler);
}
if (newProp.rulerSettings.showRulers !== undefined) {
this.intOffPageBackground();
this.scroller.setSize();
this.renderRulers();
}
else if (newProp.rulerSettings.horizontalRuler !== undefined ||
newProp.rulerSettings.verticalRuler !== undefined) {
if (newProp.rulerSettings.horizontalRuler.thickness !== undefined ||
newProp.rulerSettings.verticalRuler.thickness !== undefined) {
removeRulerElements(this);
this.intOffPageBackground();
this.scroller.setSize();
this.renderRulers();
}
else {
updateRuler(this);
}
}
this.diagramRenderer.updateGrid(this.snapSettings, getGridLayerSvg(this.element.id), this.scroller.transform, this.rulerSettings