Contents
- Background
- Bridging
- CommandManager
- Connectors
- ContextMenu
- DataSourceSettings
- DefaultSettings
- DrawType
- EnableAutoScroll
- EnableContextMenu
- EnablePersistence
- EnableRtl
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in Angular Diagram component
1 Jan 202524 minutes to read
This article describes the API migration process of Diagram component from Essential® JS 1 to Essential® JS 2.
Background
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the background color of diagram elements |
Property:`backgroundColor`
HTML
|
Property:`backgroundColor`
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" backgroundColor= "red">
</ejs-diagram>
|
| Defines how to align the background image over the diagram area |
Property:`backgroundImage.alignment`
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [backgroundImage]="backgroundImage">
</ej-diagram>
Script
public backgroundImage;
constructor() {
this.backgroundImage = {
alignment: "XMidYMind",
}
};
|
Property:`background.align`
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings" >
</ejs-diagram>
Script
public pageSettings: PageSettingsModel;
ngOnInit(): void {
this.pageSettings = {
background: {
align: 'XMinYMin'
},
}
}
|
| Defines how the background image should be scaled/stretched |
Property:`backgroundImage.scale`
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [backgroundImage]="backgroundImage">
</ej-diagram>
Script
public backgroundImage;
constructor() {
this.backgroundImage = {
scale: "Meet",
};
}
|
Property:`background.scale`
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings" >
</ejs-diagram>
Script
public pageSettings: PageSettingsModel;
ngOnInit(): void {
this.pageSettings = {
background: {
scale: 'Meet',
},
}
}
|
| Sets the source path of the background image |
Property:`backgroundImage.source`
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [backgroundImage]="backgroundImage">
</ej-diagram>
Script
public backgroundImage;
constructor() {
this.backgroundImage = {
source: "https://www.w3schools.com/images/w3schools_green.jpg"
};
}
|
Property:`background.source`
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings" >
</ejs-diagram>
Script
public pageSettings: PageSettingsModel;
ngOnInit(): void {
this.pageSettings = {
background: {
source: "https://www.w3schools.com/images/w3schools_green.jpg",
},
}
}
|
Bridging
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Sets the direction of line bridges |
Property:`bridgeDirection`
HTML
|
Property:`bridgeDirection`
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" bridgeDirection = "Bottom" >
</ejs-diagram>
|
CommandManager
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| commands |
Property:`commandManager.commands`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
this.commandManager = { commands: {
"clone": {
gesture: {
key: Keys.C,
keyModifiers: KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
this.commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
}
|
| The command is executable at the moment or not. |
Property:`commandManager.commands.canExecute`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
this.commandManager = { commands: {
"clone": {
gesture: {
key: Keys.C,
keyModifiers: KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.canExecute`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
this.commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
}
|
| Defines what to be executed when the key combination is recognized |
Property:`commandManager.commands.execute`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
this.commandManager = { commands: {
"clone": {
gesture: {
key: Keys.C,
keyModifiers: KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.execute`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
this.commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
}
|
| Defines a combination of keys and key modifiers, on recognition of which the command will be executed |
Property:`commandManager.commands.gesture`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
this.commandManager = { commands: {
"clone": {
gesture: {
key: Keys.C,
keyModifiers: KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.gesture`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
this.commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
}
|
| Sets the key value, on recognition of which the command will be executed |
Property:`commandManager.commands.gesture.key`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
this.commandManager = { commands: {
"clone": {
gesture: {
key: Keys.C,
keyModifiers: KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.gesture.key`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
commandManager: Object;
constructor() {
this.commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
}
|
| Sets a combination of key modifiers, on recognition of which the command will be executed. |
Property:`commandManager.commands.gesture.keyModifiers`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [commandManager]="commandManager">
</ej-diagram>
Script
commandManager: Object;
constructor() {
this.commandManager = {
commands: {
"clone": {
gesture: {
key: Keys.C,
keyModifiers: KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.gesture.keyModifiers`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
this.commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
}
|
| Defines any additional parameters that are required at runtime |
Property:`commandManager.commands.parameter`
</br>
</br>
HTML
Script
commandManager: Object;
constructor() {
this.commandManager = {
commands: {
"clone": {
parameter : "node",
gesture: {
key: Keys.C,
keyModifiers: KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.parameter`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [commandManager]="commandManager" >
</ejs-diagram>
Script
public commandManager: CommandManager;
ngOnInit(): void {
this.commandManager = {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
}
|
Connectors
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| addInfo |
Property:`connectors.addInfo`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
Script
public addInfo;
constructor() {
var addInfo = {
Description: "Bidirectional Flow"
};
}
|
Property:`connectors.addInfo`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" >
Script
public addInfo: object[];
ngOnInit(): void {
this.addInfo = {
Description: "Bidirectional Flow"
};
}
|
| Defines the bridgeSpace of connector |
Property:`connectors.bridgeSpace`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
bridgeSpace: 15,
};
this.connectors = [connector];
}
|
Property:`connectors.bridgeSpace`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 600,
y: 200
}
}];
}
|
| Enables or disables the behaviors of connectors |
Property:`connectors.constraints`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
var ConnectorConstraints = ConnectorConstraints;
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
};
this.connectors = [connector];
}
|
Property:`connectors.constraints`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag
}];
}
|
| Defines the radius of the rounded corner |
Property:`connectors.cornerRadius`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cornerRadius: 10, segments:[{ type: "orthogonal"}]
};
this.connectors = [connector];
}
|
Property:`connectors.cornerRadius`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
cornerRadius: 10,
type: 'Orthogonal',
}];
}
|
| cssClass |
Property:`connectors.cssClass`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cssClass: "hoverConnector"
};
this.connectors = [connector];
}
|
Not applicable |
| Alignment |
Property:`connectors.horizontalAlign`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
horizontalAlign:HorizontalAlignment.Right
};
this.connectors = [connector];
}
|
Not applicable |
| A collection of JSON objects where each object represents a label |
Property:`connectors.labels`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
labels:[{ text:"connector" }]
};
this.connectors = [connector];
}
|
Property:`connectors.annotations`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
annotations: [{ id: 'label', content: 'Text', offset: 0.5 }]
}];
}
|
| stroke color of the connector |
Property:`connectors.lineColor`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor:"blue"
};
this.connectors = [connector];
}
|
Property:`connectors.style.strokeColor`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue' },
}];
}
|
| Sets the pattern of dashes and gaps used to stroke the path of the connector |
Property:`connectors.lineDashArray`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor:"blue", lineDashArray: "2,2"
};
this.connectors = [connector];
}
|
Property:`connectors.style.strokeDashArray`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
}
|
| Sets the width of the line |
Property:`connectors.lineWidth`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineWidth: 10
};
this.connectors = [connector];
}
|
Property:`connectors.style.strokeWidth`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
}
|
| Defines the padding value to ease the interaction with connectors |
Property:`connectors.lineHitPadding`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineHitPadding: 15
};
this.connectors = [connector];
}
|
Property:`connectors.hitPadding`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
hitPadding: 10
}];
}
|
| Defines the minimum space to be left between the bottom of parent bounds and the connector |
Property:`connectors.marginBottom`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginBottom: 15
};
this.connectors = [connector];
}
|
Property:`connectors.margin.bottom`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { bottom: 3 }
}];
}
|
| Defines the minimum space to be left between the top of parent bounds and the connector |
Property:`connectors.marginTop`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginTop: 15
};
this.connectors = [connector];
}
|
Property:`connectors.margin.top`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { top: 3 }
}];
}
|
| Defines the minimum space to be left between the left of parent bounds and the connector |
Property:`connectors.marginLeft`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginLeft: 15
};
this.connectors = [connector];
}
|
Property:`connectors.margin.left`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { left: 3 }
}];
}
|
| Defines the minimum space to be left between the right of parent bounds and the connector |
Property:`connectors.marginRight`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginRight: 15
};
this.connectors = [connector];
}
|
Property:`connectors.margin.right`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { right: 3 }
}];
}
|
| Sets a unique name for the connector |
Property:`connectors.name`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
};
this.connectors = [connector];
}
|
Property:`connectors.id`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
}
|
| Defines the transparency of the connector |
Property:`connectors.opacity`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
opacity: 0.5
};
this.connectors = [connector];
}
|
Property:`connectors.style.opacity`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2', opacity: 0.5 },
}];
}
|
| Sets the parent name of the connector. |
Property:`connectors.parent`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
parent:"group"
};
let group = { name :"group", children:["connector"] };
this.connectors = [connector];
}
|
Not applicable |
| An array of JSON objects where each object represents a segment |
Property:`connectors.segments`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }}]
};
this.connectors = [connector];
}
|
Property:`connectors.segments`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
}
|
| Sets the direction of orthogonal segment |
Property:`connectors.segments.direction`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }, direction:"bottom"}]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.direction`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
}
|
| Describes the length of orthogonal segment |
Property:`connectors.segments.length`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }, length:50 }]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.length`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
}
|
| Describes the end point of bezier/straight segment |
Property:`connectors.segments.point`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 } }]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.point`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Straight', point: { x: 800, y: 50 } }]
}];
}
|
| Defines the first control point of the bezier segment |
Property:`connectors.segments.point1`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50} }]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.point1`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 }
}]
}];
}
|
| Defines the second control point of bezier segment |
Property:`connectors.segments.point2`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50}, point2:{ x: 150, y: 150 } }]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.point2`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}]
}];
}
|
| Sets the type of the segment |
Property:`connectors.segments.type`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type: Segments.Bezier }]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.type`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}]
}];
}
|
| Describes the length and angle between the first control point and the start point of bezier segment |
Property:`connectors.segments.vector1`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180} }]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.vector1`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 900, y: 160 },
vector1: { angle: 20, distance: 75 },
vector2: { angle: 20, distance: 75 }
}],
}];
}
|
| Describes the length and angle between the second control point and end point of bezier segment |
Property:`connectors.segments.vector2`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [
{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180}
}]
};
this.connectors = [connector];
}
|
Property:`connectors.segments.vector2`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 900, y: 160 },
vector1: { angle: 20, distance: 75 },
vector2: { angle: 20, distance: 75 }
}]
}];
}
|
| Sets the type of the connector |
Property:`connectors.shape.type`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape: { type: "bpmn"},
segments: [{ type:"straight" }]
};
this.connectors = [connector];
}
|
Property:`connectors.shape.type`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}],
shape: { type: 'Bpmn', flow: 'Message', message: 'InitiatingMessage' }
}];
}
|
| Defines the source decorator of the connector |
Property:`connectors.sourceDecorator`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow" }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
}
|
| Sets the border color of the source decorator |
Property:`connectors.sourceDecorator.borderColor`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", borderColor:"red" }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator.style.strokeColor`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
style: { strokeColor: 'red' },
},
}];
}
|
| Sets the border width of the decorator |
Property:`connectors.sourceDecorator.borderWidth`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", borderWidth: 5 }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator.style.strokeWidth: 5`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow', strokeWidth: 5
},
}];
}
|
| Defines to customize sourceDecorator appearance using user-defined CSS |
Property:`connectors.sourceDecorator.cssClass`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};
this.connectors = [connector];
}
|
Not applicable |
| Sets the fill color of the source decorator |
Property:`connectors.sourceDecorator.fillColor`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", fillColor:"red" }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator.style.fill`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow', fill: 'black'
},
}];
}
|
| Sets the height of the source decorator |
Property:`connectors.sourceDecorator.height`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { width: 10, height:10 }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
height: 10, width: 10
},
}];
}
|
| Defines the custom shape of the source decorator |
Property:`connectors.sourceDecorator.pathData`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"path", pathData:"M 376.892, 225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator.pathData`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Custom',
pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
}
|
| Defines the shape of the source decorator. |
Property:`connectors.sourceDecorator.shape`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape: DecoratorShapes.Circle }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator.shape`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
}
|
| Defines the width of the source decorator |
Property:`connectors.sourceDecorator.width`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", width: 10, height:10 }
};
this.connectors = [connector];
}
|
Property:`connectors.sourceDecorator.width`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
width: 10, height:10
},
}];
}
|
| Sets the source node of the connector |
Property:`connectors.sourceNode`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" nodes="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target"
};
this.connectors = [connector];
}
|
Property:`connectors.sourceID`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
}];
}
|
| Defines the space to be left between the source node and the source point of a connector |
Property:`connectors.sourcePadding`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" nodes="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target",
sourcePadding: 2, targetPadding: 2
};
this.connectors = [connector];
}
|
Property:`connectors.hitPadding`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source', targetID: 'target'
}];
}
|
| Describes the start point of the connector |
Property:`connectors.sourcePoint`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200}
};
this.connectors = [connector];
}
|
Property:`connectors.sourcePoint`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },
}];
}
|
| Sets the source port of the connector |
Property:`connectors.sourcePort`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" nodes="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
sourceNode:"source", targetNode:"target",
sourcePort: "port", targetPort:"port1" };
this.connectors = [connector];
}
|
Property:`connectors.sourcePortID`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target',
sourcePortID: 'port',
targetPortID: 'port1',
}];
}
|
| Defines the target decorator of the connector |
Property:`connectors.targetDecorator`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow" }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
}
|
| Sets the border color of the target decorator |
Property:`connectors.targetDecorator.borderColor`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", borderColor:"red" }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator.style.strokeColor`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
style: { strokeColor: 'red' },
},
}];
}
|
| Sets the border width of the decorator |
Property:`connectors.targetDecorator.borderWidth`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", borderWidth: 5 }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator.style.strokeWidth: 5`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow', strokeWidth: 5
},
}];
}
|
| Defines to customize target Decorator appearance using user-defined CSS |
Property:`connectors.targetDecorator.cssClass`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};
this.connectors = [connector];
}
|
Not applicable |
| Sets the fill color of the target decorator |
Property:`connectors.targetDecorator.fillColor`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", fillColor:"red" }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator.style.fill`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow', fill: 'black'
},
}];
}
|
| Sets the height of the target decorator |
Property:`connectors.targetDecorator.height`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { width: 10, height:10 }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
height: 10, width: 10
},
}];
}
|
| Defines the custom shape of the target decorator |
Property:`connectors.targetDecorator.pathData`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"path", pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator.pathData`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Custom',
pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
}
|
| Defines the shape of the target decorator. |
Property:`connectors.targetDecorator.shape`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape: DecoratorShapes.Circle }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator.shape`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
}
|
| Defines the width of the target decorator |
Property:`connectors.targetDecorator.width`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", width: 10, height:10 }
};
this.connectors = [connector];
}
|
Property:`connectors.targetDecorator.width`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
width: 10, height:10
},
}];
|
| Sets the target node of the connector |
Property:`connectors.targetNode`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target"
};
this.connectors = [connector];
}
|
Property:`connectors.targetID`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
}];
}
|
| Defines the space to be left between the target node and the target point of a connector |
Property:`connectors.targetPadding`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes" >
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target",
sourcePadding: 2, targetPadding: 2
};
this.connectors = [connector];
}
|
Property:`connectors.hitPadding`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source', targetID: 'target'
}];
}
|
| Describes the start point of the connector |
Property:`connectors.targetPoint`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name: "connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200}
};
this.connectors = [connector];
}
|
Property:`connectors.targetPoint`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },
}];
}
|
| Sets the target port of the connector |
Property:`connectors.targetPort`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
sourceNode:"source", targetNode:"target",
sourcePort: "port", targetPort:"port1" };
this.connectors = [connector];
}
|
Property:`connectors.targetPortID`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target',
sourcePortID: 'port',
targetPortID: 'port1',
}];
}
|
| Defines the tooltip that should be shown when the mouse hovers over connector |
Property:`connectors.tooltip`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" >
</ej-diagram>
Script
public connectors;
constructor() {
let tooltip = {
templateId: "mouseOverTooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
};
let ConnectorConstraints = ConnectorConstraints;
let connector = {
name: "flow",sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
tooltip:tooltip
};
this.connectors = [connector];
}
|
Property:`connectors.tooltip`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
tooltip: {
content: 'Connector',
position: 'TopCenter', showTipPointer: true,
},
}];
}
|
| Sets the vertical alignment of connector |
Property:`connectors.verticalAlign`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = {
name:"connector",
sourcePoint:{x:100, y:100}, targetPoint:{x:150, y:150},
verticalAlign:VerticalAlignment.Bottom };
this.connectors = [connector];
}
|
Not applicable |
| Enables or disables the visibility of connector |
Property:`connectors.visible`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = { name:"connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
visible: true
};
this.connectors = [connector];
}
|
Property:`connectors.visible`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
visible: true
}];
}
|
| Sets the z-index of the connector |
Property:`connectors.zOrder`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors" [nodes]="nodes">
</ej-diagram>
Script
public connectors;
constructor() {
let connector = { name:"connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
zOrder: 4 };
this.connectors = [connector];
}
|
Property:`connectors.zIndex`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [connectors]="connectors">
</ejs-diagram>
Script
public connectors: ConnectorModel[];
ngOnInit(): void {
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
zIndex: 1
}];
}
|
| Binds the custom JSON data with connector properties |
Property:`connectors.connectorTemplate`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" connectorTemplate = "connectorTemplate" dataSourceSettings = "dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
public connectorTemplate;
constructor() {
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 },
connectorTemplate :"connectorTemplate"
public connectorTemplate(diagram, connector) {
if(connector.sourceNode && connector.targetNode){
connector.lineColor = "green";
}
}
}
|
Not applicable |
| Enables/Disables the default behaviors of the diagram |
Property:`constraints`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" >
</ej-diagram>
Script
let DiagramConstraints = DiagramConstraints;
public constraints;
constructor() {
let constraints = DiagramConstraints.Default | DiagramConstraints.Bridging;
this.connectors = [connector];
}
|
Property:`constraints`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints">
</ejs-diagram>
Script
public constraints: DiagramConstraints;
ngOnInit(): void {
this.constraints =DiagramConstraints.Default | DiagramConstraints.Bridging
}
|
ContextMenu
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the collection of context menu items |
Property:`contextMenu.items`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
let menuItems = [{ "name": "hyperLink" }];
this.contextMenu = {items: menuItems };
this.enableContextMenu = true;
}
|
Property:`contextMenuSettings.items`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
}
}
|
| Defines the text for the collection of context menu item |
Property:`contextMenu.items.text`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
let menuItems = [{ "text": "ZoomIn" }];
this.contextMenu = {items: menuItems };
this.enableContextMenu = true;
}
|
Property:`contextMenuSettings.items.text`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
text: 'ZoomIn'
}],
}
}
|
| Defines the name for the collection of context menu items |
Property:`contextMenu.items.name`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
let menuItems = [{ "name": "hyperLink" }];
this.contextMenu = {items: menuItems };
this.enableContextMenu = true;
}
|
Property:`contextMenuSettings.items.id`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
text: 'delete', id: 'delete'
}]
}
}
|
| Defines the image url for the collection of context menu items |
Property:`contextMenu.items.imageUrl`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
let menuItems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "style": "" }];
this.contextMenu = {items: menuItems };
this.enableContextMenu = true;
}
|
Property:`contextMenuSettings.items.url`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
'id': 'zoomin', 'text': 'ZoomIn','url': 'Images/zoomin.png',
}],
}
}
|
| Defines the cssClass for the collection of context menu items |
Property:`contextMenu.items.cssClass`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
let menuItems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "cssClass":"menu", "style": "" }];
this.contextMenu = {items: menuItems };
this.enableContextMenu = true;
}
|
Property:`contextMenuSettings.items.iconCss`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
}
}
|
| Defines the collection of sub items for the context menu items |
Property:`contextMenu.items.subItems`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
this.contextMenu = {
// Defines the custom context menu items
items: [{
name: "zoom",
// Text to be displayed
text: "Zoom",
// Defines the sub items
subItems: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
}]
};
this.enableContextMenu = true;
}
|
Property:`contextMenuSettings.items`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
text: 'Zoom', id: 'zoom',
items: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
}],
showCustomMenuOnly: false,
}
}
|
| set whether to display the default context menu items or not |
Property:`contextMenu.showCustomMenuItemsOnly`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu" [contextMenu]="contextMenu">
</ej-diagram>
Script
public contextMenu;
public enableContextMenu;
constructor() {
this.contextMenu = { showCustomMenuItemsOnly: true };
this.enableContextMenu = true;
}
|
Property:`contextMenuSettings.showCustomMenuOnly`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {
showCustomMenuOnly: false,
}
}
|
| separator | Not applicable |
Property:`contextMenuSettings.items.separator`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = {
show: true, items: [{
text: 'Save', id: 'save', target: '.e-diagramcontent',
iconCss: 'e-save', separator: true
},
{
text: 'Load', id: 'load', target: '.e-diagramcontent',
iconCss: 'e-load'
},
}
}
|
| Define the target to show the menu item. | Not applicable |
Property:`contextMenuSettings.items.target`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
showCustomMenuOnly: false,
}
}
|
| Enables/Disables the context menu items | Not applicable |
Property:`contextMenuSettings.show`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]="contextMenuSettings" >
</ejs-diagram>
Script
public constraints: ContextMenuSettingsModel;
ngOnInit(): void {
this.contextMenuSettings = { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
showCustomMenuOnly: false,
}
}
|
DataSourceSettings
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.dataSource`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];
this.dataSourceSettings = { dataSource: data }
}
|
Property:`dataSourceSettings.dataManager`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
</ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
this.dataSourceSettings = { dataManager: items}
}
|
| Sets the unique id of the data source items |
Property:`dataSourceSettings.id`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];
this.dataSourceSettings = { id: "Id", dataSource: data }
}
|
Property:`dataSourceSettings.id`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
</ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
this.dataSourceSettings = { id: 'Id', dataManager: items }
}
|
| Defines the parent id of the data source item |
Property:`dataSourceSettings.parent`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" }];
this.dataSourceSettings = { id: "Id", parent: "ReportingPerson", dataSource: data }
}
|
Property:`dataSourceSettings.parentId`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
</ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
this.dataSourceSettings = { id: 'Id', parentId: 'ReportingPerson', dataManager: items }
}
|
| Describes query to retrieve a set of data from the specified datasource |
Property:`dataSourceSettings.query`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.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"
}
}
|
Not applicable |
| Sets the unique id of the root data source item |
Property:`dataSourceSettings.root`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
let data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
this.dataSourceSettings = {
id: "Id",
parent: "ReportingPerson",
root: "E1",
dataSource: data
}
}
|
Property:`dataSourceSettings.root`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
</ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
this.dataSourceSettings = { id: 'Id', parentId: 'ReportingPerson', dataManager: items, root: 'E1' }
}
|
| Describes the name of the table on which the specified query has to be executed |
Property:`dataSourceSettings.tableName`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.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"
}
}
|
Not applicable |
| Specifies the method name which is used to get the updated data from client side to the server side |
Property:`dataSourceSettings.crudAction`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
crudAction:
{
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes"
}
}
}
|
Not applicable |
| Specifies the create method which is used to get the nodes to be added from client side to the server side |
Property:`dataSourceSettings.crudAction.create`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
crudAction:
{
create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes",
}
}
}
|
Not applicable |
| Specifies the update method which is used to get the updated data from client side to the server side |
Property:`dataSourceSettings.crudAction.update`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
crudAction:
{
update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes",
}
}
}
|
Not applicable |
| Specifies the destroy method which is used to get the deleted items data from client side to the server side |
Property:`dataSourceSettings.crudAction.destroy`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
crudAction:
{
destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes"
}
}
}
|
Not applicable |
| Specifies the read method to get the created nodes from client side to the server side |
Property:`dataSourceSettings.crudAction.read`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
let data = [
this.dataSourceSettings = {
id: "Name",
crudAction:
{
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes";
}
}
}
|
Not applicable |
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.customFields`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: 'Name',
customFields: [
"Description",
"Color"
]
}
}
|
Property:`dataSourceSettings.data`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [dataSourceSettings]="dataSourceSettings">
</ejs-diagram>
Script
public diagram: DiagramComponent;
public dataSourceSettings: Object;
ngOnInit(): void {
this.dataSourceSettings = { id: 'Name',
customFields: [
"Description",
"Color"
] }
}
|
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.connectionDataSource`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name"
}
}
}
|
Not applicable |
| Sets the datasource for the connection datasource settings items |
Property:`dataSourceSettings.connectionDataSource.dataSource`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
let data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
this.dataSourceSettings = {
id: "Name",
connectionDataSource: {
id: "Name",
dataSource: data
}
}
|
Not applicable |
| Sets the unique id of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.id`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name"
}
}
}
|
Not applicable |
| Sets the source node of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourceNode`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
}
}
}
|
Not applicable |
| Sets the target node of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetNode`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
targetNode: "targetNode"
}
}
}
|
Not applicable |
| Sets the sourcePointX value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourcePointX`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointX:200
}
}
}
|
Not applicable |
| Sets the sourcePointY value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourcePointY`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointY:200
}
}
}
|
Not applicable |
| Sets the targetPoint-x value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetPointX`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
targetPointX:200
}
}
}
|
Not applicable |
| Sets the targetPoint-y value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetPointY`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
targetPointY:200
}
}
}
|
Not applicable |
| Specifies the method name which is used to get updated connectors from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.crudAction`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
targetNode: "targetNode",
crudAction: {
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
}
|
Not applicable |
| Specifies the create method which is used to get the connectors to be added from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.crudAction.create`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
targetNode: "targetNode",
crudAction: {
create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddConnectors",
}
}
}
}
|
Not applicable |
| Specifies the update method which is used to get the updated connectors from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.crudAction.update`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors",
}
}
}
}
|
Not applicable |
| Specifies the destroy method which is used to get the deleted items data from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.crudAction.destroy`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors"
}
}
}
}
|
Not applicable |
| Specifies the read method which is used to get the data from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.crudAction.read`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
}
|
Not applicable |
| Specifies the custom fields to get the updated data from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.customFields`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSource]="dataSourceSettings">
</ej-diagram>
Script
public dataSourceSettings;
constructor() {
this.dataSourceSettings = {
id: "Name",
connectionDataSource:
{
id: "Name",
customFields: [ "Description", "Color"]
}
}
}
|
Not applicable |
| Binds the custom data with node model |
Property:`dataSourceSettings.doBinding`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [dataSourceSettings]="dataSourceSettings" layout="layout">
</ej-diagram>
Script
public dataSourceSettings;
public layout;
constructor() {
this.layout = { type: 'HierarchicalTree', verticalSpacing: 40 }
this.dataSourceSettings = {
id: 'Name', parentId: 'ReportingPerson', dataManager: items,
doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
nodeModel.annotations = [{
content: data['Name'], margin: { top: 10 }
}];
}
}
}
|
Not applicable |
DefaultSettings
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Initializes the default values for nodes and connectors |
Property:`defaultSettings.node`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [defaultSettings]="defaultSettings">
</ej-diagram>
Script
public defaultSettings;
constructor() {
this.defaultSettings = { node: { fillColor:"red"} };
}
|
Property:`getNodeDefaults`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [getNodeDefaults]="getNodeDefaults">
</ejs-diagram>
Script
public diagram: DiagramComponent;
public getNodeDefaults(node: NodeModel, diagram: Diagram): NodeModel {
node.style = { fill: 'blue', strokeColor: 'none', strokeWidth: 2 };
return node;
}
|
| Initializes the default connector properties |
Property:`defaultSettings.connector`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [defaultSettings]="defaultSettings">
</ej-diagram>
Script
public defaultSettings;
constructor() {
this.defaultSettings = { connector: { lineColor:"red", lineWidth:4, lineDashArray:"2,2" } };
}
|
Property:`getConnectorDefaults`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [getConnectorDefaults]="getConnectorDefaults">
</ejs-diagram>
Script
public diagram: DiagramComponent;
public getConnectorDefaults(connector: ConnectorModel, diagram: Diagram): ConnectorModel {
connector= {
targetDecorator: { shape: 'None' },
type: 'Orthogonal'
};
return connector;
}
|
| Initializes the default properties of groups |
Property:`defaultSettings.group`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [defaultSettings]="defaultSettings">
</ej-diagram>
Script
public defaultSettings;
constructor() {
this.defaultSettings = { group: {constraints: NodeConstraints.Default & ~NodeConstraints.Drag } };
}
|
Not applicable |
DrawType
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Sets the type of JSON object to be drawn through drawing tool |
Property:`drawType`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [drawType]="drawType">
</ej-diagram>
Script
public drawType;
constructor() {
this.drawType ={type:"node"};
}
|
Property:`drawingObject`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px"(created)='diagramCreate($event)'>
</ejs-diagram>
Script
public diagram: DiagramComponent;
public diagramCreate(args: Object): void {
this.diagram.drawingObject = {id: 'connector', type: 'Straight'};
}
|
EnableAutoScroll
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables auto scroll in diagram |
Property:`enableAutoScroll`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableAutoScroll]="enableAutoScroll">
</ej-diagram>
Script
public enableAutoScroll;
constructor() {
this.enableAutoScroll = false;
}
|
Property:`canAutoScroll`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [canAutoScroll]='canAutoScroll'>
</ejs-diagram>
Script
public canAutoScroll:boolean;
ngOnInit(): void {
this.canAutoScroll= true;
}
|
EnableContextMenu
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables diagram context menu |
Property:`enableContextMenu`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableContextMenu]="enableContextMenu">
</ej-diagram>
Script
public enableContextMenu;
constructor() {
this.enableContextMenu = false;
}
|
Property:`contextMenuSettings.show`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [contextMenuSettings]='contextMenuSettings'>
</ejs-diagram>
Script
public contextMenuSettings;
ngOnInit(): void {
this. contextMenuSettings: {
show: true
}
}
|
EnablePersistence
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enable or disable persisting component's state between page reloads | Not applicable |
Property:`enablePersistence`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enablePersistence]="true">
</ej-diagram>
|
EnableRtl
</tr> </table> ## GetCustomTool| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enable or disable rendering component in right to left direction</td> | Not applicable |
Property:`enableRtl`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [enableRtl]="true">
</ej-diagram>
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows to get the custom tool</td> | Not applicable |
Property:`getCustomTool`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [getDescription]="getTool" [nodes]="nodes">
</ejs-diagram>
Script
public getTool(action: string): ToolBase {
let tool: ToolBase;
if (action === 'userHandle') {
tool = new CloneTool(diagram.commandHandler, true);
}
return tool;
}
public nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
}
class CloneTool extends ToolBase {
public mouseDown(args: MouseEventArgs): void {
super.mouseDown(args);
diagram.copy();
diagram.paste();
}
}
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Specifies the height of the diagram |
Property:`height`
</br>
</br>
HTML
|
Property:`height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" height="700px" >
</ejs-diagram>
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| A method that takes a history entry as argument and returns whether the specific entry can be popped or not |
Property:`historyManager.canPop`
</br>
</br>
HTML
Script
let diagram = $("#diagramCore").ejDiagram("instance");
let entry = { object: diagram.node, prevState: diagram.node.EmployeeInfo };
diagram.widget.model.historyManager.push(entry);
let newValues = { role: "New role" };
node.EmployeeInfo = newValues;
//Pop if the change doesn't need to be tracked
if(diagram.widget.model.historyManager.canPop(entry))
diagram.widget.model.historyManager.pop();
|
Not applicable |
| A method that ends grouping the changes |
Property:`historyManager.closeGroupAction`
</br>
</br>
HTML
Script
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();
|
Property:`historyManager.endGroupAction`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes" [connectors] = "connectors">
</ejs-diagram>
Script
public nodes= [{
id: 'node1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
},
{
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
id: 'node2'
}],
public connectors = [{
id: 'connector1', sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 200, y: 300 },
type: 'Orthogonal'
}]
});
public created() {
let objects: (NodeModel | ConnectorModel)[] = [];
objects.push(this.diagram.nodes[0], this.diagram.nodes[1], this.diagram.connectors[0]);
this.diagram.historyManager.startGroupAction();
this.diagram.distribute('Top', objects);
this.diagram.distribute('Bottom', objects);
this.diagram.distribute('BottomToTop', objects);
this.diagram.historyManager.endGroupAction();
}
|
| A method that removes the history of a recent change made in diagram |
Property:`historyManager.pop`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created">
</ejs-diagram>
Script
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.model.historyManager.pop();
}
|
Not applicable |
| A method that allows to track the custom changes made in diagram |
Property:`historyManager.push`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created">
</ej-diagram>
Script
public created() {
let entry = { object: node, prevState: node.employeeInfo };
this.diagram.model.historyManager.push(entry);
let value = { role: "New role" };
node.employeeInfo = value;
}
|
Property:`historyManager.push`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes= [{
id: 'node1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
},
{
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
id: 'node2'
}],
public created() {
let object = diagram.nodes[0];
object['description'] = (document.getElementById('custom') as HTMLSelectElement).value;
let entry: HistoryEntry = { undoObject: object };
this.diagram.historyManager.push(entry);
this.diagram.dataBind();
}
|
| Defines what should be happened while trying to restore a custom change |
Property:`historyManager.redo`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public historyManager;
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
let node: Node = args.object;
let currentState = node.employeeInfo;
node.employeeInfo = args.prevState;
args.prevState = currentState;
}
|
Property:`historyManager.redo`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes= [{
id: 'node1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
},
{
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
id: 'node2'
}],
public created() {
let node1: NodeModel = this.diagram.nodes[0];
node1['customName'] = 'customNode';
let entry = {
undoObject: node1
};
this.diagram.historyManager.push(entry);
this.diagram.historyManager.undo = function(args: HistoryEntry) {
args.redoObject = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = 'customNodeChange';
}
this.diagram.historyManager.redo = function(args: HistoryEntry) {
let current: NodeModel = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = args.redoObject['customName'];
args.redoObject = current;
}
}
|
| Gets the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified |
Property:`historyManager.redoStack`
</br>
</br>
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.model.historyManager.redoStack();
|
Property:`historyManager.redoStack`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public nodes= [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.historyManager.redoStack();
}
|
| Restricts the undo and redo actions to a certain limit |
Property:`historyManager.stackLimit`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes= [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
this.diagram.model.historyManager.stackLimit();
}
|
Property:`historyManager.stackLimit`
</br>
</br>
HTML
<ejs-diagram id="diagram" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes= [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
this.diagram.historyManager.stackLimit();
}
|
| A method that starts to group the changes to revert/restore them in a single undo or redo |
Property:`historyManager.startGroupAction`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public nodes= [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
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();
}
|
Property:`historyManager.startGroupAction`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes= [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
let objects: (NodeModel | ConnectorModel)[] = [];
objects.push(this.diagram.nodes[0], this.diagram.nodes[1], this.diagram.connectors[0]);
this.diagram.historyManager.startGroupAction();
this.diagram.distribute('Top', objects);
this.diagram.distribute('Bottom', objects);
this.diagram.distribute('BottomToTop', objects);
this.diagram.historyManager.endGroupAction();
}
|
| Defines what should be happened while trying to revert a custom change |
Property:`historyManager.undo`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created">
</ej-diagram>
Script
public historyManager;
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
let node = args.object;
let currentState = node.employeeInfo;
node.employeeInfo = args.prevState;
args.prevState = currentState;
}
|
Property:`historyManager.undo`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
let node1: NodeModel = this.diagram.nodes[0];
node1['customName'] = 'customNode';
let entry = {
undoObject: node1
};
this.diagram.historyManager.push(entry);
this.diagram.historyManager.undo = function(args: HistoryEntry) {
args.redoObject = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = 'customNodeChange';
}
this.diagram.historyManager.redo = function(args: HistoryEntry) {
let current: NodeModel = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = args.redoObject['customName'];
args.redoObject = current;
}
}
|
| Gets the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified |
Property:`historyManager.undoStack`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.model.historyManager.undoStack();
}
|
Property:`historyManager.undoStack`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
this.diagram.historyManager.undoStack();
}
|
| Set the current entry object |
Property:`historyList.currentEntry`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.historyList.currentEntry();
}
|
Property:`historyManager.currentEntry`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
diagram.historyManager.currentEntry();
}
|
| set the history entry can be undo |
Property:`historyList.canUndo`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.historyList.canUndo();
}
|
Property:`historyManager.canUndo`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
diagram.historyManager.canUndo = true;
}
|
| Set the history entry can be redo |
Property:`historyList.canRedo`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.historyList.canRedo();
}
|
Property:`historyManager.canRedo`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
this.historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
public created() {
diagram.historyManager.canUndo = true;
}
|
| Used to decide to stored the changes to history |
Property:`historyManager.canLog`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ej-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
let diagram = $("#diagramContent").ejDiagram("instance");
diagram.model.historyManager.canLog();
}
|
Property:`historyManager.canLog`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" (created)="created" [nodes] ="nodes">
</ejs-diagram>
Script
public nodes = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
public created() {
diagram.historyManager.canLog = function (entry: HistoryEntry) {
entry.cancel = true;
return entry;
}
}
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the type of the rendering mode of label |
Property:`labelRenderingMode`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [labelRenderingMode]="svg" >
</ej-diagram>
|
Not applicable |
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Specifies the custom bounds to arrange/align the layout |
Property:`layout.bounds`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
this.layout = { bounds:{ x: 0, y: 0, width: 1000, height: 1000} };
|
Property:`layout.bounds`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = { bounds: new Rect(0, 0, 500, 500) };
|
| Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned |
Property:`layout.fixedNode`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
this.layout = { fixedNode: "node" };
|
Property:`layout.fixedNode`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = { fixedNode: 'node'};
|
| Customizes the orientation of trees/sub trees |
Property:`layout.getLayoutInfo`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; };
this.layout = { getLayoutInfo: getLayoutInfo };
}
|
Property:`layout.getLayoutInfo`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
getLayoutInfo: (node: Node, tree: TreeInfo) => {
if (!tree.hasSubTree) {
tree.orientation = 'vertical';
}
};
|
| Defines a method to customize the segments based on source and target nodes |
Property:`layout.getConnectorSegments`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; };
this.layout = { getConnectorSegments:getConnectorSegment };
}
|
Property:`layout.connectorSegments`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
connectorSegments: 'Default'
};
|
| Sets the space to be horizontally left between nodes |
Property:`layout.horizontalSpacing`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = {layout: { horizontalSpacing: 50 };
}
|
Property:`layout.horizontalSpacing`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
horizontalSpacing: 30
};
|
| Defines the space to be left between layout bounds and layout |
Property:`layout.margin`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { margin:{ left: 10, right: 10, top: 10, bottom: 10} };
}
|
Property:`layout.margin`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
margin: { left: 50, top: 50, right: 0, bottom: 0 }
};
|
| Defines how to horizontally align the layout within the layout bounds |
Property:`layout.horizontalAlignment`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { horizontalAlignment:HorizontalAlignment.Center };
}
|
Property:`layout.horizontalAlignment`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
horizontalAlignment: 'Center'
};
|
| Defines how to vertically align the layout within the layout bounds |
Property:`layout.verticalAlignment`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = {
verticalAlignment:VerticalAlignment.Center
};
}
|
Property:`layout.verticalAlignment`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
verticalAlignment: 'Center'
};
|
| Sets the orientation/direction to arrange the diagram elements |
Property:`layout.orientation`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { orientation: LayoutOrientations.LeftToRight };
}
|
Property:`layout.orientation`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
orientation: 'TopToBottom',}
};
|
| Sets the type of the layout based on which the elements will be arranged |
Property:`layout.type`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = {
type: LayoutTypes.HierarchicalTree }
};
|
Property:`layout.type`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
type: 'OrganizationalChart'
};
};
|
| Sets the space to be vertically left between nodes |
Property:`layout.verticalSpacing`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { verticalSpacing: 50 }
};
|
Property:`layout.verticalSpacing`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
verticalSpacing: 30
};
};
|
| Sets the value is used to define the root node of the layout |
Property:`layout.root`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { root: 'rootNode' }
};
|
Property:`layout.root`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
root: 'rootNode'
};
};
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.springFactor`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { springFactor: 0.442 }
};
|
Property:`layout.springFactor`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
};
};
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.maxIteration`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { maxIteration: 442 }
};
|
Property:`layout.maxIteration`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
};
};
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.springLength`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ej-diagram>
Script
public layout;
constructor() {
this.layout = { springLength: 80 }
};
|
Property:`layout.springLength`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
};
};
|
| Sets how to define the connection direction (first segment direction & last segment direction) | Not applicable |
Property:`layout.connectionDirection`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
connectionDirection:'Auto',
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
};
};
|
| Enables/Disables animation option when a node is expanded/collapsed | Not applicable |
Property:`layout.enableAnimation`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
enableAnimation: true,
orientation: 'TopToBottom',
type: 'OrganizationalChart', margin: { top: 20 },
horizontalSpacing: 30, verticalSpacing: 30,
};
};
|
| Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node | Not applicable |
Property:`layout.getBranch`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [layout]="layout" >
</ejs-diagram>
Script
public layout:object = {
type: 'MindMap',
};
};
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the current culture of diagram |
Property:`locale`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="100%" height="700px" [locale]="es-ES">
</ej-diagram>js-diagram>
|
Property:`locale`
</br>
</br>
HTML
<ejs-diagram id="diagramCore" width="1000" height="600" [locale]="en-US" >
</ejs-diagram>
|
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings">
</ejs-diagram>
Script
public pageSettings: PageSettingsModel = {
background: {
color: 'red',
source: 'Clayton.png',
scale: 'Meet',
align: 'XMidYMid'
}
}
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Array of JSON objects where each object represents a node |
Property:`nodes`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}];
}
|
Property:`annotations.content`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[ {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
}];
|
| Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity |
Property:`nodes.activity`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "bpmn", shape: BPMNShapes.Activity, activity: BPMNActivity.SubProcess, width:50, height:50
}];
}
|
Property:`nodes.shape.activity`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[ {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'Task'
},
},
}];
|
| To maintain additional information about nodes |
Property:`nodes.addInfo`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let addInfo = { TooltipData: "Shares the information with the customer" };
let node1 = { name: "node1", addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };
let node2 = { type: "swimlane", name: "swimlane", addInfo: addInfo };
this.nodes = [node1, node2];
}
|
Property:`nodes.addInfo`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[ {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
addInfo: {
"borderColor": "black", "borderWidth": '1px'
},
}];
|
| Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process |
Property:`nodes.annotation`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
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"
}
}];
}
|
Property:`nodes.shape.annotations`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[ {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
length: 150,
text: 'Left',
}]
}
}];
|
| Sets the angle between the BPMN shape and the annotation |
Property:`nodes.annotation.angle`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
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
}
}];
}
|
Property:`nodes.shape.annotations.angle`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
}]
}
}];
|
| Sets the direction of the text annotation |
Property:`nodes.annotation.direction`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
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"
}
}];
}
|
Not applicable |
| Sets the height of the text annotation |
Property:`nodes.annotation.height`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
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,
}
}];
}
|
Property:`nodes.shape.annotations.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
height: 50
}]
}
}];
|
| Sets the distance between the BPMN shape and the annotation |
Property:`nodes.annotation.length`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
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
}
}];
}
|
Property:`nodes.shape.annotations.length`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
length: 150,
text: 'Left',
}]
}
}];
|
| Defines the additional information about the flow object in a BPMN Process |
Property:`nodes.annotation.text`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape"
}
}];
}
|
Property:`nodes.shape.annotations.text`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
text: 'Left',
}]
}
}];
|
| Sets the width of the text annotation |
Property:`nodes.annotation.width`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
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
}
}];
}
|
Property:`nodes.shape.annotations.width`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[ {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
width: 45,
text: 'Left',
}]
}
}];
|
| Sets the id for the annotation | Not applicable |
Property:`nodes.shape.annotations.id`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
}]
}
}];
|
| Defines whether the group can be ungrouped or not |
Property:`nodes.canUngroup`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};
let group = { name :"group", children:[node1, node2], canUngroup: false };
this.nodes = [group];
}
|
Not applicable |
| Array of JSON objects where each object represents a child node/connector |
Property:`nodes.children`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};
let group = { name :"group", children:[node1, node2]};
this.nodes =[group];
}
|
Property:`nodes.children`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [ group ];
public node1: NodeModel = {
id: 'node1',
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
public node2: NodeModel = {
id: 'node2',
offsetX: 450,
offsetY: 450,
width: 100,
height: 100,
};
public group: NodeModel = {
id: 'group',children : ['node1', 'node2']
};
|
| Sets the type of UML classifier |
Property:`nodes.classifier`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "UmlClassifier", classifier: ClassifierShapes.Class
}];
}
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
}
|
Not applicable |
| Sets the name of class |
Property:`nodes.class.name`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
}
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.class.attributes`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
}
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.class.attributes.name`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
}
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.class.attributes.type`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
}
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.class.attributes.scope`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
}
|
Not applicable |
| Defines the collection of methods of a Class |
Property:`nodes.class.methods`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes =[{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
}
|
Not applicable |
| Sets the name of the method |
Property:`nodes.class.methods.name`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
}
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.class.methods.arguments`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
}
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class.methods.arguments.name`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
}
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.class.methods.arguments.type`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
}
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.class.methods.type`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes =[{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
}
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.class.methods.scope`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
}
|
Not applicable |
| Defines the state of the node is collapsed |
Property:`nodes.collapseIcon`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}]
|
Property:`nodes.collapseIcon`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}];
|
| Sets the border color for collapse icon of node |
Property:`nodes.collapseIcon.borderColor`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10,
borderColor: "red"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderColor: "red"
}
}]
|
Property:`nodes.collapseIcon.borderColor`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderColor: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderColor: 'red' }
}];
|
| Sets the border width for collapse icon of node |
Property:`nodes.collapseIcon.borderWidth`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10,
borderWidth: "2"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderWidth: "2"
}
}]
|
Property:`nodes.collapseIcon.borderWidth`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel [] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderWidth: '2' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderWidth: '2' }
}];
|
| Sets the fill color for collapse icon of node |
Property:`nodes.collapseIcon.fillColor`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10,
fillColor: "green"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
fillColor: "green"
}
}]
|
Property:`nodes.collapseIcon.fill`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", fill: 'red' }
}];
|
| Defines the height for collapse icon of node |
Property:`nodes.collapseIcon.height`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}]
|
Property:`nodes.collapseIcon.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}];
|
| Sets the horizontal alignment of the icon |
Property:`nodes.collapseIcon.horizontalAlignment`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10,
horizontalAlignment:HorizontalAlignment.Left
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
horizontalAlignment:HorizontalAlignment.Left
}
}]
|
Property:`nodes.collapseIcon.horizontalAlignment`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", horizontalAlignment:'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", horizontalAlignment:'Center' }
}]
|
| To set the margin for the collapse icon of node |
Property:`nodes.collapseIcon.margin`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10,
margin:{ left: 5 }
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
margin:{ left: 5 }
}
}]
|
Property:`nodes.collapseIcon.margin`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red',
margin:{ left: 5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
margin:{ left: 5 } }
}]
|
| Sets the fraction/ratio(relative to node) that defines the position of the icon |
Property:`nodes.collapseIcon.offset`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10,
offset:Point(0,0.5)
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
offset:Point(0,0.5)
}
}]
|
Property:`nodes.collapseIcon.offset`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown",
offset: { x: 0, y: 0.5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
offset: { x: 0, y: 0.5 } }
}];
|
| Defines the shape of the collapsed state of the node |
Property:`nodes.collapseIcon.shape`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}]
|
Property:`nodes.collapseIcon.shape`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}];
|
| Sets the vertical alignment of the icon |
Property:`nodes.collapseIcon.verticalAlignment `
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"ArrowUp",
width:10,
height:10,
verticalAlignment:VerticalAlignment.Top
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
verticalAlignment:VerticalAlignment.Top
}
}]
|
Property:`nodes.collapseIcon.verticalAlignment `
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", verticalAlignment: 'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", verticalAlignment: 'Center' }
}]
|
| Defines the custom content of the icon | Not applicable |
Property:`nodes.collapseIcon.content`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: {
height: 20,
width: 20,
shape: "Template",
content: '
|
| Defines the geometry of a path | Not applicable |
Property:`nodes.collapseIcon.pathData`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" },
collapseIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" }
}]
|
| Defines the corner radius of the icon border | Not applicable |
Property:`nodes.collapseIcon.cornerRadius`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", cornerRadius: 3},
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", cornerRadius: 3 }
}]
|
| Defines the space that the icon has to be moved from the icon border | Not applicable |
Property:`nodes.collapseIcon.padding`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", padding: { left: 50 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", padding: { left: 50 } }
}]
|
| Defines the distance to be left between a node and its connections(In coming and out going connections) |
Property:`nodes.connectorPadding`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
connectorPadding: 5
}]
|
Not applicable |
| Enables or disables the default behaviors of the node |
Property:`nodes.constraints`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public NodeConstraints = NodeConstraints;
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
constraints: NodeConstraints.Default & ~NodeConstraints.Select
}]
|
Property:`nodes.constraints`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
constraints: NodeConstraints.Default | NodeConstraints.Select
}]
|
| Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group |
Property:`nodes.container`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "stack"
},
offsetX: 200,
offsetY: 100
};
this.nodes = [group];
}
|
Not applicable |
| Defines the orientation of the container. Applicable, if the group is a container |
Property:`nodes.container.orientation`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "stack",
orientation: "horizontal"
},
offsetX: 200,
offsetY: 100
};
this.nodes = [group];
}
|
Not applicable |
| Sets the type of the container. Applicable if the group is a container. |
Property:`nodes.container.type`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: ContainerType.Stack
},
offsetX: 200,
offsetY: 100
}; this.nodes = [group];
}
|
Not applicable |
| Defines the corner radius of rectangular shapes |
Property:`nodes.cornerRadius`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
type:"basic",
shape:"rectangle",
cornerRadius:5
}]
|
Not applicable |
| This property allows you to customize nodes appearance using user-defined CSS |
Property:`nodes.cssClass`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
cssClass: "hoverNode"
}]
|
Not applicable |
| Defines the BPMN data object |
Property:`nodes.data.type`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "dataObject",
type: "bpmn",
shape: BPMNShapes.DataObject,
data: {
type: BPMNDataObjects.Input
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}]
|
Property:`nodes.shape.dataObject.type`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
|
| Defines whether the BPMN data object is a collection or not |
Property:`nodes.data.collection`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "dataObject",
type: "bpmn",
shape: BPMNShapes.DataObject,
data: {
type: BPMNDataObjects.Input,
collection: false
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}]
|
Property:`nodes.shape.dataObject.collection`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
|
| Defines an Enumeration in a UML Class Diagram |
Property:`nodes.enumeration`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
|
Not applicable |
| Sets the name of the Enumeration |
Property:`nodes.enumeration.name`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
|
Not applicable |
| Defines the collection of enumeration members |
Property:`nodes.enumeration.members`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
|
Not applicable |
| Sets the name of the enumeration member |
Property:`nodes.enumeration.members.name`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
|
Not applicable |
| Sets the type of the BPMN Events. Applicable, if the node is a BPMN event |
Property:`nodes.event`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "nodeEvent",
type: "bpmn",
shape: "event",
event: BPMNEvents.Intermediate,
width: 50,
height: 50
}]
|
Property:`nodes.shape.event`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
|
| Defines the type of the trigger |
Property:`nodes.event.trigger`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "nodeEvent",
type: "bpmn",
shape: BPMNShapes.Event,
trigger: BPMNTriggers.None,
width: 50,
height: 50
}]
|
Property:`nodes.shape.event.trigger`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
|
| Defines whether the node can be automatically arranged using layout or not |
Property:`nodes.excludeFromLayout`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
public layout;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
excludeFromLayout: true
};
let node2 = {
name: "node2",
width: 50,
height: 50
};
let node3 = {
name: "node3",
width: 50,
height: 50
};
this.nodes = [node1, node2, node3];
this.layout= {
type: "HierarchicalTree"
}
}
|
Property:`nodes.excludeFromLayout`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes" [layout]="layout">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
excludeFromLayout: true,
},
{ id: 'node1', width: 70, height: 70, annotations: [{ content: 'node1' }] },
{ id: 'node2', width: 70, height: 70, annotations: [{ content: 'node2' }] };
]
public layout:object = {
type: 'RadialTree',
}
|
| Defines the fill color of the node |
Property:`nodes.fillColor`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
fillColor:"red"};
this.nodes = [node1];
}
|
Property:`nodes.style.fill`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: { fill: 'red' }
},
]
|
| Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway |
Property:`nodes.gateway`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "gateway" ,
gateway: BPMNGateways.Exclusive
}];
}
|
Property:`nodes.shape.gateway`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' }
}
}]
|
| Paints the node with linear color transitions |
Property:`nodes.gradient.type`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let gradient = {
LinearGradient: {
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0 }, { color: "red", offset: 50 }]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient: gradient
};
this.nodes = [node1];
}
|
Property:`nodes.style.gradient.type`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}];
public stopsCol: StopModel[] = [];
public stops1: StopModel = {
color: 'white',
offset: 0
};
stopsCol.push(stops1);
public stops2: StopModel = {
color: 'red',
offset: 50
};
stopsCol.push(stops2);
public gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopsCol,
type: 'Linear'
};
|
| Defines the x1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x1`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let gradient = {
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
this.nodes = [node1];
}
|
Property:`nodes.style.gradient.LinearGradient.x1`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}]
public stopsCol: StopModel[] = [];
public stops1: StopModel = {
color: 'white',
offset: 0
};
stopsCol.push(stops1);
public stops2: StopModel = {
color: 'red',
offset: 50
};
stopsCol.push(stops2);
public gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopsCol,
type: 'Linear'
};
|
| Defines the x2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x2`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
this.nodes = [node1];
}
|
Property:`nodes.style.gradient.LinearGradient.x2`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}]
public stopsCol: StopModel[] = [];
public stops1: StopModel = {
color: 'white',
offset: 0
};
stopsCol.push(stops1);
public stops2: StopModel = {
color: 'red',
offset: 50
};
stopsCol.push(stops2);
public gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopsCol,
type: 'Linear'
};
|
| Defines the y1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y1`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
this.nodes = [node1];
}
|
Property:`nodes.style.gradient.LinearGradient.y1`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}]
public stopsCol: StopModel[] = [];
public stops1: StopModel = {
color: 'white',
offset: 0
};
stopsCol.push(stops1);
public stops2: StopModel = {
color: 'red',
offset: 50
};
stopsCol.push(stops2);
public gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopsCol,
type: 'Linear'
};
|
| Defines the y2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y2`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
this.nodes = [node1];
}
|
Property:`nodes.style.gradient.LinearGradient.y2`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}]
public stopsCol: StopModel[] = [];
public stops1: StopModel = {
color: 'white',
offset: 0
};
stopsCol.push(stops1);
public stops2: StopModel = {
color: 'red',
offset: 50
};
stopsCol.push(stops2);
public gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopsCol,
type: 'Linear'
};
|
| Defines the type of gradient |
Property:`nodes.gradient.RadialGradient.type`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
this.nodes = [node1];
}
|
Property:`nodes.style.gradient.type`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Defines the position of the outermost circle |
Property:`nodes.gradient.RadialGradient.cx`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
this.nodes = [node1];
}
|
Property:`nodes.style.RadialGradient.cx`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Defines the outer most circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.cy`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
this.nodes = [node1];
}
|
Property:`nodes.style.RadialGradient.cy`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Defines the innermost circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.fx`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
}];
}
|
Property:`nodes.style.RadialGradient.fx`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Defines the innermost circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.fy`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
}];
}
|
Property:`nodes.style.RadialGradient.fy`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Defines the different colors and the region of color transitions |
Property:`nodes.gradient.RadialGradient.stops`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [ {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
}];
}
|
Property:`nodes.style.RadialGradient.stops`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Sets the color to be filled over the specified region |
Property:`nodes.gradient.stops.color`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
}];
}
|
Property:`nodes.style.gradient.stops.color`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Sets the position where the previous color transition ends and a new color transition starts |
Property:`nodes.gradient.stops.offset`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
}];
}
|
Property:`nodes.style.gradient.stops.offset`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Describes the transparency level of the region |
Property:`nodes.gradient.stops.opacity`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100,
opacity: 0.5
}]
}
}
}];
}
|
Property:`nodes.style.gradient.stops.opacity`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 , opacity: 0.5}];
public gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
public nodes: NodeModel[] = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}]
|
| Defines the header of a swimlane/lane |
Property:`nodes.header`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
}];
}
|
Not applicable |
| Defines the height of the node |
Property:`nodes.height`
</br>
</br>
HTML
<ej-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ej-diagram>
Script
public nodes: NodeModel[] = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
}]
|
Property:`nodes.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
|
| Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container |
Property:`nodes.horizontalAlign`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50
};
let node2 = {
name: "node2",
width: 50,
height: 50,
horizontalAlign: HorizontalAlignment.Right
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "canvas"
},
offsetX: 200,
offsetY: 100,
minWidth: 200,
minHeight: 200,
fillColor: "red"
};
this.nodes = [group];
}
|
Not applicable |
| A read only collection of the incoming connectors/edges of the node |
Property:`nodes.inEdges`
</br>
</br>
let node = diagram.selectionList[0];
for(let i = 0; i < node.inEdges.length; i++){
console.log(node.inEdges[i]);
};
|
Property:`nodes.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
|
| Defines an interface in a UML interface Diagram |
Property:`nodes.interface`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "UmlClassifier", classifier: ClassifierShapes.interface
}];
}
|
Not applicable |
| Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface |
Property:`nodes.interface.name`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
}
}];
}
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.interface.attributes`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
}
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.interface.attributes.name`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes =[{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
}
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.interface.attributes.type`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
}
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.interface.attributes.scope`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
}
|
Not applicable |
| Defines the collection of methods of a interface |
Property:`nodes.interface.methods`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
}
|
Not applicable |
| Sets the name of the method |
Property:`nodes.interface.methods.name`
</br>
</br>HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
}
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.interface.methods.arguments`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
}
|
Not applicable |
| Defines the name, attributes and methods of a interface. Applicable, if the node is a interface |
Property:`nodes.interface.methods.arguments.name`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
}
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.interface.methods.arguments.type`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
}
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.interface.methods.type`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
}
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.interface.methods.scope`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "UmlClassifier",
classifier: ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
}
|
Not applicable |
| Defines whether the sub tree of the node is expanded or collapsed |
Property:`nodes.isExpanded`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
isExpanded: false
};
let node2 = {
name: "node2",
width: 50,
height: 50
};
let connector = {
sourceNode: "node1",
targetNode: "node2",
name: "connector"
};
this.nodes = [node1, node2];
}
|
Property:`nodes.isExpanded`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes" [connectors] = "connectors" [layout]= "layout">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
id: 'node1',
isExpanded: true,
},
{
id: 'node2',
width: 50,
height: 50
}]
public connectors:ConnectorMode = [{
sourceNode: 'node1',
targetNode: 'node2',
id: 'connector'
}]
public layout: object = {
type: "HierarchicalTree"
}
|
| Sets the node as a swimlane |
Property:`nodes.isSwimlane`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
isSwimlane: true,
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
}];
}
|
Not applicable |
| A collection of objects where each object represents a label |
Property:`nodes.labels`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
fontColor: "Red"
}
]
}];
}
|
Property:`nodes.annotations`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation'
}]
}]
|
| An array of objects where each object represents a lane. Applicable, if the node is a swimlane |
Property:`nodes.lanes`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100
}
]
}];
}
|
Not applicable |
| This property allows you to customize lanes appearance using user-defined CSS |
Property:`nodes.lanes.cssClass`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
cssClass:"hoverLane",
addInfo: addInfo,
fillColor:"blue"
}
]
}];
}
|
Not applicable |
| Defines the header of the lane |
Property:`nodes.lanes.header`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [ {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
header: {
fillColor:"blue",
fontColor:"white",
text:"Function 1"
}
}
]
}];
}
|
Not applicable |
| Defines the width of lane |
Property:`nodes.lanes.width`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
zOrder:10
},
{
name: "lane2",
width: 100
}
]
}];
}
|
Not applicable |
| An array of objects where each object represents a child node of the lane |
Property:`nodes.lanes.children`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
children:[{name:"process", width: 50, height: 50 }]
}
]
}];
}
|
Not applicable |
| Defines the object as a lane |
Property:`nodes.lanes.isLane`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
isLane:true,
orientation:"vertical"
},
{
name: "lane2",
width: 100
}
]
}];
}
|
Not applicable |
| Defines the minimum space to be left between the bottom of parent bounds and the node |
Property:`nodes.margin`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
children: [{
name: "process",
width: 50,
height: 50,
marginBottom: 50,
marginLeft: 10,
marginRight: 10,
marginTop: 10
}]
}]
}];
}
|
Property:`nodes.margin`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
margin : { left: 15, right: 15, top: 15, bottom: 15 }
}]
|
| Defines the maximum height limit of the node |
Property:`nodes.maxHeight`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}];
}
|
Property:`nodes.maxHeight`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] =[{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}]
|
| Sets the unique identifier of the node |
Property:`nodes.name`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
}];
}
|
Property:`nodes.id`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
|
| Defines the opaque of the node |
Property:`nodes.opacity`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
this.nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
opacity: 0.5,
rotateAngle: 70
}];
}
|
Property:`nodes.style.opacity`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [nodes]="nodes">
</ejs-diagram>
Script
public nodes: NodeModel[] = [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
rotateAngle: 70,
style: {
opacity: 0.5
}
}]
|
| 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 |
Property:`nodes.paddingBottom`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [nodes]="nodes" >
</ej-diagram>
Script
public nodes;
constructor() {
let node1 = { name: "node1", width: 50, height:50};
let node2 = { name: "node2", width: 50, height:50, verticalAlign: "bottom"};
let group = { name :"group", children:[ node1, node2 ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingBottom:10, paddingLeft:10, paddingRight:10, paddingTop:10
};
this.nodes = [group];
}
|
Not applicable |
| Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” |
Property:`pageSettings.scrollableArea`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [pageSettings]="pageSettings" >
</ej-diagram>
Script
public pageSettings;
constructor() {
this.pageSettings = {
scrollableArea: { x:0, y:0, width:1000, height:1000}
};
}
|
Property:`scrollSettings.scrollableArea`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [scrollSettings]="scrollSettings">
</ejs-diagram>
Script
public scrollSettings: ScrollSettingsModel = {
scrollableArea: new Rect(0, 0, 300, 300),
}
|
| Defines the draggable region of diagram elements |
Property:`pageSettings.boundaryConstraints`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [pageSettings]="pageSettings" >
</ej-diagram>
Script
public pageSettings;
constructor() {
this.pageSettings = {
boundaryConstraints: BoundaryConstraints.Diagram
};
}
|
Property:`pageSettings.boundaryConstraints`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [pageSettings]="pageSettings">
</ejs-diagram>
Script
public pageSettings: PageSettingsModel = {
width: 800, height: 600, boundaryConstraints: 'Diagram'
}
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the size and preview size of the node to add that to symbol palette |
Property:`nodes.paletteItem`
</br>
</br>
HTML
<ej-symbolpalette id="symbolpalette" [palettes]="palettes" width="400px" height="700px" >
</ej-symbolpalette>
Script
public palettes= [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100
}
}]
}]
|
Property:`palettes`
</br>
</br>
HTML
<ejs-symbolpalette id="symbolpalette" [expandMode]=true [palettes]='palettes' width="100%" height="100%" [symbolHeight]=60 [symbolWidth]=60
[symbolMargin]='symbolMargin' [getSymbolInfo]='getSymbolInfo'>
</ejs-symbolpalette>
Script
private FlowShapes: NodeModel[] = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
public palettes:PaletteModel[] = [{
id: 'flow',
expanded: true,
symbols: this.FlowShapes,
title: 'Flow Shapes'
},]
public symbolMargin= {
left: 12,
right: 12,
top: 12,
bottom: 12
}
public getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
|
| Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not |
Property:`nodes.paletteItem.enableScale`
</br>
</br>
HTML
<ej-symbolpalette id="symbolpalette" [palettes]="palettes" width="400px" height="700px" >
</ej-symbolpalette>
Script
public palettes= [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100,
enableScale:false
}
}]
}]
|
Property:`palettes.fit`
</br>
</br>
HTML
<ejs-symbolpalette id="symbolpalette" [expandMode]=true [palettes]='palettes' width="100%" height="100%" [symbolHeight]=60 [symbolWidth]=60
[symbolMargin]='symbolMargin'>
</ejs-symbolpalette>
Script
private FlowShapes: NodeModel[] = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
public palettes:PaletteModel[] = [{
id: 'flow',
expanded: true,
symbols: this.FlowShapes,
title: 'Flow Shapes'
},]
public symbolMargin= {
left: 12,
right: 12,
top: 12,
bottom: 12
}
|
| To display a name for nodes in the symbol palette |
Property:`nodes.paletteItem.label`
</br>
</br>
HTML
<ej-symbolpalette id="symbolpalette" [palettes]="palettes" width="400px" height="700px" >
</ej-symbolpalette>
Script
public palettes = [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100,
label: "label",
margin: { left: 4, right: 4, top: 4, bottom: 4 }
}
}]
}]
|
Property:`palettes.title`
</br>
</br>
HTML
<ejs-symbolpalette id="symbolpalette" [expandMode]=true [palettes]='palettes' width="100%" height="100%" [symbolHeight]=60 [symbolWidth]=60
[symbolMargin]='symbolMargin' [getSymbolInfo]='getSymbolInfo'>
</ejs-symbolpalette>
Script
private FlowShapes: NodeModel[] = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
public palettes:PaletteModel[] = [{
id: 'flow',
expanded: true,
symbols: this.FlowShapes,
title: 'Flow Shapes'
},]
public symbolMargin= {
left: 12,
right: 12,
top: 12,
bottom: 12
}
public getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| A read only collection of the selected items |
Property:`selectedItems.children`
</br>
</br>
@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
}
|
Not applicable |
| Controls the visibility of selector |
Property:`selectedItems.constraints`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
this.selectedItems = { constraints: SelectorConstraints.UserHandles }
}
|
Property:`selectedItems.constraints`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public selectedItems = { constraints: SelectorConstraints.UserHandle }
|
| Defines a method that dynamically enables/ disables the interaction with multiple selection |
Property:`selectedItems.getConstraints`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
this.selectedItems = {
getConstraints: function() {
return NodeConstraints.Drag |
NodeConstraints.Resize
}
}
|
Not applicable |
| Sets the height of the selected items |
Property:`selectedItems.height`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
this.selectedItems = {
height:100, width: 100,
offsetX:100, offsetY: 100,
rotateAngle: 90,
}
}
|
Property:`selectedItems.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public selectedItems = {
height:100, width: 100,
offsetX:100, offsetY: 100,
rotateAngle: 90 },
}
|
| Sets the angle to rotate the selected items |
Property:`selectedItems.tooltip`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
this.selectedItems = {
tooltip : { alignment:{ vertical:"top" } }
}
}
|
Not applicable |
| A collection of frequently used commands that will be added around the selector |
Property:`selectedItems.userHandles`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
this.selectedItems = {
userHandles:userHandle
}
}
|
Property:`selectedItems.userHandles`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public handle: UserHandleModel[] = [{
name: 'handle1', pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z'
, visible: true, backgroundColor: 'black', offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 },
pathColor: 'white'
}];
public selectedItems = {
constraints: SelectorConstraints.UserHandle,
userHandles: this.handle
}
|
| Sets the horizontal alignment of the user handle |
Property:`selectedItems.userHandles.horizontalAlignment`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
let userHandle = [];
let cloneHandle = UserHandle();
cloneHandle = {name : "cloneHandle",
pathData : "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z",
visible : "true",
backgroundColor : "#4D4D4D",
offset : point(0, 0),
position :" middleLeft",
margin : { left: 5 },
pathColor : "white",
horizontalAlignment : HorizontalAlignment.Right,
verticalAlignment : VerticalAlignment.Top,
borderColor : "red",
borderWidth : 3,
size : 20};
userHandle.push(cloneHandle);
this.selectedItems ={
userHandles:userHandle
}
}
|
Property:`selectedItems.userHandles`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public handle: UserHandleModel[] = [{
name: 'handle1',
pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
visible: true,
backgroundColor: 'black',
offset: 0,
side: 'Bottom',
margin: { top: 0, bottom: 0, left: 0, right: 0 },
pathColor: 'white',
horizontalAlignment: 'Center',
verticalAlignment: 'Center',
borderColor: 'red',
borderWidth: 3,
size: 30
}];
public selectedItems = {
constraints: SelectorConstraints.UserHandle,
userHandles: this.handle
}
|
| Defines the interactive behaviors of the user handle |
Property:`selectedItems.userHandles.tool`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
let CloneTool = (function(base) {
extend(CloneTool, base);
function CloneTool(name) {
base.call(this, name);
this.singleAction = true;
this.clonedNodes = [];
this.cursor = "pointer";
}
CloneTool.prototype.mouseup = function(event) {
this.diagram.copy();
this.diagram.paste();
}
}
return CloneTool;
});
(ToolBase);
let userHandle = [];
let cloneHandle = UserHandle();
cloneHandle.name = "cloneHandle";
cloneHandle.pathData = "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.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.tool = new CloneTool(cloneHandle.name);;
userHandle.push(cloneHandle);
this.selectedItems = {
userHandles: userHandle
}
}
|
Not applicable |
| Defines whether the user handle should be added, when more than one element is selected |
Property:`selectedItems.userHandles.enableMultiSelection`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public selectedItems;
constructor() {
let userHandle = [];
let cloneHandle = UserHandle();
cloneHandle.name = "cloneHandle";
cloneHandle.enableMultiSelection = true;
userHandle.push(cloneHandle);
this.selectedItems = {
userHandles: userHandle
}
}
|
Not applicable |
| Sets the horizontal alignment of the user handle | Not applicable |
Property:`selectedItems.userHandles.displacement`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [selectedItems]="selectedItems">
</ejs-diagram>
Script
public handle: UserHandleModel[] = [{
name: 'handle1',
pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
displacement: 30
}];
public selectedItems = {
constraints: SelectorConstraints.UserHandle,
userHandles: this.handle
}
|
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines whether the default diagram properties can be serialized or not |
Property:`serializationSettings.preventDefaultValues`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [serializationSettings]="serializationSettings" >
</ej-diagram>
Script
public serializationSettings;
constructor() {
this.serializationSettings = { serializationSettings:{ preventDefaultValues: true } };
}
|
Not applicable |
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| An object that defines the description, appearance and alignments of tooltip |
Property:`tooltip`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public nodes=[{
name: "Elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
public tooltip= {
templateId: "mouseOverTooltip",
relativeMode: RelativeMode.Mouse,
}
|
Property:`tooltip`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
public tooltip = {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
}
|
| Defines the alignment of tooltip |
Property:`tooltip.alignment`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public nodes=[{
name: "Elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
public tooltip= {
templateId: "mouseOverTooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: RelativeMode.Mouse,
}
|
Not applicable |
| Sets the margin of the tooltip |
Property:`tooltip.margin`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public nodes=[{
name: "Elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
public tooltip= {
templateId: "mouseOverTooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: RelativeMode.Mouse,
margin : { left: 5, right: 5, top: 5, bottom: 5 }
}
|
Not applicable |
| Sets the svg/html template to be bound with tooltip |
Property:`tooltip.templateId`
</br>
</br>
HTML
<ej-diagram id="diagramCore" width="1000" height="600" [selectedItems]="selectedItems" >
</ej-diagram>
Script
public nodes=[{
name: "Elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
public tooltip= {
templateId: "mouseOverTooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
|
Property:`tooltip.content`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
public tooltip = {
content: 'Diagram',
relativeMode: 'Object',
}
}
|
| Defines if the Tooltip has tip pointer or not | Not applicable |
Property:`tooltip.showTipPointer`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
public tooltip = {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
showTipPointer: true,
}
}
|
| Defines the position of the Tooltip | Not applicable |
Property:`tooltip.position`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
public tooltip = {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
}
}
|
| Allows to set the same or different animation option for the Tooltip, when it is opened or closed | Not applicable |
Property:`tooltip.animation`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
public tooltip = {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
}
}
|
| Sets the width of the tooltip | Not applicable |
Property:`tooltip.width`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
public tooltip = {
width: 100,
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
}
}
|
| Sets the height of the Tooltip | Not applicable |
Property:`tooltip.height`
</br>
</br>
HTML
<ejs-diagram #diagram id="diagram" width="850px" height="700px" [constraints]="constraints" [tooltip]="tooltip">
</ejs-diagram>
Script
public constraints = DiagramConstraints.Default | DiagramConstraints.Tooltip,
public tooltip = {
height: 100,
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
}
}
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Set constraints to node</br> The diagram.setConstraints(node) property is not available in the EJ2 Diagram |
Property:`setConstraints`
</br>
</br>
HTML
<ej-diagram id="diagram" width="1000" height="600" [nodes]="nodes" [created]="created">
</ej-diagram>
Script
public nodes=[{
name: "Elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
created(){
for (var i = 0; i < diagram.nodes.length; i++) {
var node = diagram.nodes[i];
this.diagram.setConstraints(node);
}
}
|
Property:`setConstraints`
Not applicable</br>
In EJ2, constraints are set directly on each node
</br>
</br>
HTML
<ej-diagram id="diagram" width="1000" height="600" [nodes]="nodes"></ej-diagram>
Script
public nodes=[{
name: "Elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
constraints: NodeConstraints.Default & ~NodeConstraints.Rotate
}]
|