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
Customizes the annotation template
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 {}
Helps to assign the default properties of connector
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');
A collection of JSON objects where each object represents a custom cursor action. Layer is a named category of diagram shapes.
Defaults to []
Configures the data source that is to be bound with diagram
Defaults to {}
Represents the diagram settings
<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
diagramSettings: { inversedAlignment: true }
...
});
diagram.appendTo('#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
EmitType<IElementDrawEventArgs>
Triggered when an element is drawn using drawing Tool @event
boolean
Split the connector, when the node is dropped onto it and establish connection with that dropped node.
Defaults to false
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 {}
lineDistributionModule
is used to connect the node’s without overlapping in automatic layout
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
mindMapChartModule
is used to arrange the nodes in a mind map like structure
string
Defines the diagram rendering mode.
Defaults to ‘SVG’
Helps to assign the default properties of nodes
string
Customizes the node template
Defaults to undefined
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 {}
string
Defines the segmentThumbShape
Defaults to ‘Rhombus’
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
This property represents the template content of a user handle. The user can define any HTML element as a template.
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
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel |
Defines the object that has to be added to diagram |
group (optional) | boolean |
provide the group value. |
Adds the given diagram object to the group.
Parameter | Type | Description |
---|---|---|
group | NodeModel |
defines where the diagram object to be added. |
child | string | NodeModel | ConnectorModel |
defines the diagram object to be added to the group |
Returns void
Adds the given connector to diagram control
Parameter | Type | Description |
---|---|---|
obj | ConnectorModel |
Defines the connector that has to be added to diagram |
Returns Connector
Add labels in connector at the run time in the blazor platform\
Parameter | Type | Description |
---|---|---|
obj | ConnectorModel |
provide the obj value. |
labels | PathAnnotationModel[] |
provide the labels value. |
Returns void
Add constraints at run time \
Parameter | Type | Description |
---|---|---|
constraintsType | number |
provide the source value. |
constraintsValue | number |
provide the target value. |
Returns number
Adds the given custom change in the diagram control to the track
Parameter | Type | Description |
---|---|---|
entry | HistoryEntry |
Defines the entry/information about a change in diagram |
Returns void
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
Adds the given change in the diagram control to the track
Returns void
Add Labels at the run time \
Parameter | Type | Description |
---|---|---|
obj | NodeModel | ConnectorModel |
provide the obj value. |
labels | ShapeAnnotationModel[] | PathAnnotation[] | PathAnnotationModel[] |
provide the labels value. |
Returns void
Add dynamic Lanes to swimLane at runtime \
Parameter | Type | Description |
---|---|---|
node | NodeModel |
provide the obj value. |
lane | LaneModel[] |
provide the labels value. |
index (optional) | number |
provide the labels value. |
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
Adds the given node to diagram control
Parameter | Type | Description |
---|---|---|
obj | NodeModel |
Defines the node that has to be added to diagram |
group (optional) | boolean |
Defines the node that has to be added to diagram |
Returns Node
Add labels in node at the run time in the blazor platform \
Parameter | Type | Description |
---|---|---|
obj | NodeModel |
provide the obj value. |
labels | ShapeAnnotationModel[] |
provide the labels value. |
Returns void
Adds the given node to the lane
Parameter | Type | Description |
---|---|---|
node | NodeModel |
provide the node value. |
swimLane | string |
provide the swimLane value. |
lane | string |
provide the lane value. |
Returns void
Add a phase to a swimLane at runtime \
Parameter | Type | Description |
---|---|---|
node | NodeModel |
provide the obj value. |
phases | PhaseModel[] |
provide the labels value. |
Returns void
Add ports at the run time \
Parameter | Type | Description |
---|---|---|
obj | NodeModel |
provide the obj value. |
ports | PointPortModel[] |
provide the ports value. |
Returns void
Add a process into the sub-process \
Parameter | Type | Description |
---|---|---|
process | NodeModel |
provide the process value. |
parentId | string |
provide the parentId value. |
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
Parameter | Type | Description |
---|---|---|
option | string |
Defines the factor, by which the objects have to be aligned |
objects (optional) | [] | Defines the objects that have to be aligned |
type (optional) | string |
Defines the type to be aligned |
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 \
Parameter | Type | Description |
---|---|---|
bound | Rect |
provide the bound value. |
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 \
Parameter | Type | Description |
---|---|---|
bound | Rect |
provide the bound value. |
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
To destroy the diagram
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 | boolean
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 |
padding (optional) | number |
Defines the padding, 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)
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. |
position | PointModel |
Defines the position. |
source (optional) | IElement |
Defines the source. |
Returns IElement
fit the diagram to the page with respect to mode and region \
Parameter | Type | Description |
---|---|---|
options (optional) | IFitOptions |
provide the options value. |
Returns void
gets the active layer back \
Returns LayerModel
gets the connector object for the given node ID \
Parameter | Type | Description |
---|---|---|
id | string |
define the name of the layer |
Returns ConnectorModel
Defines the cursor that corresponds to the given action
Parameter | Type | Description |
---|---|---|
action | string |
Defines the action that is going to be performed |
active | boolean |
Defines the active |
Returns string
this method returns diagramAction as a string
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
Return the edges for the given node
Parameter | Type | Description |
---|---|---|
args | Object |
return the edge of the given node |
Returns string[]
Will return the history stack values
Parameter | Type | Description |
---|---|---|
isUndoStack | boolean |
returns the history stack values |
Returns HistoryEntry[]
Returns the persistence data for component
Returns any
Returns the module name of the diagram
Returns string
gets the node object for the given node ID \
Parameter | Type | Description |
---|---|---|
id | string |
define the name of the layer |
Returns NodeModel
gets the node or connector having the given name \
Parameter | Type | Description |
---|---|---|
name | string |
define the name of the layer |
Returns __type
Returns the parent id for the node
Parameter | Type | Description |
---|---|---|
id | string |
returns the parent id |
Returns string
Get the properties to be maintained in the persisted state.
Returns string
Returns the route element of the component
Returns HTMLElement
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 \
Parameter | Type | Description |
---|---|---|
node (optional) | Node | Connector |
provide the source value. |
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\
Parameter | Type | Description |
---|---|---|
objects | string[] |
define the objects id of string array |
targetLayer (optional) | string |
define the objects id of string array |
Returns void
moves the node or connector forward within given layer \
Parameter | Type | Description |
---|---|---|
node | NodeModel | ConnectorModel |
provide the source value. |
currentLayer | LayerModel |
provide the source value. |
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 \
Parameter | Type | Description |
---|---|---|
constraintsType | number |
provide the source value. |
constraintsValue | number |
provide the target value. |
Returns number
Removes the user deleted element from the existing database \
Parameter | Type | Description |
---|---|---|
node (optional) | Node | Connector |
provide the source value. |
Returns object
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
Remove Labels at the run time \
Parameter | Type | Description |
---|---|---|
obj | Node | ConnectorModel |
provide the obj value. |
labels | ShapeAnnotationModel[] | PathAnnotationModel[] |
provide the labels value. |
Returns void
Remove dynamic Lanes to swimLane at runtime \
Parameter | Type | Description |
---|---|---|
node | NodeModel |
provide the node value. |
lane | LaneModel |
provide the lane value. |
Returns void
remove the layer from diagram \
Parameter | Type | Description |
---|---|---|
layerId | string |
provide the bound value. |
Returns void
Remove a phase to a swimLane at runtime \
Parameter | Type | Description |
---|---|---|
node | NodeModel |
provide the node value. |
phase | PhaseModel |
provide the phase value. |
Returns void
Remove Ports at the run time \
Parameter | Type | Description |
---|---|---|
obj | Node |
provide the Connector value. |
ports | PointPortModel[] |
provide the Connector value. |
Returns void
Remove a process from the sub-processs \
Parameter | Type | Description |
---|---|---|
id | string |
provide the id value. |
Returns void
Renders the diagram control with nodes and connectors
Returns void
Resets the zoom and scroller offsets to default values
Returns void
Resets the segments of the connectors
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 \
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\
Parameter | Type | Description |
---|---|---|
layerName | string |
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 |
Removes the given object from selection list |
Returns void
Restores the last action that is performed
Returns void
updates the user defined element properties into the existing database \
Parameter | Type | Description |
---|---|---|
node (optional) | Node | Connector |
provide the source value. |
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.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
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<ICommandExecuteEventArgs>
Triggers when a command executed.
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.
EmitType<FixedUserHandleClickEventArgs>
Triggers when a node/connector fixedUserHandle is clicked in the diagram.
Triggers when a change is reverted or restored(undo/redo)
EmitType<IBlazorCustomHistoryChangeArgs>
Triggers when a custom entry change is reverted or restored(undo/redo)
Triggers when a user is pressing a key.
Triggers when a user releases a key.
Triggered when mouse enters a node/connector.
Triggered when mouse leaves node/connector.
Triggered when mouse hovers a node/connector.
EmitType<IMouseWheelEventArgs>
Event triggers whenever the user rotate the mouse wheel either upwards or downwards
Triggers when the image node is loaded.
EmitType<UserHandleEventsArgs>
Triggers when a mouseDown on the user handle.
EmitType<UserHandleEventsArgs>
Triggers when a mouseEnter on the user handle.
EmitType<UserHandleEventsArgs>
Triggers when a mouseLeave on the user handle.
EmitType<UserHandleEventsArgs>
Triggers when a mouseUp on the user handle.
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.