@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,578 lines (1,556 loc) • 133 kB
TypeScript
import { Component, L10n, Droppable } from '@syncfusion/ej2-base';
import { ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { DiagramModel } from './diagram-model';
import { DiagramRenderer } from './rendering/renderer';
import { PageSettingsModel, ScrollSettingsModel } from './diagram/page-settings-model';
import { DiagramElement } from './core/elements/diagram-element';
import { ServiceLocator } from './objects/service';
import { IElement, IDataLoadedEventArgs, ISelectionChangeEventArgs, IElementDrawEventArgs, IMouseWheelEventArgs, ISegmentChangeEventArgs, ILoadEventArgs, ILoadedEventArgs, ILayoutUpdatedEventArgs } from './objects/interface/IElement';
import { IClickEventArgs, FixedUserHandleClickEventArgs } from './objects/interface/IElement';
import { UserHandleEventsArgs } from './objects/interface/IElement';
import { FixedUserHandleEventsArgs } from './objects/interface/IElement';
import { IKeyEventArgs } from './objects/interface/IElement';
import { ICommandExecuteEventArgs } from './objects/interface/IElement';
import { ISizeChangeEventArgs, IConnectionChangeEventArgs, IEndChangeEventArgs, IDoubleClickEventArgs } from './objects/interface/IElement';
import { ICollectionChangeEventArgs, IPropertyChangeEventArgs, IDraggingEventArgs, IRotationEventArgs } from './objects/interface/IElement';
import { ISegmentCollectionChangeEventArgs } from './objects/interface/IElement';
import { IDragEnterEventArgs, IDragLeaveEventArgs, IDragOverEventArgs, IDropEventArgs } from './objects/interface/IElement';
import { ITextEditEventArgs, IHistoryChangeArgs, IScrollChangeEventArgs } from './objects/interface/IElement';
import { IMouseEventArgs } from './objects/interface/IElement';
import { IBlazorCustomHistoryChangeArgs, IImageLoadEventArgs } from './objects/interface/IElement';
import { IExpandStateChangeEventArgs } from './objects/interface/IElement';
import { ZoomOptions, IPrintOptions, IExportOptions, IFitOptions, ActiveLabel, IEditSegmentOptions } from './objects/interface/interfaces';
import { View } from './objects/interface/interfaces';
import { GroupableView } from './core/containers/container';
import { Node } from './objects/node';
import { Connector } from './objects/connector';
import { ConnectorModel } from './objects/connector-model';
import { RulerSettingsModel } from './diagram/ruler-settings-model';
import { SnapSettingsModel } from './diagram/grid-lines-model';
import { NodeModel, BpmnAnnotationModel, UmlClassMethodModel, UmlClassAttributeModel, UmlEnumerationMemberModel } from './objects/node-model';
import { LaneModel, PhaseModel } from './objects/node-model';
import { DiagramTools, AlignmentMode, ScrollActions, UmlClassChildType } from './enum/enum';
import { BlazorAction } from './enum/enum';
import { DiagramConstraints, BridgeDirection, AlignmentOptions, PortVisibility, DiagramEvent } from './enum/enum';
import { DistributeOptions, SizingOptions, RenderingMode, DiagramAction, NudgeDirection } from './enum/enum';
import { RealAction, HistoryChangeAction } from './enum/enum';
import { TextElement } from './core/elements/text-element';
import { Rect } from './primitives/rect';
import { PathPortModel, PointPortModel } from './objects/port-model';
import { ShapeAnnotationModel, AnnotationModel, PathAnnotationModel } from './objects/annotation-model';
import { ShapeAnnotation, PathAnnotation } from './objects/annotation';
import { PointModel } from './primitives/point-model';
import { Canvas } from './core/containers/canvas';
import { GridPanel } from './core/containers/grid';
import { DataSourceModel } from './diagram/data-source-model';
import { LayoutModel } from './layout/layout-base-model';
import { ILayout } from './layout/layout-base';
import { DataBinding } from './data-binding/data-binding';
import { Selector } from './objects/node';
import { SelectorModel } from './objects/node-model';
import { CommandHandler } from './interaction/command-manager';
import { DiagramScroller } from './interaction/scroller';
import { Actions } from './interaction/actions';
import { ToolBase } from './interaction/tool';
import { BpmnDiagrams } from './objects/bpmn';
import { DiagramContextMenu } from './objects/context-menu';
import { ConnectorBridging } from './objects/connector-bridging';
import { SpatialSearch } from './interaction/spatial-search/spatial-search';
import { HistoryEntry, History } from './diagram/history';
import { UndoRedo } from './objects/undo-redo';
import { ConnectorEditing } from './interaction/connector-editing';
import { Ruler } from '../ruler/index';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
import { CommandManagerModel, ContextMenuSettingsModel } from './diagram/keyboard-commands-model';
import { Snapping } from './objects/snapping';
import { DiagramTooltipModel } from './objects/tooltip-model';
import { ShadowModel } from './core/appearance-model';
import { RadialTree } from './layout/radial-tree';
import { HierarchicalTree } from './layout/hierarchical-tree';
import { ComplexHierarchicalTree } from './layout/complex-hierarchical-tree';
import { MindMap } from './layout/mind-map';
import { Tooltip } from '@syncfusion/ej2-popups';
import { PrintAndExport } from './print-settings';
import { SymmetricLayout } from './layout/symmetrical-layout';
import { LayoutAnimation } from './objects/layout-animation';
import { LayerModel } from './diagram/layer-model';
import { SerializationSettingsModel } from './diagram/serialization-settings-model';
import { CustomCursorActionModel } from './diagram/custom-cursor-model';
import { LineRouting } from './interaction/line-routing';
import { AvoidLineOverlapping } from './interaction/line-overlapping';
import { LineDistribution } from './interaction/line-distribution';
import { DiagramSettingsModel } from '../diagram/diagram-settings-model';
import { NodeFixedUserHandleModel, ConnectorFixedUserHandleModel } from './objects/fixed-user-handle-model';
import { SegmentThumbShapes } from './enum/enum';
import { Ej1Serialization } from './load-utility/modelProperties';
import { FlowchartLayout } from './layout/flowChart/flow-chart-layout';
import { UmlSequenceDiagramModel } from './diagram/sequence-diagram-model';
/**
* Represents the Diagram control
* ```html
* <div id='diagram'/>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* width:'1000px', height:'500px' });
* diagram.appendTo('#diagram');
* ```
*/
export declare class Diagram extends Component<HTMLElement> implements INotifyPropertyChanged {
/**
* `organizationalChartModule` is used to arrange the nodes in a organizational chart like struture
*
* @private
*/
organizationalChartModule: HierarchicalTree;
/**
* `mindMapChartModule` is used to arrange the nodes in a mind map like structure
*
*/
mindMapChartModule: MindMap;
/**
* `radialTreeModule` is used to arrange the nodes in a radial tree like structure
*
* @ignoreapilink
*/
radialTreeModule: RadialTree;
/**
* `complexHierarchicalTreeModule` is used to arrange the nodes in a hierarchical tree like structure
*
* @private
*/
complexHierarchicalTreeModule: ComplexHierarchicalTree;
/**
* `dataBindingModule` is used to populate nodes from given data source
*
* @private
*/
dataBindingModule: DataBinding;
/**
* `snappingModule` is used to Snap the objects
*
* @private
*/
snappingModule: Snapping;
/**
* `ej1SerializationModule` is used to load ej1 json
*
* @private
*/
ej1SerializationModule: Ej1Serialization;
/**
* `printandExportModule` is used to print or export the objects
*
* @private
*/
printandExportModule: PrintAndExport;
/**
* `bpmnModule` is used to add built-in BPMN Shapes to diagrams
*
* @private
*/
bpmnModule: BpmnDiagrams;
/**
* 'symmetricalLayoutModule' is used to render layout in symmetrical method
*
* @private
*/
symmetricalLayoutModule: SymmetricLayout;
/**
* 'flowchartLayoutModule' is used to render flow chart layout
*
* @private
*/
flowchartLayoutModule: FlowchartLayout;
/**
* `bridgingModule` is used to add bridges to connectors
*
* @private
*/
bridgingModule: ConnectorBridging;
/**
* `undoRedoModule` is used to revert and restore the changes
*
* @private
*/
undoRedoModule: UndoRedo;
/**
* `layoutAnimateModule` is used to revert and restore the changes
*
* @private
*/
layoutAnimateModule: LayoutAnimation;
/**
* 'contextMenuModule' is used to manipulate context menu
*
* @private
*/
contextMenuModule: DiagramContextMenu;
/**
* `connectorEditingToolModule` is used to edit the segments for connector
*
* @private
*/
connectorEditingToolModule: ConnectorEditing;
/**
* `lineRoutingModule` is used to connect the node's without overlapping
*
* @private
*/
lineRoutingModule: LineRouting;
/**
* `avoidLineOverlappingModule` is used to connect the connector's without overlapping
*
* @private
*/
avoidLineOverlappingModule: AvoidLineOverlapping;
/**
* `lineDistributionModule` is used to connect the node's without overlapping in automatic layout
*
*/
lineDistributionModule: LineDistribution;
/**
* Defines the width of the diagram model.
* ```html
* <div id='diagram'/>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* width:'1000px', height:'500px' });
* diagram.appendTo('#diagram');
* ```
*
* @default '100%'
*/
width: string | number;
/**
* Split the connector, when the node is dropped onto it and establish connection with that dropped node.
*
* @default false
*/
enableConnectorSplit: boolean;
/**
* Defines the diagram rendering mode.
* * SVG - Renders the diagram objects as SVG elements
* * Canvas - Renders the diagram in a canvas
*
* @default 'SVG'
*/
mode: RenderingMode;
/**
* Defines the height of the diagram model.
*
* @default '100%'
*/
height: string | number;
/**
* Defines the segmentThumbShape
*
* @default 'Circle'
*/
segmentThumbShape: SegmentThumbShapes;
/**
* Specifies the size of the segment thumb. When not set, it defaults to matching the underlying path data.
*
* @default 10
*/
segmentThumbSize: number;
/**
* Defines type of menu that appears when you perform right-click operation
* An object to customize the context menu of diagram
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* ...
* contextMenuSettings: { show: true },
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
*/
contextMenuSettings: ContextMenuSettingsModel;
/**
* Constraints are used to enable/disable certain behaviors of the diagram.
* * None - Disables DiagramConstraints constraints
* * Bridging - Enables/Disables Bridging support for connector
* * UndoRedo - Enables/Disables the Undo/Redo support
* * Tooltip - Enables/Disables Tooltip support
* * UserInteraction - Enables/Disables editing diagram interactively
* * ApiUpdate - Enables/Disables editing diagram through code
* * PageEditable - Enables/Disables editing diagrams both interactively and through code
* * Zoom - Enables/Disables Zoom support for the diagram
* * PanX - Enables/Disable PanX support for the diagram
* * PanY - Enables/Disable PanY support for the diagram
* * Pan - Enables/Disable Pan support the diagram
*
* @default 'Default'
* @aspNumberEnum
*/
constraints: DiagramConstraints;
/**
* Defines the precedence of the interactive tools. They are,
* * None - Disables selection, zooming and drawing tools
* * SingleSelect - Enables/Disables single select support for the diagram
* * MultipleSelect - Enables/Disable MultipleSelect select support for the diagram
* * ZoomPan - Enables/Disable ZoomPan support for the diagram
* * DrawOnce - Enables/Disable ContinuousDraw support for the diagram
* * ContinuousDraw - Enables/Disable ContinuousDraw support for the diagram
*
* @default 'Default'
* @aspNumberEnum
*/
tool: DiagramTools;
/**
* Defines the direction of the bridge that is inserted when the segments are intersected
* * Top - Defines the direction of the bridge as Top
* * Bottom - Defines the direction of the bridge as Bottom
* * Left - Sets the bridge direction as left
* * Right - Sets the bridge direction as right
*
* @default top
*/
bridgeDirection: BridgeDirection;
/**
* Defines the background color of the diagram
*
* @default 'transparent'
*/
backgroundColor: string;
/**
* Defines the gridlines and defines how and when the objects have to be snapped
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let horizontalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1' };
* let verticalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1'};
* let diagram: Diagram = new Diagram({
* ...
* snapSettings: { horizontalGridlines, verticalGridlines, constraints: SnapConstraints.ShowLines,
* snapObjectDistance: 5, snapAngle: 5 },
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @default {}
*/
snapSettings: SnapSettingsModel;
/**
* Defines the properties of both horizontal and vertical guides/rulers to measure the diagram area.
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let arrange: Function = (args: IArrangeTickOptions) => {
* if (args.tickInterval % 10 == 0) {
* args.tickLength = 25;
* }
* }
* let diagram: Diagram = new Diagram({
* ...
* rulerSettings: { showRulers: true,
* horizontalRuler: { segmentWidth: 50, orientation: 'Horizontal', interval: 10, arrangeTick: arrange },
* verticalRuler: {segmentWidth: 200,interval: 20, thickness: 20,
* tickAlignment: 'LeftOrTop', segmentWidth: 50, markerColor: 'red' }
* },
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @default {}
*/
rulerSettings: RulerSettingsModel;
/**
* Page settings enable to customize the appearance, width, and height of the Diagram page.
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* ...
* pageSettings: { width: 800, height: 600, orientation: 'Landscape',
* background: { color: 'blue' }, boundaryConstraints: 'Infinity'},
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @default {}
*/
pageSettings: PageSettingsModel;
/**
* Defines the serialization settings of diagram.
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* ...
* serializationSettings: { preventDefaults: true },
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @default {}
*/
serializationSettings: SerializationSettingsModel;
/**
* Defines the collection of nodes
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let nodes: NodeModel[] = [{
* id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
* annotations: [{ content: 'Default Shape' }]
* },
* {
* id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
* shape: {
* type: 'Basic', shape: 'Ellipse'
* },
* annotations: [{ content: 'Path Element' }]
* }
* ];
* let diagram: Diagram = new Diagram({
* ...
* nodes: nodes,
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @aspDefaultValueIgnore
* @default undefined
*/
nodes: NodeModel[];
/**
* Defines the object to be drawn using drawing tool
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* ...
* drawingObject : {id: 'connector3', type: 'Straight'},
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @aspDefaultValueIgnore
* @default undefined
*/
drawingObject: NodeModel | ConnectorModel;
/**
* Defines a collection of objects, used to create link between two points, nodes or ports to represent the relationships between them
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let connectors: ConnectorModel[] = [{
* id: 'connector1',
* type: 'Straight',
* sourcePoint: { x: 100, y: 300 },
* targetPoint: { x: 200, y: 400 },
* }];
* let diagram: Diagram = new Diagram({
* ...
* connectors: connectors,
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @default []
*/
connectors: ConnectorModel[];
/**
* Defines the basic elements for the diagram
*
* @default []
* @hidden
*/
basicElements: DiagramElement[];
/**
* Defines the tooltip that should be shown when the mouse hovers over a node or connector
* An object that defines the description, appearance and alignments of tooltip
*
* @default {}
*/
tooltip: DiagramTooltipModel;
/**
* Configures the data source that is to be bound with diagram
*
* @default {}
*/
dataSourceSettings: DataSourceModel;
/**
* Allows the user to save custom information/data about diagram
*
* @aspDefaultValueIgnore
* @default undefined
*/
addInfo: Object;
/**
* Customizes the undo redo functionality
*
* @default undefined
*/
historyManager: History;
/**
* Customizes the node template
*
* @default undefined
* @aspType string
*/
nodeTemplate: string | Function;
/**
* Customizes the annotation template
*
* @default undefined
* @aspType string
*/
annotationTemplate: string | Function;
/**
* This property represents the template content of a user handle. The user can define any HTML element as a template.
*
* @default undefined
* @aspType string
*/
userHandleTemplate: string | Function;
/**
* This property allows us to define HTML elements for fixed user handle
*
* @default undefined
* @aspType string
*/
fixedUserHandleTemplate: string | Function;
/**
* Helps to return the default properties of node
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let nodes: NodeModel[] = [{
* id: 'node1', height: 100, offsetX: 100, offsetY: 100,
* annotations: [{ content: 'Default Shape' }]
* },
* {
* id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
* shape: {
* type: 'Basic', shape: 'Ellipse'
* },
* annotations: [{ content: 'Ellipse' }]
* }
* ];
* let diagram: Diagram = new Diagram({
* ...
* nodes: nodes,
* getNodeDefaults: (node: NodeModel) => {
* let obj: NodeModel = {};
* if (obj.width === undefined) {
* obj.width = 145;
* }
* obj.style = { fill: '#357BD2', strokeColor: 'white' };
* obj.annotations = [{ style: { color: 'white', fill: 'transparent' } }];
* return obj;
* },
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @aspDefaultValueIgnore
* @default undefined
*/
getNodeDefaults: Function | string;
/**
* Helps to assign the default properties of nodes
*/
nodeDefaults: NodeModel;
/**
* Helps to return the default properties of connector
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let connectors: ConnectorModel[] = [{
* id: 'connector1',
* sourcePoint: { x: 100, y: 300 },
* targetPoint: { x: 200, y: 400 },
* }];
* let diagram: Diagram = new Diagram({
* ...
* connectors: connectors,
* getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
* let connObj: ConnectorModel = {};
* connObj.targetDecorator ={ shape :'None' };
* connObj.type = 'Orthogonal';
* return connObj;
* },
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @aspDefaultValueIgnore
* @default undefined
*/
getConnectorDefaults: Function | string;
/**
* Helps to assign the default properties of connector
*/
connectorDefaults: ConnectorModel;
/**
* setNodeTemplate helps to customize the content of a node
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let getTextElement: Function = (text: string) => {
* let textElement: TextElement = new TextElement();
* textElement.width = 50;
* textElement.height = 20;
* textElement.content = text;
* return textElement;
* };
* let nodes: NodeModel[] = [{
* id: 'node1', height: 100, offsetX: 100, offsetY: 100,
* annotations: [{ content: 'Default Shape' }]
* },
* {
* id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100
* }
* ];
* let diagram: Diagram = new Diagram({
* ...
* nodes: nodes,
* setNodeTemplate : setNodeTemplate,
* ...
* });
* diagram.appendTo('#diagram');
* ```
* function setNodeTemplate() {
* setNodeTemplate: (obj: NodeModel, diagram: Diagram): StackPanel => {
* if (obj.id === 'node2') {
* let table: StackPanel = new StackPanel();
* table.orientation = 'Horizontal';
* let column1: StackPanel = new StackPanel();
* column1.children = [];
* column1.children.push(getTextElement('Column1'));
* addRows(column1);
* let column2: StackPanel = new StackPanel();
* column2.children = [];
* column2.children.push(getTextElement('Column2'));
* addRows(column2);
* table.children = [column1, column2];
* return table;
* }
* return null;
* }
* ...
* }
*
* @aspDefaultValueIgnore
* @default undefined
*/
setNodeTemplate: Function | string;
/**
* Allows to set accessibility content for diagram objects
*
* @aspDefaultValueIgnore
* @default undefined
*/
/**
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let connector1: ConnectorModel = {
* id: 'connector1', type: 'Straight',
* sourcePoint: { x: 100, y: 100 },targetPoint: { x: 200, y: 200 },
* annotations: [{ 'content': 'label', 'offset': 0, 'alignment': 'Center' }]
* };
* let connector2: ConnectorModel = {
* id: 'connector2', type: 'Straight',
* sourcePoint: { x: 400, y: 400 }, targetPoint: { x: 600, y: 600 },
* };
* let diagram: Diagram;
* diagram = new Diagram({
* width: 1000, height: 1000,
* connectors: [connector1, connector2],
* snapSettings: { constraints: SnapConstraints.ShowLines },
* getDescription: getAccessibility
* });
* diagram.appendTo('#diagram');
* function getAccessibility(obj: ConnectorModel, diagram: Diagram): string {
* let value: string;
* if (obj instanceof Connector) {
* value = 'clicked on Connector';
* } else if (obj instanceof TextElement) {
* value = 'clicked on annotation';
* }
* else if (obj instanceof Decorator) {
* value = 'clicked on Decorator';
* }
* else { value = undefined; }
* return value;
* }
* ```
*
*/
getDescription: Function | string;
/**
* Allows to get the custom properties that have to be serialized
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let nodes: NodeModel[] = [{
* id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
* annotations: [{ content: 'Default Shape' }]
* },
* {
* id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
* shape: { type: 'Basic', shape: 'Ellipse' },
* annotations: [{ content: 'Path Element' }]
* }
* ];
* let connectors: ConnectorModel[] = [{
* id: 'connector1', type: 'Straight',
* sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 },
* }];
* let diagram: Diagram = new Diagram({
* ...
* connectors: connectors, nodes: nodes,
* getCustomProperty: (key: string) => {
* if (key === 'nodes') {
* return ['description'];
* }
* return null;
* }
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @aspDefaultValueIgnore
* @default undefined
*/
getCustomProperty: Function | string;
/**
* Allows the user to set custom tool that corresponds to the given action
*
* @aspDefaultValueIgnore
* @default undefined
*/
/**
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* function getTool(action: string): ToolBase {
* let tool: ToolBase;
* if (action === 'userHandle1') {
* tool = new CloneTool(diagram.commandHandler, true);
* }
* return tool;
* }
* class CloneTool extends ToolBase {
* public mouseDown(args: MouseEventArgs): void {
* super.mouseDown(args);
* diagram.copy();
* diagram.paste();
* }
* }
* let nodes: NodeModel[] = [{
* id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
* },
* {
* id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
* shape: { type: 'Basic', shape: 'Ellipse' },
* }];
* let connectors: ConnectorModel[] = [{
* id: 'connector1', type: 'Straight',
* sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 },
* }];
* let handles: UserHandleModel[] = [
* { name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,
* pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',
* side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',
* pathColor: 'yellow' }];
* let diagram: Diagram = new Diagram({
* ...
* connectors: connectors, nodes: nodes,
* selectedItems: { constraints: SelectorConstraints.All, userHandles: handles },
* getCustomTool: getTool
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
*/
getCustomTool: Function | string;
/**
* Allows the user to set custom cursor that corresponds to the given action
*
* @aspDefaultValueIgnore
* @default undefined
*/
/**
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* function getCursor(action: string, active: boolean): string {
* let cursor: string;
* if (active && action === 'Drag') {
* cursor = '-webkit-grabbing';
* } else if (action === 'Drag') {
* cursor = '-webkit-grab'
* }
* return cursor;
* }
* let nodes: NodeModel[] = [{
* id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
* },
* {
* id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
* shape: { type: 'Basic', shape: 'Ellipse' },
* }];
* let handle: UserHandleModel[] = [
* { name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,
* pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',
* side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',
* pathColor: 'yellow' }];
* let diagram: Diagram = new Diagram({
* ...
* nodes: nodes,
* selectedItems: { constraints: SelectorConstraints.All, userHandles: handle },
* getCustomCursor: getCursor
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
*/
getCustomCursor: Function | string;
/**
* A collection of JSON objects where each object represents a custom cursor action. Layer is a named category of diagram shapes.
*
* @default []
*/
customCursor: CustomCursorActionModel[];
/**
* Helps to set the undo and redo node selection
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let connectors: ConnectorModel[] = [{
* id: 'connector1',
* sourcePoint: { x: 100, y: 300 },
* targetPoint: { x: 200, y: 400 },
* }];
* let diagram: Diagram = new Diagram({
* ...
* connectors: connectors,
* updateSelection: (object: ConnectorModel | NodeModel, diagram: Diagram) => {
* let objectCollection = [];
* objectCollection.push(obejct);
* diagram.select(objectCollection);
* },
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @aspDefaultValueIgnore
* @default undefined
*/
updateSelection: Function | string;
/**
* Represents the diagram settings
* ```html
* <div id='diagram'></div>
* ```
* ```typescript
* let diagram: Diagram = new Diagram({
* ...
* diagramSettings: { inversedAlignment: true }
* ...
* });
* diagram.appendTo('#diagram');
* ```
*
* @default {}
*/
diagramSettings: DiagramSettingsModel;
/** @private */
version: number;
/**
* Defines the collection of selected items, size and position of the selector
*
* @default {}
*/
selectedItems: SelectorModel;
/**
* Defines the current zoom value, zoom factor, scroll status and view port size of the diagram
*
* @default {}
*/
scrollSettings: ScrollSettingsModel;
/**
* Layout is used to auto-arrange the nodes in the Diagram area
*
* @default {}
*/
layout: LayoutModel;
/**
* Defines the model for the diagram.
*
* ```html
* <div id='diagram'></div>
* ```
*
* ```typescript
* const model: UmlSequenceDiagramModel = {
* participants: [
* {
* id: 'User', content: 'User', width: 100, height: 50,
* showDestructionMarker: true,
* isActor: true,
* activationBoxes: [
* { id: 'act1', startMessageID: 'MSG1', endMessageID: 'MSG3' }
* ]
* },
* {
* id: 'Server', content: 'Server', width: 100, height: 50,
* showDestructionMarker: true,
* isActor: false,
* activationBoxes: [
* { id: 'act2', startMessageID: 'MSG1', endMessageID: 'MSG3' }
* ]
* }
* ],
* messages: [
* { id: 'MSG1', content: 'User sends request', fromParticipantID: 'User', toParticipantID: 'Server' },
* { id: 'MSG2', content: 'Processing', fromParticipantID: 'Server', toParticipantID: 'Server' },
* { id: 'MSG3', content: 'Server sends response', fromParticipantID: 'Server', toParticipantID: 'User' }
* ],
* fragments: [
* {
* id: 'frag1', type: 'Optional',
* conditions: [
* { content: 'Interactions', messageIds: ['MSG1', 'MSG2', 'MSG3'] }
* ]
* }
* ]
* };
*
* const diagram: Diagram = new Diagram({
* // Other properties
* model: model
* });
*
* diagram.appendTo('#diagram');
* ```
*
* @aspDefaultValueIgnore
* @default undefined
*/
model: UmlSequenceDiagramModel;
/**
* Defines a set of custom commands and binds them with a set of desired key gestures
*
* @default {}
*/
commandManager: CommandManagerModel;
/**
* Triggers after diagram is populated from the external data source
*
* @event
*/
dataLoaded: EmitType<IDataLoadedEventArgs>;
/**
* Triggers when a symbol is dragged into diagram from symbol palette
*
* @event
*/
dragEnter: EmitType<IDragEnterEventArgs>;
/**
* Triggers when a symbol is dragged outside of the diagram.
*
* @event
*/
dragLeave: EmitType<IDragLeaveEventArgs>;
/**
* Triggers when a symbol is dragged over diagram
*
* @event
*/
dragOver: EmitType<IDragOverEventArgs>;
/**
* Triggers when a node, connector or diagram is clicked
*
* @event
*/
click: EmitType<IClickEventArgs>;
/**
* Triggers when a change is reverted or restored(undo/redo)
*
* @event
*/
historyChange: EmitType<IHistoryChangeArgs>;
/**
* Triggers when a custom entry change is reverted or restored(undo/redo)
*
* @event
*/
historyStateChange: EmitType<IBlazorCustomHistoryChangeArgs>;
/**
* Triggers when a node, connector or diagram model is clicked twice
*
* @event
*/
doubleClick: EmitType<IDoubleClickEventArgs>;
/**
* Triggers when editor got focus at the time of node’s label or text node editing.
*
* @event
*/
textEdit: EmitType<ITextEditEventArgs>;
/**
* Triggers when the diagram is zoomed or panned
*
* @event
*/
scrollChange: EmitType<IScrollChangeEventArgs>;
/**
* Event triggers whenever the user rotate the mouse wheel either upwards or downwards
*
* @event
*/
mouseWheel: EmitType<IMouseWheelEventArgs>;
/**
* Triggers when the selection is changed in diagram
*
* @event
*/
selectionChange: EmitType<ISelectionChangeEventArgs>;
/**
* Triggers when a node is resized
*
* @event
*/
sizeChange: EmitType<ISizeChangeEventArgs>;
/**
* Triggers when the connection is changed
*
* @event
*/
connectionChange: EmitType<IConnectionChangeEventArgs>;
/**
* Triggers when the connector's source point is changed
*
* @event
*/
sourcePointChange: EmitType<IEndChangeEventArgs>;
/**
* Triggers when the connector's target point is changed
*
* @event
*/
targetPointChange: EmitType<IEndChangeEventArgs>;
/**
* Triggers once the node or connector property changed.
*
* @event
*/
propertyChange: EmitType<IPropertyChangeEventArgs>;
/**
* Triggers while dragging the elements in diagram
*
* @event
*/
positionChange: EmitType<IDraggingEventArgs>;
/**
* Triggers when a user releases a key.
*
* @event
*/
keyUp: EmitType<IKeyEventArgs>;
/**
* Triggers when a user is pressing a key.
*
* @event
*/
keyDown: EmitType<IKeyEventArgs>;
/**
* Triggers after animation is completed for the diagram elements.
*
* @event
*/
animationComplete: EmitType<Object>;
/**
* Triggers when the diagram elements are rotated
*
* @event
*/
rotateChange: EmitType<IRotationEventArgs>;
/**
* Triggers when a node/connector is added/removed to/from the diagram.
*
* @event
*/
collectionChange: EmitType<ICollectionChangeEventArgs>;
/**
* Triggers when a node/connector fixedUserHandle is clicked in the diagram.
*
* @event
*/
fixedUserHandleClick: EmitType<FixedUserHandleClickEventArgs>;
/**
* Triggers when a mouseDown on the user handle.
*
* @event
*/
onUserHandleMouseDown: EmitType<UserHandleEventsArgs>;
/**
* Triggers when a mouseUp on the user handle.
*
* @event
*/
onUserHandleMouseUp: EmitType<UserHandleEventsArgs>;
/**
* Triggers when a mouseEnter on the user handle.
*
* @event
*/
onUserHandleMouseEnter: EmitType<UserHandleEventsArgs>;
/**
* Triggers when a mouseLeave on the user handle.
*
* @event
*/
onUserHandleMouseLeave: EmitType<UserHandleEventsArgs>;
/**
* Triggers when a mouseDown on the fixed user handle.
*
* @event
*/
onFixedUserHandleMouseDown: EmitType<FixedUserHandleEventsArgs>;
/**
* Triggers when a mouseUp on the fixed user handle.
*
* @event
*/
onFixedUserHandleMouseUp: EmitType<FixedUserHandleEventsArgs>;
/**
* Triggers when a mouseEnter on the fixed user handle.
*
* @event
*/
onFixedUserHandleMouseEnter: EmitType<FixedUserHandleEventsArgs>;
/**
* Triggers when a mouseLeave on the fixed user handle.
*
* @event
*/
onFixedUserHandleMouseLeave: EmitType<FixedUserHandleEventsArgs>;
/**
* Triggers when a segment is added/removed to/from the connector.
*
* @event
*/
segmentCollectionChange: EmitType<ISegmentCollectionChangeEventArgs>;
/**
* Triggers when the image node is loaded.
*
* @event
*/
onImageLoad: EmitType<IImageLoadEventArgs>;
/**
* Triggers when the state of the expand and collapse icon change for a node.
*
* @event
*/
expandStateChange: EmitType<IExpandStateChangeEventArgs>;
/**
* This event triggers before the diagram load.
*
* @event
*/
load: EmitType<ILoadEventArgs>;
/**
* Triggered when the diagram is rendered completely.
*
* @event
*/
created: EmitType<Object>;
/**
* Triggered when mouse enters a node/connector.
*
* @event
*/
mouseEnter: EmitType<IMouseEventArgs>;
/**
* Triggered when mouse leaves node/connector.
*
* @event
*/
mouseLeave: EmitType<IMouseEventArgs>;
/**
* Triggered when mouse hovers a node/connector.
*
* @event
*/
mouseOver: EmitType<IMouseEventArgs>;
/**
*
* Triggered when an element is drawn using drawing Tool
* @event
*/
elementDraw: EmitType<IElementDrawEventArgs>;
/**
* Triggers before opening the context menu
*
* @event
*/
contextMenuOpen: EmitType<BeforeOpenCloseMenuEventArgs>;
/**
* Triggers before rendering the context menu item
*
* @event
*/
contextMenuBeforeItemRender: EmitType<MenuEventArgs>;
/**
* Triggers when a context menu item is clicked
*
* @event
*/
contextMenuClick: EmitType<MenuEventArgs>;
/**
* Triggers when a command executed.
*
* @event
*/
commandExecute: EmitType<ICommandExecuteEventArgs>;
/**
* A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes.
*
* @default []
*/
layers: LayerModel[];
/**
* Triggers when a symbol is dragged and dropped from symbol palette to drawing area
*
* @event
*/
drop: EmitType<IDropEventArgs>;
/**
*This event is triggered when we drag the segment thumb of Orthogonal/ Straight /Bezier connector
*
* @event
*/
segmentChange: EmitType<ISegmentChangeEventArgs>;
/**
*This event triggers after the diagram elements finished loading using loadDiagram method
*
* @event
*/
loaded: EmitType<ILoadedEventArgs>;
/**
* Triggers when the layout rendering process in the diagram has either started or completed.
*
* @event
*/
layoutUpdated: EmitType<ILayoutUpdatedEventArgs>;
/** @private */
preventDiagramUpdate: boolean;
/** @private */
checkMenu: boolean;
/** @private */
parentObject: NodeModel;
/** @hidden */
/** @private */
localeObj: L10n;
private defaultLocale;
/** @private */
isServerUpdate: boolean;
/** @private */
currentDrawingObject: Node | Connector;
/** @private */
currentSymbol: Node | Connector;
/** @private */
oldNodeObjects: Node[];
/** @private */
oldDiagramObject: object;
/** @private */
oldConnectorObjects: Connector[];
/** @private */
diagramRenderer: DiagramRenderer;
private gridlineSvgLayer;
private renderer;
/** @private */
tooltipObject: Tooltip;
/** @private */
hRuler: Ruler;
/** @private */
vRuler: Ruler;
/** @private */
droppable: Droppable;
/** @private */
diagramCanvas: HTMLElement;
/** @private */
diagramLayer: HTMLCanvasElement | SVGGElement;
private diagramLayerDiv;
private adornerLayer;
private eventHandler;
private preventOverviewRefresh;
/** @private */
scroller: DiagramScroller;
/** @private */
spatialSearch: SpatialSearch;
/** @private */
commandHandler: CommandHandler;
/** @private */
layerZIndex: number;
/** @private */
layerZIndexTable: {};
/** @private */
nameTable: {};
/** @private */
canEnableBlazorObject: boolean;
/** @private */
pathTable: {};
/** @private */
connectorTable: {};
/** @private */
groupTable: {};
/** @private */
private htmlLayer;
/** @private */
diagramActions: DiagramAction;
/** @private */
scrollActions: ScrollActions;
/** @private */
blazorActions: BlazorAction;
/** @private */
commands: {};
/** @private */
activeLabel: ActiveLabel;
/** @private */
activeLayer: LayerModel;
/** @private */
serviceLocator: ServiceLocator;
/** @private */
views: string[];
/** @private */
isLoading: Boolean;
/** @private */
textEditing: Boolean;
/** @private */
isTriggerEvent: Boolean;
/** @private */
preventNodesUpdate: Boolean;
/** @private */
preventConnectorsUpdate: Boolean;
/** @private */
callBlazorModel: Boolean;
/** @private */
isRowHeightUpdate: Boolean;
/** @private */
selectionConnectorsList: ConnectorModel[];
/** @private */
deleteVirtualObject: boolean;
/** @private */
realActions: RealAction;
/** @private */
previousSelectedObject: (NodeModel | ConnectorModel | AnnotationModel)[];
canLayout: boolean;
cancelPositionChange: boolean;
private isRefreshed;
/** @private */
swimlaneChildTable: {};
/** @private */
swimlaneZIndexTable: {};
/** @private */
canExpand: boolean;
/** @private */
itemType: string;
private changedConnectorCollection;
private changedNodesCollection;
private previousNodeCollection;
private previousConnectorCollection;
private crudDeleteNodes;
private previousSelectedObjects;
private blazorAddorRemoveCollection;
private blazorRemoveIndexCollection;
private diagramid;
private portCenterPoint;
/** @private */
selectedObject: {
helperObject: NodeModel;
actualObject: NodeModel;
};
/** @private */
deleteDependentConnector: boolean;
/** @private */
scaleValue: number;
routedConnectors: string[];
/** @private */
pathDataStorage: Map<string, PointModel[]>;
private isUndo;
/**@private */
groupBounds: Rect;
/**@private */
connectorOrRotatedGroups: NodeModel[];
/**@private */
connectorFlipInProgress: boolean;
/** @private */
checkUndoRedo: boolean;
/** @private */
activeLayerObjectsSet: Set<string>;
/** @private */
restrictedDeltaValue: PointModel;
/**@private */
isScrollOffsetInverted: boolean;
/**@private */
initNodeTemplate: boolean;
/**
* Stores diagram nodes and connectors temporarily before they are initialized and appended to the nameTable.
* @private
*/
tempTable: {};
/**
* Indicates whether the diagram is being refreshed during deserialization.
* @private
*/
deserializing: boolean;
/**
* Constructor for creating the widget
*/
constructor(options?: DiagramModel, element?: HTMLElement | string);
private updateAnnotationText;
private clearCollection;
/**
* 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.
*/
onPropertyChanged(newProp: DiagramModel, oldProp: DiagramModel): void;
private updateSnapSettings;
private updateGradient;
private updateRulerSettings;
/**
* Get the properties to be maintained in the persisted state.
*
* @returns {string}
*/
getPersistData(): string;
/**
* Initialize nodes, connectors and renderer
*/
protected preRender(): void;
private initializePrivateVariables;
private removeSwimlaneChildOnRefresh;
private initializeServices;
/**
* Method to set culture for chart
*/
private setCulture;
private getSwimlaneChildTable;
/**
* Renders the diagram control with nodes and connectors
*/
render(): void;
private updateFitToPage;
private updateTemplate;
private renderInitialCrud;
/**
* Retrieves the module name associated with the diagram.
*
* @returns {string} Retrieves the module name associated with the diagram.
*/
getModuleName(): string;
/**
*
* Returns the name of class Diagram
* @returns {string} Returns the module name of the diagram
* @private
*/
getClassName(): string;
/**
* To provide the array of modules needed for control rendering
*
* @returns {ModuleDeclaration[]} To provide the array of modules needed for control rendering .\
* @private
*/
requiredModules(): ModuleDeclaration[];
private removeUserHandlesTemplate;
/**
*Destroys the diagram, freeing up its resources.
*
* @returns {void} Destroys the diagram, freeing up its resources.
*/
destroy(): void;
private wireEvents;
private unWireEvents;
/**
* Select a specified collection of nodes and connectors in the diagram. You can specify whether to clear the existing selection and provide an old value if needed. \
*
* @returns { void } Select a specified collection of nodes and connectors in the diagram. You can specify whether to clear the existing selection and provide an old value if needed.\
* @param {NodeModel | ConnectorModel} objects - An array containing the collection of nodes and connectors to be selected.
* @param {boolean} multipleSelection - Determines whether the existing selection should be cleared (default is false).
* @param {NodeModel | ConnectorModel} oldValue - Defines the old value
*
*/
select(objects: (NodeModel | ConnectorModel | AnnotationModel)[], multipleSelection?: boolean, oldValue?: (NodeModel | ConnectorModel | AnnotationModel)[]): void;
/**
* Returns the diagram action as a string representation.
* @returns { string }
* @param { DiagramAction } diagramAction - The diagram action to be converted to a string.
*/
getDiagramAction(diagramAction: DiagramAction): string;
/**
* Select all objects, including nodes and connectors, in the diagram. \
*
* @returns { void } Select all objects, including nodes and connectors, in the diagram.\
*
*/
selectAll(): void;
/**
* Remove a specific object from the current selection in the diagram. \
*
* @returns { void } Remove a specific object from the current selection in the diagram.\
* @param {NodeModel | ConnectorModel} obj - The object to remove from the selection.
*
*/
unSelect(obj: NodeModel | ConnectorModel): void;
/**
* Removes all elements from the selection list, clearing the current selection.\
*
* @returns { void } Removes all elements from the selection list, clearing the current selection.\
*
*/
clearSelection(): void;
/**
* Updates the dimensions of the diagram viewport. \
*
* @returns { void } Updates the dimensions of the diagram viewport.\
*
*/
updateViewPort(): void;
private cutCommand;
/**
* Removes the selected nodes and connectors from the diagram and moves them to the di