This article describes the API migration process of Diagram component from Essential JS 1 to Essential JS 2.
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”> |
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”> Script
|
Property:`background.align`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [pageSettings]=“pageSettings” >
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”> Script
|
Property:`background.scale`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [pageSettings]=“pageSettings” >
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”> Script
|
Property:`background.source`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [pageSettings]=“pageSettings” >
Script
public pageSettings: PageSettingsModel; ngOnInit(): void { this.pageSettings = { background: { source: ”https://www.w3schools.com/images/w3schools_green.jpg”, }, } } |
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” > |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
commands |
Property:`commandManager.commands`
HTML
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`
HTML
Script
|
The command is executable at the moment or not. |
Property:`commandManager.commands.canExecute`
HTML
Script
|
Property:`commandManager.commands.canExecute`
HTML
Script
|
Defines what to be executed when the key combination is recognized |
Property:`commandManager.commands.execute`
HTML
Script
|
Property:`commandManager.commands.execute`
HTML
Script
|
Defines a combination of keys and key modifiers, on recognition of which the command will be executed |
Property:`commandManager.commands.gesture`
HTML
Script
|
Property:`commandManager.commands.gesture`
HTML
Script
|
Sets the key value, on recognition of which the command will be executed |
Property:`commandManager.commands.gesture.key`
HTML
Script
|
Property:`commandManager.commands.gesture.key`
HTML
Script
|
Sets a combination of key modifiers, on recognition of which the command will be executed. |
Property:`commandManager.commands.gesture.keyModifiers`
HTML
Script
|
Property:`commandManager.commands.gesture.keyModifiers`
HTML
Script
|
Defines any additional parameters that are required at runtime |
Property:`commandManager.commands.parameter`
HTML
Script
|
Property:`commandManager.commands.parameter`
HTML
Script
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
addInfo |
Property:`connectors.addInfo`
HTML
Script
|
Property:`connectors.addInfo`
HTML
Script
|
Defines the bridgeSpace of connector |
Property:`connectors.bridgeSpace`
HTML
Script
|
Property:`connectors.bridgeSpace`
HTML
Script
|
Enables or disables the behaviors of connectors |
Property:`connectors.constraints`
HTML
Script
|
Property:`connectors.constraints`
HTML
Script
|
Defines the radius of the rounded corner |
Property:`connectors.cornerRadius`
HTML
Script
|
Property:`connectors.cornerRadius`
HTML
Script
|
cssClass |
Property:`connectors.cssClass`
HTML
Script
|
Not applicable |
Alignment |
Property:`connectors.horizontalAlign`
HTML
Script
|
Not applicable |
A collection of JSON objects where each object represents a label |
Property:`connectors.labels`
HTML
Script
|
Property:`connectors.annotations`
HTML
Script
|
stroke color of the connector |
Property:`connectors.lineColor`
HTML
Script
|
Property:`connectors.style.strokeColor`
HTML
Script
|
Sets the pattern of dashes and gaps used to stroke the path of the connector |
Property:`connectors.lineDashArray`
HTML
Script
|
Property:`connectors.style.strokeDashArray`
HTML
Script
|
Sets the width of the line |
Property:`connectors.lineWidth`
HTML
Script
|
Property:`connectors.style.strokeWidth`
HTML
Script
|
Defines the padding value to ease the interaction with connectors |
Property:`connectors.lineHitPadding`
HTML
Script
|
Property:`connectors.hitPadding`
HTML
Script
|
Defines the minimum space to be left between the bottom of parent bounds and the connector |
Property:`connectors.marginBottom`
HTML
Script
|
Property:`connectors.margin.bottom`
HTML
Script
|
Defines the minimum space to be left between the top of parent bounds and the connector |
Property:`connectors.marginTop`
HTML
Script
|
Property:`connectors.margin.top`
HTML
Script
|
Defines the minimum space to be left between the left of parent bounds and the connector |
Property:`connectors.marginLeft`
HTML
Script
|
Property:`connectors.margin.left`
HTML
Script
|
Defines the minimum space to be left between the right of parent bounds and the connector |
Property:`connectors.marginRight`
HTML
Script
|
Property:`connectors.margin.right`
HTML
Script
|
Sets a unique name for the connector |
Property:`connectors.name`
HTML
Script
|
Property:`connectors.id`
HTML
Script
|
Defines the transparency of the connector |
Property:`connectors.opacity`
HTML
Script
|
Property:`connectors.style.opacity`
HTML
Script
|
Sets the parent name of the connector. |
Property:`connectors.parent`
HTML
Script
| Not applicable |
An array of JSON objects where each object represents a segment |
Property:`connectors.segments`
HTML
Script
|
Property:`connectors.segments`
HTML
Script
|
Sets the direction of orthogonal segment |
Property:`connectors.segments.direction`
HTML
Script
|
Property:`connectors.segments.direction`
HTML
Script
|
Describes the length of orthogonal segment |
Property:`connectors.segments.length`
HTML
Script
|
Property:`connectors.segments.length`
HTML
Script
|
Describes the end point of bezier/straight segment |
Property:`connectors.segments.point`
HTML
Script
|
Property:`connectors.segments.point`
HTML
Script
|
Defines the first control point of the bezier segment |
Property:`connectors.segments.point1`
HTML
Script
|
Property:`connectors.segments.point1`
HTML
Script
|
Defines the second control point of bezier segment |
Property:`connectors.segments.point2`
HTML
Script
|
Property:`connectors.segments.point2`
HTML
Script
|
Sets the type of the segment |
Property:`connectors.segments.type`
HTML
Script
|
Property:`connectors.segments.type`
HTML
Script
|
Describes the length and angle between the first control point and the start point of bezier segment |
Property:`connectors.segments.vector1`
HTML
Script
|
Property:`connectors.segments.vector1`
HTML
Script
|
Describes the length and angle between the second control point and end point of bezier segment |
Property:`connectors.segments.vector2`
HTML
Script
|
Property:`connectors.segments.vector2`
HTML
Script
|
Sets the type of the connector |
Property:`connectors.shape.type`
HTML
Script
|
Property:`connectors.shape.type`
HTML
Script
|
Defines the source decorator of the connector |
Property:`connectors.sourceDecorator`
HTML
Script
|
Property:`connectors.sourceDecorator`
HTML
Script
|
Sets the border color of the source decorator |
Property:`connectors.sourceDecorator.borderColor`
HTML
Script
|
Property:`connectors.sourceDecorator.style.strokeColor`
HTML
Script
|
Sets the border width of the decorator |
Property:`connectors.sourceDecorator.borderWidth`
HTML
Script
|
Property:`connectors.sourceDecorator.style.strokeWidth: 5`
HTML
Script
|
Defines to customize sourceDecorator appearance using user-defined CSS |
Property:`connectors.sourceDecorator.cssClass`
HTML
Script
| Not applicable |
Sets the fill color of the source decorator |
Property:`connectors.sourceDecorator.fillColor`
HTML
Script
|
Property:`connectors.sourceDecorator.style.fill`
HTML
Script
|
Sets the height of the source decorator |
Property:`connectors.sourceDecorator.height`
HTML
Script
|
Property:`connectors.sourceDecorator.height`
HTML
Script
|
Defines the custom shape of the source decorator |
Property:`connectors.sourceDecorator.pathData`
HTML
Script
|
Property:`connectors.sourceDecorator.pathData`
HTML
Script
|
Defines the shape of the source decorator. |
Property:`connectors.sourceDecorator.shape`
HTML
Script
|
Property:`connectors.sourceDecorator.shape`
HTML
Script
|
Defines the width of the source decorator |
Property:`connectors.sourceDecorator.width`
HTML
Script
|
Property:`connectors.sourceDecorator.width`
HTML
Script
|
Sets the source node of the connector |
Property:`connectors.sourceNode`
HTML
Script
|
Property:`connectors.sourceID`
HTML
Script
|
Defines the space to be left between the source node and the source point of a connector |
Property:`connectors.sourcePadding`
HTML
Script
|
Property:`connectors.hitPadding`
HTML
Script
|
Describes the start point of the connector |
Property:`connectors.sourcePoint`
HTML
Script
|
Property:`connectors.sourcePoint`
HTML
Script
|
Sets the source port of the connector |
Property:`connectors.sourcePort`
HTML
Script
|
Property:`connectors.sourcePortID`
HTML
Script
|
Defines the target decorator of the connector |
Property:`connectors.targetDecorator`
HTML
Script
|
Property:`connectors.targetDecorator`
HTML
Script
|
Sets the border color of the target decorator |
Property:`connectors.targetDecorator.borderColor`
HTML
Script
|
Property:`connectors.targetDecorator.style.strokeColor`
HTML
Script
|
Sets the border width of the decorator |
Property:`connectors.targetDecorator.borderWidth`
HTML
Script
|
Property:`connectors.targetDecorator.style.strokeWidth: 5`
HTML
Script
|
Defines to customize target Decorator appearance using user-defined CSS |
Property:`connectors.targetDecorator.cssClass`
HTML
Script
| Not applicable |
Sets the fill color of the target decorator |
Property:`connectors.targetDecorator.fillColor`
HTML
Script
|
Property:`connectors.targetDecorator.style.fill`
HTML
Script
|
Sets the height of the target decorator |
Property:`connectors.targetDecorator.height`
HTML
Script
|
Property:`connectors.targetDecorator.height`
HTML
Script
|
Defines the custom shape of the target decorator |
Property:`connectors.targetDecorator.pathData`
HTML
Script
|
Property:`connectors.targetDecorator.pathData`
HTML
Script
|
Defines the shape of the target decorator. |
Property:`connectors.targetDecorator.shape`
HTML
Script
|
Property:`connectors.targetDecorator.shape`
HTML
Script
|
Defines the width of the target decorator |
Property:`connectors.targetDecorator.width`
HTML
Script
|
Property:`connectors.targetDecorator.width`
HTML
Script
|
Sets the target node of the connector |
Property:`connectors.targetNode`
HTML
Script
|
Property:`connectors.targetID`
HTML
Script
|
Defines the space to be left between the target node and the target point of a connector |
Property:`connectors.targetPadding`
HTML
Script
|
Property:`connectors.hitPadding`
HTML
Script
|
Describes the start point of the connector |
Property:`connectors.targetPoint`
HTML
Script
|
Property:`connectors.targetPoint`
HTML
Script
|
Sets the target port of the connector |
Property:`connectors.targetPort`
HTML
Script
|
Property:`connectors.targetPortID`
HTML
Script
|
Defines the tooltip that should be shown when the mouse hovers over connector |
Property:`connectors.tooltip`
HTML
Script
|
Property:`connectors.tooltip`
HTML
Script
|
Sets the vertical alignment of connector |
Property:`connectors.verticalAlign`
HTML
Script
| Not applicable |
Enables or disables the visibility of connector |
Property:`connectors.visible`
HTML
Script
|
Property:`connectors.visible`
HTML
Script
|
Sets the z-index of the connector |
Property:`connectors.zOrder`
HTML
Script
|
Property:`connectors.zIndex`
HTML
Script
|
Binds the custom JSON data with connector properties |
Property:`connectors.connectorTemplate`
HTML
Script
| Not applicable |
Enables/Disables the default behaviors of the diagram |
Property:`constraints`
HTML
Script
|
Property:`constraints`
HTML
Script
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Defines the collection of context menu items |
Property:`contextMenu.items`
HTML
Script
|
Property:`contextMenuSettings.items`
HTML
Script
|
Defines the text for the collection of context menu item |
Property:`contextMenu.items.text`
HTML
Script
|
Property:`contextMenuSettings.items.text`
HTML
Script
|
Defines the name for the collection of context menu items |
Property:`contextMenu.items.name`
HTML
Script
|
Property:`contextMenuSettings.items.id`
HTML
Script
|
Defines the image url for the collection of context menu items |
Property:`contextMenu.items.imageUrl`
HTML
Script
|
Property:`contextMenuSettings.items.url`
HTML
Script
|
Defines the cssClass for the collection of context menu items |
Property:`contextMenu.items.cssClass`
HTML
Script
|
Property:`contextMenuSettings.items.iconCss`
HTML
Script
|
Defines the collection of sub items for the context menu items |
Property:`contextMenu.items.subItems`
HTML
Script
|
Property:`contextMenuSettings.items`
HTML
Script
|
set whether to display the default context menu items or not |
Property:`contextMenu.showCustomMenuItemsOnly`
HTML
Script
|
Property:`contextMenuSettings.showCustomMenuOnly`
HTML
Script
|
separator | Not applicable |
Property:`contextMenuSettings.items.separator`
HTML
Script
|
Define the target to show the menu item. | Not applicable |
Property:`contextMenuSettings.items.target`
HTML
Script
|
Enables/Disables the context menu items | Not applicable |
Property:`contextMenuSettings.show`
HTML
Script
|
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`
HTML
Script
|
Property:`dataSourceSettings.dataManager`
HTML
Script
|
Sets the unique id of the data source items |
Property:`dataSourceSettings.id`
HTML
Script
|
Property:`dataSourceSettings.id`
HTML
Script
|
Defines the parent id of the data source item |
Property:`dataSourceSettings.parent`
HTML
Script
|
Property:`dataSourceSettings.parentId`
HTML
Script
|
Describes query to retrieve a set of data from the specified datasource |
Property:`dataSourceSettings.query`
HTML
Script
|
Not applicable |
Sets the unique id of the root data source item |
Property:`dataSourceSettings.root`
HTML
Script
|
Property:`dataSourceSettings.root`
HTML
Script
|
Describes the name of the table on which the specified query has to be executed |
Property:`dataSourceSettings.tableName`
HTML
Script
|
Not applicable |
Specifies the method name which is used to get the updated data from client side to the server side |
Property:`dataSourceSettings.crudAction`
HTML
Script
|
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`
HTML
Script
|
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`
HTML
Script
|
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`
HTML
Script
|
Not applicable |
Specifies the read method to get the created nodes from client side to the server side |
Property:`dataSourceSettings.crudAction.read`
HTML
Script
|
Not applicable |
Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.customFields`
HTML
Script
|
Property:`dataSourceSettings.data`
HTML
Script
|
Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.connectionDataSource`
HTML
Script
|
Not applicable |
Sets the datasource for the connection datasource settings items |
Property:`dataSourceSettings.connectionDataSource.dataSource`
HTML
Script
|
Not applicable |
Sets the unique id of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.id`
HTML
Script
|
Not applicable |
Sets the source node of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourceNode`
HTML
Script
|
Not applicable |
Sets the target node of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetNode`
HTML
Script
|
Not applicable |
Sets the sourcePointX value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourcePointX`
HTML
Script
|
Not applicable |
Sets the sourcePointY value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourcePointY`
HTML
Script
|
Not applicable |
Sets the targetPoint-x value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetPointX`
HTML
Script
|
Not applicable |
Sets the targetPoint-y value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetPointY`
HTML
Script
|
Not applicable |
Specifies the method name which is used to get updated connectors from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.crudAction`
HTML
Script
|
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`
HTML
Script
|
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`
HTML
Script
|
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`
HTML
Script
|
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`
HTML
Script
|
Not applicable |
Specifies the custom fields to get the updated data from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.customFields`
HTML
Script
|
Not applicable |
Binds the custom data with node model |
Property:`dataSourceSettings.doBinding`
HTML
Script
|
Not applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Initializes the default values for nodes and connectors |
Property:`defaultSettings.node`
HTML
Script
|
Property:`getNodeDefaults`
HTML
Script
|
Initializes the default connector properties |
Property:`defaultSettings.connector`
HTML
Script
|
Property:`getConnectorDefaults`
HTML
Script
|
Initializes the default properties of groups |
Property:`defaultSettings.group`
HTML
Script
|
Not applicable |
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`
HTML
Script
|
Property:`drawingObject`
HTML
Script
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Enables or disables auto scroll in diagram |
Property:`enableAutoScroll`
HTML
Script
|
Property:`canAutoScroll`
HTML
Script
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Enables or disables diagram context menu |
Property:`enableContextMenu`
HTML
Script
|
Property:`contextMenuSettings.show`
HTML
Script
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Enable or disable persisting component's state between page reloads/b> | Not applicable |
Property:`enablePersistence`
HTML
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Enable or disable rendering component in right to left direction | Not applicable |
Property:`enableRtl`
HTML
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Allows to get the custom tool | Not applicable |
Property:`getCustomTool`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [getDescription]=“getTool” [nodes]=“nodes”>
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`
HTML
|
Property:`height`
HTML
|
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`
HTML
Script
|
Not applicable | A method that ends grouping the changes |
Property:`historyManager.closeGroupAction`
HTML
Script
|
Property:`historyList.endGroupAction`
HTML
Script
|
A method that removes the history of a recent change made in diagram |
Property:`historyManager.pop`
HTML
Script
|
Not applicable |
A method that allows to track the custom changes made in diagram |
Property:`historyManager.push`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created”>
Script
|
Property:`historyList.push`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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;
|
Property:`historyList.redo`
HTML
Script
|
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`
|
Property:`historyList.redoStack`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
Script
public nodes= [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] public created() { let group = this.diagram.widget.model.selectedItems;
} |
Property:`historyList.startGroupAction`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created”>
Script
public historyManager; this.historyManager: { undo: customUndoRedo, redo: customUndoRedo } public created() { let diagram = $(“#diagramContent”).ejDiagram(“instance”); let node = args.object; let currentState = node.employeeInfo;
|
Property:`historyList.undo`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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`
HTML
Script
|
Set the current entry object | Not applicable |
Property:`historyList.currentEntry`
HTML
Script
|
set the history entry can be undo | Not applicable |
Property:`historyList.canUndo`
HTML
Script
|
Set the history entry can be redo | Not applicable |
Property:`historyList.canRedo`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
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`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
Script
public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }]
|
Property:`historyList.canLog`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” (created)=“created” [nodes] =“nodes”>
Script
public nodes = [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }]
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Defines the type of the rendering mode of label |
Property:`labelRenderingMode`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” [labelRenderingMode]=“svg” > |
Not applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Specifies the custom bounds to arrange/align the layout |
Property:`layout.bounds`
HTML
Script
|
Property:`layout.bounds`
HTML
Script
|
Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned |
Property:`layout.fixedNode`
HTML
Script
|
Property:`layout.fixedNode`
HTML
Script
|
Customizes the orientation of trees/sub trees |
Property:`layout.getLayoutInfo`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” >
Script
public layout; constructor() { function getLayoutInfo(diagram, node, options) { options.orientation = “vertical”; options.type = “left”; }; this.layout = { getLayoutInfo: getLayoutInfo }; } |
Property:`layout.getLayoutInfo`
HTML
Script
|
Defines a method to customize the segments based on source and target nodes |
Property:`layout.getConnectorSegments`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” >
Script
public layout; constructor() { function getLayoutInfo(diagram, node, options) { options.orientation = “vertical”; options.type = “left”; }; this.layout = { getConnectorSegments:getConnectorSegment }; } |
Property:`layout.connectorSegments`
HTML
Script
|
Sets the space to be horizontally left between nodes |
Property:`layout.horizontalSpacing`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” >
Script
public layout; constructor() { this.layout = {layout: { horizontalSpacing: 50 }; } |
Property:`layout.horizontalSpacing`
HTML
Script
|
Defines the space to be left between layout bounds and layout |
Property:`layout.margin`
HTML
Script
|
Property:`layout.margin`
HTML
Script
|
Defines how to horizontally align the layout within the layout bounds |
Property:`layout.horizontalAlignment`
HTML
Script
|
Property:`layout.horizontalAlignment`
HTML
Script
|
Defines how to vertically align the layout within the layout bounds |
Property:`layout.verticalAlignment`
HTML
Script
|
Property:`layout.verticalAlignment`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” >
Script
public layout:object = { verticalAlignment: ‘Center’ }; |
Sets the orientation/direction to arrange the diagram elements |
Property:`layout.orientation`
HTML
<ej-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” >
Script
public layout; constructor() { this.layout = { orientation: LayoutOrientations.LeftToRight }; } |
Property:`layout.orientation`
HTML
Script
|
Sets the type of the layout based on which the elements will be arranged |
Property:`layout.type`
HTML
Script
|
Property:`layout.type`
HTML
Script
|
Sets the space to be vertically left between nodes |
Property:`layout.verticalSpacing`
HTML
Script
|
Property:`layout.verticalSpacing`
HTML
Script
|
Sets the value is used to define the root node of the layout |
Property:`layout.root`
HTML
Script
|
Property:`layout.root`
HTML
Script
|
Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.springFactor`
HTML
Script
|
Property:`layout.springFactor`
HTML
Script
|
Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.maxIteration`
HTML
Script
|
Property:`layout.maxIteration`
HTML
Script
|
Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.springLength`
HTML
Script
|
Property:`layout.springLength`
HTML
Script
|
Sets how to define the connection direction (first segment direction & last segment direction) | Not applicable |
Property:`layout.connectionDirection`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” >
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`
HTML
<ejs-diagram id=“diagramCore” width=“1000” height=“600” [layout]=“layout” >
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`
HTML
Script
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Defines the current culture of diagram |
Property:`locale`
HTML
|
Property:`locale`
HTML
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
Array of JSON objects where each object represents a node |
Property:`nodes`
HTML
Script
|
Property:`annotations.content`
HTML
Script
|
Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity |
Property:`nodes.activity`
HTML
Script
|
Property:`nodes.shape.activity`
HTML
Script
|
To maintain additional information about nodes |
Property:`nodes.addInfo`
HTML
Script
|
Property:`nodes.addInfo`
HTML
Script
|
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`
HTML
Script
|
Property:`nodes.shape.annotations`
HTML
Script
|
Sets the angle between the BPMN shape and the annotation |
Property:`nodes.annotation.angle`
HTML
Script
|
Property:`nodes.shape.annotations.angle`
HTML
Script
|
Sets the direction of the text annotation |
Property:`nodes.annotation.direction`
HTML
Script
|
Not applicable |
Sets the height of the text annotation |
Property:`nodes.annotation.height`
HTML
Script
|
Property:`nodes.shape.annotations.height`
HTML
Script
|
Sets the distance between the BPMN shape and the annotation |
Property:`nodes.annotation.length`
HTML
Script
|
Property:`nodes.shape.annotations.length`
HTML
Script
|
Defines the additional information about the flow object in a BPMN Process |
Property:`nodes.annotation.text`
HTML
Script
|
Property:`nodes.shape.annotations.text`
HTML
Script
|
Sets the width of the text annotation |
Property:`nodes.annotation.width`
HTML
Script
|
Property:`nodes.shape.annotations.width`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Defines whether the group can be ungrouped or not |
Property:`nodes.canUngroup`
HTML
Script
|
Not applicable |
Array of JSON objects where each object represents a child node/connector |
Property:`nodes.children`
HTML
Script
|
Property:`nodes.children`
HTML
Script
|
Sets the type of UML classifier |
Property:`nodes.classifier`
HTML
Script
|
Not applicable |
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class`
HTML
Script
|
Not applicable |
Sets the name of class |
Property:`nodes.class.name`
HTML
Script
|
Not applicable |
Defines the collection of attributes |
Property:`nodes.class.attributes`
HTML
Script
|
Not applicable |
Sets the name of the attribute |
Property:`nodes.class.attributes.name`
HTML
Script
|
Not applicable |
Sets the data type of attribute |
Property:`nodes.class.attributes.type`
HTML
Script
|
Not applicable |
Defines the visibility of the attribute |
Property:`nodes.class.attributes.scope`
HTML
Script
|
Not applicable |
Defines the collection of methods of a Class |
Property:`nodes.class.methods`
HTML
Script
|
Not applicable |
Sets the name of the method |
Property:`nodes.class.methods.name`
HTML
Script
|
Not applicable |
Defines the arguments of the method |
Property:`nodes.class.methods.arguments`
HTML
Script
|
Not applicable |
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class.methods.arguments.name`
HTML
Script
|
Not applicable |
Sets the type of the argument |
Property:`nodes.class.methods.arguments.type`
HTML
Script
|
Not applicable |
Sets the return type of the method |
Property:`nodes.class.methods.type`
HTML
Script
|
Not applicable |
Sets the visibility of the method |
Property:`nodes.class.methods.scope`
HTML
Script
|
Not applicable |
Defines the state of the node is collapsed |
Property:`nodes.collapseIcon`
HTML
Script
|
Property:`nodes.collapseIcon`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.collapseIcon.borderColor`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.collapseIcon.borderWidth`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.collapseIcon.fill`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.collapseIcon.height`
HTML
Script
|
Sets the horizontal alignment of the icon |
Property:`nodes.collapseIcon.horizontalAlignment`
HTML
Script
|
Property:`nodes.collapseIcon.horizontalAlignment`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.collapseIcon.margin`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.collapseIcon.offset`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.collapseIcon.shape`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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 `
HTML
Script
|
Property:`nodes.collapseIcon.verticalAlignment `
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
Script
public nodes: NodeModel[] = [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: {
height: 20,
width: 20,
shape: “Template”,
content: ’ |
Defines the geometry of a path | Not applicable |
Property:`nodes.collapseIcon.pathData`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Not applicable |
Enables or disables the default behaviors of the node |
Property:`nodes.constraints`
HTML
Script
|
Property:`nodes.constraints`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Not applicable |
Defines the orientation of the container. Applicable, if the group is a container |
Property:`nodes.container.orientation`
HTML
Script
|
Not applicable |
Sets the type of the container. Applicable if the group is a container. |
Property:`nodes.container.type`
HTML
Script
|
Not applicable |
Defines the corner radius of rectangular shapes |
Property:`nodes.cornerRadius`
HTML
Script
|
Not applicable |
This property allows you to customize nodes appearance using user-defined CSS |
Property:`nodes.cssClass`
HTML
Script
|
Not applicable |
Defines the BPMN data object |
Property:`nodes.data.type`
HTML
Script
|
Property:`nodes.shape.dataObject.type`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.shape.dataObject.collection`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Not applicable |
Sets the name of the Enumeration |
Property:`nodes.enumeration.name`
HTML
Script
|
Not applicable |
Defines the collection of enumeration members |
Property:`nodes.enumeration.members`
HTML
Script
|
Not applicable |
Sets the name of the enumeration member |
Property:`nodes.enumeration.members.name`
HTML
Script
|
Not applicable |
Sets the type of the BPMN Events. Applicable, if the node is a BPMN event |
Property:`nodes.event`
HTML
Script
|
Property:`nodes.shape.event`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.shape.event.trigger`
HTML
Script
|
Defines whether the node can be automatically arranged using layout or not |
Property:`nodes.excludeFromLayout`
HTML
Script
|
Property:`nodes.excludeFromLayout`
HTML
Script
|
Defines the fill color of the node |
Property:`nodes.fillColor`
HTML
Script
|
Property:`nodes.style.fill`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.shape.gateway`
HTML
Script
|
Paints the node with linear color transitions |
Property:`nodes.gradient.type`
HTML
Script
|
Property:`nodes.style.gradient.type`
HTML
Script
|
Defines the x1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x1`
HTML
Script
|
Property:`nodes.style.gradient.LinearGradient.x1`
HTML
Script
|
Defines the x2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x2`
HTML
Script
|
Property:`nodes.style.gradient.LinearGradient.x2`
HTML
Script
|
Defines the y1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y1`
HTML
Script
|
Property:`nodes.style.gradient.LinearGradient.y1`
HTML
Script
|
Defines the y2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y2`
HTML
Script
|
Property:`nodes.style.gradient.LinearGradient.y2`
HTML
Script
|
Defines the type of gradient |
Property:`nodes.gradient.RadialGradient.type`
HTML
Script
|
Property:`nodes.style.gradient.type`
HTML
Script
|
Defines the position of the outermost circle |
Property:`nodes.gradient.RadialGradient.cx`
HTML
Script
|
Property:`nodes.style.RadialGradient.cx`
HTML
Script
|
Defines the outer most circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.cy`
HTML
Script
|
Property:`nodes.style.RadialGradient.cy`
HTML
Script
|
Defines the innermost circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.fx`
HTML
Script
|
Property:`nodes.style.RadialGradient.fx`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.style.RadialGradient.fy`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.style.RadialGradient.stops`
HTML
Script
|
Sets the color to be filled over the specified region |
Property:`nodes.gradient.stops.color`
HTML
Script
|
Property:`nodes.style.gradient.stops.color`
HTML
Script
|
Sets the position where the previous color transition ends and a new color transition starts |
Property:`nodes.gradient.stops.offset`
HTML
Script
|
Property:`nodes.style.gradient.stops.offset`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.style.gradient.stops.opacity`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Not applicable |
Defines the height of the node |
Property:`nodes.height`
HTML
Script
|
Property:`nodes.height`
HTML
Script
|
Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container |
Property:`nodes.horizontalAlign`
HTML
Script
|
Not applicable |
A read only collection of the incoming connectors/edges of the node |
Property:`nodes.inEdges`
|
Property:`nodes.height`
HTML
Script
|
Defines an interface in a UML interface Diagram |
Property:`nodes.interface`
HTML
Script
|
Not applicable |
Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface |
Property:`nodes.interface.name`
HTML
Script
|
Not applicable |
Defines the collection of attributes |
Property:`nodes.interface.attributes`
HTML
Script
|
Not applicable |
Sets the name of the attribute |
Property:`nodes.interface.attributes.name`
HTML
Script
|
Not applicable |
Sets the data type of attribute |
Property:`nodes.interface.attributes.type`
HTML
Script
|
Not applicable |
Defines the visibility of the attribute |
Property:`nodes.interface.attributes.scope`
HTML
Script
|
Not applicable |
Defines the collection of methods of a interface |
Property:`nodes.interface.methods`
HTML
Script
|
Not applicable |
Sets the name of the method |
Property:`nodes.interface.methods.name`
HTML
Script
|
Not applicable |
Defines the arguments of the method |
Property:`nodes.interface.methods.arguments`
HTML
Script
|
Not applicable |
Defines the name, attributes and methods of a interface. Applicable, if the node is a interface |
Property:`nodes.interface.methods.arguments.name`
HTML
Script
|
Not applicable |
Sets the type of the argument |
Property:`nodes.interface.methods.arguments.type`
HTML
Script
|
Not applicable |
Sets the return type of the method |
Property:`nodes.interface.methods.type`
HTML
Script
|
Not applicable |
Sets the visibility of the method |
Property:`nodes.interface.methods.scope`
HTML
Script
|
Not applicable |
Defines whether the sub tree of the node is expanded or collapsed |
Property:`nodes.isExpanded`
HTML
Script
|
Property:`nodes.isExpanded`
HTML
Script
|
Sets the node as a swimlane |
Property:`nodes.isSwimlane`
HTML
Script
|
Not applicable |
A collection of objects where each object represents a label |
Property:`nodes.labels`
HTML
Script
|
Property:`nodes.annotations`
HTML
Script
|
An array of objects where each object represents a lane. Applicable, if the node is a swimlane |
Property:`nodes.lanes`
HTML
Script
|
Not applicable |
This property allows you to customize lanes appearance using user-defined CSS |
Property:`nodes.lanes.cssClass`
HTML
Script
|
Not applicable |
Defines the header of the lane |
Property:`nodes.lanes.header`
HTML
Script
|
Not applicable |
Defines the width of lane |
Property:`nodes.lanes.width`
HTML
Script
|
Not applicable |
An array of objects where each object represents a child node of the lane |
Property:`nodes.lanes.children`
HTML
Script
|
Not applicable |
Defines the object as a lane |
Property:`nodes.lanes.isLane`
HTML
Script
|
Not applicable |
Defines the minimum space to be left between the bottom of parent bounds and the node |
Property:`nodes.margin`
HTML
Script
|
Property:`nodes.margin`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.maxHeight`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Property:`nodes.id`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
Script
public nodes: NodeModel[] = [{ id: ‘node1’ offsetX: 100, offsetY: 100, width: 100, height: 100, }] |
Defines the opaque of the node |
Property:`nodes.opacity`
HTML
Script
|
Property:`nodes.style.opacity`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [nodes]=“nodes”>
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`
HTML
Script
|
Not applicable |
Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” |
Property:`pageSettings.scrollableArea`
HTML
Script
|
Property:`scrollSettings.scrollableArea`
HTML
Script
|
Defines the draggable region of diagram elements |
Property:`pageSettings.boundaryConstraints`
HTML
Script
|
Property:`pageSettings.boundaryConstraints`
HTML
Script
|
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`
HTML
Script
|
Property:`palettes`
HTML
Script
|
Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not |
Property:`nodes.paletteItem.enableScale`
HTML
Script
|
Property:`palettes.fit`
HTML
Script
|
To display a name for nodes in the symbol palette |
Property:`nodes.paletteItem.label`
HTML
Script
|
Property:`palettes.title`
HTML
Script
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
A read only collection of the selected items |
Property:`selectedItems.children`
|
Not applicable |
Controls the visibility of selector |
Property:`selectedItems.constraints`
HTML
Script
|
Property:`selectedItems.constraints`
HTML
Script
|
Defines a method that dynamically enables/ disables the interaction with multiple selection |
Property:`selectedItems.getConstraints`
HTML
Script
|
Not applicable |
Sets the height of the selected items |
Property:`selectedItems.height`
HTML
Script
|
Property:`selectedItems.height`
HTML
Script
|
Sets the angle to rotate the selected items |
Property:`selectedItems.tooltip`
HTML
Script
|
Not applicable |
A collection of frequently used commands that will be added around the selector |
Property:`selectedItems.userHandles`
HTML
Script
|
Property:`selectedItems.userHandles`
HTML
Script
|
Sets the horizontal alignment of the user handle |
Property:`selectedItems.userHandles.horizontalAlignment`
HTML
Script
|
Property:`selectedItems.userHandles`
HTML
Script
|
Defines the interactive behaviors of the user handle |
Property:`selectedItems.userHandles.tool`
HTML
Script
|
Not applicable |
Defines whether the user handle should be added, when more than one element is selected |
Property:`selectedItems.userHandles.enableMultiSelection`
HTML
Script
|
Not applicable |
Sets the horizontal alignment of the user handle | Not applicable |
Property:`selectedItems.userHandles.displacement`
HTML
Script
|
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`
HTML
Script
|
Not applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
An object that defines the description, appearance and alignments of tooltip |
Property:`tooltip`
HTML
Script
|
Property:`tooltip`
HTML
Script
|
Defines the alignment of tooltip |
Property:`tooltip.alignment`
HTML
Script
|
Not applicable |
Sets the margin of the tooltip |
Property:`tooltip.margin`
HTML
Script
|
Not applicable |
Sets the svg/html template to be bound with tooltip |
Property:`tooltip.templateId`
HTML
Script
|
Property:`tooltip.content`
HTML
Script
|
Defines if the Tooltip has tip pointer or not | Not applicable |
Property:`tooltip.showTipPointer`
HTML
Script
|
Defines the position of the Tooltip | Not applicable |
Property:`tooltip.position`
HTML
Script
|
Allows to set the same or different animation option for the Tooltip, when it is opened or closed | Not applicable |
Property:`tooltip.animation`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [constraints]=“constraints” [tooltip]=“tooltip”>
Script
|
Sets the width of the tooltip | Not applicable |
Property:`tooltip.width`
HTML
Script
|
Sets the height of the Tooltip | Not applicable |
Property:`tooltip.height`
HTML
<ejs-diagram #diagram id=“diagram” width=“850px” height=“700px” [constraints]=“constraints” [tooltip]=“tooltip”>
Script
|