Ej1 api migration in Angular Diagram component

19 Sep 202224 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

</tr>
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" > </ej-diagram> Script public addInfo; constructor() { var addInfo = { Description: "Bidirectional Flow" }; } Property:`connectors.addInfo` </br> </br> HTML <ejs-diagram #diagram id="diagram" width="850px" height="700px" > </ejs-diagram> 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

</tr> </table> ## EnableRtl
Behavior API in Essential JS 1 API in Essential JS 2
Enable or disable persisting component's state between page reloads/b></td> Not applicable Property:`enablePersistence` </br> </br> HTML <ej-diagram id="diagramCore" width="1000" height="600" [enablePersistence]="true"> </ej-diagram>
</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>
</tr> </table> ## Height
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>
## HistoryManager </tr> </td>
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:`historyList.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.historyList.startGroupAction(); this.diagram.distribute('Top', objects); this.diagram.distribute('Bottom', objects); this.diagram.distribute('BottomToTop', objects); this.diagram.historyList.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:`historyList.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.historyList.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:`historyList.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.historyList.push(entry); this.diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = 'customNodeChange'; } this.diagram.historyList.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:`historyList.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.historyList.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(); } Not applicable
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:`historyList.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.historyList.startGroupAction(); this.diagram.distribute('Top', objects); this.diagram.distribute('Bottom', objects); this.diagram.distribute('BottomToTop', objects); this.diagram.historyList.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:`historyList.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.historyList.push(entry); this.diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = 'customNodeChange'; } this.diagram.historyList.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:`historyList.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.historyList.undoStack(); }
Set the current entry object Not applicable Property:`historyList.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.historyList.currentEntry(); }
set the history entry can be undo Not applicable Property:`historyList.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.historyList.canUndo = true; }
Set the history entry can be redo Not applicable Property:`historyList.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.historyList.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:`historyList.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.historyList.canLog = function (entry: HistoryEntry) { entry.cancel = true; return entry; } }
## LabelRenderingMode
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
## Layout
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', }; };
## Locale
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>
## Nodes </tr> Property:`pageSettings.background.color` </br> </br> HTML <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: '' + '' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp" } }]
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' }
## SymbolPalette
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 }; }
## SelectedItems
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 }
## SerializationSettings
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
## Tooltip
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 } } } }