ejDiagram
26 Dec 201724 minutes to read
The diagram control provides 2D surface to visualize the data as shapes, lines, text and images. It can be configured to DOM element such as DIV.
Example
Requires
- module:jquery.js
- module:jquery.easing.min.js
- module:jsrender.min.js
- module:ej.core.js
- module:ej.draggable.js
- module:ej.scroller.js
- module:ej.touch.js
- module:ej.diagram.js
- module:ej.diagramcommon.js
- module:ej.diagraminteraction.js
- module:ej.diagramsvg.js
- module:ej.diagramtools.js
- module:ej.diagramlayout.js
- module:ej.matrix.js
Members
backgroundColor string
Defines the background color of diagram elements
Default Value:
- “transparent”
Example
<ej-diagram width="1000" height="1000" [pageSettings]="pageSettings" >
</ej-diagram
<ej-diagram width="1000" height="1000" backgroundColor="black" >
</ej-diagram>
backgroundColor:"whiteSmoke";
backgroundImage string
Defines the path of the background image of diagram elements
Default Value:
- ””
Example
BACKGROUNDIMAGE
backgroundImage.alignment enum
Defines how to align the background image over the diagram area.
Name | Description |
---|---|
None | Scales the graphic content non-uniformly to the width and height of the diagram area |
XMinYMin | Used to align the image at the top left of diagram area |
XMinYMid | Used to align the image at the left center of diagram area |
XMinYMax | Used to align the image at the bottom left of diagram area |
XMidYMin | Used to align the image at the top center of diagram area |
XMidYMid | Used to align the image at the center of diagram area |
XMidYMax | Used to align the image at the bottom center of diagram area |
XMaxYMin | Used to align the image at the top right of diagram area/node |
XMaxYMid | Used to align the image at the right center of diagram area/node |
XMaxYMax | Used to align the image at the bottom right of diagram area/node |
Default Value:
- ej.datavisualization.Diagram.ImageAlignment.XMidYMid
backgroundImage.scale enum
Defines how the background image should be scaled/stretched
Name | Description |
---|---|
None | Used to scale the image non-uniformly to the given width/height |
Meet | Used to scale the image uniformly so that it fits the viewport |
Slice | Used to scale the image uniformly to the maximum |
Default Value:
backgroundImage.source string
Sets the source path of the background image
Default Value:
- null
Example
bridgeDirection enum
Sets the direction of line bridges.
Name | Description |
---|---|
Left | Used to set the direction of line bridges as left |
Right | Used to set the direction of line bridges as right |
Top | Used to set the direction of line bridges as top |
Bottom | Used to set the direction of line bridges as bottom |
Default Value:
- ej.datavisualization.Diagram.BridgeDirection.Top
Example
<ej-diagram width="1000" height="1000" [pageSettings]="pageSettings" [connectors]="connectors"> </ej-diagram>
connectors:Array<any>;
constructor(){
this.connectors=[{
bridgeDirection:ej.datavisualization.Diagram.BridgeDirection.Bottom,
}];
}
commandManager object
Defines a set of custom commands and binds them with a set of desired key gestures.
commandManager.commands object
An object that maps a set of command names with the corresponding command objects
Default Value:
- {}
Example
COMMANDMANAGER.COMMANDS
commandManager.commands.canExecute function
A method that defines whether the command is executable at the moment or not.
Example
commandManager: Object;
constructor(){
this.commandManager={
"clone":{
canExecute: function(args){
if(args.model.length){
return true;
}
}
}
}
}
commandManager.commands.execute function
A method that defines what to be executed when the key combination is recognized.
Example
execute: function(args) {
this.copy();
this.paste();
},
commandManager.commands.gesture object
Defines a combination of keys and key modifiers, on recognition of which the command will be executed
commandManager.commands.gesture.key enum
Sets the key value, on recognition of which the command will be executed.
Name | Description |
---|---|
None | No key pressed. |
A | The A key. |
B | The B key. |
C | The C key. |
D | The D Key. |
E | The E key. |
F | The F key. |
G | The G key. |
H | The H Key. |
I | The I key. |
J | The J key. |
K | The K key. |
L | The L Key. |
M | The M key. |
N | The N key. |
O | The O key. |
P | The P Key. |
Q | The Q key. |
R | The R key. |
S | The S key. |
T | The T Key. |
U | The U key. |
V | The V key. |
W | The W key. |
X | The X key. |
Y | The Y key. |
Z | The Z key. |
Number0 | The 0 key. |
Number1 | The 1 key. |
Number2 | The 2 key. |
Number3 | The 3 key. |
Number4 | The 4 key. |
Number5 | The 5 key. |
Number6 | The 6 key. |
Number7 | The 7 key. |
Number8 | The 8 key. |
Number9 | The 9 key. |
Left | The LEFT ARROW key. |
Up | The UP ARROW key. |
Right | The RIGHT ARROW key. |
Down | The DOWN ARROW key. |
Escape | The ESC key. |
Delete | The DEL key. |
Tab | The TAB key. |
Enter | The ENTER key. |
Default Value:
- ej.datavisualization.Diagram.Keys.None
Example
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
}
commandManager.commands.gesture.keyModifiers enum
Sets a combination of key modifiers, on recognition of which the command will be executed.
Name | Description |
---|---|
None | No modifiers are pressed. |
Alt | The ALT key. |
Control | The CTRL key. |
Shift | The SHIFT key. |
Default Value:
- ej.datavisualization.Diagram.KeyModifiers.None
Example
constructor(){
this.commandManager={
"clone":{
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
}
}
}
}
commandManager.commands.parameter object
Defines any additional parameters that are required at runtime
Default Value:
- null
Example
constructor(){
this.commandManager={
"clone":{
canExecute: function(args){
if(args.model.length){
return true;
}
},
execute: function(args) {
this.copy();
this.paste();
}
},
parameter:"node"
}
}
connectors array
A collection of JSON objects where each object represents a connector
Default Value:
- []
Example
<ej-diagram width="1000" height="1000"[connectors]="connectors"> </ej-diagram>
this.connectors = [{
name:"connector",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
}
}];
connectors.addInfo object
To maintain additional information about connectors
Default Value:
- null
Example
this.connectors = [{
name:"connector",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
addInfo:"Bidirectional Flow"
}];
connectors.bridgeSpace number
Defines the width of the line bridges
Default Value:
- 10
Example
this.connectors=[{
name:"connector1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ej.datavisualization.Diagram.ConnectorConstraints.InheritBridging | ej.datavisualization.Diagram.ConnectorConstraints.Bridging
},
{
name:"connector2",
sourcePoint:{
x:1000,
y:1000
},
targetPoint:{
x:2000,
y:2000
},
bridgeSpace:15,
constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ej.datavisualization.Diagram.ConnectorConstraints.InheritBridging | ej.datavisualization.Diagram.ConnectorConstraints.Bridging
}
];
connectors.constraints enum
Enables or disables the behaviors of connectors.
Name | Description |
---|---|
None | Disable all connector Constraints |
Select | Enables connector to be selected |
Delete | Enables connector to be Deleted |
Drag | Enables connector to be Dragged |
DragSourceEnd | Enables connectors source end to be selected |
DragTargetEnd | Enables connectors target end to be selected |
DragSegmentThumb | Enables control point and end point of every segment in a connector for editing |
Bridging | Enables bridging to the connector |
DragLabel | Enables label of node to be Dragged |
InheritBridging | Inherit the bridging option defined in the diagram constraints. |
AllowDrop | Allows the object to drop over the connector. |
InheritTooltip | Inherit the tooltip option defined in the diagram constraints. |
PointerEvents | Enables user interaction to the connector |
CrispEdges | Enables the contrast between clean edges of connector over rendering speed and geometric precision |
InheritCrispEdges | Enables the contrast between clean edges of connector over rendering speed and geometric precision |
DragLimit | Enables the contrast between clean edges of connector over rendering speed and geometric precision |
Interaction | Enables connector to be selected and dragged. |
Default | Enables all constraints |
Default Value:
- ej.datavisualization.Diagram.ConnectorConstraints.Default
Example
this.connectors=[{
name:"connect1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ej.datavisualization.Diagram.ConnectorConstraints.Select };
}];
connectors.cornerRadius number
Defines the radius of the rounded corner
Default Value:
- 0
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//setting Corner Radius
cornerRadius:10,
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.cssClass string
Configures the styles of shapes
Default Value:
- ””
Example
<style>
.hoverConnector:hover {
stroke:blue
}
</style>
<ej-diagram width="1000" height="1000" [pageSettings]="pageSettings" [connectors]="connectors">
</ej-diagram>
this.connectors=[{
name:"connect1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
cssClass:"hoverConnector",
}
];
connectors.horizontalAlign enum
Sets the horizontal alignment of the connector. Applicable, if the parent of the connector is a container.
Name | Description |
---|---|
Left | Used to align text horizontally on left side of node/connector |
Center | Used to align text horizontally on center of node/connector |
Right | Used to align text horizontally on right side of node/connector |
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Left
Example
this.connectors = [{
name: "group1",
type: "group",
children: [{
name: "connect1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
//Set the horizontal alignment
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
}]
}];
connectors.labels array
A collection of JSON objects where each object represents a label.
Default Value:
- []
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Connector label collection
labels:[{ text:"label" }],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.alignment enum
Defines how the label should be aligned with respect to the segment
Name | Description |
---|---|
Before | Used to align the label either top or left(before) of the connector segment |
Center | Used to align the label at center of the connector segment |
After | Used to align the label either bottom or right(after) of the connector segment |
Default Value:
- ej.datavisualization.Diagram.Alignment.Center
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Define the labels collection
labels:[{ text:"label" , alignment:"before"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.bold boolean
Enables/disables the bold style
Default Value:
- false
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label" , bold:true}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.borderColor string
Sets the border color of the label
Default Value:
- “transparent”
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label" , borderColor:"red", borderWidth: 2}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.borderWidth number
Sets the border width of the label
Default Value:
- 0
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label" , borderColor:"red", borderWidth: 2}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.boundaryConstraints boolean
Defines whether the label should be aligned within the connector boundaries
Default Value:
- true
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label" , boundaryConstraints: "false"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.fillColor string
Sets the fill color of the text area
Default Value:
- “transparent”
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label", fillColor: "green" }],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.fontColor string
Sets the font color of the text
Default Value:
- “black”
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label", fontcolor: "green" }],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.fontFamily string
Sets the font family of the text
Default Value:
- “Arial”
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label", fontcolor: "green",fontFamily:"seugoe UI"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.fontSize number
Defines the font size of the text
Default Value:
- 12
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label", fontSize: 14}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.horizontalAlignment enum
Sets the horizontal alignment of the label.
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Center
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.hyperlink string
Sets the hyperlink for the labels in the connectors.
Default Value:
- none
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ "hyperLink": "https://www.syncfusion.com"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.italic boolean
Enables/disables the italic style
Default Value:
- false
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label", italic:true}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.mode enum
Gets whether the label is currently being edited or not.
Default Value:
- ej.datavisualization.Diagram.LabelEditMode.Edit
Example
@ViewChild('Diagram') diagram: EJComponents<any, any>;
ngAfterViewInit() {
let connector = this.Diagram.widget.selectionList[0]
console.log(connector.labels[0].mode);
}
connectors.labels.name string
Sets the unique identifier of the label
Default Value:
- ””
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label", name:"label1"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.offset object
Sets the fraction/ratio(relative to connector) that defines the position of the label
Default Value:
- ej.datavisualization.Diagram.Point(0.5, 0.5)
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label",offsetX:0 , offsetY:0.5 }],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.margin object
Sets the fraction/ratio(relative to connector) that defines the position of the label
Default Value:
- ej.datavisualization.Diagram.Point(0.5, 0.5)
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{ text:"label",offsetX:0 , offsetY:0.5 }],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.margin.right number
To set the margin of the label in right direction
Default Value:
- 0
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ right: 105 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.margin.left number
To set the margin of the label in left direction
Default Value:
- 0
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Leaves 5px space between the left boundary of connector and label
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.margin.top number
To set the margin of the label in top direction
Default Value:
- 0
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Leaves 5px space between the left boundary of connector and label
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ top: 5 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.margin.bottom number
To set the margin of the label in bottom direction
Default Value:
- 0
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Leaves 5px space between the left boundary of connector and label
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ bottom: 5 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.dragLimit object
Sets the value which is used to drag the label within certain bounds.
Default Value:
- null
connectors.labels.dragLimit.right number
To set the drag limit of the label in right direction
Default Value:
- 10
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Leaves 5px space between the left boundary of connector and label
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ right: 5 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.dragLimit.left number
To set the drag limit of the label in left direction
Default Value:
- 10
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Leaves 5px space between the left boundary of connector and label
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ left: 5 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.dragLimit.top number
To set the drag limit of the label in top direction
Default Value:
- 10
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Leaves 5px space between the left boundary of connector and label
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ top: 10 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.dragLimit.bottom number
To set the drag limit of the label in bottom direction
Default Value:
- 10
Example
this.connectors=[{
name:"connect1",
segments:[{ type: "orthogonal"}],
//Leaves 5px space between the left boundary of connector and label
labels:[{text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ bottom: 10 }}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.opacity number
Defines the transparency of labels
Default Value:
- 1
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", opacity: 0.7}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.readOnly boolean
Defines whether the label is editable or not
Default Value:
- false
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", readOnly:true}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.relativeMode enum
Defines whether the label should be positioned whether relative to segments or connector boundaries
Name | Description |
---|---|
SegmentPath | Sets the relativeMode as SegmentPath |
SegmentBounds | Sets the relativeMode as SegmentBounds |
Default Value:
- ej.datavisualization.Diagram.LabelRelativeMode.SegmentPath
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", relativeMode:"segmentPath"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.rotateAngle number
Defines the angle to which the label needs to be rotated
Default Value:
- 0
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", rotateAngle:90}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.segmentOffset string
Sets the position of the label with respect to the total segment length
Default Value:
- 0.5
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", segmentOffset:0.7}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.text string
Defines the label text
Default Value:
- ””
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.textAlign enum
Defines how to align the text inside the label.
Default Value:
- ej.datavisualization.Diagram.TextAlign.Center
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", textAlign:ej.datavisualization.Diagram.TextAlign.Left}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.textDecoration enum
Sets how to decorate the label text.
Default Value:
- ej.datavisualization.Diagram.TextDecorations.None
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.verticalAlignment enum
Sets the vertical alignment of the label.
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Center
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.visible boolean
Enables or disables the visibility of the label
Default Value:
- true
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label",visible:false}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.width number
Sets the width of the label(the maximum value of label width and the connector width will be considered as label width)
Default Value:
- 50
Example
this.connectors=[{
name:"connector1",
labels:[{text:"label", width:100}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.labels.wrapping enum
Defines how the label text needs to be wrapped.
Default Value:
- ej.datavisualization.Diagram.TextWrapping.WrapWithOverflow
Example
this.connectors=[{
name:"connector1",
labels:[{text:"Enter Your Text",wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
connectors.lineColor string
Sets the stroke color of the connector
Default Value:
- “black”
Example
this.connectors=[{
name:"connector1",
labels:[{text:"Connector1"}],
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
lineColor:"blue"
}];
connectors.lineDashArray string
Sets the pattern of dashes and gaps used to stroke the path of the connector
Default Value:
- ””
Example
this.connectors=[{
name:"connector1",
labels:[{text:"Connector1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
lineColor:"blue",
lineDashArray: "2,2",
}];
connectors.lineHitPadding number
Defines the padding value to ease the interaction with connectors
Default Value:
- 10
Example
this.connectors=[{
name:"connector1",
labels:[{text:"Connector1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
lineHitPadding: 15
}];
connectors.lineWidth number
Sets the width of the line
Default Value:
- 1
Example
this.connectors=[{
name:"connector1",
labels:[{text:"Connector1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
lineWidth: 10
}];
connectors.marginBottom number
Defines the minimum space to be left between the bottom of parent bounds and the connector. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.connectors = [{
name: "group1",
type: "group",
children: [{
name: "connect1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
verticalAlign:"bottom",
marginBottom: 10,
//Set the horizontal alignment
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
}],
container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
}];
connectors.marginLeft number
Defines the minimum space to be left between the left of parent bounds and the connector. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.connectors = [{
name: "group1",
type: "group",
children: [{
name: "connect1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
verticalAlign:"bottom",
marginLeft: 10,
//Set the horizontal alignment
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
}],
container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
}];
connectors.marginRight number
Defines the minimum space to be left between the right of parent bounds and the connector. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.connectors = [{
name: "group1",
type: "group",
children: [{
name: "connect1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
verticalAlign:"bottom",
marginRight: 10,
//Set the horizontal alignment
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
}],
container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
}];
connectors.marginTop number
Defines the minimum space to be left between the top of parent bounds and the connector. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.connectors = [{
name: "group1",
type: "group",
children: [{
name: "connect1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
verticalAlign:"bottom",
marginTop: 10,
//Set the horizontal alignment
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
}],
container:{type:"canvas"},offsetX:200,offsetY:100,minWidth:200,minHeight:200,fillColor:"gray"
}];
connectors.name string
Sets a unique name for the connector
Default Value:
- ””
Example
this.connectors=[{
name:"connect1",
labels:[{text:"Connector1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
}];
}
connectors.opacity number
Defines the transparency of the connector
Default Value:
- 1
Example
connectors:Array<any>;
labels:Array<any>;
constructor(){
this.connectors=[{
name:"connect1",
labels:[{text:"Connector1",
sourcePoint:{
x:100,
y:100
},
targetPoint:{
x:200,
y:200
},
opacity:0.5,
}];
}
connectors.paletteItem object
Defines the size and preview size of the node to add that to symbol palette. To explore palette item, refer Palette Item
Default Value:
- null
Example
palettes: [{
name: "Connectors", expanded: true,
items: [
{
name: "connector", sourcePoint:{x: 0, y: 0}, targetPoint:{x:50, y: 50},
segments:[{ type:"bezier" }],
//Sets preview size
paletteItem: {
previewWidth: 100,
previewHeight: 100
}
}]
}]
}
connectors.parent string
Sets the parent name of the connector.
Default Value:
- ””
Example
this.Connectors=[
{
name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, parent:"group"
},
];
this.group=[{
name :"group",
children:["connector1"],
}];
connectors.segments array
An array of JSON objects where each object represents a segment
Default Value:
- [ { type:”straight” } ]
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
//Defines a collection of segments
segments: [{ type: "straight", point: { x: 75, y: 150 } }],
}];
connectors.segments.direction string
Sets the direction of orthogonal segment
Default Value:
- ””
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"orthogonal", direction:"bottom", length:50}],
}];
connectors.segments.length number
Describes the length of orthogonal segment
Default Value:
- undefined
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"orthogonal", direction:"bottom", length:50}],
}];
connectors.segments.point object
Describes the end point of bezier/straight segment
Default Value:
- Diagram.Point()
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"orthogonal", direction:"bottom", point: { x:75, y:150 }}],
}];
connectors.segments.point1 object
Defines the first control point of the bezier segment
Default Value:
- null
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50} }],
}];
connectors.segments.point2 object
Defines the second control point of bezier segment
Default Value:
- null
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50}, point2:{ x: 150, y: 150 } }],
}];
connectors.segments.type enum
Sets the type of the segment.
Name | Description |
---|---|
Straight | Used to specify the lines as Straight |
Orthogonal | Used to specify the lines as Orthogonal |
Bezier | Used to specify the lines as Bezier |
Default Value:
- ej.datavisualization.Diagram.Segments.Straight
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type: ej.datavisualization.Diagram.Segments.Bezier }],
}];
connectors.segments.vector1 object
Describes the length and angle between the first control point and the start point of bezier segment
Default Value:
- null
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180} }]
}];
connectors.segments.vector2 object
Describes the length and angle between the second control point and end point of bezier segment
Default Value:
- null
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180} }]
}];
connectors.shape object
Defines the role/meaning of the connector
Default Value:
- null
connectors.shape.type enum
Sets the type of the connector
Name | Description |
---|---|
BPMN | Used to specify connector type as BPMN |
UMLClassifier | Used to specify connector type as UMLClassifier |
UMLActivity | Used to specify connector type as UMLActivity |
Default Value:
- ej.datavisualization.Diagram.ConnectorShapes.BPMN
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape:{type:"bpmn"}
}];
connectors.shape.flow enum
Sets the type of the flow in a BPMN Process
Name | Description |
---|---|
Sequence | Used to specify the Sequence flow in a BPMN Process |
Association | Used to specify the Association flow in a BPMN Process |
Message | Used to specify the Message flow in a BPMN Process |
Default Value:
- ej.datavisualization.Diagram.BPMNFlows.Sequence
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape:{type:"bpmn", flow: "message"}
}];
connectors.shape.association enum
Sets the type of the Association in a BPMN Process
Name | Description |
---|---|
Default | Used to notate default association in a BPMN Process |
Directional | Used to notate directional association in a BPMN Process |
BiDirectional | User to notate bi-directional association in a BPMN Process |
Default Value:
- ej.datavisualization.Diagram.AssociationFlows.Default
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape:{type:"bpmn", flow: "association", association:"bidirectional"}
}];
connectors.shape.message enum
Sets the type of the message flow. Applicable, if the connector is of type “BPMN”
Name | Description |
---|---|
Default | Used to notate the default message flow in a BPMN Process |
InitiatingMessage | Used to notate the instantiating message flow in a BPMN Process |
NonInitiatingMessage | Used to notate the non-instantiating message flow in a BPMN Process |
Default Value:
- ej.datavisualization.Diagram.BPMNMessageFlows.Default
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape:{type:"bpmn", flow: "message", message: "ej.datavisualization.Diagram.BPMNMessageFlows.NonInitiatingMessage"}
}];
connectors.shape.sequence enum
Sets the type of BPMN sequence flow
Name | Description |
---|---|
Normal | Used to notate the normal sequence flow in a BPMN Process |
Conditional | Used to notate the conditional sequence flow in a BPMN Process |
Default | Used to notate the default sequence flow in a BPMN Process |
Default Value:
- ej.datavisualization.Diagram.BPMNSequenceFlows.Normal
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape:{type:"bpmn", flow: "sequence", sequence: "default"}
}];
connectors.shape.relationship enum
Defines the role of the connector in a UML Class Diagram. Applicable, if the type of the connector is “classifier”.
Name | Description |
---|---|
class | Used to define a Class |
Interface | Used to define an Interface |
Enumeration | Used to define an Enumeration |
Association | Used to notate association in UML Class Diagram |
Aggregation | Used to notate aggregation in a UML Class Diagram |
Composition | Used to notate composition in a UML Class Diagram |
Dependency | Used to notate dependency in a UML Class Diagram |
Inheritance | Used to notate inheritance in a UML Class Diagram |
Default Value:
- ej.datavisualization.Diagram.ClassifierShapes.Association
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Aggregation,
}
}];
connectors.shape.multiplicity object
Defines the multiplicity option of the connector
Default Value:
- null
connectors.shape.multiplicity.type enum
Sets the type of the multiplicity. Applicable, if the connector is of type “classifier”
Name | Description |
---|---|
OneToOne | Each entity instance is related to a single instance of another entity |
OneToMany | An entity instance can be related to multiple instances of the other entities |
ManyToOne | Multiple instances of an entity can be related to a single instance of the other entity |
ManyToMany | The entity instances can be related to multiple instances of each other |
Default Value:
- ej.datavisualization.Diagram.Multiplicity.OneToOne
this.connectors = [{
name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, multiplicity:{type: ej.datavisualization.Diagram.Multiplicity.OneToMany}
}
}];
connectors.shape.multiplicity.source object
Defines the source label to connector. Applicable, if the connector is of type “UML”
connectors.shape.multiplicity.source.optional boolean
Defines the source label to connector. Applicable, if the connector is of type “UML”
Type | Optional | Source | Target |
---|---|---|---|
OneToOne | false | false | |
OneToMany | false | true | |
ManyToOne | true | false | |
ManyToMany | true | true |
Default Value:
- true
Example
this.connectors = [{
name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency,
multiplicity:{
type: ej.datavisualization.Diagram.Multiplicity.OneToMany, source: { optional: true, lowerBounds: 89, upperBounds: 67 }}
}
}];
connectors.shape.multiplicity.source.lowerBounds number
Defines the source label to connector. Applicable, if the connector is of type “UML”
Default Value:
- null
Example
this.connectors = [{
name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency,
multiplicity:{
type: ej.datavisualization.Diagram.Multiplicity.OneToMany,
source: { optional: true,
lowerBounds: 1, upperBounds: 10 }}
}
}];
connectors.shape.multiplicity.source.upperBounds number
Defines the source label to connector. Applicable, if the connector is of type “UML”
Default Value:
- null
Example
this.connectors = [{
name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency,
multiplicity:{
type: ej.datavisualization.Diagram.Multiplicity.OneToMany,
source: { optional: true, lowerBounds: 1, upperBounds: 10 }}
}
}];
connectors.shape.multiplicity.target object
Defines the target label to connector. Applicable, if the connector is of type “UML”
Default Value:
- true
Example
this.connectors = [{
name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
shape: {type: ej.datavisualization.Diagram.ConnectorShapes.UMLClassifier, relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency,
multiplicity:{type: ej.datavisualization.Diagram.Multiplicity.OneToMany,
source: { optional: true, lowerBounds: 1, upperBounds: 10 },
target: { optional: true, lowerBounds: 1, upperBounds: 10 }}
}
}];
connectors.shape.ActivityFlow enum
Defines the shape of UMLActivity to connector. Applicable, if the connector is of type UMLActivity
Name | Description |
---|---|
Object | Defines a activity flow as Object in UML Activity Diagram |
Control | Defines a activity flow as Control in UML Activity Diagram |
Exception | Defines a activity flow as Exception in UML Activity Diagram |
Default Value:
- ej.datavisualization.Diagram.UMLActivityFlow.Control
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape: { type: ej.datavisualization.Diagram.ConnectorShapes.UMLActivity, activityFlow: ej.datavisualization.Diagram.UMLActivityFlow.Exception }
}];
connectors.sourceDecorator object
Defines the source decorator of the connector
Default Value:
- { shape:”arrow”, width: 8, height:8, borderColor:”black”, fillColor:”black” }
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow }
}];
connectors.sourceDecorator.borderColor string
Sets the border color of the source decorator
Default Value:
- “black”
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow ,borderColor:"red"}
}];
connectors.sourceDecorator.borderWidth number
Sets the border width of the decorator
Default Value:
- 1
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow ,borderWidth:5}
}];
connectors.sourceDecorator.fillColor string
Sets the fill color of the source decorator
Default Value:
- “black”
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { shape:"circle" , fillColor:"red"}
}];
connectors.sourceDecorator.height number
Sets the height of the source decorator
Default Value:
- 8
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { width: 10, height:10 }
}];
connectors.sourceDecorator.pathData string
Defines the custom shape of the source decorator
Default Value:
- ””
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { shape:"path", pathData:"M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z"}
}];
connectors.sourceDecorator.shape enum
Defines the shape of the source decorator.
Name | Description |
---|---|
None | Used to set decorator shape as none |
Arrow | Used to set decorator shape as Arrow |
OpenArrow | Used to set decorator shape as Open Arrow |
Circle | Used to set decorator shape as Circle |
Diamond | Used to set decorator shape as Diamond |
Path | Used to set decorator shape as path |
Default Value:
- ej.datavisualization.Diagram.DecoratorShapes.Arrow
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle }
}];
connectors.sourceDecorator.width number
Defines the width of the source decorator
Default Value:
- 8
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator : { width: 10, height:10 }
}];
connectors.sourceNode string
Sets the source node of the connector
Default Value:
- ””
Example
this.nodes = [{
name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
this.connectors = [{
name: "connector1",
sourceNode:"source",
targetNode:"target",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
connectors.sourcePadding number
Defines the space to be left between the source node and the source point of a connector
Default Value:
- 0
Example
this.nodes = [{
name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
this.connectors = [{
name: "connector1",
sourceNode:"source",
targetNode:"target",
sourcePadding: 2,
targetPadding: 2 ,
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
connectors.sourcePoint object
Describes the start point of the connector
Default Value:
- ej.datavisualization.Diagram.Point()
Example
this.connectors = [{
name: "connector1",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
}];
connectors.sourcePoint.x number
Defines the x-coordinate of a position
Default Value:
- 0
Example
this.connectors = [{
name: "connector1",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
}];
connectors.sourcePoint.y number
Defines the y-coordinate of a position
Default Value:
- 0
Example
this.connectors = [{
name: "connector1",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
}];
connectors.sourcePort string
Sets the source port of the connector
Default Value:
- ””
Example
this.nodes = [{
name:"source", offsetX:100, offsetY:100, width: 50, height: 50,ports:[{name:"port", offset:{x:1,y:0.5}}]},
{name:"target" ,offsetX:300, offsetY:300, width:50, height:50,ports:[{name:"port" , offset:{x:0,y:0.5}}]}];
this.connectors = [{
name: "connector1",
sourceNode:"source",
targetNode:"target",
sourcePort:"port",
targetPort:"port",
}];
connectors.targetDecorator object
Defines the target decorator of the connector
Default Value:
- { shape:”arrow”, width: 8, height:8, borderColor:”black”, fillColor:”black” }
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow },
}];
connectors.targetDecorator.borderColor string
Sets the border color of the decorator
Default Value:
- “black”
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.OpenArrow, borderColor:"red" },
}];
connectors.targetDecorator.fillColor string
Sets the color with which the decorator will be filled
Default Value:
- “black”
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator : { shape:"circle" , fillColor:"red" },
}];
connectors.targetDecorator.height number
Defines the height of the target decorator
Default Value:
- 8
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator : { width:10,height:10 },
}];
connectors.targetDecorator.pathData string
Defines the custom shape of the target decorator
Default Value:
- ””
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator : { shape:"path", pathData:"M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z" },
}];
connectors.targetDecorator.shape enum
Defines the shape of the target decorator.
Name | Description |
---|---|
None | Used to set decorator shape as none |
Arrow | Used to set decorator shape as Arrow |
OpenArrow | Used to set decorator shape as Open Arrow |
Circle | Used to set decorator shape as Circle |
Diamond | Used to set decorator shape as Diamond |
Path | Used to set decorator shape as path |
Default Value:
- ej.datavisualization.Diagram.DecoratorShapes.Arrow
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.Circle },
}];
connectors.targetDecorator.width number
Defines the width of the target decorator
Default Value:
- 8
Example
this.connectors = [{
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor:"red"
targetDecorator : { width:10,height:10 },
}];
connectors.targetNode string
Sets the target node of the connector
Default Value:
- ””
Example
this.nodes = [{
name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
this.connectors = [{
name: "connector1",
sourceNode:"source",
targetNode:"target",
}];
connectors.targetPadding number
Defines the space to be left between the target node and the target point of the connector
Default Value:
- 0
Example
this.nodes = [{
name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
this.connectors = [{
name: "connector1",
sourceNode:"source",
targetNode:"target",
sourcePadding:2,
targetPadding:2,
}];
connectors.targetPoint object
Describes the end point of the connector
Default Value:
- ej.datavisualization.Diagram.Point()
Example
this.nodes = [{
name:"source", offsetX:100, offsetY:100, width: 50, height: 50},
{name:"target" ,offsetX:300, offsetY:300, width:50, height:50}];
this.connectors = [{
name: "connector1",
sourcePoint:{x:100,y:100},
targetPoint:{x:200,y:200},
}];
connectors.targetPort string
Sets the targetPort of the connector
Default Value:
- ””
Example
connectors:Array<any>;
nodes:Array<any>;
labels:Array<any>;
constructor(){
this.nodes = [{
name:"source", offsetX:100, offsetY:100, width: 50, height: 50,ports:[{name:"port", offset:{x:1,y:0.5}}]},
{name:"target" ,offsetX:300, offsetY:300, width:50, height:50,ports:[{name:"port" , offset:{x:0,y:0.5}}]}];
this.connectors = [{
name: "connector1",
sourceNode:"source",
targetNode:"target",
sourcePort:"port",
targetPort:"port",
}];
}
connectors.tooltip object
Defines the tooltip that should be shown when the mouse hovers over connector. For tooltip properties, refer Tooltip
Default Value:
- null
Example
this.connectors = [{
//Defines connectors
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
//Define tooltip
constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ ej.datavisualization.Diagram.ConnectorConstraints.InheritTooltip,
}];
this.tooltip = {
templateId:"mouseOverTooltip",
};
}
};
connectors.verticalAlign enum
To set the vertical alignment of connector (Applicable,if the parent is group).
Name | Description |
---|---|
Top | Used to align text Vertically on left side of node/connector |
Center | Used to align text Vertically on center of node/connector |
Bottom | Used to align text Vertically on bottom of node/connector |
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Top
Example
this.connectors = [{
//Defines connectors
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
verticalAlign:ej.datavisualization.Diagram.VerticalAlignment.Bottom
}
this.group=[{name :"group", children:[ "connector1" ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
minWidth:200, minHeight: 200, fillColor:"gray" }]
};
connectors.visible boolean
Enables or disables the visibility of connector
Default Value:
- true
Example
this.connectors = [{
//Defines connectors
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
visible: false
}];
connectors.zOrder number
Sets the z-index of the connector
Default Value:
- 0
Example
this.connectors = [{
//Defines connectors
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
zOrder: 1000,
}];
connectorTemplate object
Binds the custom JSON data with connector properties
Default Value:
- null
Example
this.connectors = [{
//Defines connectors
name: "connector1",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
zOrder: 1000,
}];
this.connectorTemplate = function (diagram, connector) {
connector.lineColor="green";
};
constraints enum
Enables/Disables the default behaviors of the diagram.
Name | Description |
---|---|
None | Disables all DiagramConstraints |
APIUpdate | Enables/Disables interaction done with the help of API methods |
AllowDrop | It shows highlighter on element when we drag any elements and mouse hover onto the another element |
UserInteraction | Enables/Disables UserInteraction |
PageEditable | Enables/Disables PageEditing |
Bridging | Enables/Disables Bridging |
Zoomable | Enables/Disables Zooming |
PannableX | Enables/Disables panning on horizontal axis |
PannableY | Enables/Disables panning on vertical axis |
Pannable | Enables/Disables Panning |
Undoable | Enables/Disables undo actions |
CrispEdges | Enables/Disables the sharp edges |
Resizable | Enables/Disables the Diagram size updation on the window resize function |
ZoomTextEditor | Enables/Disables the Zooming of labels text editor |
FloatElements | Enables/Disables the drag and drop of element from one diagram to the other |
Default | Enables all Constraints |
Default Value:
- ej.datavisualization.Diagram.DiagramConstraints.All
Example
<div>
<ej-diagram id="diagram" width="100%" height="600px" [constraints]="constraints">
</ej-diagram>
</div>
//Disables PageEditing
this.constraints = ej.datavisualization.Diagram.DiagramConstraints.Default & ~ej.datavisualization.Diagram.DiagramConstraints.Bridging
contextMenu object
An object to customize the context menu of diagram
contextMenu.items array
Defines the collection of context menu items
Default Value:
- []
Example
<div>
<ej-diagram id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
</div>
this.contextMenu = {
// Collection of items
items: [{
name: "hyperLink",
text: "hyperLink",
image:"",
"style:""",
}],
showCustomMenuItemsOnly: true
};
contextMenu.items.text string
Defines the text for the collection of context menu item
Default Value:
- null
Example
<div>
<ej-diagram id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
</div>
this.contextMenu = {
// Collection of items
items: [{
name: "hyperLink",
text: "hyperLink",
image:"",
"style:""",
}],
showCustomMenuItemsOnly: true
};
contextMenu.items.name string
Defines the name for the collection of context menu items
Default Value:
- null
Example
<div>
<ej-diagram id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
</div>
this.contextMenu = {
// Collection of items
items: [{
name: "hyperLink",
text: "hyperLink",
image:"",
"style:""",
}],
showCustomMenuItemsOnly: true
};
contextMenu.items.imageUrl string
Defines the image url for the collection of context menu items
Default Value:
- null
Example
<div>
<ej-diagram id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
</div>
this.contextMenu = {
// Collection of items
items: [{
name: "hyperLink",
text: "hyperLink",
image:"Images/zoomIn.png",
"style:""",
}],
showCustomMenuItemsOnly: true
};
contextMenu.items.cssClass string
Defines the CssClass for the collection of context menu items
Default Value:
- null
Example
<div>
<ej-diagram id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
</div>
<style>
.menuPlace{
background-size:14px 14px;
}
</style>
this.contextMenu = {
// Collection of items
items: [{
name: "hyperLink",
text: "hyperLink",
image:"Images/zoomIn.png",
"cssClass":"menuPlace",
"style:""",
}],
};
contextMenu.items.subItems Array
Defines the collection of sub items for the context menu items
Default Value:
- []
Example
<div>
<ej-diagram id="diagram" width="100%" height="600px" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
</div>
this.contextMenu = {
// Collection of items
items: [{
name: "zoom",
text: "zoom",
subItems: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
}],
};
contextMenu.showCustomMenuItemsOnly boolean
To set whether to display the default context menu items or not
Default Value:
- false
Example
this.contextMenu = {
showCustomMenuItemsOnly: true
};
}
};
dataSourceSettings object
Configures the data source that is to be bound with diagram
dataSourceSettings.dataSource object
Defines the data source either as a collection of objects or as an instance of ej.DataManager
Default Value:
- null
Example
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
dataSourceSettings: { dataSource: data }
dataSourceSettings.id string
Sets the unique id of the data source items
Default Value:
- ””
Example
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
dataSourceSettings: { id: "Id",dataSource: data }
dataSourceSettings.parent string
Defines the parent id of the data source item
Default Value:
- ’’
Example
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
dataSourceSettings: { id: "Id" , parent: "ReportingPerson",dataSource: data }
dataSourceSettings.query string
Describes query to retrieve a set of data from the specified datasource
Default Value:
- null
Example
dataSourceSettings: {dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }),
query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
tableName: "Employees", id: "EmployeeID", parent: "ReportsTo" }
dataSourceSettings.root string
Sets the unique id of the root data source item
Default Value:
- ””
Example
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
dataSourceSettings: { id: "Id", parent: "ReportingPerson", root:"E1", dataSource: data }
dataSourceSettings.tableName string
Describes the name of the table on which the specified query has to be executed
Default Value:
- null
Example
dataSourceSettings: {dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }),
query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
//Table name
tableName: "Employees",
id: "EmployeeID", parent: "ReportsTo" }
dataSourceSettings.crudAction object
Specifies the method name which is used to get the updated data from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
crudAction:
{
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
} }
dataSourceSettings.crudAction.create string
Specifies the create method which is used to get the nodes to be added from client side to the server side
Default Value:
- null
Example
dataSourceSettings: Object;
dataSourceSettings: {id: "Name",
crudAction:
{
create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes",
} }
dataSourceSettings.crudAction.update string
Specifies the update method which is used to get the updated data from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
crudAction:
{
update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes",
} }
dataSourceSettings.crudAction.destroy string
Specifies the destroy method which is used to get the deleted items data from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
crudAction:
{
destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes"
} }
dataSourceSettings.crudAction.read string
Specifies the read method to get the created nodes from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
crudAction:
{
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
} }
dataSourceSettings.customFields array
Specifies the custom fields to get the updated data from client side to the server side
Default Value:
- []
Example
dataSourceSettings: {id: "Name",
customFields: ["Description","Color" ] }
dataSourceSettings.connectionDataSource object
Defines the data source either as a collection of objects or as an instance of ej.DataManager
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
connectionDataSource:
{
id: "Name"
} }
dataSourceSettings.connectionDataSource.dataSource string
Sets the datasource for the connection datasource settings items.
Default Value:
- null
Example
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
dataSourceSettings: {id: "Name",
connectionDataSource:
{
id: "Name",
dataSource:data
} }
dataSourceSettings.connectionDataSource.id string
Sets the unique id of the connection data source item
Default Value:
- null
Example
dataSourceSettings: { id: "Name",
connectionDataSource:
{
id: "Name",
dataSource:data
}}
dataSourceSettings.connectionDataSource.sourceNode string
Sets the source node of the connection data source item
Default Value:
- null
Example
dataSourceSettings: { id: "Name",
connectionDataSource:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "SourceNode",
}
}
dataSourceSettings.connectionDataSource.targetNode string
Sets the target node of the connection data source item
Default Value:
- null
Example
dataSourceSettings: { id: "Name",
connectionDataSource:
{
id: "Name",
targetNode: "TargetNode"
}
}
dataSourceSettings.connectionDataSource.sourcePointX string
Sets the sourcePointX value of the connection data source item
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointX:200
}
}
dataSourceSettings.connectionDataSource.sourcePointY string
Sets the sourcePointY value of the connection data source item
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointY:200
}
}
dataSourceSettings.connectionDataSource.targetPointX string
Sets the targetPoint-x value of the connection data source item
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
connectionDataSource:
{
id: "Name",
targetPointX:200
}
}
dataSourceSettings.connectionDataSource.targetPointY string
Sets the targetPoint-y value of the connection data source item
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
connectionDataSource:
{
id: "Name",
targetPointY:200
}
}
dataSourceSettings.connectionDataSource.crudAction object
Specifies the method name which is used to get updated connectors from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "SourceNode",
targetNode: "TargetNode",
crudAction: {
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
dataSourceSettings.connectionDataSource.crudAction.create string
Specifies the create method which is used to get the connectors to be added from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "SourceNode",
targetNode: "TargetNode",
crudAction: {
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
dataSourceSettings.connectionDataSource.crudAction.update string
Specifies the update method which is used to get the updated connectors from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
update: http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors",
}
}
}
dataSourceSettings.connectionDataSource.crudAction.destroy string
Specifies the destroy method which is used to get the deleted items data from client side to the server side
Default Value:
- null
Example
dataSourceSettings: Object;
dataSourceSettings: {
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
destroy: http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors"
}
}
}
dataSourceSettings.connectionDataSource.crudAction.read string
Specifies the read method which is used to get the data from client side to the server side
Default Value:
- null
Example
dataSourceSettings: {id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors,
}
}
}
dataSourceSettings.connectionDataSource.customFields array
Specifies the custom fields to get the updated data from client side to the server side
Default Value:
- []
Example
dataSourceSettings: { id: "Name",
connectionDataSource:
{
id: "Name",
customFields: [ "Description", "Color"]
}
}
defaultSettings object
Initializes the default values for nodes and connectors
Default Value:
- {}
Example
this.defaultSettings = {
node: {
fillColor:"red"
},
};
defaultSettings.connector object
Initializes the default connector properties
Default Value:
- null
Example
this.defaultSettings = {
//Apply default styles to all connectors
connector: {
lineColor:"red", lineWidth:4, lineDashArray:"2,2"
},
};
defaultSettings.group object
Initializes the default properties of groups
Default Value:
- null
Example
this.defaultSettings = {
//Disable dragging all groups
group: {constraints: NodeConstraints.Default & ~NodeConstraints.Drag }
};
defaultSettings.node object
Initializes the default properties for nodes
Default Value:
- null
Example
this.defaultSettings = {
node: {
fillColor:"red", borderColor:"black"
},
};
drawType object
Sets the type of JSON object to be drawn through drawing tool
Default Value:
- {}
Example
this.drawType = {drawType:{type:"node"}}
enableAutoScroll boolean
Enables or disables auto scroll in diagram
Default Value:
- true
Example
this.enableAutoScroll = {enableAutoScroll:false}
enableContextMenu boolean
Enables or disables diagram context menu
Default Value:
- true
Example
this.enableContextMenu = false
height string
Specifies the height of the diagram
Default Value
- null
Example
<ej-diagram width="1000" height="1000" >
</ej-diagram>
historyManager object
Customizes the undo redo functionality
historyManager.canPop function
A method that takes a history entry as argument and returns whether the specific entry can be popped or not
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Add a change to history manager
let entry = { object: this.node, prevState: this.node.EmployeeInfo };
this.diagram.widget.model.historyManager.push(entry);
let newValues = { role: "New role" };
this.node.EmployeeInfo = newValues;
//Pop if the change doesn't need to be tracked
if(this.diagram.widget.model.historyManager.canPop(entry))
this.diagram.widget.model.historyManager.pop();
historyManager.closeGroupAction function
A method that ends grouping the changes
Example
let group = this.diagram.widget.model.selectedItems;
// Start to group the changes
this.diagram.widget.model.historyManager.startGroupAction();
//Makes the changes
for(let i =0;i<this.group.children.length;i++){
let option = {};
let item = this.group.children[i];
// Updates the fillColor for all the child elements.
option.fillColor = backgroundColor;
this.diagram.widget.updateNode(item.name,option);
}
//Ends grouping the changes
this.diagram.widget.model.historyManager.closeGroupAction();
historyManager.pop function
A method that removes the history of a recent change made in diagram
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Pop the last change
this.diagram.widget.model.historyManager.pop();
historyManager.push function
A method that allows to track the custom changes made in diagram
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Pop the last change
//Creates a custom entry and adds that to history manager
let entry = { object: node, prevState: node.EmployeeInfo };
this.diagram.widget.model.historyManager.push(entry);
//Updates the new information
let newValue = { role: "New role" };
node.EmployeeInfo = newValue;
historyManager.redo function
Defines what should be happened while trying to restore a custom change
Default Value:
- null
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Pop the last change
this.historyManager ={
//Called to revert a custom action
undo: customUndoRedo,
//Called to restore the reverted custom action
redo: customUndoRedo
}
//Method to handle the custom action
customUndoRedo(args) {
let node = args.object;
let currentState = node.EmployeeInfo;
//Resets the state
node.EmployeeInfo = args.prevState;
//Saves the previous state
args.prevState = currentState;
}
historyManager.redoStack array
The redoStack
property is used to get the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified.
Default Value:
- []
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Pop the last change
this.diagram.widget.model.historyManager.redoStack();
historyManager.stackLimit number
The stackLimit
property used to restrict the undo and redo actions to a certain limit.
Default Value:
- null
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Pop the last change
this.diagram.widget.model.historyManager.stackLimit();
historyManager.startGroupAction function
A method that starts to group the changes to revert/restore them in a single undo or redo
Example
let group = this.diagram.widget.model.selectedItems;
// Start to group the changes
this.diagram.widget.model.historyManager.startGroupAction();
//Makes the changes
for(let i =0;i<group.children.length;i++){
let option = {};
let item = group.children[i];
// Updates the fillColor for all the child elements.
option.fillColor = backgroundColor;
this.diagram.widget.updateNode(item.name,option);
}
//Ends grouping the changes
this.diagram.widget.model.historyManager.closeGroupAction();
historyManager.undo function
Defines what should be happened while trying to revert a custom change
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Pop the last change
this.historyManager ={
//Called to revert a custom action
undo: customUndoRedo,
//Called to restore the reverted custom action
redo: customUndoRedo
}
//Method to handle the custom action
customUndoRedo(args) {
let node = args.object;
let currentState = node.EmployeeInfo;
//Resets the state
node.EmployeeInfo = args.prevState;
//Saves the previous state
args.prevState = currentState;
}
historyManager.undoStack array
The undoStack
property is used to get the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified.
Default Value:
- []
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Pop the last change
this.diagram.widget.model.historyManager.undoStack();
labelRenderingMode enum
Defines the type of the rendering mode of label.
Name | Description |
---|---|
HTML | Sets the labelRenderingMode as HTML |
SVG | Sets the labelRenderingMode as SVG |
Default Value:
- HTML
Example
this.labelRenderingMode = {labelRenderingMode:"svg"};
layout object
Automatically arranges the nodes and connectors in a predefined manner.
layout.bounds object
Specifies the custom bounds to arrange/align the layout
Default Value:
- ej.datavisualization.Diagram.Rectangle()
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { type: ej.datavisualization.Diagram.LayoutTypes.RadialTree, horizontalSpacing: 30, verticalSpacing: 30 };
layout.fixedNode string
Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned
Default Value:
- ””
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { fixedNode: "nodeName" };
layout.getLayoutInfo object
Customizes the orientation of trees/sub trees. For orientations, see Chart Orientations. For chart types, see Chart Types
Default Value:
- null
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
getLayoutInfo(diagram, node, options){
options.orientation = "vertical";
options.type = "left";
offset = 10;
}
this.layout = { getLayoutInfo:getLayoutInfo };
layout.getConnectorSegments object
Defines a method to customize the segments based on source and target nodes.
Default Value:
- null
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
getConnectorSegment(diagram, node, options) { };
this.layout = { getConnectorSegments:getConnectorSegment };
layout.horizontalSpacing number
Sets the space to be horizontally left between nodes
Default Value:
- 30
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { { horizontalSpacing: 50 } };
layout.margin object
Defines the space to be left between layout bounds and layout.
Default Value:
- ej.datavisualization.Diagram.Margin()
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { { margin:{ left: 10, right: 10, top: 10, bottom: 10} }};
layout.horizontalAlignment enum
Defines how to horizontally align the layout within the layout bounds
Name | Description |
---|---|
Left | Used to align layout horizontally on left side of layout bounds |
Center | Used to align layout horizontally on center of layout bounds |
Right | Used to align layout horizontally on right side of layout bounds |
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Center
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Center };
layout.verticalAlignment enum
Defines how to vertically align the layout within the layout bounds
Name | Description |
---|---|
Top | Used to align layout vertically on top of layout bounds |
Center | Used to align layout vertically on center of layout bounds |
Bottom | Used to align layout vertically on bottom of layout bounds |
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Center
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Center };
layout.orientation enum
Sets the orientation/direction to arrange the diagram elements.
Name | Description |
---|---|
TopToBottom | Used to set LayoutOrientation from top to bottom |
BottomToTop | Used to set LayoutOrientation from bottom to top |
LeftToRight | Used to set LayoutOrientation from left to right |
RightToLeft | Used to set LayoutOrientation from right to left |
Default Value:
- ej.datavisualization.Diagram.LayoutOrientations.TopToBottom
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { orientation: ej.datavisualization.Diagram.LayoutOrientations.LeftToRight};
layout.type enum
Sets the type of the layout based on which the elements will be arranged.
Name | Description |
---|---|
None | Used not to set any specific layout |
HierarchicalTree | Used to set layout type as hierarchical layout |
OrganizationalChart | Used to set layout type as organizational chart |
Default Value:
- ej.datavisualization.Diagram.LayoutTypes.None
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { type: ej.datavisualization.Diagram.LayoutTypes.HierarchicalTree };
layout.verticalSpacing number
Sets the space to be vertically left between nodes
Default Value:
- 30
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { verticalSpacing: 50 };
layout.root string
Sets the value is used to define the root node of the layout.
Default Value:
- 30
Example
<ej-diagram id="diagramCore" width="100%" height="450" [pageSettings]="pageSettings" [snapSettings]="snapSettings"
[dataSourceSettings]="dataSourceSettings" [layout]="layout" >
</ej-diagram>
this.layout = { root: 'rootNode' };
locale string
Defines the current culture of diagram
Default Value:
- “en-US”
Example
}
this.locale = { locale: "en-US" };
nodes array
Array of JSON objects where each object represents a node
Default Value:
- []
nodes.activity enum
Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity.
Name | Description |
---|---|
None | Used to set BPMN Activity as None |
Task | Used to set BPMN Activity as Task |
SubProcess | Used to set BPMN Activity as SubProcess |
Default Value:
- ej.datavisualization.Diagram.BPMNActivity.Task
Example
this.nodes=[{
type:"bpmn",
shape:ej.datavisualization.Diagram.BPMNShapes.Activity,
Activity:ej.datavisualization.Diagram.BPMNActivity.SubProcess,
width:50,height:50,offsetX:100,offsetY:100,
}]
nodes.addInfo object
To maintain additional information about nodes
Default Value:
- {}
Example
constructor(){
this.addInfo = {TooltipData:"Shares the information with the customer"};
this.nodes=[{
name: "node1", addInfo: this.addInfo, offsetX:100, offsetY:100, width:50, height:50
},
{
type: "swimlane", name: "swimlane", addInfo: this.addInfo
},
}
nodes.annotation object
Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process.
Default Value:
- ej.datavisualization.Diagram.BPMNTextAnnotation()
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45, length: 150, direction: "top" }
}];
nodes.annotation.angle number
Sets the angle between the BPMN shape and the annotation
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45 }
}];
nodes.annotation.direction enum
Sets the direction of the text annotation
Name | Description |
---|---|
Left | Used to set the direction of BPMN Annotation as left |
Right | Used to set the direction of BPMN Annotation as right |
Top | Used to set the direction of BPMN Annotation as top |
Bottom | Used to set the direction of BPMN Annotation as bottom |
Default Value:
- ej.datavisualization.Diagram.BPMNAnnotationDirections.Left
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape",
direction:"right", length: 130, angle: -45,
width: 100, height: 50 }
}];
nodes.annotation.height number
Sets the height of the text annotation
Default Value:
- 20
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier
},
nodes.annotation.length number
Sets the distance between the BPMN shape and the annotation
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50,
length: 150 }
}];
nodes.annotation.text string
Defines the additional information about the flow object in a BPMN Process
Default Value:
- ””
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape", width: 100
}
}];
nodes.annotation.width number
Sets the width of the text annotation
Default Value:
- 20
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape", width: 100
}
}];
nodes.borderColor string
Sets the border color of node
Default Value:
- “black”
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red"
}];
nodes.borderDashArray string
Sets the pattern of dashes and gaps to stroke the border
Default Value:
- ””
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"
}];
nodes.borderWidth number
Sets the border width of the node
Default Value:
- 1
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "2,2", borderWidth:2
}];
nodes.canUngroup boolean
Defines whether the group can be ungrouped or not
Default Value:
- true
Example
this.nodes=[
{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape",
direction:"right", length: 130, angle: -45,
width: 100, height: 50 }
},
{
name:"node2",width:100,height:100,offsetX:200,offsetY:100
},
];
this.group=[{
name :"group",
children:["node1", "node2"],
canUngroup: false
}];
nodes.children array
Array of JSON objects where each object represents a child node/connector
Default Value:
- []
Example
this.nodes=[
{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: { text: "This is a BPMN Activity shape",
direction:"right", length: 130, angle: -45,
width: 100, height: 50 }
},
{name:"node2",width:100,height:100,offsetX:200,offsetY:100
},
];
this.group=[{
name :"group", children:["node1", "node2"]
}];
nodes.classifier enum
Sets the type of UML classifier. Applicable, if the node is a UML Class Diagram shape.
Default Value:
- ej.datavisualization.Diagram.ClassifierShapes.Class
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
},
nodes.class object
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class.
Default Value:
- null
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
},
nodes.class.name string
Sets the name of class.
Default Value:
- ””
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", }
},];
nodes.class.attributes array
Defines the collection of attributes
Default Value:
- []
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", attributes: [{ name: "accepted",}], },
},];
nodes.class.attributes.name string
Sets the name of the attribute
Default Value:
- ””
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", attributes: [{ name: "accepted" }], },
},];
nodes.class.attributes.type string
Sets the data type of attribute
Default Value:
- ””
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", attributes: [{ name: "accepted", type: "Date", }], },
},]
nodes.class.attributes.scope string
Defines the visibility of the attribute
Default Value:
- ej.datavisualization.Diagram.ScopeValueDefaults.Public
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", attributes: [{ name: "accepted", type: "Date", scope:"protected" }], },
},]
nodes.class.methods array
Defines the collection of methods of a Class.
Default Value:
- []
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", methods: [{ name: "getHistory" }] },
},]
nodes.class.methods.name string
Sets the name of the method.
Default Value:
- ””
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], }] },
},]
nodes.class.methods.arguments array
Defines the arguments of the method.
Default Value:
- []
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date",type:"String" }], }] },
}]
nodes.class.methods.arguments.name string
Sets the name of the argument
Default Value:
- ””
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }] },
},]
nodes.class.methods.arguments.type string
Sets the type of the argument
Default Value:
- ””
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }] },
},]
nodes.class.methods.type string
Sets the return type of the method
Default Value:
- ””
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
class: {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }] },
},]
nodes.class.methods.scope string
Sets the visibility of the method.
Default Value:
- ej.datavisualization.Diagram.ScopeValueDefaults.Public
Example
this.nodes=[
{
name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History",scope:"protected" }] },]
nodes.collapseIcon object
Defines the state of the node is collapsed.
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10 } }]
nodes.collapseIcon.borderColor string
Sets the border color for collapse icon of node
Default Value:
- “black”
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,borderColor: "red"} }]
nodes.collapseIcon.borderWidth number
Sets the border width for collapse icon of node
Default Value:
- 1
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, borderWidth: "2"} }]
nodes.collapseIcon.fillColor string
Sets the fill color for collapse icon of node
Default Value:
- “white”
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,fillColor: "green"} }]
nodes.collapseIcon.height number
Defines the height for collapse icon of node
Default Value:
- “15”
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10} }]
nodes.collapseIcon.horizontalAlignment enum
Sets the horizontal alignment of the icon.
Name | Description |
---|---|
Left | Used to align the icon horizontally on left side of node |
Center | Used to align the icon horizontally on center of node |
Right | Used to align the icon horizontally on right side of node |
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Center
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left }}]
nodes.collapseIcon.margin object
To set the margin for the collapse icon of node
Default Value:
- ej.datavisualization.Diagram.Margin()
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, margin:{ left: 5 }}}]
nodes.collapseIcon.offset object
Sets the fraction/ratio(relative to node) that defines the position of the icon
Default Value:
- ej.datavisualization.Diagram.Point(0.5, 1)
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, offset:ej.datavisualization.Diagram.Point(0,0.5) }}]
nodes.collapseIcon.shape enum
Defines the shape of the collapsed state of the node.
Name | Description |
---|---|
None | Used to set collapse icon shape as none |
Arrow | Used to set collapse icon shape as Arrow(Up/Down) |
Plus | Used to set collapse icon shape as Plus |
Minus | Used to set collapse icon shape as Minus |
Path | Used to set collapse icon shape as path |
Template | Used to set icon shape as template |
Image | Used to set icon shape as image |
Default Value:
- ej.datavisualization.Diagram.IconShapes.None
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10}}]
nodes.collapseIcon.verticalAlignment enum
Sets the vertical alignment of the icon.
Name | Description |
---|---|
Top | Set vertical alignment as top |
Middle | Set vertical alignment as middle |
Bottom | Set vertical alignment as bottom |
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Center
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
collapseIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }}]
nodes.connectorPadding number
Defines the distance to be left between a node and its connections(In coming and out going connections).
Default Value:
- 0
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, connectorPadding: 5}]
nodes.constraints enum
Enables or disables the default behaviors of the node.
Name | Description |
---|---|
None | Disable all node Constraints |
Select | Enables node to be selected |
Delete | Enables node to be Deleted |
Drag | Enables node to be Dragged |
Rotate | Enables node to be Rotated |
Connect | Enables node to be connected |
ResizeNorthEast | Enables node to be resize north east |
ResizeEast | Enables node to be resize east |
ResizeSouthEast | Enables node to be resize south east |
ResizeSouth | Enables node to be resize south |
ResizeSouthWest | Enables node to be resize south west |
ResizeWest | Enables node to be resize west |
ResizeNorthWest | Enables node to be resize north west |
ResizeNorth | Enables node to be resize north |
Resize | Enables node to be Resized |
Shadow | Enables shadow |
DragLabel | Enables label of node to be Dragged |
AllowPan | Enables panning should be done while node dragging |
AspectRatio | Enables Proportional resize for node |
PointerEvents | Enables the user interaction with the node |
CrispEdges | Enables contrast between clean edges for the node over rendering speed and geometric precision |
Default | Enables all node constraints |
Default Value:
- ej.datavisualization.Diagram.NodeConstraints.Default
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~ej.datavisualization.Diagram.NodeConstraints.Select}]
nodes.container object
Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group.
Default Value:
- null
Example
this.nodes=[
{
name: "node1", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
},
{
name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
},
];
this.group=[{
name :"group", children:["node1", "node2"], container: { type: "stack" }, offsetX:200, offsetY:100
}];
nodes.container.orientation string
Defines the orientation of the container. Applicable, if the group is a container.
Default Value:
- “vertical”
Example
this.nodes=[
{
name: "node1", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
},
{
name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
},
];
this.group=[{
name :"group", children:["node1", "node2"], container: { type: "stack", orientation: "horizontal" }, offsetX:200, offsetY:100
}];
nodes.container.type enum
Sets the type of the container. Applicable if the group is a container.
Name | Description |
---|---|
Canvas | Sets the container type as Canvas |
Stack | Sets the container type as Stack |
Default Value:
- ej.datavisualization.Diagram.ContainerType.Canvas
Example
this.nodes=[
{
name: "node1", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
},
{
name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
},
];
this.group=[{
name :"group", children:[node1, node2], container: {
type: ej.datavisualization.Diagram.ContainerType.Stack },
offsetX:200, offsetY:100
}];
nodes.cornerRadius number
Defines the corner radius of rectangular shapes.
Default Value:
- 0
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
type:"basic", shape:"rectangle", cornerRadius:5
},
];
nodes.cssClass string
Configures the styles of shapes
Default Value:
- ””
Example
<style>
.hoverNode:hover {
fill:blue
}
</style>
this.nodes=[
{
name: "node",
cssClass: "hoverNode",
width: 50, height: 50, offsetX: 100, offsetY: 100
},
];
nodes.data object
Defines the BPMN data object
nodes.data.type enum
Sets the type of the BPMN Data object
Name | Description |
---|---|
Input | Used to notate the Input type BPMN data object |
Output | Used to notate the Output type BPMN data object |
None | Used to set BPMN data object type as None |
Default Value:
- ej.datavisualization.Diagram.BPMNDataObjects.None
Example
this.nodes=[
{
name:"dataObject", type: "bpmn", shape:ej.datavisualization.Diagram.BPMNShapes.DataObject, data: { type: ej.datavisualization.Diagram.BPMNDataObjects.Input }, width:50, height: 50, offsetX:100, offsetY:100
},
];
nodes.data.collection boolean
Defines whether the BPMN data object is a collection or not
Default Value:
- false
Example
this.nodes=[
{
name:"dataObject", type: "bpmn", shape:ej.datavisualization.Diagram.BPMNShapes.DataObject, data: { type: ej.datavisualization.Diagram.BPMNDataObjects.Input, collection: false }, width:50, height: 50, offsetX:100, offsetY:100
},
];
nodes.enumeration object
Defines an Enumeration in a UML Class Diagram
Default Value:
- null
Example
this.nodes=[
{
name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration:{ name: "AccountType", }
},
];
nodes.enumeration.name string
Sets the name of the Enumeration
Default Value:
- ””
Example
this.nodes=[
{
name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration:{ name: "AccountType", }
},
];
nodes.enumeration.members array
Defines the collection of enumeration members
Default Value:
- []
Example
this.nodes=[
{
name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration:{ name: "AccountType", members: [{ name: "CheckingAccount"}]}
},
];
nodes.enumeration.members.name string
Sets the name of the enumeration member
Default Value:
- ””
Example
this.nodes=[
{
name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier,classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration:{ name: "AccountType", members: [{ name: "CheckingAccount"}]}
},
];
nodes.event enum
Sets the type of the BPMN Events. Applicable, if the node is a BPMN event.
Name | Description |
---|---|
Start | Used to set BPMN Event as Start |
Intermediate | Used to set BPMN Event as Intermediate |
End | Used to set BPMN Event as End |
NonInterruptingStart | Used to set BPMN Event as NonInterruptingStart |
NonInterruptingIntermediate | Used to set BPMN Event as NonInterruptingIntermediate |
ThrowingIntermediate | Used to set BPMN Event as ThrowingIntermediate |
Default Value:
- ej.datavisualization.Diagram.BPMNEvents.Start
Example
this.nodes=[
{
type: "bpmn", shape: "event" ,
event: ej.datavisualization.Diagram.BPMNEvents.Intermediate, width:50, height:50
},
];
nodes.excludeFromLayout boolean
Defines whether the node can be automatically arranged using layout or not
Default Value:
- false
Example
this.nodes=[
{
//Manually positioned
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, excludeFromLayout: true
},
{//Automatically arranged
name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2"
},
{
name: "node3", width: 50, height:50
},
];
nodes.expandIcon object
Defines the state of the node is expanded or collapsed.
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10}
},
];
nodes.expandIcon.borderColor string
Sets the border color for expand icon of node
Default Value:
- “black”
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,borderColor: "red"}
},
];
nodes.expandIcon.borderWidth number
Sets the border width for expand icon of node
Default Value:
- 1
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, borderWidth: "2"}
},
];
nodes.expandIcon.fillColor string
Sets the fill color for expand icon of node
Default Value:
- “white”
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,fillColor: "green"}
},
];
nodes.expandIcon.height number
Defines the height for expand icon of node
Default Value:
- “15”
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10}
},
];
nodes.expandIcon.horizontalAlignment enum
Sets the horizontal alignment of the icon.
Name | Description |
---|---|
Left | Used to align the icon horizontally on left side of node |
Center | Used to align the icon horizontally on center of node |
Right | Used to align the icon horizontally on right side of node |
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Center
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left }
},
];
nodes.expandIcon.margin object
To set the margin for the expand icon of node
Default Value:
- ej.datavisualization.Diagram.Margin()
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, margin:{ left: 5 }}
},
];
nodes.expandIcon.offset object
Sets the fraction/ratio(relative to node) that defines the position of the icon
Default Value:
- ej.datavisualization.Diagram.Point(0.5, 1)
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10, offset:ej.datavisualization.Diagram.Point(0,0.5) }
},
];
nodes.expandIcon.shape enum
Defines the shape of the expanded state of the node.
Name | Description |
---|---|
None | Used to set expand icon shape as none |
Arrow | Used to set expand icon shape as Arrow(Up/Down) |
Plus | Used to set expand icon shape as plus |
Minus | Used to set expand icon shape as minus |
Path | Used to set expand icon shape as path |
Template | Used to set icon shape as template |
Image | Used to set icon shape as image |
Default Value:
- ej.datavisualization.Diagram.IconShapes.None
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10}
},
];
nodes.expandIcon.verticalAlignment enum
Sets the vertical alignment of the icon.
Name | Description |
---|---|
Top | Set vertical alignment as top |
Middle | Set vertical alignment as middle |
Bottom | Set vertical alignment as bottom |
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Center
Example
this.nodes=[
{
name: "node1", width: 75, height:55, offsetX:50, offsetY:50,
expandIcon:{ shape:ej.datavisualization.Diagram.IconShapes.ArrowDown, width:10, height:10,
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }
},
];
nodes.fillColor string
Defines the fill color of the node
Default Value:
- “white”
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, fillColor:"red"
},
];
nodes.gateway enum
Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway.
Name | Description |
---|---|
None | Used to set BPMN Gateway as None |
Exclusive | Used to set BPMN Gateway as Exclusive |
Inclusive | Used to set BPMN Gateway as Inclusive |
Parallel | Used to set BPMN Gateway as Parallel |
Complex | Used to set BPMN Gateway as Complex |
EventBased | Used to set BPMN Gateway as EventBased |
ExclusiveEventBased | Used to set BPMN Gateway as ExclusiveEventBased |
ParallelEventBased | Used to set BPMN Gateway as ParallelEventBased |
Default Value:
- ej.datavisualization.Diagram.BPMNGateways.None
Example
this.nodes=[
{
type: "bpmn", shape: "gateway" , gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive, width:50, height:50
},
];
nodes.gradient object
Paints the node with a smooth transition from one color to another color
nodes.gradient.LinearGradient object
Paints the node with linear color transitions
nodes.gradient.LinearGradient.stops array
Defines the different colors and the region of color transitions
Default Value:
- []
Example
this.gradient={
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
};
this.nodes=[
{
name: "Node1", width: 100, height: 100, gradient : gradient
},
];
nodes.gradient.LinearGradient.x1 number
Defines the left most position(relative to node) of the rectangular region that needs to be painted
Default Value:
- 0
Example
this.gradient={
type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 100}]
};
this.nodes=[
{
name: "Node1", width: 100, height: 100, gradient : gradient
},
];
nodes.gradient.LinearGradient.x2 number
Defines the right most position(relative to node) of the rectangular region that needs to be painted
Default Value:
- 0
Example
this.gradient={
type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 100}]
};
this.nodes=[
{
name: "Node1", width: 100, height: 100, gradient : gradient
},
];
nodes.gradient.LinearGradient.y1 number
Defines the top most position(relative to node) of the rectangular region that needs to be painted
Default Value:
- 0
Example
this.gradient={
type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 100}]
};
this.nodes=[
{
name: "Node1", width: 100, height: 100, gradient : gradient
},
];
nodes.gradient.LinearGradient.y2 number
Defines the bottom most position(relative to node) of the rectangular region that needs to be painted
Default Value:
- 0
Example
this.gradient={
type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 100}]
};
this.nodes=[
{
name: "Node1", width: 100, height: 100, gradient : gradient
},
];
nodes.gradient.RadialGradient object
Paints the node with radial color transitions. A focal point defines the beginning of the gradient, and a circle defines the end point of the gradient.
nodes.gradient.RadialGradient.cx number
Defines the position of the outermost circle
Default Value:
- 0
Example
this.nodes=[
{
//Manually positioned
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:{ type:"radial", fx:50, fy:50,
cx:50, cy:50,
stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
},
nodes.gradient.RadialGradient.cy number
Defines the outer most circle of the radial gradient
Default Value:
- 0
Example
this.nodes=[
{
//Manually positioned
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:{ type:"radial", fx:50, fy:50,
cx:50, cy:50,
stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
},
nodes.gradient.RadialGradient.fx number
Defines the innermost circle of the radial gradient
Default Value:
- 0
Example
this.nodes=[
{
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:{ type:"radial",
fx:50, fy:50,
cx:50, cy:50,
stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
},
nodes.gradient.RadialGradient.fy number
Defines the innermost circle of the radial gradient
Default Value:
- 0
Example
this.nodes=[
{
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:{ type:"radial",
fx:50, fy:50,
cx:50, cy:50,
stops:[{color:"white", offset:0 }, {color:"red", offset:100}] }
},
nodes.gradient.RadialGradient.stops array
Defines the different colors and the region of color transitions.
Default Value:
- []
Example
this.nodes=[
{
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:
{
type:"radial", fx:50, fy:50,
cx:50, cy:50,
stops:[{color:"white", offset:0 },
{ color:"red", offset:100 }] }
},
nodes.gradient.Stop object
Defines the color and a position where the previous color transition ends and a new color transition starts
nodes.gradient.Stop.color string
Sets the color to be filled over the specified region
Default Value:
- ””
Example
this.nodes=[
{
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:{ type:"radial", fx:50, fy:50,
cx:50, cy:50,
stops:[
{color:"white", offset:0 },
{color:"red", offset:100}] }
},]
nodes.gradient.Stop.offset number
Sets the position where the previous color transition ends and a new color transition starts
Default Value:
- 0
Example
this.nodes=[
{
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:{ type:"radial", fx:50, fy:50,
cx:50, cy:50,
stops:[
{color:"white", offset:0 },
{color:"red", offset:100}] }
},]
nodes.gradient.Stop.opacity number
Describes the transparency level of the region
Default Value:
- 1
Example
this.nodes=[
{
name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
gradient:{ type:"radial", fx:50, fy:50, cx:50, cy:70,
stops:[
{color:"white", offset:0 },
//Sets the opacity
{color:"red", offset:100, opacity: 0.5}] }
},]
nodes.group object
Sets the type of the BPMN Shapes as group. Applicable, if the node is a BPMN.
Default Value:
- ej.datavisualization.Diagram.BPMNShapes
Example
this.nodes=[
{
type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Group
},]
nodes.header object
Defines the header of a swimlane/lane
Default Value:
- { text: “Title”, fontSize: 11 }
Example
this.nodes=[
{
type: "swimlane", name: "swimlane", header: { text: "Swimlane", fontSize: 12, bold: true }
},]
nodes.height number
Defines the height of the node
Default Value:
- 0
Example
this.nodes=[
{
name: "node1", width: 50, height:150, offsetX:50, offsetY:50
},]
nodes.horizontalAlign enum
Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container.
Name | Description |
---|---|
Left | Used to align text horizontally on left side of node/connector |
Center | Used to align text horizontally on center of node/connector |
Right | Used to align text horizontally on right side of node/connector |
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Left
Example
this.nodes=[
{
name: "node1", width: 50, height:50
},
{
name: "node2", width: 50, height:50, borderColor: "red" , borderDashArray: "4,2",horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
},
{
name: "node3", width: 50, height:50
},
];
this.group=[{
name :"group", children:[ "node1", "node2" ], container: { type: "canvas" }, offsetX:200, offsetY:100, minWidth:200, minHeight: 200, fillColor:"gray"
}];
nodes.inEdges array
A read only collection of the incoming connectors/edges of the node
Default Value:
- []
Example
//Read the incoming connections to the selected node
let node = this.diagram.widget.selectionList[0];
this.diagram.widget.addSelection(node);
for(let i=0;i<node.inEdges.length;i++){
console.log(node.inEdges[i]);
}
nodes.interface object
Defines an interface in a UML Class Diagram
Default Value:
- null
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface
},
];
nodes.interface.name string
Sets the name of the interface
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",}
},
];
nodes.interface.attributes array
Defines a collection of attributes of the interface
Default Value:
- []
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount", attributes: [{ name: "ownar"}], },
},
];
nodes.interface.attributes.name string
Sets the name of the attribute
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount", attributes: [{ name: "ownar"}], },
},
];
nodes.interface.attributes.type string
Sets the type of the attribute
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount", attributes: [{ name: "ownar", type: "String[*]" , }], },
},
];
nodes.interface.attributes.scope string
Sets the visibility of the attribute
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount", attributes: [{ name: "ownar", type: "String[*]",scope:"protected" }], },
},
];
nodes.interface.methods array
Defines the collection of public methods of an interface
Default Value:
- []
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",methods: [{ name: "deposit", }] },
},
];
nodes.interfaces.methods.name string
Sets the name of the method.
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",methods: [{ name: "deposit", }] },
},
];
nodes.interface.methods.arguments array
Defines the collection of arguments of a method
Default Value:
- []
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", }], }] },
},
];
nodes.interface.methods.arguments.name string
Sets the name of the argument
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", }], }] },
},
];
nodes.interface.methods.arguments.type string
Sets the type of the argument
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars" }], }] },
},
];
nodes.interface.methods.type string
Sets the return type of the method
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars" }], type:"account"}] },
},
];
nodes.interface.methods.scope string
Sets the visibility of the method
Default Value:
- ””
Example
this.nodes=[
{
name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: ej.datavisualization.Diagram.Shapes.UMLClassifier, classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
"interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars" }], type:"account",scope:"private"}] },
},
];
nodes.isExpanded boolean
Defines whether the sub tree of the node is expanded or collapsed
Default Value
- true
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, isExpanded: false
},
{
name: "node2", width: 50, height:50
},
{
name: "node3", width: 50, height:50
},
];
this.connectors=[{
sourceNode:"node1", targetNode:"node2" , name:"connector"
}];
nodes.isSwimlane boolean
Sets the node as a swimlane
Default Value:
- false
Example
this.nodes=[
{
type: "swimlane",name: "swimlane", isSwimlane:true, header: {text: "Swimlane", fontSize: 12, bold: true}
},
nodes.labels array
A collection of objects where each object represents a label
Default Value:
- []
Example
this.labels = [{"text": "Node1", "fontColor":"red"}];
this.nodes=[
{
labels:this.labels
},]
nodes.labels.bold boolean
Enables/disables the bold style
Default Value:
- false
Example
this.nodes=[
{
text:"label", bold:true
},]
nodes.labels.borderColor string
Sets the border color of the label
Default Value:
- “transparent”
Example
this.nodes=[{name: "node1", width: 50, height:50, offsetX:50, offsetY:50,labels:[{ text:"label", borderColor:"red", borderWidth: 2}]}]
nodes.labels.borderWidth number
Sets the border width of the label
Default Value:
- 0
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", borderColor:"red", borderWidth: 2}]
},]
nodes.labels.fillColor string
Sets the fill color of the text area
Default Value:
- “transparent”
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", fillColor: "green"}]
},]
nodes.labels.fontColor string
Sets the font color of the text
Default Value:
- “black”
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", fontColor: "green"}]
},]
nodes.labels.fontFamily string
Sets the font family of the text
Default Value:
- “Arial”
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", fontColor: "green", fontFamily:"seugoe UI"}]
},]
nodes.labels.fontSize number
Defines the font size of the text
Default Value:
- 12
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", fontSize: 14}]
},]
nodes.labels.horizontalAlignment enum
Sets the horizontal alignment of the label.
Name | Description |
---|---|
Left | Used to align text horizontally on left side of node/connector |
Center | Used to align text horizontally on center of node/connector |
Right | Used to align text horizontally on right side of node/connector |
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Center
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
//Align the text at the left most position of node
labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left}]
},]
nodes.labels.italic boolean
Enables/disables the italic style
Default Value:
- false
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", italic:true}]
},]
nodes.labels.margin object
To set the margin of the label
Default Value:
- ej.datavisualization.Diagram.Margin()
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
//Leaves 5px space between the left boundary of node and label
labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}]
},]
nodes.labels.mode enum
Gets whether the label is currently being edited or not.
Name | Description |
---|---|
Edit | Used to set label edit mode as edit |
View | Used to set label edit mode as view |
Default Value:
- ej.datavisualization.Diagram.LabelEditMode.Edit
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
//Leaves 5px space between the left boundary of node and label
labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}]
},]
nodes.labels.name string
Sets the unique identifier of the label
Default Value:
- ””
Example
this.nodes=[
{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", name:"label1"}]
}]
nodes.labels.offset object
Sets the fraction/ratio(relative to node) that defines the position of the label
Default Value:
- ej.datavisualization.Diagram.Point(0.5, 0.5)
Example
this.nodes=[ts
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", offset:ej.datavisualization.Diagram.Point(0,0.5) }]
}]
nodes.labels.opacity number
Defines the transparency of the labels
Default Value:
- 1
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", opacity: 0.7}]
}]
nodes.labels.overflowType enum
Sets the overflowType of the labels
Name | Description |
---|---|
Ellipsis | Set overflow Type as ellipsis |
Clip | Set overflow Type as Clip |
Default Value:
- ej.datavisualization.Diagram.OverflowType.Ellipsis
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label1",fontColor:"red",textOverflow:true,
overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis}]
}]
nodes.labels.readOnly boolean
Defines whether the label is editable or not
Default Value:
- false
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", readOnly:true}]
}]
nodes.labels.rotateAngle number
Defines the angle to which the label needs to be rotated
Default Value:
- 0
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label", rotateAngle: 90}]
}]
nodes.labels.text string
Defines the label text
Default Value:
- ””
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"Label"}]
}]
nodes.labels.textAlign enum
Defines how to align the text inside the label.
Name | Description |
---|---|
Left | Used to align text on left side of node/connector |
Center | Used to align text on center of node/connector |
Right | Used to align text on Right side of node/connector |
Default Value:
- ej.datavisualization.Diagram.TextAlign.Center
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"node Label", textAlign:ej.datavisualization.Diagram.TextAlign.Left}]
}]
nodes.labels.textDecoration enum
Sets how to decorate the label text.
Name | Description |
---|---|
Underline | Used to set text decoration of the label as Underline |
Overline | Used to set text decoration of the label as OverLine |
LineThrough | Used to set text decoration of the label as LineThrough |
None | Used to set text decoration of the label as None |
Default Value:
- ej.datavisualization.Diagram.TextDecorations.None
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
//Decorate the text with an underline
labels:[{ text:"Label", textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline}]
}]
nodes.labels.textOverflow boolean
Defines the overflowed content is displayed or not.
Default Value:
- false
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"label1",fontColor:"red",textOverflow:true,
overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis}]
}]
nodes.labels.verticalAlignment enum
Sets the vertical alignment of the label.
Name | Description |
---|---|
Top | Set vertical alignment as top |
Middle | Set vertical alignment as middle |
Bottom | Set vertical alignment as bottom |
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Center
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
//Aligns the text at the top most position of node
labels:[{ text:"label", offset:{ y:0 }, verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }]
}]
nodes.labels.visible boolean
Enables or disables the visibility of the label
Default Value:
- true
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"Label", visible: false}]
}]
nodes.labels.width number
Sets the width of the label(the maximum value of label width and the node width will be considered as label width)
Default Value:
- 50
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"Label", width: 100}]
}]
nodes.labels.wrapping enum
Defines how the label text needs to be wrapped.
Name | Description |
---|---|
NoWrap | Disables wrapping |
Wrap | Enables Line-break at normal word break points |
WrapWithOverflow | Enables Line-break at normal word break points with longer word overflows |
Default Value:
- ej.datavisualization.Diagram.TextWrapping.WrapWithOverflow
Example
this.nodes=[
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
labels:[{ text:"Enter Your Text", wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap}]
}]
nodes.lanes array
An array of objects where each object represents a lane. Applicable, if the node is a swimlane.
Default Value:
- []
Example
this.nodes=[
//Define the collection of lanes
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,lanes:[{name:"lane1", width:200 },
{name:"lane2", width:100}]
}]
nodes.lanes.width number
Defines the width of lane
Default Value:
- 0
Example
this.addInfo = {Description:"Describe the functionality"};
this.nodes=[
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200, addInfo: this.addInfo }]
]
nodes.lanes.height number
Defines the height of lane
Default Value:
- 0
Example
this.addInfo = {Description:"Describe the functionality"};
this.nodes=[
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200, height:100, addInfo: addInfo }]
]
nodes.lanes.zorder number
Defines the z-index of the lane
Default Value:
- 0
Example
this.addInfo = {Description:"Describe the functionality"};
this.nodes=[
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200,height:100,zOrder:10, addInfo: addInfo }]
]
nodes.lanes.addInfo object
Allows to maintain additional information about lane
Default Value:
- {}
Example
this.addInfo = {Description:"Describe the functionality"};
this.nodes=[
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200, addInfo: addInfo }]
]
nodes.lanes.children array
An array of objects where each object represents a child node of the lane
Default Value:
- []
Example
this.nodes=[
{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200,children:[{name:"process1", width: 50, height: 50 }] }]
},
]
nodes.lanes.fillColor string
Defines the fill color of the lane
Default Value:
- “white”
Example
this.nodes=[
{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200,fillColor:"lightgray" }]
},
]
nodes.lanes.header object
Defines the header of the lane
Default Value:
- { text: “Function”, fontSize: 11 }
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200,
//Defines the lane header
header:{fillColor:"blue", fontColor:"white", text:"Function 1"} }]
}]
nodes.lanes.isLane boolean
Defines the object as a lane
Default Value:
- false
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 , isLane:true }]
}]
nodes.lanes.name string
Sets the unique identifier of the lane
Default Value:
- ””
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"function1", width:200 }]
}]
nodes.lanes.orientation string
Sets the orientation of the lane.
Default Value:
- “vertical”
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, orientation:"horizontal",
lanes:[{ name:"function1", width:200 , orientation:"vertical" }]
}];
nodes.marginBottom number
Defines the minimum space to be left between the bottom of parent bounds and the node. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, marginBottom: 50 }]
}]
}];
nodes.marginLeft number
Defines the minimum space to be left between the left of parent bounds and the node. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.nodes=[{}
type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, marginLeft: 10 }]
}]}];
nodes.marginRight number
Defines the minimum space to be left between the right of the parent bounds and the node. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, marginRight: 10 }]
}]}];
nodes.marginTop number
Defines the minimum space to be left between the top of parent bounds and the node. Applicable, if the parent is a container.
Default Value:
- 0
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, marginTop: 10 }]
}]}];
nodes.maxHeight number
Defines the maximum height limit of the node
Default Value:
- 0
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, maxHeight: 100 }]
}]}];
nodes.maxWidth number
Defines the maximum width limit of the node
Default Value:
- 0
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, maxWidth: 100 }]
}]}];
nodes.minHeight number
Defines the minimum height limit of the node
Default Value:
- 0
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, minHeight: 10 }]
}]}];
nodes.minWidth number
Defines the minimum width limit of the node
Default Value:
- 0
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 ,
children:[{name:"process1", width: 50, height: 50, minWidth: 10 }]
}]}];
nodes.name string
Sets the unique identifier of the node
Default Value:
- ””
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50
}]
nodes.offsetX number
Defines the position of the node on X-Axis
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50
}]
nodes.offsetY number
Defines the position of the node on Y-Axis
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50
}]
nodes.opacity number
Defines the opaque of the node
Default Value:
- 1
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50 ,opacity:0.7
}]
nodes.orientation string
Defines the orientation of nodes. Applicable, if the node is a swimlane.
Default Value:
- “vertical”
Example
this.nodes=[
{type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,orientation:"horizontal"
}];
nodes.outEdges array
A read only collection of outgoing connectors/edges of the node
Default Value:
- []
Example
//Read the incoming connections to the selected node
let node = this.diagram.widget.selectionList[0];
this.diagram.widget.addSelection(node);
for(let i=0;i<node.outEdges.length;i++){
console.log(node.outEdges[i]);
}
nodes.paddingBottom number
Defines the minimum padding value to be left between the bottom most position of a group and its children. Applicable, if the group is a container.
Default Value:
- 0
Example
this.nodes=[{name: "node1", width: 50, height:50},
{
name: "node2", width: 50, verticalAlign: "bottom"
},
];
this.group=[{name :"group", children:[ "node1", "node2" ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingBottom:10}]
nodes.paddingLeft number
Defines the minimum padding value to be left between the left most position of a group and its children. Applicable, if the group is a container.
Default Value:
- 0
Example
this.nodes=[{name: "node1", width: 50, height:50},
{
name: "node2", width: 50, verticalAlign: "bottom"
},
];
this.group=[{name :"group", children:[ "node1", "node2" ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingLeft:10}]
nodes.paddingRight number
Defines the minimum padding value to be left between the right most position of a group and its children. Applicable, if the group is a container.
Default Value:
- 0
Example
this.nodes=[{name: "node1", width: 50, height:50},
{
name: "node2", width: 50, verticalAlign: "bottom"
},
];
this.group=[{name :"group", children:[ "node1", "node2" ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingRight:10}]
nodes.paddingTop number
Defines the minimum padding value to be left between the top most position of a group and its children. Applicable, if the group is a container.
Default Value:
- 0
Example
this.nodes=[{name: "node1", width: 50, height:50},
{
name: "node2", width: 50, verticalAlign: "bottom"
},
];
this.group=[{name :"group", children:[ "node1", "node2" ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingTop:10}]
nodes.paletteItem object
Defines the size and preview size of the node to add that to symbol palette
Default Value:
- null
Example
this.palettes = [{
name: "Basic Shapes", expanded: true,
items: [
{
name: "Rectangle", height: 40, width: 80,
//Sets preview size
paletteItem: {
previewWidth: 100,
previewHeight: 100
}
}]
}];
nodes.paletteItem.enableScale boolean
Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not
Default Value:
- true
Example
this.palettes = [{
name: "Nodes", expanded: true,
items: [
{
name: "Rectangle", width:50, height:50,
//Draw symbol of size(50,50)
paletteItem: {
width: 100,
height: 100,
enableScale:false
}
}]
}];
nodes.paletteItem.height number
Defines the height of the symbol
Default Value:
- 0
Example
this.palettes = [{
name: "Nodes", expanded: true,
items: [
{
name: "Rectangle",
//Sets the size of the symbol
paletteItem: {
width: 200,
height: 200,
enableScale: false
}
}]
}];
nodes.paletteItem.label string
To display a name for nodes in the symbol palette
Default Value:
- null
Example
this.palettes = [{
name: "Nodes", expanded: true,
items: [
{
name: "Rectangle",
//Sets the name for node in the symbol palette
paletteItem: {
label: "label"
}
}]
}];
nodes.paletteItem.margin object
Defines the margin of the symbol item
Default Value:
- { left: 4, right: 4, top: 4, bottom: 4 }
Example
this.palettes = [{
name: "Nodes", expanded: true,
items: [
{
name: "Rectangle",
//Sets Symbol margin
paletteItem: {
margin: { left: 30 }
}
}]
}];
nodes.paletteItem.previewHeight number
Defines the preview height of the symbol
Default Value:
- undefined
Example
this.palettes = [{
name: "Nodes", expanded: true,
items: [
{
name: "Rectangle",
//Sets preview size
paletteItem: {
previewWidth: 100,
previewHeight: 100
}
}]
}];
nodes.paletteItem.previewWidth number
Defines the preview width of the symbol
Default Value:
- undefined
Example
this.palettes = [{
name: "Nodes", expanded: true,
items: [
{
name: "Rectangle",
//Sets preview size
paletteItem: {
previewWidth: 100,
previewHeight: 100
}
}]
}];
nodes.paletteItem.width number
Defines the width of the symbol
Default Value:
- 0
Example
this.palettes = [{
name: "Nodes", expanded: true,
items: [
{
name: "Rectangle",
//Sets the size of the symbol
paletteItem: {
width: 200,
height: 200,
enableScale : false
}
}]
}];
nodes.parent string
Sets the name of the parent group
Default Value:
- ””
Example
this.nodes=[
{name: "node1", width: 50, height:50,offsetX:50, offsetY:50, parent:"group"
},
{
name: "node2", width: 50,offsetX:150, offsetY:150,parent:"group"
},
];
this.group=[{name :"group", children:[ "node1", "node2" ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingBottom:10}]
nodes.pathData string
Sets the path geometry that defines the shape of a path node
Default Value:
- ””
Example
this.nodes=[{
name: "node3", width: 50, height:50, offsetX:50, offsetY:50,
type:"basic", shape:"path", pathData: "M370.9702,194.9961L359.5112,159.7291L389.5112,137.9341L419.5112,159.7291L408.0522,194.9961L370.9702,194.9961z"
}
];
nodes.phases array
An array of objects, where each object represents a smaller region(phase) of a swimlane.
Default Value:
- []
Example
this.nodes=[{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}},
{ name:"phase2", label:{ text:"Phase2"} }]
}]
nodes.phases.label object
Defines the header of the smaller regions
Default Value:
- null
Example
this.nodes=[{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}},
{ name:"phase2", label:{ text:"Phase2"} }]
}]
nodes.phases.lineColor string
Defines the line color of the splitter that splits adjacent phases.
Default Value:
- “#606060”
Example
this.nodes=[{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineColor:"green"},
{ name:"phase2", label:{ text:"Phase2"} }]
}]
nodes.phases.lineDashArray string
Sets the dash array that used to stroke the phase splitter
Default Value:
- “3,3”
Example
this.nodes=[{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineDashArray:"2,2"},
{ name:"phase2", label:{ text:"Phase2"} }]
}]
nodes.phases.lineWidth number
Sets the lineWidth of the phase
Default Value:
- 1
Example
this.nodes=[{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineWidth:3},
{ name:"phase2", label:{ text:"Phase2"} }]
}]
nodes.phases.name string
Sets the unique identifier of the phase
Default Value:
- ””
Example
this.nodes=[{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineWidth:3},
{ name:"phase2", label:{ text:"Phase2"} }]
}]
nodes.phases.offset number
Sets the length of the smaller region(phase) of a swimlane
Default Value:
- 100
Example
this.nodes=[{type: "swimlane",name: "swimlane", phases:{offset: 200}]}]
nodes.phases.orientation string
Sets the orientation of the phase
Default Value:
- “horizontal”
Example
this.nodes=[{
{
name: "verticalPhase",
type: "phase", offset: 200, orientation: "vertical",label: { text: "New Phase" }
},
}]
nodes.phases.type string
Sets the type of the object as phase
Default Value:
- “phase”
Example
this.nodes=[{
{
name: "verticalPhase",
type: "phase", offset: 200, label: { text: "New Phase" }
},
}]
nodes.phaseSize number
Sets the height of the phase headers
Default Value:
- 0
Example
this.nodes=[{
type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
width: 300, orientation:"horizontal",phaseSize:50,
phases:[{ name:"phase1", offset:150, label:{text:"Phase 1"} }]
}]
nodes.pivot object
Sets the ratio/ fractional value relative to node, based on which the node will be transformed(positioning, scaling and rotation)
Default Value:
- ej.datavisualization.Diagram.Points(0.5,0.5)
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, pivot: {x:0, y:0}
}]
nodes.points array
Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon.
Default Value:
- []
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
type: "basic",shape:"polygon", points:[{ x: 0, y: 12.5 }, { x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }, { x: 12.5, y: 0 }, { x: 0, y: 12.5 }]
}]
nodes.ports array
An array of objects where each object represents a port
Default Value:
- []
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0 }},
{name:"port2", offset:{ x:0.5, y:1 }}]
}]
nodes.ports.borderColor string
Sets the border color of the port
Default Value:
- “#1a1a1a”
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, borderColor:"yellow" }]
}]
nodes.ports.borderWidth number
Sets the stroke width of the port
Default Value:
- 1
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, borderColor:"yellow", borderWidth: 3 }]
}]
nodes.ports.connectorPadding number
Defines the space to be left between the port bounds and its incoming and outgoing connections.
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, connectorPadding:10 }]
}]
nodes.ports.constraints enum
Defines whether connections can be created with the port
Name | Description |
---|---|
None | Disable all constraints |
Connect | Enables connections with connector |
ConnectOnDrag | Enables to create the connection when mouse hover on the port. |
Default Value:
- ej.datavisualization.Diagram.PortConstraints.Connect
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
//Disable creating connections with the port
ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, constraints: ej.datavisualization.Diagram.PortConstraints.Default &~ ej.datavisualization.Diagram.PortConstraints.Connect }]
}]
nodes.ports.fillColor string
Sets the fill color of the port
Default Value:
- “white”
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, fillColor:"red" }]
}]
nodes.ports.name string
Sets the unique identifier of the port
Default Value:
- ””
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{ name:"port1", offset:{ x:0.5, y:0.5 } }]
}]
nodes.ports.offset object
Defines the position of the port as fraction/ ratio relative to node
Default Value:
- ej.datavisualization.Diagram.Point(0, 0)
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
//Add port at the center of the node
ports:[{name:"port1", offset:{ x:0.5, y:0.5 } }]
}]
nodes.ports.pathData string
Defines the path data to draw the port. Applicable, if the port shape
is path.
Default Value:
- ””
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 },
//Define the shape of the port
shape:"path", pathData: "M5,0 L10,10 L0,10 z"}]
}]
nodes.ports.shape enum
Defines the shape of the port.
Name | Description |
---|---|
X | Used to set port shape as X |
Circle | Used to set port shape as Circle |
Square | Used to set port shape as Square |
Path | Used to set port shape as Path |
Default Value:
- ej.datavisualization.Diagram.PortShapes.Square
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 },
shape:ej.datavisualization.Diagram.PortShapes.Circle}]
}]
nodes.ports.size number
Defines the size of the port
Default Value:
- 8
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, size: 10}]
}]
nodes.ports.visibility enum
Defines when the port should be visible.
Name | Description |
---|---|
Visible | Set the port visibility as Visible |
Hidden | Set the port visibility as Hidden |
Hover | Port get visible when hover connector on node |
Connect | Port gets visible when connect connector to node |
Default | Specifies the port visibility as default |
Default Value:
- ej.datavisualization.Diagram.PortVisibility.Default
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
ports:[{name:"port1", offset:{ x:0.5, y:0.5 },
visibility:ej.datavisualization.Diagram.PortVisibility.Visible }]
}]
nodes.rotateAngle number
Sets the angle to which the node should be rotated
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50, rotateAngle: 45 }]
nodes.scale enum
Defines how the node should be scaled/stretched
Name | Description |
---|---|
None | Set the scale as none |
Meet | Used to scale the node uniformly so that it fits the node bounds |
Slice | Used to scale the node uniformly to the maximum |
Stretch | Used to scale the node non-uniformly to be stretched |
Default Value:
- ej.datavisualization.Diagram.ScaleConstraints.Meet
Example
this.nodes=[{
scale:ej.datavisualization.Diagram.ScaleConstraints.Slice }]
nodes.shadow object
Defines the opacity and the position of shadow
Default Value:
- ej.datavisualization.Diagram.Shadow()
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
shadow: {opacity: 0.5, distance: 10, angle: 45} }]
nodes.shadow.angle number
Defines the angle of the shadow relative to node
Default Value:
- 45
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
shadow: { angle: 135} }]
nodes.shadow.distance number
Sets the distance to move the shadow relative to node
Default Value:
- 5
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
shadow: { distance: 10 } }]
nodes.shadow.opacity number
Defines the opaque of the shadow
Default Value:
- 0.7
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
constraints: ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.Shadow,
shadow: {opacity: 0.9} }]
nodes.shape enum|string
Sets the shape of the node. It depends upon the type of node.
The following table illustrates the list of Basic shapes.
Name | Description |
---|---|
Rectangle | Used to specify node Shape as Rectangle |
Ellipse | Used to specify node Shape as Ellipse |
Path | Used to specify node Shape as Path |
Polygon | Used to specify node Shape as Polygon |
Triangle | Used to specify node Shape as Triangle |
Plus | Used to specify node Shape as Plus |
Star | Used to specify node Shape as Star |
Pentagon | Used to specify node Shape as Pentagon |
Heptagon | Used to specify node Shape as Heptagon |
Octagon | Used to specify node Shape as Octagon |
Trapezoid | Used to specify node Shape as Trapezoid |
Decagon | Used to specify node Shape as Decagon |
RightTriangle | Used to specify node Shape as RightTriangle |
Cylinder | Used to specify node Shape as Cylinder |
The following table illustrates the list of Flow shapes.
Name | Description |
---|---|
Process | Used to specify node Shape as Process |
Decision | Used to specify node Shape as Decision |
Document | Used to specify node Shape as Document |
PreDefinedProcess | Used to specify node Shape as PreDefinedProcess |
Terminator | Used to specify node Shape as Terminator |
PaperTap | Used to specify node Shape as PaperTap |
DirectData | Used to specify node Shape as DirectData |
SequentialData | Used to specify node Shape as SequentialData |
Sort | Used to specify node Shape as Sort |
MultiDocument | Used to specify node Shape as MultiDocument |
Collate | Used to specify node Shape as Collate |
SummingJunction | Used to specify node Shape as SummingJunction |
Or | Used to specify node Shape as Or |
InternalStorage | Used to specify node Shape as InternalStorage |
Extract | Used to specify node Shape as Extract |
ManualOperation | Used to specify node Shape as ManualOperation |
Merge | Used to specify node Shape as Merge |
OffPageReference | Used to specify node Shape as OffPageReference |
SequentialAccessStorage | Used to specify node Shape as SequentialAccessStorage |
Annotation1 | Used to specify node Shape as Annotation1 |
Annotation2 | Used to specify node Shape as Annotation2 |
Data | Used to specify node Shape as Data |
Card | Used to specify node Shape as Card |
The following table illustrates the list of BPMN shapes.
Name | Description |
---|---|
Event | Used to specify node Shape as Event |
Gateway | Used to specify node Shape as Gateway |
Message | Used to specify node Shape as Message |
DataObject | Used to specify node Shape as DataObject |
DataSource | Used to specify node Shape as DataSource |
Activity | Used to specify node Shape as Activity |
Group | Used to specify node Shape as Group |
The following table illustrates the list of UMLActivity shapes.
Name | Description |
---|---|
Action | Used to set UML ActivityShapes as Action |
Decision | Used to set UML ActivityShapes as Decision |
MergeNode | Used to set UML ActivityShapes as MergeNode |
InitialNode | Used to set UML ActivityShapes as InitialNode |
FinalNode | Used to set UML ActivityShapes as FinalNode |
ForkNode | Used to set UML ActivityShapes as ForkNode |
JoinNode | Used to set UML ActivityShapes as JoinNode |
TimeEvent | Used to set UML ActivityShapes as TimeEvent |
AcceptingEvent | Used to set UML ActivityShapes as AcceptingEvent |
SendSignal | Used to set UML ActivityShapes as SendSignal |
ReceiveSignal | Used to set UML ActivityShapes as ReceiveSignal |
StructuredNode | Used to set UML ActivityShapes as StructuredNode |
Note | Used to set UML ActivityShapes as Note |
Default Value:
- ej.datavisualization.Diagram.BasicShapes.Rectangle
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
// Sets the shape as ellipse
type:"basic", shape:ej.datavisualization.Diagram.BasicShapes.Ellipse}]
nodes.source string
Sets the source path of the image. Applicable, if the type of the node is image.
Default Value:
- ””
Example
this.nodes=[{
name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
type:"image", source: "Clayton.png"}]
nodes.subProcess object
Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process.
Default Value:
- ej.datavisualization.Diagram.BPMNSubProcess()
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess:{ loop: ej.datavisualization.Diagram.BPMNLoops.Standard }}]
nodes.subProcess.adhoc boolean
Defines whether the BPMN sub process is without any prescribed order or not
Default Value:
- false
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess:{ adhoc: true }}]
nodes.subProcess.boundary enum
Sets the boundary of the BPMN process
Name | Description |
---|---|
Default | Used to set BPMN SubProcess's Boundary as Default |
Call | Used to set BPMN SubProcess's Boundary as Call |
Event | Used to set BPMN SubProcess's Boundary as Event |
Default Value:
- ej.datavisualization.Diagram.BPMNBoundary.Default
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess:{ boundary: ej.datavisualization.Diagram.BPMNBoundary.Call }}]
nodes.subProcess.compensation boolean
Sets whether the BPMN subprocess is triggered as a compensation of a specific activity
Default Value:
- false
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess:{ compensation: true }}]
nodes.subProcess.collapsed boolean
Sets whether the BPMN subprocess is triggered as a collapsed of a specific activity
Default Value:
- true
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess:{ collapsed: false } }]
nodes.subProcess.event enum
Sets the type of the event by which the sub-process will be triggered
Default Value:
- ej.datavisualization.Diagram.BPMNEvents.Start
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess: { type: "event", event: "start" } }]
nodes.subProcess.events array
Defines the collection of events that need to be appended with BPMN Sub-Process
Default Value:
- ””
Example
this.nodes=[{
name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50,
type: "bpmn", shape: "activity", activity: "subprocess",
subProcess: {
type: "transaction",
events: [
{ event: "intermediate", offset: { x: 0.25, y: 1 } },
{ event: "intermediate", trigger: "error", offset: { x: 0.75, y: 1 } }]} }]
nodes.subProcess.loop enum
Defines the loop type of a sub process.
Name | Description |
---|---|
None | Used to set BPMN Activity's Loop as None |
Standard | Used to set BPMN Activity's Loop as Standard |
ParallelMultiInstance | Used to set BPMN Activity's Loop as ParallelMultiInstance |
SequenceMultiInstance | Used to set BPMN Activity's Loop as SequenceMultiInstance |
Default Value:
- ej.datavisualization.Diagram.BPMNLoops.None
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess:{ loop: ej.datavisualization.Diagram.BPMNLoops.ParallelMultiInstance} }]
nodes.subProcess.Processes array
Defines the children for BPMN’s SubProcess
Default Value:
- []
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess: { type: "event", trigger: "conditional", offset: { x: 0.75, y: 1 } } }]
nodes.subProcess.trigger enum
Defines the type of the event trigger
Default Value:
- ej.datavisualization.Diagram.BPMNTriggers.Message
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"subprocess",
subProcess: { type: "event", trigger: "conditional", offset: { x: 0.75, y: 1 } } }]
nodes.subProcess.type enum
Defines the type of a sub process
Name | Description |
---|---|
None | Used to set BPMN SubProcess type as None |
Transaction | Used to set BPMN SubProcess type as Transaction |
Event | Used to set BPMN SubProcess type as Event |
Default Value:
- ej.datavisualization.Diagram.BPMNSubProcessTypes.None
Example
this.nodes=[{
name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50,
type: "bpmn", shape: "activity", activity: "subprocess",
subProcess: { type: event } }]
nodes.task object
Defines the task of the BPMN activity. Applicable, if the type of activity is set as task.
Default Value:
- ej.datavisualization.Diagram.BPMNTask()
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"task",
task:{ compensation: true } }]
nodes.task.call boolean
To set whether the task is a global task or not
Default Value:
- false
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"task",
task:{ call: true } }]
nodes.task.compensation boolean
Sets whether the task is triggered as a compensation of another specific activity
Default Value:
- false
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"task",
task:{ compensation: true } }]
nodes.task.loop enum
Sets the loop type of a BPMN task.
Name | Description |
---|---|
X | Used to set port shape as X |
Circle | Used to set port shape as Circle |
Square | Used to set port shape as Square |
Path | Used to set port shape as Path |
Default Value:
- ej.datavisualization.Diagram.BPMNLoops.None
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"task",
task:{ loop: ej.datavisualization.Diagram.BPMNLoops.Standard } }]
nodes.task.type enum
Sets the type of the BPMN task.
Name | Description |
---|---|
None | Used to set BPMN Task Type as None |
Service | Used to set BPMN Task Type as Service |
Receive | Used to set BPMN Task Type as Receive |
Send | Used to set BPMN Task Type as Send |
InstantiatingReceive | Used to set BPMN Task Type as InstantiatingReceive |
Manual | Used to set BPMN Task Type as Manual |
BusinessRule | Used to set BPMN Task Type as BusinessRule |
User | Used to set BPMN Task Type as User |
Script | Used to set BPMN Task Type as Script |
Parallel | Used to set BPMN Task Type as Parallel |
Default Value:
- ej.datavisualization.Diagram.BPMNTasks.None
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape:"activity", activity:"task",
task:{ type: ej.datavisualization.Diagram.BPMNTasks.Service } }]
nodes.templateId string
Sets the id of svg/html templates. Applicable, if the node is HTML or native.
Default Value:
- ””
Example
<script id="svgTemplate" type="text/x-jsrender">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="70px" height="30px">
<g visibility="visible">
<image width="70px" height="35px" opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=""></image>
<text x="25" y="20" font-size="11" style="height:30px">
<tspan></tspan>
</text>
</g>
</svg>
</script>
this.nodes=[{
name: "Clayton", width: 100, height:50, offsetX:50, offsetY:50,
addInfo:{source:"Clayton.png"},
type:"native", templateId:"svgTemplate" }]
nodes.textBlock object
Defines the textBlock of a text node
Default Value:
- null
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"text", textBlock:{ text: "Text Node", fontColor:"red" } }]
nodes.tooltip object
Defines the tooltip that should be shown when the mouse hovers over node. For tooltip properties, refer Tooltip
Default Value:
- null
Example
<script type="text/x-jsrender" id="mouseOverTooltip">
<div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
<span style="padding: 5px;"> </span>
</div>
</script>
this.nodes = [{
name:"Rectangle", width:50, height: 50, offsetX: 100, offsetY: 100,
constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~ej.datavisualization.Diagram.NodeConstraints.InheritTooltip,
tooltip:tooltip,
}];
this.tooltip = {
templateId:"mouseOverTooltip",
};
}
};
nodes.trigger enum
Sets the type of BPMN Event Triggers.
Name | Description |
---|---|
None | Used to set Event Trigger as None |
Message | Used to set Event Trigger as Message |
Timer | Used to set Event Trigger as Timer |
Escalation | Used to set Event Trigger as Escalation |
Link | Used to set Event Trigger as Link |
Error | Used to set Event Trigger as Error |
Compensation | Used to set Event Trigger as Compensation |
Signal | Used to set Event Trigger as Signal |
Multiple | Used to set Event Trigger as Multiple |
Parallel | Used to set Event Trigger as Parallel |
Conditional | Used to set Event Trigger as Conditional |
Termination | Used to set Event Trigger as Termination |
Cancel | Used to set Event Trigger as Cancel |
Default Value:
- ej.datavisualization.Diagram.BPMNTriggers.None
Example
this.nodes=[{
type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Event, trigger: ej.datavisualization.Diagram.BPMNTriggers.None }
nodes.type enum
Defines the type of the node.
Name | Description |
---|---|
Text | Used to specify node type as Text |
Image | Used to specify node type as Image |
Html | Used to specify node type as HTML |
Native | Used to specify node type as Native |
Basic | Used to specify node type as Basic |
Flow | Used to specify node type as Flow |
BPMN | Used to specify node type as BPMN |
UMLClassifier | Used to specify node type as UMLClassifier |
UMLActivity | Used to specify node type as UMLActivity |
Default Value:
- ej.datavisualization.Diagram.Shapes.Basic
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type: ej.datavisualization.Diagram.Shapes.BPMN }]
nodes.verticalAlign enum
Sets the vertical alignment of a node. Applicable, if the parent of a node is a container.
Name | Description |
---|---|
Top | Set vertical alignment as top |
Middle | Set vertical alignment as middle |
Bottom | Set vertical alignment as bottom |
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Top
Example
this.nodes=[
{name: "node1", width: 50, height:50
},
{
name: "node2", width: 50, verticalAlign: "bottom"
}];
this.group = [{name :"group", children:[ "node1", "node2" ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200}]
nodes.visible boolean
Defines the visibility of the node
Default Value:
- true
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50, visible:false }]
nodes.width number
Defines the width of the node
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 100, height:50, offsetX:50, offsetY:50 }]
nodes.zOrder number
Defines the z-index of the node
Default Value:
- 0
Example
this.nodes=[{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50, zOrder: 10}]
nodeTemplate object
Binds the custom JSON data with node properties
Default Value:
- null
Example
let data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];
this.nodeTemplate = function (diagram, node) {
node.labels[0].text = node.Name;
};
pageSettings object
Defines the size and appearance of diagram page
pageSettings.autoScrollBorder object
Defines the maximum distance to be left between the object and the scroll bar to trigger auto scrolling
Default Value:
- { left: 15, top: 15, right: 15, bottom: 15 }
Example
this.pageSettings=[{
autoScrollBorder: { left: 50, top: 50, right: 50, bottom: 50 }
}];
pageSettings.multiplePage boolean
Sets whether multiple pages can be created to fit all nodes and connectors
Default Value:
- false
Example
this.pageSettings=[{
multiplePage:false
}];
pageSettings.pageBackgroundColor string
Defines the background color of diagram pages
Default Value:
- “#ffffff”
Example
this.pageSettings=[{
pageBackgroundColor:"lightgray"
}];
pageSettings.pageBorderColor string
Defines the page border color
Default Value:
- “#565656”
Example
this.pageSettings=[{
pageBorderColor:"black", pageBorderWidth: 2
}];
pageSettings.pageBorderWidth number
Sets the border width of diagram pages
Default Value:
- 0
Example
this.pageSettings=[{
pageBorderColor:"black", pageBorderWidth: 2
}];
pageSettings.pageHeight number
Defines the height of a page
Default Value:
- null
Example
this.pageSettings=[{
pageWidth: 500, pageHeight: 500
}];
pageSettings.pageMargin number
Defines the page margin
Default Value:
- 24
Example
this.pageSettings=[{
pageMargin : 20
}];
pageSettings.pageOrientation enum
Sets the orientation of the page.
Name | Description |
---|---|
Landscape | Used to set orientation as Landscape |
Portrait | Used to set orientation as portrait |
Default Value:
- ej.datavisualization.Diagram.PageOrientations.Portrait
Example
this.pageSettings=[{
pageWidth: 800, pageHeight: 500,
pageOrientation:ej.datavisualization.Diagram.PageOrientations.Landscape
}];
pageSettings.pageWidth number
Defines the height of a diagram page
Default Value:
- null
Example
this.pageSettings=[{
pageWidth: 500, pageHeight: 500
}];
pageSettings.scrollableArea object
Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited”.
Default Value:
- null
Example
this.pageSettings=[{
scrollLimit: "limited",
scrollableArea: {x:0, y:0, width:1000, height:1000}
}];
pageSettings.scrollLimit enum
Defines the scrollable region of diagram.
Name | Description |
---|---|
Infinite | Used to set scrollLimit as Infinite |
Diagram | Used to set scrollLimit as Diagram |
Limited | Used to set scrollLimit as Limited |
Default Value:
- ej.datavisualization.Diagram.ScrollLimit.Infinite
Example
this.pageSettings=[{
scrollLimit: ej.datavisualization.Diagram.ScrollLimit.Diagram
}];
pageSettings.boundaryConstraints enum
Defines the draggable region of diagram elements.
Name | Description |
---|---|
Infinite | Used to set boundaryConstraints as Infinite |
Diagram | Used to set boundaryConstraints as Diagram |
Page | Used to set boundaryConstraints as Page |
Default Value:
- ej.datavisualization.Diagram.BoundaryConstraints.Infinite
Example
this.pageSettings=[{
boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram
}];
pageSettings.showPageBreak boolean
Enables or disables the page breaks
Default Value:
- false
Example
this.pageSettings=[{
showPageBreak: true
}];
scrollSettings object
Defines the zoom value, zoom factor, scroll status and view port size of the diagram
scrollSettings.currentZoom number
Allows to read the zoom value of diagram
Default Value:
- 0
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
console.log(this.diagram.widget.model.scrollSettings.currentZoom);
scrollSettings.horizontalOffset number
Sets the horizontal scroll offset
Default Value:
- 0
Example
this.scrollSettings = {horizontalOffset: 50};
scrollSettings.padding object
Allows to extend the scrollable region that is based on the scroll limit
Default Value:
- {left: 0, right: 0, top:0, bottom: 0}
Example
this.scrollSettings = {padding: { left: 25, right: 25, top: 25, bottom: 25}};
scrollSettings.verticalOffset number
Sets the vertical scroll offset
Default Value:
- 0
Example
this.scrollSettings = {verticalOffset: 50};
scrollSettings.viewPortHeight number
Allows to read the view port height of the diagram
Default Value:
- 0
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
this.scrollSettings = {this.diagram.widget.model.scrollSettings.viewPortHeight};
scrollSettings.viewPortWidth number
Allows to read the view port width of the diagram
Default Value:
- 0
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
this.scrollSettings = {this.diagram.widget.model.scrollSettings.viewPortWidth};
selectedItems object
Defines the size and position of selected items and defines the appearance of selector
selectedItems.children array
A read only collection of the selected items
Default Value:
- []
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
//Read the selected items
for(let i =0; i< this.diagram.widget.model.selectedItems.children; i++){
//Do your actions here
}
selectedItems.constraints enum
Controls the visibility of selector.
Name | Description |
---|---|
None | Hides the selector |
Rotator | Sets the visibility of rotation handle as visible |
Resizer | Sets the visibility of resize handles as visible |
UserHandles | Sets the visibility of user handles as visible |
Tooltip | Enables the default tooltip of the diagram control. |
DragOnEmptySpace | Enables dragging while selecting the multiple nodes and click on the empty region of the selection rectangle. |
AutoHideThumbs | Show/Hide the selection handles when it is overlapped with each other's. |
All | Sets the visibility of all selection handles as visible |
Default Value:
- ej.datavisualization.Diagram.SelectorConstraints.All
Example
this.selectedItems={constraints: ej.datavisualization.Diagram.SelectorConstraints.UserHandles};
selectedItems.getConstraints object
Defines a method that dynamically enables/ disables the interaction with multiple selection.
Default Value:
- null
Example
this.selectedItems={getConstraints: function() {
//Allows to drag the multiple selected elements even when the selected elements are not movable
return ej.datavisualization.Diagram.NodeConstraints.Drag | ej.datavisualization.Diagram.NodeConstraints.Resize
}};
selectedItems.height number
Sets the height of the selected items
Default Value:
- 0
Example
this.selectedItems={height:100, width: 100};
selectedItems.offsetX number
Sets the x position of the selector
Default Value:
- 0
Example
this.selectedItems={offsetX:100, offsetY: 100};
selectedItems.offsetY number
Sets the y position of the selector
Default Value:
- 0
Example
this.selectedItems={offsetX:100, offsetY: 100};
selectedItems.rotateAngle number
Sets the angle to rotate the selected items
Default Value:
- 0
Example
this.selectedItems={rotateAngle: 90};
selectedItems.tooltip object
Sets the angle to rotate the selected items. For tooltip properties, refer Tooltip
Default Value:
- ej.datavisualization.Diagram.Tooltip()
Example
this.selectedItems={tooltip : { alignment:{ vertical:"top" } }};
selectedItems.userHandles array
A collection of frequently used commands that will be added around the selector
Default Value:
- []
Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.name = "cloneHandle";
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.name string
Defines the name of the user handle
####Default Value:
- ””
####Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.backgroundColor = "#4D4D4D";
cloneHandle.name = "cloneHandle";
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.backgroundColor string
Defines the background color of the user handle
####Default Value:
- “#2382c3”
####Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.backgroundColor = "#4D4D4D";
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.borderColor string
Sets the border color of the user handle
Default Value:
- “transparent”
Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.borderColor = "#4D4D4D";
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.enableMultiSelection boolean
Defines whether the user handle should be added, when more than one element is selected
Default Value:
- false
Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.enableMultiSelection = true;
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.pathColor string
Sets the stroke color of the user handle
####Default Value:
- transparent
####Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.pathData = "M4.6350084,4.8909971 L4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M3.0000062,2.8189973 L11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M0,0 L7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z";
cloneHandle.pathColor = "white";
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.pathData string
Defines the custom shape of the user handle
####Default Value:
- ””
####Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.pathData = "M4.6350084,4.8909971 L4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M3.0000062,2.8189973 L11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M0,0 L7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z";
cloneHandle.pathColor = "white";
cloneHandle.tool = new CloneTool(cloneHandle.name);
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.position enum
Defines the position of the user handle
Name | Description |
---|---|
TopLeft | Set the position of the userHandle as topLeft |
TopCenter | Set the position of the userHandle as topCenter |
TopRight | Set the position of the userHandle as topRight |
MiddleLeft | Set the position of the userHandle as middleLeft |
MiddleRight | Set the position of the userHandle as middleRight |
BottomLeft | Set the position of the userHandle as bottomLeft |
BottomCenter | Set the position of the userHandle as bottomCenter |
BottomRight | Set the position of the userHandle as bottomRight |
Default Value:
- ej.datavisualization.Diagram.UserHandlePositions.BottomCenter
Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.position =ej.datavisualization.Diagram.UserHandlePositions.MiddleLeft;
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.size number
Defines the size of the user handle
Default Value:
- 8
Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.size = 20;
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.tool object
Defines the interactive behaviors of the user handle
Default Value:
- ””
Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.size = 20;
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.userHandles.visible boolean
Defines the visibility of the user handle
Default Value:
- true
Example
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.visible = "true";
let userHandle;
userHandle = userHandle.push(cloneHandle);
this.selectedItems={userHandles:userHandle};
selectedItems.width number
Sets the width of the selected items
Default Value:
- 0
Example
this.selectedItems={ height:100, width: 100};
showTooltip boolean
Enables or disables tooltip of diagram
Default Value:
- true
Example
showTooltip:boolean;
this.showTooltip = true;
rulerSettings object
Defines the properties of the both the horizontal and vertical gauge to measure the diagram area.
rulerSettings.showRulers boolean
Enables or disables both the horizontal and vertical ruler.
Default Value:
- false
Example
rulerSettings:object;
this.rulerSettings = {showRulers: true};
rulerSettings.horizontalRuler object
Defines the appearance of horizontal ruler
rulerSettings.horizontalRuler.interval number
Defines the number of intervals to be present on the each segment of the horizontal ruler.
Default Value:
- 5
Example
this.rulerSettings = {horizontalRuler:{interval: 10 }};
rulerSettings.horizontalRuler.segmentWidth number
Defines the textual description of the ruler segment, and the appearance of the ruler ticks of the horizontal ruler.
Default Value:
- 100
Example
this.rulerSettings = {horizontalRuler:{segmentWidth: 50 }};
rulerSettings.horizontalRuler.arrangeTick object
Defines the method which used to position and arrange the tick elements of the horizontal ruler.
Default Value:
- null
Example
this.rulerSettings = {horizontalRuler:{arrangeTick: function alignTick(args){ } }};
rulerSettings.horizontalRuler.tickAlignmentenum
Defines and sets the tick alignment of the ruler scale.
Name | Description |
---|---|
LeftOrTop | Align the ruler scale either left or top position of the ruler. |
RightOrBottom | Align the ruler scale either right or bottom position of the ruler. |
Default Value:
- ej.datavisualization.Diagram.TickAlignment.RightOrBottom
Example
this.rulerSettings = {horizontalRuler:{tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop }};
rulerSettings.horizontalRuler.markerColor string
Defines the color of the horizontal marker brush.
Default Value:
- “red”
Example
this.rulerSettings = {horizontalRuler:{markerColor: "pink" }};
rulerSettings.horizontalRuler.length number
Defines the width of the horizontal ruler.
Default Value:
- null
Example
this.rulerSettings = {horizontalRuler:length: 1000 };
rulerSettings.horizontalRuler.thickness number
Defines the height of the horizontal ruler.
Default Value:
- 25
Example
this.rulerSettings = {horizontalRuler:thickness: 50 };
rulerSettings.verticalRuler object
Defines the appearance of vertical ruler
rulerSettings.verticalRuler.interval number
Defines the number of intervals to be present on the each segment of the vertical ruler.
Default Value:
- 5
Example
this.rulerSettings = {verticalRuler:{interval: 10 } };
rulerSettings.verticalRuler.segmentWidth number
Defines the textual description of the ruler segment, and the appearance of the ruler ticks of the vertical ruler.
Default Value:
- 100
Example
this.rulerSettings = {verticalRuler:{segmentWidth: 50 } };
rulerSettings.verticalRuler.arrangeTick object
Defines the method which used to position and arrange the tick elements of the vertical ruler.
Default Value:
- null
Example
this.rulerSettings = {verticalRuler:{arrangeTick: function alignTick(args){ } } };
rulerSettings. verticalRuler.tickAlignmentenum
Defines and sets the tick alignment of the ruler scale.
Name | Description |
---|---|
LeftOrTop | Align the ruler scale either left or top position of the ruler. |
RightOrBottom | Align the ruler scale either right or bottom position of the ruler. |
Default Value:
- ej.datavisualization.Diagram.TickAlignment.RightOrBottom
Example
this.rulerSettings = {verticalRuler:{tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop } };
rulerSettings.verticalRuler.markerColor string
Defines the color of the vertical marker brush.
Default Value:
- “red”
Example
this.rulerSettings = {verticalRuler:{markerColor: "pink" } };
rulerSettings.verticalRuler.length number
Defines the height of the vertical ruler.
Default Value:
- null
Example
this.rulerSettings = {verticalRuler:{length: 1000 } };
rulerSettings.verticalRuler.thickness number
Defines the width of the vertical ruler.
Default Value:
- 25
Example
this.rulerSettings = {verticalRuler:{thickness: 50 } };
snapSettings object
Defines the gridlines and defines how and when the objects have to be snapped
snapSettings.enableSnapToObject boolean
Enables or disables snapping nodes/connectors to objects
Default Value:
- true
Example
this.snapSettings = {enableSnapToObject: false}
snapSettings.horizontalGridLines object
Defines the appearance of horizontal gridlines
snapSettings.horizontalGridLines.lineColor string
Defines the line color of horizontal grid lines
Default Value:
- “lightgray”
Example
this.gridLine = {lineColor:"blue"};
this.snapSettings = {horizontalGridLines: gridline};
snapSettings.horizontalGridLines.lineDashArray string
Specifies the pattern of dashes and gaps used to stroke horizontal grid lines
Default Value:
- ””
Example
this.gridLine = {lineColor :"blue", lineDashArray:"2,2"};
this.snapSettings = {horizontalGridLines: gridline};
snapSettings.horizontalGridLines.linesInterval array
A pattern of lines and gaps that defines a set of horizontal gridlines
Default Value:
- [1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75]
Example
this.gridLine = {linesInterval: [1, 14, 0.5, 14.5 ] };
this.snapSettings = {horizontalGridLines: gridline};
snapSettings.horizontalGridLines.snapInterval array
Specifies a set of intervals to snap the objects
Default Value:
- [20]
Example
this.gridLine = {snapInterval : [5 };
this.snapSettings = {horizontalGridLines: gridline};
snapSettings.snapAngle number
Defines the angle by which the object needs to be snapped
Default Value:
- 5
Example
this.snapSettings = {snapAngle: 10};
snapSettings.snapConstraints enum
Defines and sets the snapConstraints
Name | Description |
---|---|
None | Enables node to be snapped to horizontal gridlines |
SnapToHorizontalLines | Enables node to be snapped to vertical gridlines |
SnapToVerticalLines | Enables node to be snapped to horizontal gridlines |
SnapToLines | Enables node to be snapped to gridlines |
ShowHorizontalLines | Enable horizontal lines |
ShowVerticalLines | Enable vertical lines |
ShowLines | Enable both horizontal and vertical lines |
All | Enable all the constraints |
Default Value:
- ej.datavisualization.Diagram.SnapConstraints.ShowLines
Example
this.snapSettings = {snapConstraints:ej.datavisualization.Diagram.SnapConstraints.ShowLines};
snapSettings.snapObjectDistance number
Defines the minimum distance between the selected object and the nearest object
Default Value:
- 5
Example
snap = {"snapObjectDistance":5};
this.snapSettings = {snapSettings: snap};
snapSettings.verticalGridLines object
Defines the appearance of horizontal gridlines
snapSettings.verticalGridLines.lineColor string
Defines the line color of horizontal grid lines
Default Value:
- “lightgray”
Example
snap = {"snapObjectDistance":5};
this.snapSettings = {verticalGridLines: gridline};
snapSettings.verticalGridLines.lineDashArray string
Specifies the pattern of dashes and gaps used to stroke horizontal grid lines
Default Value:
- ””
Example
gridLine = {lineColor :"blue", lineDashArray:"2,2"};
this.snapSettings = {verticalGridLines: gridline};
snapSettings.verticalGridLines.linesInterval array
A pattern of lines and gaps that defines a set of horizontal gridlines
Default Value:
- [1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75]
Example
gridLine = {linesInterval: [1, 14, 0.5, 14.5 ]};
this.snapSettings = {verticalGridLines: gridline};
snapSettings.verticalGridLines.snapInterval array
Specifies a set of intervals to snap the objects
Default Value:
- [20]
Example
gridLine = {snapInterval : [5]};
this.snapSettings = {snapSettings: { verticalGridLines: gridline}};
tool enum
Enables/Disables the interactive behaviors of diagram.
Name | Description |
---|---|
None | Disables all Tools |
SingleSelect | Enables/Disables SingleSelect tool |
MultipleSelect | Enables/Disables MultiSelect tool |
ZoomPan | Enables/Disables ZoomPan tool |
DrawOnce | Enables/Disables DrawOnce tool |
ContinuesDraw | Enables/Disables ContinuousDraw tool |
Default Value:
- ej.datavisualization.Diagram.Tool.All
Example
this.tool = {tool:ej.datavisualization.Diagram.Tool.ZoomPan};
tooltip object
An object that defines the description, appearance and alignments of tooltips
Default Value:
- null
Example
<script type="text/x-jsrender" id="mouseOverTooltip">
<div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
<span style="padding: 5px;"> </span>
</div>
</script>
this.Nodes = [{
name: "Elizabeth",width: 70,height: 40, offsetX: 100,offsetY: 100,
Designation: "Managing Director"
constraints: ej.datavisualization.Diagram.ConnectorConstraints.Default & ~ ej.datavisualization.Diagram.ConnectorConstraints.InheritTooltip,
}];
this.tooltip = {
templateId:"mouseOverTooltip",
};
}
};
tooltip.alignment object
Aligns the tooltip around nodes/connectors
tooltip.alignment.horizontal enum
Defines the horizontal alignment of tooltip.
Name | Description |
---|---|
Left | Used to align text horizontally on left side of node/connector |
Center | Used to align text horizontally on center of node/connector |
Right | Used to align text horizontally on right side of node/connector |
Default Value:
- ej.datavisualization.Diagram.HorizontalAlignment.Center
Example
this.tooltip={
alignment: {
horizontal: ej.datavisualization.Diagram.HorizontalAlignment.Center
}
};
tooltip.alignment.vertical enum
Defines the vertical alignment of tooltip.
Name | Description |
---|---|
Top | Used to align text Vertically on left side of node/connector |
Center | Used to align text Vertically on center of node/connector |
Bottom | Used to align text Vertically on bottom of node/connector |
Default Value:
- ej.datavisualization.Diagram.VerticalAlignment.Bottom
Example
this.tooltip={
alignment: {
horizontal: ej.datavisualization.Diagram.VerticalAlignment.Bottom
}
};
tooltip.margin object
Sets the margin of the tooltip
Default Value:
- { left: 5, right: 5, top: 5, bottom: 5 }
Example
this.tooltip={
margin : { top:10 }
};
tooltip.relativeMode enum
Defines whether the tooltip should be shown at the mouse position or around node.
Name | Description |
---|---|
object | Shows tooltip around the node |
Mouse | Shows tooltip at the mouse position |
Default Value:
- ej.datavisualization.Diagram.RelativeMode.Object
Example
this.tooltip={
tooltip: {
//Shows tooltip at the mouse position
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse
}
};
tooltip.templateId string
Sets the svg/html template to be bound with tooltip
Default Value:
- ””
Example
<script type="text/x-jsrender" id="mouseOverTooltip">
<div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
<span style="padding: 5px;"> </span>
</div>
</script>
this.tooltip={
tooltip: {
templateId: "mouseOverTooltip"
}
};
width string
Specifies the width of the diagram
Default Value:
- null
Example
<ej-diagram id="diagram" width="100%" height="450" >
</ej-diagram>
zoomFactor number
Sets the factor by which we can zoom in or zoom out
Default Value:
- 0.2
<ej-diagram id="diagram" width="100%" height="450" zoomFactor="1" >
</ej-diagram>
Methods
add(node)
Add nodes and connectors to diagram at runtime
Name | Type | Description |
---|---|---|
node | object | a JSON to define a node/connector or an array of nodes and connector |
Returns:
- boolean
Example
//add a single node to diagram
addNodesColl()
{this.nodes=[
{name: "rectangle1", width: 100, height: 100, offsetX: 100, offsetY: 100, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Rectangle
}];
}
ngAfterViewInit(){
this.Diagram.widget.add(this.addNodesColl())
}
// add multiple nodes to diagram
addNodesColl()
this.nodes=[{
name: "rectangle2", width: 100, height: 100, offsetX: 200, offsetY: 100, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Rectangle},
{ name: "ellipse1", width: 100, height: 100, offsetX: 300, offsetY: 100, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Ellipse },
];
}
ngAfterViewInit(){
this.Diagram.widget.add(this.addNodesColl())
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
addLabel(nodeName, newLabel)
Add a label to a node at runtime
Name | Type | Description |
---|---|---|
nodeName | string | name of the node to which label will be added |
newLabel | object | JSON for the new label to be added |
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
ngAfterViewInit(){
let node=diagram.model.selectedItems[0]
this.Diagram.widget.addLabel(node.name, {fontColor:"red", text:"newLabel"});
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
addLane(lane,index)
Add dynamic Lanes to swimlane at runtime
Name | Type | Description |
---|---|---|
lane | object | JSON for the new lane to be added |
index | number | Index value to add the lane in swimlane |
Example
addLaneColl()
{
this.nodes=[{
name: "lane" , fillColor: "#f5f5f5", offsetX: 500, offsetY: 200,
width: 400, orientation: 'horizontal', height: 100, isLane: true,
header: { text: "function", fillColor: "#C7D4DF", width: 50, height: 50, fontSize: 11 }
}]
}
//add a lane node to swimlane
ngAfterViewInit(){
this.Diagram.widget.addLane(this.addLaneColl());
}
// add lane with index to swimlane
addLaneColl()
{
this.nodes=[{
name: "lane" , fillColor: "#f5f5f5", offsetX: 500, offsetY: 200,
width: 400, orientation: 'horizontal', height: 100, isLane: true,
header: { text: "function", fillColor: "#C7D4DF", width: 50, height: 50, fontSize: 11 }
}]
}
//add a lane node to swimlane
ngAfterViewInit(){
this.Diagram.widget.addLane(this.addLaneColl(),1);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
addPhase(name, options)
Add a phase to a swimlane at runtime
Name | Type | Description |
---|---|---|
name | string | name of the swimlane to which the phase will be added |
options | object | JSON object to define the phase to be added |
Example
ngAfterViewInit(){
this.Diagram.widget.addPhase("swimlane", { name: "CustomPhase", offset: 600, label: { text: "CustomPhase" } });
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
addPorts(name, ports)
Add a collection of ports to the node specified by name
Name | Type | Description |
---|---|---|
name | string | name of the node to which the ports have to be added |
ports | array | a collection of ports to be added to the specified node |
Example
// Defines a collection of ports that have to be added at runtime
let port = [{
offset: { x: 0, y: 0.5 }, name: "port1", fillColor: "yellow"}, { offset: { x: 0.5, y: 0.5 }, name: "port2", fillColor: "yellow"
},
];
ngAfterViewInit(){
this.diagram.widget.addPort("Rect1",port)
}
@ViewChild('diagram') diagram: EJComponents<any, any>;
// Adds the ports to the node of name "node"
this.Diagram.widget.addPorts("node", ports)
ngAfterViewInit(){
this.Diagram.widget.addPorts("Rect1",this.addPortsColl(),)
}
addSelection(node, [clearSelection])
Add the specified node to selection list
Name | Type | Description |
---|---|---|
node | object | the node to be selected |
[clearSelection] | boolean | to define whether to clear the existing selection or not |
Example
this.Diagram.widget.addSelection(this.Diagram.widget.Nodes[0])
@ViewChild('diagram') Diagram: EJComponents<any,any>;
align(direction)
Align the selected objects based on the reference object and direction
Name | Type | Description |
---|---|---|
direction | string | to specify the direction towards which the selected objects are to be aligned("left","right",top","bottom") |
Example
ngAfterViewInit(){
this.Diagram.widget.align("left");
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
bringIntoView(rect)
Bring the specified portion of the diagram content to the diagram viewport
Name | Type | Description |
---|---|---|
rect | object | the rectangular region that is to be brought into diagram viewport |
Example
ngAfterViewInit(){
this.Diagram.widget.align("left");
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
bringToCenter(rect)
Bring the specified portion of the diagram content to the center of the diagram viewport
Name | Type | Description |
---|---|---|
rect | object | the rectangular region that is to be brought to the center of diagram viewport |
Example
addNodesColl()
{
this.nodes=[{
name: "rectangle1", width: 700, height: 500, offsetX: 80, offsetY: 80, type: "node", shape: ej.datavisualization.Diagram.BasicShapes.Rectangle}]
}
ngAfterViewInit(){
this.Diagram.widget.bringIntoView(this.addNodesColl());
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
bringToFront()
Visually move the selected object over all other intersected objects
Example
ngAfterViewInit(){
this.Diagram.widget.bringToFront();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
clear()
Remove all the elements from diagram
Example
ngAfterViewInit(){
this.Diagram.widget.clear();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
clearHistory()
Clears the actions which is recorded to perform undo/redo operation in the diagram.
Example
ngAfterViewInit(){
this.Diagram.widget.clearHistory();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
clearSelection()
Remove the current selection in diagram
Example
ngAfterViewInit(){
this.Diagram.widget.clearSelection();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
copy()
Copy the selected object to internal clipboard and get the copied object
Returns:
- object
Example
ngAfterViewInit(){
//Save the copied object
this.copiedObject = this.Diagram.widget.copy();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
cut()
Cut the selected object from diagram to diagram internal clipboard
Example
ngAfterViewInit(){
this.Diagram.widget.cut();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
exportDiagram([options])
Export the diagram as downloadable files or as data
Name | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
[options] | Object | options to export the desired region of diagram to the desired formats.
|
Returns:
- string
Example
ngAfterViewInit(){
//Exports the whole diagram content as an image of JPEG format
this.Diagram.widget.exportDiagram();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
options:object;
this.options={
//name of the file to be downloaded
fileName: "diagram",
//Specifies whether to export as files/data
mode: ej.datavisualization.Diagram.ExportModes.Download,
//Format of the exported file
format: ej.datavisualization.Diagram.FileFormats.JPG,
// Define the custom bounds that has to be exported
bounds: {
x: 1000,
y: 1000,
width: 500,
height: 500
},
}
ngAfterViewInit(){
this.Diagram.widget.exportDiagram(this.options)
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
FileFormats
Used to export the diagram into user defined file format.
Name | Description |
---|---|
JPG | Used to export the diagram into JPG format. |
PNG | Used to export the diagram into PNG format. |
BMP | Used to export the diagram into BMP format. |
SVG | Used to export the diagram into SVG format. |
ExportModes
Used to export the diagram as a file or as raw data.
Name | Description |
---|---|
Download | Used to export the diagram as a file. |
Data | Used to export the diagram as raw data. |
Region
Used to set the region of the diagram to be exported.
Name | Description |
---|---|
Content | Used to export the content of the diagram only. |
PageSettings | Used to export the page region of the diagram. |
Stretch
Used to resize the diagram content to fill its allocated space.
Name | Description |
---|---|
None | The diagram content preserves its original size. |
Fill | The diagram content is resized to fill the destination dimensions. The aspect ratio is not preserved. |
Uniform | The diagram content is resized to fit in the destination dimensions while it preserves its native aspect ratio. |
UniformToFill | The diagram content is resized to fill the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions. |
findNode(name)
Read a node/connector object by its name
Name | Type | Description |
---|---|---|
name | string | name of the node/connector that is to be identified |
Returns:
- object
Example
ngAfterViewInit(){
this.Diagram.findNode("nodeName");
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
fitToPage([mode], [region], [margin])
Fit the diagram content into diagram viewport
Name | Type | Description |
---|---|---|
[mode] |
|
to set the mode of fit to command. |
[region] |
|
to set whether the region to be fit will be based on diagram elements or page settings. |
[margin] | object | to set the required margin |
Example
ngAfterViewInit(){
this.Diagram.fitToPage(mode,region,margin);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
FitMode
Used to fit the diagram content within the view port.
Name | Description |
---|---|
Page | Used to fit the diagram content based on page size. |
Width | Used to fit the diagram content based on diagram width. |
Height | Used to fit the diagram content based on diagram height. |
group()
Group the selected nodes and connectors
Example
ngAfterViewInit(){
this.Diagram.group();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
insertLabel(name, label, [index])
Insert a label into a node’s label collection at runtime
Name | Type | Description |
---|---|---|
name | string | name of the node to which the label has to be inserted |
label | object | JSON to define the new label |
[index] | number | index to insert the label into the node |
Example
ngAfterViewInit() {
this.diagram.widget.insertLabel(node.name,{fontColor:"red", text:"newLabel"},0)
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
layout()
Refresh the diagram with the specified layout
Example
ngAfterViewInit() {
this.diagram.widget.layout();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
load(data)
Load the diagram
Name | Type | Description |
---|---|---|
data | object | JSON data to load the diagram |
Example
ngAfterViewInit() {
this.diagram.widget.load(data);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
moveForward()
Visually move the selected object over its closest intersected object
Example
ngAfterViewInit() {
this.diagram.widget.moveForward();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
nudge(direction, [delta])
Move the selected objects by either one pixel or by the pixels specified through argument
Name | Type | Description |
---|---|---|
direction | string | specifies the direction to move the selected objects ("left","right",top","bottom") |
[delta] | number | specifies the number of pixels by which the selected objects have to be moved |
Example
ngAfterViewInit() {
this.diagram.widget.nudge("direction",5);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
paste([object], [rename])
Paste the selected object from internal clipboard to diagram
Name | Type | Description |
---|---|---|
[object] | object | object to be added to diagram |
[rename] | boolean | to define whether the specified object is to be renamed or not |
Example
ngAfterViewInit() {
//Paste the object from internal clipboard to diagram
this.Diagram.widget.paste();
//Add the specific object to diagram
this.Diagram.widget.paste(obj, true);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
print()
Print the diagram as image
Example
ngAfterViewInit() {
this.Diagram.widget.print();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
redo()
Restore the last action that was reverted
Example
ngAfterViewInit() {
this.Diagram.widget.redo();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
refresh()
Refresh the diagram at runtime
Example
ngAfterViewInit() {
this.Diagram.widget.refresh();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
remove([node])
Remove either the given node/connector or the selected element from diagram
Name | Type | Description |
---|---|---|
[node] | object | the node/connector to be removed from diagram |
Example
ngAfterViewInit() {
this.Diagram.widget.remove();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
removePorts(name, ports)
Add a collection of ports to the node specified by name
Name | Type | Description |
---|---|---|
name | string | name of the node to which the ports have to be added |
ports | array | a collection of ports to be deleted from the specified node |
Example
ngAfterViewInit() {
this.Diagram.widget.removePorts(this.diagram.widget.findNode("Rect1"));
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
removeLabels(name, labels)
Add a collection of ports to the node specified by name
Name | Type | Description |
---|---|---|
name | string | name of the node to which the ports have to be added |
labels | array | a collection of labels to be deleted from the specified node |
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
ngAfterViewInit() {
let node = this.diagram.widget.findNode("rect1");
this.diagram.widget.removeLabels("rect1",node.labels);
}
removeSelection(node)
Remove a particular object from selection list
Name | Type | Description |
---|---|---|
node | object | the node/connector to be removed from selection list |
Example
@ViewChild('diagram') diagram: EJComponents<any, any>;
ngAfterViewInit() {
let node = this.diagram.widget.selectionList[0];
this.diagram.widget.removeSelection(node);
}
sameHeight()
Scale the selected objects to the height of the first selected object
Example
ngAfterViewInit() {
this.Diagram.widget.sameHeight();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
sameSize()
Scale the selected objects to the size of the first selected object
Example
ngAfterViewInit() {
this.Diagram.widget.sameSize();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
sameWidth()
Scale the selected objects to the width of the first selected object
Example
ngAfterViewInit() {
this.Diagram.widget.sameWidth();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
save()
Returns the diagram as serialized JSON
Returns:
- object
Example
ngAfterViewInit() {
this.Diagram.widget.save();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
scrollToNode(node)
Bring the node into view
Name | Type | Description |
---|---|---|
node | object | the node/connector to be brought into view |
Example
ngAfterViewInit() {
let node = this.diagram.widget.selectionList[0];
this.diagram.widget.scrollToNode(node);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
selectAll()
Select all nodes and connector in diagram
Example
ngAfterViewInit() {
this.Diagram.widget.selectAll();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
sendBackward()
Visually move the selected object behind its closest intersected object
Example
ngAfterViewInit() {
this.Diagram.widget.sendBackward();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
sendToBack()
Visually move the selected object behind all other intersected objects
Example
ngAfterViewInit() {
this.Diagram.widget.sendToBack();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
spaceAcross()
Update the horizontal space between the selected objects as equal and within the selection boundary
Example
ngAfterViewInit() {
this.Diagram.widget.spaceAcross();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
spaceDown()
Update the vertical space between the selected objects as equal and within the selection boundary
Example
ngAfterViewInit() {
this.Diagram.widget.spaceDown();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
startLabelEdit(node, label)
Move the specified label to edit mode
Name | Type | Description |
---|---|---|
node | object | node/connector that contains the label to be edited |
label | object | to be edited |
Example
ngAfterViewInit() {
this.Diagram.widget.startLabelEdit(node,node.labels[0]);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
undo()
Reverse the last action that was performed
Example
ngAfterViewInit() {
this.Diagram.widget.undo();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
ungroup()
Ungroup the selected group
Example
ngAfterViewInit() {
this.Diagram.widget.ungroup();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
update(options)
Update diagram at runtime
Name | Type | Description |
---|---|---|
options | object | JSON to specify the diagram properties that have to be modified |
Example
ngAfterViewInit() {
this.diagram.widget.update({
tool: ej.datavisualization.Diagram.Tool.ZoomPan,
});
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updateConnector(name, options)
Update Connectors at runtime
Name | Type | Description |
---|---|---|
name | string | name of the connector to be updated |
options | object | JSON to specify the connector properties that have to be updated |
Example
ngAfterViewInit() {
this.diagram.widget.updateConnector("connector1", { lineColor: "red", lineWidth: 3 });
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updateLabel(nodeName, label, options)
Update the given label at runtime
Name | Type | Description |
---|---|---|
nodeName | string | the name of node/connector which contains the label to be updated |
label | object | the label to be modified |
options | object | JSON to specify the label properties that have to be updated |
Returns:
- object
Example
ngAfterViewInit() {
this.diagram.widget.updateConnector("connector1", { lineColor: "red", lineWidth: 3 });
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updateNode(name, options)
Update nodes at runtime
Name | Type | Description |
---|---|---|
name | string | name of the node that is to be updated |
options | object | JSON to specify the properties of node that have to be updated |
Example
ngAfterViewInit() {
this.diagram.widget.updateNode("node1",{fillColor:"red",borderWidth:"3"});
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updatePort(nodeName, port, options)
Update a port with its modified properties at runtime
Name | Type | Description |
---|---|---|
nodeName | string | the name of node which contains the port to be updated |
port | object | the port to be updated |
options | object | JSON to specify the properties of the port that have to be updated |
Example
ngAfterViewInit() {
let node = this.Diagram.widget.selectionList[0];
let port ={fillColor:"red", visibility:ej.datavisualization.Diagram.PortVisibility.Visible};
this.diagram.widget.updatePort("node",node.ports[0],port);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updateSelectedObject(name)
Update the specified node as selected object
Name | Type | Description |
---|---|---|
name | string | name of the node to be updated as selected object |
Example
ngAfterViewInit() {
this.diagram.widget.updateSelectedObject(name);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updateSelection([showUserHandles])
Update the selection at runtime
Name | Type | Description |
---|---|---|
[showUserHandles] | boolean | to specify whether to show the user handles or not |
Example
ngAfterViewInit() {
this.diagram.widget.updateSelection();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updateUserHandles(node)
Update user handles with respect to the given node
Name | Type | Description |
---|---|---|
node | object | node/connector with respect to which, the user handles have to be updated |
Example
ngAfterViewInit() {
let node = this.diagram.widget.selectionList[0];
this.diagram.widget.updateUserHandles(node);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
updateViewPort()
Update the diagram viewport at runtime
Example
ngAfterViewInit() {
this.diagram.widget.updateViewPort();
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
upgrade(data)
Upgrade the diagram from old version
Name | Type | Description |
---|---|---|
data | object | to be upgraded |
Example
ngAfterViewInit() {
this.diagram.widget.upgrade(jsonData);
diagram.load(jsonData);
}
@ViewChild('diagram') Diagram: EJComponents<any,any>;
zoomTo([Zoom])
Used to zoomIn/zoomOut diagram
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
[Zoom] | object | options to zoom the diagram(zoom factor, zoomIn/zoomOut)
|
ZoomCommand
Used to zoom-in or zoom-out the diagram
Name | Description |
---|---|
ZoomIn | Used to zoom in the Diagram |
ZoomOut | Used to zoom out the diagram |
Events
autoScrollChange
Triggers When auto scroll is changed
Name | Type | Description |
---|---|---|
delay | string | Returns the delay between subsequent auto scrolls |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (nodeCollectionChanged) ="nodeCollectionChanged($event)"> </ej-diagram>
nodeCollectionChanged(args:any){
//doSomething.
}
click
Triggers when a node, connector or diagram is clicked
Name | Type | Description |
---|---|---|
element | object | parameter returns the clicked node, connector or diagram |
actualObject | number | parameter returns the object that is actually clicked |
offsetX | number | parameter returns the horizontal coordinate of the mouse pointer, relative to the diagram |
offsetY | number | parameter returns the vertical coordinate of the mouse pointer, relative to the diagram |
count | number | parameter returns the count of how many times the mouse button is pressed |
event | object | parameter returns the event triggered |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter to specify whether or not to cancel the event |
Example
<ej-diagram #diagram [dataSource]="diagramData" (click) ="click($event)"> </ej-diagram>
click(args:any){
//doSomething.
}
connectionChange
Triggers when the connection is changed
Name | Type | Description |
---|---|---|
element | object | parameter returns the connection that is changed between nodes, ports or points |
connection | string | parameter returns the new source node or target node of the connector |
port | object | parameter returns the new source port or target port of the connector |
cancel | boolean | parameter defines whether to cancel the change or not |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (connectionChange) ="conncectionChange($event)"> </ej-diagram>
connectionChange(args:any){
//doSomething.
}
connectorCollectionChange
Triggers when the connector collection is changed
Name | Type | Description |
---|---|---|
changeType | string | parameter returns whether the connector is inserted or removed |
element | object | parameter returns the connector that is to be added or deleted |
cancel | boolean | parameter defines whether to cancel the collection change or not |
state | string | triggers before and after adding the connector in the diagram which can be differentiated through `state` argument. We can cancel the event only before adding the connector. |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (connectorCollectionChange) ="connectorCollectionChange($event)"> </ej-diagram>
connectorCollectionChange(args:any){
//doSomething.
}
connectorSourceChange
Triggers when the connectors’ source point is changed
Name | Type | Description |
---|---|---|
element | object | returns the connector, the source point of which is being dragged |
node | object | returns the source node of the element |
point | object | returns the source point of the element |
port | object | returns the source port of the element |
dragState | string | returns the state of connection end point dragging(starting, dragging, completed) |
cancel | boolean | parameter defines whether to cancel the change or not |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (connectorSourceChange) ="connectorSourceChange($event)"> </ej-diagram>
connectorSourceChange(args:any){
//doSomething.
}
connectorTargetChange
Triggers when the connectors’ target point is changed
Name | Type | Description |
---|---|---|
element | object | parameter returns the connector, the target point of which is being dragged |
node | object | returns the target node of the element |
point | object | returns the target point of the element |
port | object | returns the target port of the element |
dragState | string | returns the state of connection end point dragging(starting, dragging, completed) |
cancel | boolean | parameter defines whether to cancel the change or not |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (connectorTargetChange) ="connectorTargetChange($event)"> </ej-diagram>
connectorTargetChange(args:any){
//doSomething.
}
contextMenuBeforeOpen
Triggers before opening the context menu
Name | Type | Description |
---|---|---|
diagram | object | parameter returns the diagram object |
contextmenu | object | parameter returns the actual arguments from context menu |
target | object | parameter returns the object that was clicked |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter returns whether or not to cancel the dragOver event |
model | object | parameter returns the actual click event arguments that explains which button is clicked |
type | string | parameter returns the type of the event triggered |
Example
<ej-diagram #diagram [dataSource]="diagramData" (contextMenuBeforeOpen) ="contextMenuBeforeOpen($event)"> </ej-diagram>
contextMenuBeforeOpen(args:any){
//doSomething.
}
contextMenuClick
Triggers when a context menu item is clicked
Name | Type | Description |
---|---|---|
id | string | parameter returns the id of the selected context menu item |
text | string | parameter returns the text of the selected context menu item |
parentId | string | parameter returns the parent id of the selected context menu item |
parentText | string | parameter returns the parent text of the selected context menu item |
target | object | parameter returns the object that was clicked |
canExecute | boolean | parameter defines whether to execute the click event or not |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter to specify whether or not to cancel the event |
element | object | parameter returns the element of the object that was clicked |
selectedItem | object | parameter returns the object that is selected |
events | object | parameter returns the model of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (contextMenuClick) ="contextMenuClick($event)"> </ej-diagram>
//contextMenuClick event for diagram
contextMenuClick(args:any){
//doSomething.
}
doubleClick
Triggers when a node, connector or diagram model is clicked twice
Name | Type | Description |
---|---|---|
actualObject | object | parameter returns the object that is actually clicked |
element | object | parameter returns the selected object |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter to specify whether or not to cancel the event |
Example
<ej-diagram #diagram [dataSource]="diagramData" (doubleClick) ="doubleClick($event)"> </ej-diagram>
//doubleClick event for diagram
doubleClick(args:any){
//doSomething.
}
drag
Triggers while dragging the elements in diagram
Name | Type | Description |
---|---|---|
element | object | parameter returns the node or connector that is being dragged |
oldValue | object | parameter returns the previous position of the node/connector |
newValue | object | parameter returns the new position of the node/connector |
dragState | string | parameter returns the state of drag event (Starting, dragging, completed) |
cancel | boolean | parameter returns whether or not to cancel the drag event |
diagramId | string | parameter returns the id of the diagram |
offset | object | parameter returns the offset of the selected items |
Example
<ej-diagram #diagram [dataSource]="diagramData" (drag) ="drag($event)"> </ej-diagram>
//drag event for diagram
drag(args:any){
//doSomething.
}
dragEnter
Triggers when a symbol is dragged into diagram from symbol palette
Name | Type | Description |
---|---|---|
element | object | parameter returns the node or connector that is dragged into diagram |
cancel | boolean | parameter returns whether to add or remove the symbol from diagram |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (dragEnter) ="dragEnter($event)"> </ej-diagram>
//dragEnter event for diagram
dragEnter(args:any){
//doSomething.
}
dragLeave
Triggers when a symbol is dragged outside of the diagram.
Name | Type | Description |
---|---|---|
element | object | parameter returns the node or connector that is dragged outside of the diagram |
cancel | boolean | parameter returns whether or not to cancel the dragOver event |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (dragLeave) ="dragLeave($event)"> </ej-diagram>
//dragLeave event for diagram
dragLeave(args:any){
//doSomething.
}
dragOver
Triggers when a symbol is dragged over diagram
Name | Type | Description |
---|---|---|
element | object | parameter returns the node or connector that is dragged over diagram |
allowDrop | boolean | parameter defines whether the symbol can be dropped at the current mouse position |
target | object | parameter returns the node/connector over which the symbol is dragged |
oldValue | object | parameter returns the previous position of the node/connector |
newValue | object | parameter returns the new position of the node/connector |
cancel | boolean | parameter returns whether or not to cancel the dragOver event |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (dragOver) ="dragOver($event)"> </ej-diagram>
//dragOver event for diagram
dragOver(args:any){
//doSomething.
}
drop
Triggers when a symbol is dragged and dropped from symbol palette to drawing area
Name | Type | Description |
---|---|---|
element | object | parameter returns node or connector that is being dropped |
cancel | boolean | parameter returns whether or not to cancel the drop event |
source | object | parameter returns the object from where the element is dragged |
target | object | parameter returns the object over which the object will be dropped |
objectType | String | parameter returns the enum which defines the type of the source |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (drop) ="drop($event)"> </ej-diagram>
//drop event for diagram
drop(args:any){
//doSomething.
}
editorFocusChange
Triggers when editor got focus at the time of node’s label or text node editing.
Name | Type | Description |
---|---|---|
model | object | Returns the diagram model. |
event | object | parameter returns the editor element |
type | string | Returns the name of the event |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (draeditorFocusChange) ="editorFocusChange($event)"> </ej-diagram>
//editorFocusChange event for diagram
editorFocusChange(args:any){
//doSomething.
}
groupChange
Triggers when a child is added to or removed from a group
Name | Type | Description |
---|---|---|
element | object | parameter returns the object that is added to/removed from a group |
oldParent | object | parameter returns the old parent group(if any) of the object |
newParent | object | parameter returns the new parent group(if any) of the object |
cause | string | parameter returns the cause of group change("group", unGroup") |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (groupChange) ="groupChange($event)"> </ej-diagram>
//groupChange event for diagram
groupChange(args:any){
//doSomething.
}
historyChange
Triggers when a change is reverted or restored(undo/redo)
Name | Type | Description |
---|---|---|
changes | Array | An array of objects, where each object represents the changes made in last undo/redo. To explore how the changes are defined, refer [Undo Redo Changes](#undo-redo-changes) |
Source | Array | A collection of objects that are changed in the last undo/redo |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter to specify whether or not to cancel the event |
cause | boolean | parameter returns the model of the diagram |
Undo Redo Changes
Name | Type | Description |
---|---|---|
type | string | Returns the type of change that is reverted/restored (example:positionChanged, sizeChanged) |
newValues | Object | Returns the new values of the properties that are changed.(example:newValues:{offset:60,offset:60,width:60,height:60}) |
oldValues | Object | Returns the old values of the properties that are changed.(example:oldValues:{offset:60,offset:60,width:60,height:60}) |
addedItems | Array | Returns the items that are newly added to model |
deletedItems | Array | Returns the items that are deleted from model |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (historyChange) ="historyChange($event)"> </ej-diagram>
//historyChange Enter event for diagram
historyChange(args:any){
//doSomething.
}
itemClick
Triggers when a diagram element is clicked
Name | Type | Description |
---|---|---|
actualObject | object | parameter returns the object that was actually clicked |
selectedObject | object | parameter returns the object that is selected |
cancel | boolean | parameter returns whether or not to cancel the drop event |
event | object | parameter returns the model of the diagram |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (itemClick) ="itemClick($event)"> </ej-diagram>
//itemClick event for diagram
itemClick(args:any){
//doSomething.
}
mouseEnter
Triggers when mouse enters a node/connector
Name | Type | Description |
---|---|---|
element | object | parameter returns the target node or connector |
source | object | parameter returns the object from where the selected object is dragged |
target | object | parameter returns the target object over which the selected object is dragged |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter returns whether or not to cancel the dragOver event |
Example
<ej-diagram #diagram [dataSource]="diagramData" (mouseEnter) ="mouseEnter($event)"> </ej-diagram>
//mouseEvent event for diagram
mouseEnter(args:any){
//doSomething.
}
mouseLeave
Triggers when mouse leaves node/connector
Name | Type | Description |
---|---|---|
element | object | parameter returns the target node or connector |
source | object | parameter returns the object from where the selected object is dragged |
target | object | parameter returns the target object over which the selected object is dragged |
cancel | boolean | parameter returns whether or not to cancel the dragOver event |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (mouseLeave) ="mouseLeave($event)"> </ej-diagram>
//mouseLeave event for diagram
mouseLeave(args:any){
//doSomething.
}
mouseOver
Triggers when mouse hovers over a node/connector
Name | Type | Description |
---|---|---|
element | object | parameter returns the target node or connector |
source | object | parameter returns the object from where the element is dragged |
target | object | parameter returns the object over which the element is being dragged. |
cancel | boolean | parameter returns whether or not to cancel the dragOver event |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (mouseOver) ="momouseOver($event)"> </ej-diagram>
//mouseOver event for diagram
mouseOver(args:any){
//doSomething.
}
nodeCollectionChange
Triggers when node collection is changed
Name | Type | Description |
---|---|---|
changeType | string | parameter returns whether the node is to be added or removed |
element | object | parameter returns the node which needs to be added or deleted |
cancel | boolean | parameter defines whether to cancel the collection change or not |
state | string | triggers before and after adding the node in the diagram which can be differentiated through `state` argument. We can cancel the event only before adding the node |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (nodeCollectionChange) ="nodeCollectionChange($event)"> </ej-diagram>
//nodeCollectionChange event for diagram
nodeCollectionChange(args:any){
//doSomething.
}
propertyChange
Triggers when the node properties(x, y,width and height alone) are changed using nudge commands or updateNode API.
Name | Type | Description |
---|---|---|
element | object | parameter returns the selected element |
cause | String | parameter returns the action is nudge or not |
newValue | object | parameter returns the new value of the node property that is being changed |
oldValue | object | parameter returns the old value of the property that is being changed |
propertyName | string | parameter returns the name of the property that is changed |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter defines whether to cancel the property change or not |
Example
<ej-diagram #diagram [dataSource]="diagramData" (propertyChange) ="propertyChange($event)"> </ej-diagram>
//propertyChange event for diagram
propertyChange(args:any){
//doSomething.
}
rotationChange
Triggers when the diagram elements are rotated
Name | Type | Description |
---|---|---|
element | object | parameter returns the node that is rotated |
oldValue | object | parameter returns the previous rotation angle |
newValue | object | parameter returns the new rotation angle |
cancel | boolean | parameter to specify whether or not to cancel the event |
diagramId | string | parameter returns the id of the diagram |
cause | string | parameter returns the actual click event arguments that explains which button is clicked |
Example
<ej-diagram #diagram [dataSource]="diagramData" (rotationChange) ="rotationChange($event)"> </ej-diagram>
//rotationChange event for diagram
rotationChange(args:any){
//doSomething.
}
scrollChange
Triggers when the diagram is zoomed or panned
Name | Type | Description |
---|---|---|
newValues | object | Parameter returns the new zoom value, horizontal and vertical scroll offsets. |
oldValues | object | parameter returns the previous zoom value, horizontal and vertical scroll offsets. |
cancel | boolean | parameter returns whether or not to cancel the dragOver event |
diagramId | string | parameter returns the id of the diagram |
cause | string | Parameter returns the new zoom value, horizontal and vertical scroll offsets. |
Example
<ej-diagram #diagram [dataSource]="diagramData" (scrollChange) ="scrollChange($event)"> </ej-diagram>
//scrollChange event for diagram
scrollChange(args:any){
//doSomething.
}
segmentChange
Triggers when a connector segment is edited
Name | Type | Description |
---|---|---|
element | object | Parameter returns the connector that is being edited |
dragState | string | parameter returns the state of editing (starting, dragging, completed) |
point | object | parameter returns the current mouse position |
cancel | boolean | parameter to specify whether or not to cancel the event |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (segmentChange) ="segmentChange($event)"> </ej-diagram>
//segmentChange event for diagram
segmentChange(args:any){
//doSomething.
}
selectionChange
Triggers when the selection is changed in diagram
Name | Type | Description |
---|---|---|
changeType | string | parameter returns whether the item is selected or removed selection |
element | object | parameter returns the item which is selected or to be selected |
oldItems | array | parameter returns the collection of nodes and connectors that have to be removed from selection list |
newItems | array | parameter returns the collection of nodes and connectors that have to be added to selection list |
selectedItems | array | parameter returns the collection of nodes and connectors that will be selected after selection change |
cancel | boolean | parameter to specify whether or not to cancel the selection change event |
state | string | triggers before and after adding the selection to the object in the diagram which can be differentiated through `state` argument. We can cancel the event only before the selection of the object. |
diagramId | string | parameter returns the id of the diagram |
cause | string | parameter returns the actual cause of the event |
Example
<ej-diagram #diagram [dataSource]="diagramData" (selectionChange) ="selectionChange($event)"> </ej-diagram>
//selectionChange event for diagram
selectionChange(args:any){
//doSomething.
}
sizeChange
Triggers when a node is resized
Name | Type | Description |
---|---|---|
element | object | parameter returns node that was resized |
cancel | boolean | parameter to cancel the size change |
newValue | object | parameter returns the new width, height, offsetX and offsetY values of the element that is being resized |
oldValue | object | parameter returns the previous width,height,offsetX and offsetY values of the element that is being resized |
resizeState | string | parameter returns the state of resizing(starting,resizing,completed) |
offset | object | parameter returns the difference between new and old value |
diagramId | string | parameter returns the id of the diagram |
direction | string | parameter returns the direction of the node is resized |
Example
<ej-diagram #diagram [dataSource]="diagramData" (sizeChange) ="sizeChange($event)"> </ej-diagram>
//sizeChange event for diagram
sizeChange(args:any){
//doSomething.
}
textChange
Triggers when label editing is ended
Name | Type | Description |
---|---|---|
element | object | parameter returns the node that contains the text being edited |
value | string | parameter returns the new text |
keyCode | string | parameter returns the keyCode of the key entered |
diagramId | string | parameter returns the id of the diagram |
cancel | boolean | parameter to specify whether or not to cancel the event |
Example
<ej-diagram #diagram [dataSource]="diagramData" (textChange) ="textChange($event)"> </ej-diagram>
//textChange event for diagram
textChange(args:any){
//doSomething.
}
create
Triggered when the diagram is rendered completely.
Name | Type | Description |
---|---|---|
model | object | Returns the diagram model. |
type | string | Returns the name of the event |
diagramId | string | parameter returns the id of the diagram |
Example
<ej-diagram #diagram [dataSource]="diagramData" (create) ="create($event)"> </ej-diagram>
//create event for diagram
create(args:any){
//doSomething.
}