Represents the Diagram control
<div id='diagram'/>
let diagram: Diagram = new Diagram({
width:'1000px', height:'500px' });
diagram.appendTo('#diagram');
Object
Allows the user to save custom information/data about diagram
Defaults to undefined
String
Defines the background color of the diagram
Defaults to transparent
string
Defines the direction of the bridge that is inserted when the segments are intersected
Defaults to top
Defines a set of custom commands and binds them with a set of desired key gestures
Defaults to {}
Defines a collection of objects, used to create link between two points, nodes or ports to represent the relationships between them
<div id='diagram'></div>
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');
Defaults to []
Constraints are used to enable/disable certain behaviors of the diagram.
Defaults to ‘Default’
Defines type of menu that appears when you perform right-click operation An object to customize the context menu of diagram
<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
contextMenuSettings: { show: true },
...
});
diagram.appendTo('#diagram');
Configures the data source that is to be bound with diagram
Defaults to {}
Defines the object to be drawn using drawing tool
<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
drawingObject : {id: 'connector3', type: 'Straight'},
...
});
diagram.appendTo('#diagram');
Defaults to undefined
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
Function
| string
Helps to return the default properties of connector
<div id='diagram'></div>
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');
Defaults to undefined
Function
| string
<div id='diagram'></div>
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');
Function
| string
Allows to get the custom properties that have to be serialized
<div id='diagram'></div>
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');
Defaults to undefined
Function
| string
<div id='diagram'></div>
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');
Function
| string
<div id='diagram'></div>
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;
}
Function
| string
Helps to return the default properties of node
<div id='diagram'></div>
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');
Defaults to undefined
string
| number
Defines the height of the diagram model.
Defaults to ‘100%’
Customizes the undo redo functionality
Defaults to undefined
A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes.
Defaults to []
Layout is used to auto-arrange the nodes in the Diagram area
Defaults to {}
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ‘undefined’
mindMapChartModule
is used to arrange the nodes in a mind map like structure
string
Defines the diagram rendering mode.
Defaults to ‘SVG’
Defines the collection of nodes
<div id='diagram'></div>
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');
Defaults to undefined
Page settings enable to customize the appearance, width, and height of the Diagram page.
<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
pageSettings: { width: 800, height: 600, orientation: 'Landscape',
background: { color: 'blue' }, boundaryConstraints: 'Infinity'},
...
});
diagram.appendTo('#diagram');
Defaults to {}
radialTreeModule
is used to arrange the nodes in a radial tree like structure
Defines the properties of both horizontal and vertical guides/rulers to measure the diagram area.
<div id='diagram'></div>
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');
Defaults to {}
Defines the current zoom value, zoom factor, scroll status and view port size of the diagram
Defaults to {}
Defines the collection of selected items, size and position of the selector
Defaults to {}
Defines the serialization settings of diagram.
<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
serializationSettings: { preventDefaults: true },
...
});
diagram.appendTo('#diagram');
Defaults to {}
Function
| string
setNodeTemplate helps to customize the content of a node
<div id='diagram'></div>
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; } … }
Defaults to undefined
Defines the gridlines and defines how and when the objects have to be snapped
<div id='diagram'></div>
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');
Defaults to {}
Defines the precedence of the interactive tools. They are,
Defaults to ‘Default’
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
Defaults to {}
Function
| string
Helps to set the undo and redo node selection
<div id='diagram'></div>
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');
Defaults to undefined
string
| number
Defines the width of the diagram model.
<div id='diagram'/>
let diagram: Diagram = new Diagram({
width:'1000px', height:'500px' });
diagram.appendTo('#diagram');
Defaults to ‘100%’
Adds the given object to diagram control
Add constraints at run time
Returns number
Adds the handler to the given event listener.
Returns void
Adds the given change in the diagram control to the track
Parameter | Type | Description |
---|---|---|
entry | HistoryEntry |
Defines the entry/information about a change in diagram |
Returns void
Add Labels at the run time
Returns void
Add dynamic Lanes to swimLane at runtime
Returns void
add the layer into diagram
Parameter | Type | Description |
---|---|---|
layer | LayerModel |
defines the layer model which is to be added |
layerObject (optional) | Object[] |
defines the object of the layer |
Returns void
Add a phase to a swimLane at runtime
Returns void
Add ports at the run time
Returns void
Add a process into the sub-process
Returns void
Adds the given annotation to the given node
Parameter | Type | Description |
---|---|---|
annotation | BpmnAnnotationModel |
Defines the annotation to be added |
node | NodeModel |
Defines the node to which the annotation has to be added |
Returns void
Aligns the group of objects to with reference to the first object in the group
Returns void
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
bring the specified bounds into the viewport
Returns void
move the layer forward
Parameter | Type | Description |
---|---|---|
layerName | string |
define the name of the layer |
Returns void
bring the specified bounds to the center of the viewport
Returns void
bring the selected nodes or connectors to front
Returns void
Clears all nodes and objects in the diagram
Returns void
To clear history of the diagram
Returns void
Removes all elements from the selection list
Returns void
clone a layer with its object
Parameter | Type | Description |
---|---|---|
layerName | string |
define the name of the layer |
Returns void
Copies the selected nodes and connectors to diagram clipboard
Returns Object
Removes the selected nodes and connectors from diagram and moves them to diagram clipboard
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Destroys the diagram control
Returns void
Arranges the group of objects with equal intervals, but within the group of objects
Parameter | Type | Description |
---|---|---|
option | string |
Defines the factor to distribute the shapes |
objects (optional) | [] | Defines the objects that have to be equally spaced |
Returns void
Automatically updates the diagram objects based on the type of the layout
Returns ILayout
Drags the given object by the specified pixels
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel | SelectorModel |
Defines the nodes/connectors to be dragged |
tx | number |
Defines the distance by which the given objects have to be horizontally moved |
ty | number |
Defines the distance by which the given objects have to be vertically moved |
Returns void
Moves the source point of the given connector
Parameter | Type | Description |
---|---|---|
obj | ConnectorModel |
Defines the connector, the end points of which has to be moved |
tx | number |
Defines the distance by which the end point has to be horizontally moved |
ty | number |
Defines the distance by which the end point has to be vertically moved |
Returns void
Moves the target point of the given connector
Parameter | Type | Description |
---|---|---|
obj | ConnectorModel |
Defines the connector, the end points of which has to be moved |
tx | number |
Defines the distance by which the end point has to be horizontally moved |
ty | number |
Defines the distance by which the end point has to be vertically moved |
Returns void
Closes grouping the actions that will be undone/restored as a whole
Returns void
To export Diagram
Parameter | Type | Description |
---|---|---|
options | IExportOptions |
defines the how the image to be exported. |
Returns string | SVGElement
To export diagram native/html image
Parameter | Type | Description |
---|---|---|
image | string |
defines image content to be exported. |
options | IExportOptions |
defines the image properties. |
Returns void
Finds the child element of the given object at the given position
Parameter | Type | Description |
---|---|---|
obj | IElement |
Defines the object, the child element of which has to be found |
position | PointModel |
Defines the position, the child element under which has to be found |
Returns DiagramElement
Finds the object that is under the given mouse position
Parameter | Type | Description |
---|---|---|
objects | [] | Defines the collection of objects, from which the object has to be found. |
action | string |
Defines the action, using which the relevant object has to be found. |
inAction | boolean |
Defines the active state of the action. |
Returns IElement
Finds all the objects that is under the given mouse position
Parameter | Type | Description |
---|---|---|
position | PointModel |
Defines the position, the objects under which has to be found |
source (optional) | IElement |
Defines the object, the objects under which has to be found |
Returns IElement[]
Finds the object that is under the given active object (Source)
Returns IElement
fit the diagram to the page with respect to mode and region
Returns void
gets the active layer back
Returns LayerModel
Defines the cursor that corresponds to the given action
Returns string
To get the bound of the diagram
Returns Rect
To get the html diagram content
Parameter | Type | Description |
---|---|---|
styleSheets (optional) | StyleSheetList |
defines the collection of style files to be considered while exporting. |
Returns string
Returns the module name of the diagram
Returns string
gets the node or connector having the given name
Returns __type
Get the properties to be maintained in the persisted state.
Returns string
Returns the tool that handles the given action
Parameter | Type | Description |
---|---|---|
action | string |
Defines the action that is going to be performed |
Returns ToolBase
Group the selected nodes and connectors in diagram
Returns void
hides tooltip for corresponding diagram object
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel |
Defines the object for that tooltip has to be hide |
Returns void
Inserts newly added element into the database
Returns object
Converts the given string as a Diagram Control
Parameter | Type | Description |
---|---|---|
data | string |
Defines the behavior of the diagram to be loaded |
Returns Object
send the selected nodes or connectors forward
Returns void
move objects from the layer to another layer from diagram
Returns void
Moves the selected objects towards the given direction
Parameter | Type | Description |
---|---|---|
direction | string |
Defines the direction by which the objects have to be moved |
x (optional) | number |
Defines the distance by which the selected objects have to be horizontally moved |
y (optional) | number |
Defines the distance by which the selected objects have to be vertically moved |
Returns void
Updates the diagram control when the objects are changed
Parameter | Type | Description |
---|---|---|
newProp | DiagramModel |
Lists the new values of the changed properties |
oldProp | DiagramModel |
Lists the old values of the changed properties |
Returns void
Pans the diagram control to the given horizontal and vertical offsets
Returns void
Adds the given objects/ the objects in the diagram clipboard to diagram control
Parameter | Type | Description |
---|---|---|
obj (optional) | [] | Defines the objects to be added to diagram |
Returns void
To print Diagram
Returns void
To print native/html nodes of diagram
Parameter | Type | Description |
---|---|---|
image | string |
defines image content. |
options | IExportOptions |
defines the properties of the image |
Returns void
Restores the last undone action
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the given object from diagram
Parameter | Type | Description |
---|---|---|
obj (optional) | NodeModel | ConnectorModel |
Defines the object that has to be removed from diagram |
Returns void
Remove constraints at run time
Returns number
Removes the user deleted element from the existing database
Returns object
Removes the handler from the given event listener.
Returns void
Remove Labels at the run time
Returns void
remove the layer from diagram
Parameter | Type | Description |
---|---|---|
layerId | string |
define the id of the layer |
Returns void
Remove Ports at the run time
Returns void
Remove a process from the sub-process
Returns void
Renders the diagram control with nodes and connectors
Returns void
Resets the zoom and scroller offsets to default values
Returns void
Rotates the given nodes/connectors by the given angle
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel | SelectorModel |
Defines the objects to be rotated |
angle | number |
Defines the angle by which the objects have to be rotated |
pivot (optional) | PointModel |
Defines the reference point with reference to which the objects have to be rotated |
Returns boolean
Scales the given objects to the size of the first object in the group
Parameter | Type | Description |
---|---|---|
option | string |
Defines whether the node has to be horizontally scaled, vertically scaled or both |
objects (optional) | [] | Defines the collection of objects that have to be scaled |
Returns void
Serializes the diagram control as a string
Returns string
Scales the given objects by the given ratio
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel | SelectorModel |
Defines the objects to be resized |
sx | number |
Defines the ratio by which the objects have to be horizontally scaled |
sy | number |
Defines the ratio by which the objects have to be vertically scaled |
pivot | PointModel |
Defines the reference point with respect to which the objects will be resized |
Returns boolean
Selects the given collection of objects
Parameter | Type | Description |
---|---|---|
objects | [] | Defines the collection of nodes and connectors to be selected |
multipleSelection (optional) | boolean |
Defines whether the existing selection has to be cleared or not |
Returns void
Selects the all the objects.
Returns void
send the selected nodes or connectors back
Returns void
move the layer backward
Parameter | Type | Description |
---|---|---|
layerName | string |
define the name of the layer |
Returns void
send the selected nodes or connectors back
Returns void
set the active layer @param layerName defines the name of the layer which is to be active layer
Returns void
To limit the history entry of the diagram
Parameter | Type | Description |
---|---|---|
stackLimit | number |
defines stackLimit of the history manager. |
Returns void
Shows tooltip for corresponding diagram object
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel |
Defines the object for that tooltip has to be shown |
Returns void
Starts grouping the actions that will be undone/restored as a whole
Returns void
Specified annotation to edit mode
Parameter | Type | Description |
---|---|---|
node (optional) | NodeModel | ConnectorModel |
Defines node/connector that contains the annotation to be edited |
id (optional) | string |
Defines annotation id to be edited in the node |
Returns void
UnGroup the selected nodes and connectors in diagram
Returns void
Removes the given object from selection list
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel |
Defines the object to be unselected |
Returns void
Restores the last action that is performed
Returns void
updates the user defined element properties into the existing database
Returns object
Update the diagram clipboard dimension
Returns void
Scales the diagram control by the given factor
Parameter | Type | Description |
---|---|---|
factor | number |
Defines the factor by which the diagram is zoomed |
focusedPoint (optional) | PointModel |
Defines the point with respect to which the diagram has to be zoomed |
Returns void
Scales the diagram control by the given factor
Parameter | Type | Description |
---|---|---|
options | ZoomOptions |
used to define the zoom factor, focus point and zoom type. |
Returns void
Dynamically injects the required modules to the component.
Returns void
EmitType<Object>
Triggers after animation is completed for the diagram elements.
Triggers when a node, connector or diagram is clicked
EmitType<ICollectionChangeEventArgs>
Triggers when a node/connector is added/removed to/from the diagram.
EmitType<IConnectionChangeEventArgs>
Triggers when the connection is changed
EmitType<MenuEventArgs>
Triggers before rendering the context menu item
EmitType<MenuEventArgs>
Triggers when a context menu item is clicked
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before opening the context menu
EmitType<Object>
Triggered when the diagram is rendered completely.
EmitType<IDataLoadedEventArgs>
Triggers after diagram is populated from the external data source
EmitType<IDoubleClickEventArgs>
Triggers when a node, connector or diagram model is clicked twice
Triggers when a symbol is dragged into diagram from symbol palette
Triggers when a symbol is dragged outside of the diagram.
Triggers when a symbol is dragged over diagram
Triggers when a symbol is dragged and dropped from symbol palette to drawing area
EmitType<IExpandStateChangeEventArgs>
Triggers when the state of the expand and collapse icon change for a node.
Triggers when a change is reverted or restored(undo/redo)
Triggered when mouse enters a node/connector.
Triggered when mouse leaves node/connector.
Triggered when mouse hovers a node/connector.
Triggers while dragging the elements in diagram
EmitType<IPropertyChangeEventArgs>
Triggers once the node or connector property changed.
Triggers when the diagram elements are rotated
EmitType<IScrollChangeEventArgs>
Triggers when the diagram is zoomed or panned
EmitType<ISegmentCollectionChangeEventArgs>
Triggers when a segment is added/removed to/from the connector.
EmitType<ISelectionChangeEventArgs>
Triggers when the selection is changed in diagram
EmitType<ISizeChangeEventArgs>
Triggers when a node is resized
Triggers when the connector’s source point is changed
Triggers when the connector’s target point is changed
Triggers when editor got focus at the time of node’s label or text node editing.