Search results

DiagramComponent

Diagram Component

<ej-diagram></ej-diagram>

Properties

addInfo

Object

Allows the user to save custom information/data about diagram

Defaults to undefined

annotationTemplate

any

Customizes the annotation template

Defaults to undefined

backgroundColor

string

Defines the background color of the diagram

Defaults to ‘transparent’

bridgeDirection

BridgeDirection

Defines the direction of the bridge that is inserted when the segments are intersected

  • Top - Defines the direction of the bridge as Top
  • Bottom - Defines the direction of the bridge as Bottom
  • Left - Sets the bridge direction as left
  • Right - Sets the bridge direction as right

Defaults to top

commandManager

CommandManagerModel

Defines a set of custom commands and binds them with a set of desired key gestures

Defaults to {}

connectorDefaults

ConnectorModel

Helps to assign the default properties of connector

connectors

ConnectorModel[]

Defines a collection of objects, used to create link between two points, nodes or ports to represent the relationships between them

<div id='diagram'></div>
      let connectors: ConnectorModel[] = [{
          id: 'connector1',
          type: 'Straight',
          sourcePoint: { x: 100, y: 300 },
          targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
      connectors: connectors,
...
});
diagram.appendTo('#diagram');

Defaults to []

constraints

DiagramConstraints

Constraints are used to enable/disable certain behaviors of the diagram.

  • None - Disables DiagramConstraints constraints
  • Bridging - Enables/Disables Bridging support for connector
  • UndoRedo - Enables/Disables the Undo/Redo support
  • Tooltip - Enables/Disables Tooltip support
  • UserInteraction - Enables/Disables editing diagram interactively
  • ApiUpdate - Enables/Disables editing diagram through code
  • PageEditable - Enables/Disables editing diagrams both interactively and through code
  • Zoom - Enables/Disables Zoom support for the diagram
  • PanX - Enables/Disable PanX support for the diagram
  • PanY - Enables/Disable PanY support for the diagram
  • Pan - Enables/Disable Pan support the diagram

Defaults to ‘Default’

contextMenuSettings

ContextMenuSettingsModel

Defines type of menu that appears when you perform right-click operation An object to customize the context menu of diagram

<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
  contextMenuSettings: { show: true },
...
});
diagram.appendTo('#diagram');

customCursor

CustomCursorActionModel[]

A collection of JSON objects where each object represents a custom cursor action. Layer is a named category of diagram shapes.

Defaults to []

dataSourceSettings

DataSourceModel

Configures the data source that is to be bound with diagram

Defaults to {}

diagramSettings

DiagramSettingsModel

Represents the diagram settings

<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
diagramSettings: { inversedAlignment: true  }
...
});
diagram.appendTo('#diagram');

Defaults to {}

drawingObject

NodeModel | ConnectorModel

Defines the object to be drawn using drawing tool

<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
drawingObject : {id: 'connector3', type: 'Straight'},
...
});
diagram.appendTo('#diagram');

Defaults to undefined

enableConnectorSplit

boolean

Split the connector, when the node is dropped onto it and establish connection with that dropped node.

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

getConnectorDefaults

Function | string

Helps to return the default properties of connector

<div id='diagram'></div>
      let connectors: ConnectorModel[] = [{
          id: 'connector1',
          sourcePoint: { x: 100, y: 300 },
          targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
  connectors: connectors,
  getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
  let connObj: ConnectorModel = {};
  connObj.targetDecorator ={ shape :'None' };
  connObj.type = 'Orthogonal';
  return connObj;
  },
...
});
diagram.appendTo('#diagram');

Defaults to undefined

getCustomCursor

Function | string

<div id='diagram'></div>
function getCursor(action: string, active: boolean): string {
let cursor: string;
if (active && action === 'Drag') {
cursor = '-webkit-grabbing';
} else if (action === 'Drag') {
cursor = '-webkit-grab'
}
return cursor;
}
let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: { type: 'Basic', shape: 'Ellipse' },
      }];
let handle: UserHandleModel[] = [
{ name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,
pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',
side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',
pathColor: 'yellow' }];
let diagram: Diagram = new Diagram({
...
    nodes: nodes,
    selectedItems: { constraints: SelectorConstraints.All, userHandles: handle },
    getCustomCursor: getCursor
...
});
diagram.appendTo('#diagram');

getCustomProperty

Function | string

Allows to get the custom properties that have to be serialized

<div id='diagram'></div>
let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: { type: 'Basic', shape: 'Ellipse' },
          annotations: [{ content: 'Path Element' }]
      }
      ];
      let connectors: ConnectorModel[] = [{
          id: 'connector1', type: 'Straight',
          sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
connectors: connectors, nodes: nodes,
getCustomProperty: (key: string) => {
if (key === 'nodes') {
return ['description'];
}
        return null;
}
...
});
diagram.appendTo('#diagram');

Defaults to undefined

getCustomTool

Function | string

<div id='diagram'></div>
function getTool(action: string): ToolBase {
let tool: ToolBase;
if (action === 'userHandle1') {
tool = new CloneTool(diagram.commandHandler, true);
}
return tool;
}
class CloneTool extends ToolBase {
public mouseDown(args: MouseEventArgs): void {
super.mouseDown(args);
diagram.copy();
diagram.paste();
}
}
let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: { type: 'Basic', shape: 'Ellipse' },
      }];
      let connectors: ConnectorModel[] = [{
          id: 'connector1', type: 'Straight',
          sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 },
      }];
     let handles: UserHandleModel[] = [
         { name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,
           pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',
           side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',
           pathColor: 'yellow' }];
let diagram: Diagram = new Diagram({
...
    connectors: connectors, nodes: nodes,
    selectedItems: { constraints: SelectorConstraints.All, userHandles: handles },
    getCustomTool: getTool
...
});
diagram.appendTo('#diagram');

getDescription

Function | string

<div id='diagram'></div>
let connector1: ConnectorModel = {
         id: 'connector1', type: 'Straight',
         sourcePoint: { x: 100, y: 100 },targetPoint: { x: 200, y: 200 },
         annotations: [{ 'content': 'label', 'offset': 0, 'alignment': 'Center' }]
      };
let connector2: ConnectorModel = {
          id: 'connector2', type: 'Straight',
          sourcePoint: { x: 400, y: 400 }, targetPoint: { x: 600, y: 600 },
      };
let diagram: Diagram;
diagram = new Diagram({
width: 1000, height: 1000,
connectors: [connector1, connector2],
snapSettings: { constraints: SnapConstraints.ShowLines },
getDescription: getAccessibility
});
diagram.appendTo('#diagram');
function getAccessibility(obj: ConnectorModel, diagram: Diagram): string {
let value: string;
if (obj instanceof Connector) {
value = 'clicked on Connector';
} else if (obj instanceof TextElement) {
value = 'clicked on annotation';
}
else if (obj instanceof Decorator) {
value = 'clicked on Decorator';
}
else { value = undefined; }
return value;
}

getNodeDefaults

Function | string

Helps to return the default properties of node

<div id='diagram'></div>
let nodes: NodeModel[] = [{
          id: 'node1', height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: {
              type: 'Basic', shape: 'Ellipse'
          },
          annotations: [{ content: 'Ellipse' }]
      }
      ];
let diagram: Diagram = new Diagram({
...
nodes: nodes,
getNodeDefaults: (node: NodeModel) => {
  let obj: NodeModel = {};
  if (obj.width === undefined) {
      obj.width = 145;
  }
  obj.style = { fill: '#357BD2', strokeColor: 'white' };
  obj.annotations = [{ style: { color: 'white', fill: 'transparent' } }];
  return obj;
   },
...
});
diagram.appendTo('#diagram');

Defaults to undefined

height

string | number

Defines the height of the diagram model.

Defaults to ‘100%’

historyManager

History

Customizes the undo redo functionality

Defaults to undefined

layers

LayerModel[]

A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes.

Defaults to []

layout

LayoutModel

Layout is used to auto-arrange the nodes in the Diagram area

Defaults to {}

lineDistributionModule

LineDistribution

lineDistributionModule is used to connect the node’s without overlapping in automatic layout

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

mindMapChartModule

MindMap

mindMapChartModule is used to arrange the nodes in a mind map like structure

mode

RenderingMode

Defines the diagram rendering mode.

  • SVG - Renders the diagram objects as SVG elements
  • Canvas - Renders the diagram in a canvas

Defaults to ‘SVG’

nodeDefaults

NodeModel

Helps to assign the default properties of nodes

nodeTemplate

any

Customizes the node template

Defaults to undefined

nodes

NodeModel[]

Defines the collection of nodes

<div id='diagram'></div>
let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: {
              type: 'Basic', shape: 'Ellipse'
          },
          annotations: [{ content: 'Path Element' }]
      }
      ];
let diagram: Diagram = new Diagram({
...
nodes: nodes,
...
});
diagram.appendTo('#diagram');

Defaults to undefined

pageSettings

PageSettingsModel

Page settings enable to customize the appearance, width, and height of the Diagram page.

<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
pageSettings: {  width: 800, height: 600, orientation: 'Landscape',
background: { color: 'blue' }, boundaryConstraints: 'Infinity'},
...
});
diagram.appendTo('#diagram');

Defaults to {}

radialTreeModule

RadialTree

radialTreeModule is used to arrange the nodes in a radial tree like structure

rulerSettings

RulerSettingsModel

Defines the properties of both horizontal and vertical guides/rulers to measure the diagram area.

<div id='diagram'></div>
let arrange: Function = (args: IArrangeTickOptions) => {
if (args.tickInterval % 10 == 0) {
args.tickLength = 25;
}
}
let diagram: Diagram = new Diagram({
...
rulerSettings: { showRulers: true,
horizontalRuler: { segmentWidth: 50, orientation: 'Horizontal', interval: 10,  arrangeTick: arrange },
verticalRuler: {segmentWidth: 200,interval: 20, thickness: 20,
tickAlignment: 'LeftOrTop', segmentWidth: 50, markerColor: 'red' }
},
...
});
diagram.appendTo('#diagram');

Defaults to {}

scrollSettings

ScrollSettingsModel

Defines the current zoom value, zoom factor, scroll status and view port size of the diagram

Defaults to {}

segmentThumbShape

SegmentThumbShapes

Defines the segmentThumbShape

Defaults to ‘Rhombus’

selectedItems

SelectorModel

Defines the collection of selected items, size and position of the selector

Defaults to {}

serializationSettings

SerializationSettingsModel

Defines the serialization settings of diagram.

<div id='diagram'></div>
let diagram: Diagram = new Diagram({
...
serializationSettings: { preventDefaults: true },
...
});
diagram.appendTo('#diagram');

Defaults to {}

setNodeTemplate

Function | string

setNodeTemplate helps to customize the content of a node

<div id='diagram'></div>
let getTextElement: Function = (text: string) => {
let textElement: TextElement = new TextElement();
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
return textElement;
};
let nodes: NodeModel[] = [{
          id: 'node1', height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100
      }
      ];
let diagram: Diagram = new Diagram({
...
nodes: nodes,
setNodeTemplate : setNodeTemplate,
...
});
diagram.appendTo('#diagram');

function setNodeTemplate() { setNodeTemplate: (obj: NodeModel, diagram: Diagram): StackPanel => { if (obj.id === ‘node2’) { let table: StackPanel = new StackPanel(); table.orientation = ‘Horizontal’; let column1: StackPanel = new StackPanel(); column1.children = []; column1.children.push(getTextElement(‘Column1’)); addRows(column1); let column2: StackPanel = new StackPanel(); column2.children = []; column2.children.push(getTextElement(‘Column2’)); addRows(column2); table.children = [column1, column2]; return table; } return null; } … }

Defaults to undefined

snapSettings

SnapSettingsModel

Defines the gridlines and defines how and when the objects have to be snapped

<div id='diagram'></div>
let horizontalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1' };
let verticalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1'};
let diagram: Diagram = new Diagram({
...
snapSettings: { horizontalGridlines, verticalGridlines, constraints: SnapConstraints.ShowLines,
snapObjectDistance: 5, snapAngle: 5 },
...
});
diagram.appendTo('#diagram');

Defaults to {}

tool

DiagramTools

Defines the precedence of the interactive tools. They are,

  • None - Disables selection, zooming and drawing tools
  • SingleSelect - Enables/Disables single select support for the diagram
  • MultipleSelect - Enables/Disable MultipleSelect select support for the diagram
  • ZoomPan - Enables/Disable ZoomPan support for the diagram
  • DrawOnce - Enables/Disable ContinuousDraw support for the diagram
  • ContinuousDraw - Enables/Disable ContinuousDraw support for the diagram

Defaults to ‘Default’

tooltip

DiagramTooltipModel

Defines the tooltip that should be shown when the mouse hovers over a node or connector An object that defines the description, appearance and alignments of tooltip

Defaults to {}

updateSelection

Function | string

Helps to set the undo and redo node selection

<div id='diagram'></div>
      let connectors: ConnectorModel[] = [{
          id: 'connector1',
          sourcePoint: { x: 100, y: 300 },
          targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
  connectors: connectors,
  updateSelection: (object: ConnectorModel | NodeModel, diagram: Diagram) => {
  let objectCollection = [];
  objectCollection.push(obejct);
  diagram.select(objectCollection);
  },
...
});
diagram.appendTo('#diagram');

Defaults to undefined

userHandleTemplate

any

This property represents the template content of a user handle. The user can define any HTML element as a template.

Defaults to undefined

width

string | number

Defines the width of the diagram model.

<div id='diagram'/>
let diagram: Diagram = new Diagram({
width:'1000px', height:'500px' });
diagram.appendTo('#diagram');

Defaults to ‘100%’

Methods

add

Adds the given object to diagram control

Parameter Type Description
obj NodeModel | ConnectorModel Defines the object that has to be added to diagram
group (optional) boolean provide the group value.

Returns Node | Connector

addChildToGroup

Adds the given diagram object to the group.

Parameter Type Description
group NodeModel defines where the diagram object to be added.
child string | NodeModel | ConnectorModel defines the diagram object to be added to the group

Returns void

addConnector

Adds the given connector to diagram control

Parameter Type Description
obj ConnectorModel Defines the connector that has to be added to diagram

Returns Connector

addConnectorLabels

Add labels in connector at the run time in the blazor platform\

Parameter Type Description
obj ConnectorModel provide the obj value.
labels PathAnnotationModel[] provide the labels value.

Returns void

addConstraints

Add constraints at run time \

Parameter Type Description
constraintsType number provide the source value.
constraintsValue number provide the target value.

Returns number

addCustomHistoryEntry

Adds the given custom change in the diagram control to the track

Parameter Type Description
entry HistoryEntry Defines the entry/information about a change in diagram

Returns void

addHistoryEntry

Adds the given change in the diagram control to the track

Returns void

addLabels

Add Labels at the run time \

Parameter Type Description
obj NodeModel | ConnectorModel provide the obj value.
labels ShapeAnnotationModel[] | PathAnnotation[] | PathAnnotationModel[] provide the labels value.

Returns void

addLanes

Add dynamic Lanes to swimLane at runtime \

Parameter Type Description
node NodeModel provide the obj value.
lane LaneModel[] provide the labels value.
index (optional) number provide the labels value.

Returns void

addLayer

add the layer into diagram\

Parameter Type Description
layer LayerModel defines the layer model which is to be added
layerObject (optional) Object[] defines the object of the layer

Returns void

addNode

Adds the given node to diagram control

Parameter Type Description
obj NodeModel Defines the node that has to be added to diagram
group (optional) boolean Defines the node that has to be added to diagram

Returns Node

addNodeLabels

Add labels in node at the run time in the blazor platform \

Parameter Type Description
obj NodeModel provide the obj value.
labels ShapeAnnotationModel[] provide the labels value.

Returns void

addNodeToLane

Adds the given node to the lane

Parameter Type Description
node NodeModel provide the node value.
swimLane string provide the swimLane value.
lane string provide the lane value.

Returns void

addPhases

Add a phase to a swimLane at runtime \

Parameter Type Description
node NodeModel provide the obj value.
phases PhaseModel[] provide the labels value.

Returns void

addPorts

Add ports at the run time \

Parameter Type Description
obj NodeModel provide the obj value.
ports PointPortModel[] provide the ports value.

Returns void

addProcess

Add a process into the sub-process \

Parameter Type Description
process NodeModel provide the process value.
parentId string provide the parentId value.

Returns void

addTextAnnotation

Adds the given annotation to the given node

Parameter Type Description
annotation BpmnAnnotationModel Defines the annotation to be added
node NodeModel Defines the node to which the annotation has to be added

Returns void

align

Aligns the group of objects to with reference to the first object in the group

Parameter Type Description
option AlignmentOptions Defines the factor, by which the objects have to be aligned
objects (optional) [] Defines the objects that have to be aligned
type (optional) AlignmentMode Defines the type to be aligned

Returns void

bringIntoView

bring the specified bounds into the viewport \

Parameter Type Description
bound Rect provide the bound value.

Returns void

bringLayerForward

move the layer forward \

Parameter Type Description
layerName string define the name of the layer

Returns void

bringToCenter

bring the specified bounds to the center of the viewport \

Parameter Type Description
bound Rect provide the bound value.

Returns void

bringToFront

bring the selected nodes or connectors to front \

Returns void

clear

Clears all nodes and objects in the diagram

Returns void

clearHistory

To clear history of the diagram

Returns void

clearSelection

Removes all elements from the selection list\

Returns void

cloneLayer

clone a layer with its object \

Parameter Type Description
layerName string define the name of the layer

Returns void

copy

Copies the selected nodes and connectors to diagram clipboard \

Returns Object

cut

Removes the selected nodes and connectors from diagram and moves them to diagram clipboard \

Returns void

destroy

To destroy the diagram

Returns void

distribute

Arranges the group of objects with equal intervals, but within the group of objects

Parameter Type Description
option DistributeOptions Defines the factor to distribute the shapes
objects (optional) [] Defines the objects that have to be equally spaced

Returns void

doLayout

Automatically updates the diagram objects based on the type of the layout

Returns ILayout | boolean

drag

Drags the given object by the specified pixels

Parameter Type Description
obj NodeModel | ConnectorModel | SelectorModel Defines the nodes/connectors to be dragged
tx number Defines the distance by which the given objects have to be horizontally moved
ty number Defines the distance by which the given objects have to be vertically moved

Returns void

dragSourceEnd

Moves the source point of the given connector

Parameter Type Description
obj ConnectorModel Defines the connector, the end points of which has to be moved
tx number Defines the distance by which the end point has to be horizontally moved
ty number Defines the distance by which the end point has to be vertically moved

Returns void

dragTargetEnd

Moves the target point of the given connector

Parameter Type Description
obj ConnectorModel Defines the connector, the end points of which has to be moved
tx number Defines the distance by which the end point has to be horizontally moved
ty number Defines the distance by which the end point has to be vertically moved

Returns void

endGroupAction

Closes grouping the actions that will be undone/restored as a whole

Returns void

exportDiagram

To export Diagram

Parameter Type Description
options IExportOptions defines the how the image to be exported.

Returns string | SVGElement

exportImage

To export diagram native/html image

Parameter Type Description
image string defines image content to be exported.
options IExportOptions defines the image properties.

Returns void

findElementUnderMouse

Finds the child element of the given object at the given position

Parameter Type Description
obj IElement Defines the object, the child element of which has to be found
position PointModel Defines the position, the child element under which has to be found
padding (optional) number Defines the padding, the child element under which has to be found

Returns DiagramElement

findObjectUnderMouse

Finds the object that is under the given mouse position

Parameter Type Description
objects [] Defines the collection of objects, from which the object has to be found.
action Actions Defines the action, using which the relevant object has to be found.
inAction boolean Defines the active state of the action.

Returns IElement

findObjectsUnderMouse

Finds all the objects that is under the given mouse position

Parameter Type Description
position PointModel Defines the position, the objects under which has to be found
source (optional) IElement Defines the object, the objects under which has to be found

Returns IElement[]

findTargetObjectUnderMouse

Finds the object that is under the given active object (Source)

Parameter Type Description
objects [] Defines the collection of objects, from which the object has to be found.
action Actions Defines the action, using which the relevant object has to be found.
inAction boolean Defines the active state of the action.
position PointModel Defines the position.
source (optional) IElement Defines the source.

Returns IElement

fitToPage

fit the diagram to the page with respect to mode and region \

Parameter Type Description
options (optional) IFitOptions provide the options value.

Returns void

getActiveLayer

gets the active layer back \

Returns LayerModel

getConnectorObject

gets the connector object for the given node ID \

Parameter Type Description
id string define the name of the layer

Returns ConnectorModel

getCursor

Defines the cursor that corresponds to the given action

Parameter Type Description
action string Defines the action that is going to be performed
active boolean Defines the active

Returns string

getDiagramAction

this method returns diagramAction as a string

Returns string

getDiagramBounds

To get the bound of the diagram

Returns Rect

getDiagramContent

To get the html diagram content

Parameter Type Description
styleSheets (optional) StyleSheetList defines the collection of style files to be considered while exporting.

Returns string

getEdges

Return the edges for the given node

Parameter Type Description
args Object return the edge of the given node

Returns string[]

getHistoryStack

Will return the history stack values

Parameter Type Description
isUndoStack boolean returns the history stack values

Returns HistoryEntry[]

getModuleName

Returns the module name of the diagram

Returns string

getNodeObject

gets the node object for the given node ID \

Parameter Type Description
id string define the name of the layer

Returns NodeModel

getObject

gets the node or connector having the given name \

Parameter Type Description
name string define the name of the layer

Returns __type

getParentId

Returns the parent id for the node

Parameter Type Description
id string returns the parent id

Returns string

getPersistData

Get the properties to be maintained in the persisted state.

Returns string

getTool

Returns the tool that handles the given action

Parameter Type Description
action string Defines the action that is going to be performed

Returns ToolBase

group

Group the selected nodes and connectors in diagram \

Returns void

hideTooltip

hides tooltip for corresponding diagram object

Parameter Type Description
obj NodeModel | ConnectorModel Defines the object for that tooltip has to be hide

Returns void

insertData

Inserts newly added element into the database \

Parameter Type Description
node (optional) Node | Connector provide the source value.

Returns object

loadDiagram

Converts the given string as a Diagram Control

Parameter Type Description
data string Defines the behavior of the diagram to be loaded

Returns Object

moveForward

send the selected nodes or connectors forward \

Returns void

moveObjects

move objects from the layer to another layer from diagram\

Parameter Type Description
objects string[] define the objects id of string array
targetLayer (optional) string define the objects id of string array

Returns void

moveObjectsUp

moves the node or connector forward within given layer \

Parameter Type Description
node NodeModel | ConnectorModel provide the source value.
currentLayer LayerModel provide the source value.

Returns void

nudge

Moves the selected objects towards the given direction

Parameter Type Description
direction NudgeDirection Defines the direction by which the objects have to be moved
x (optional) number Defines the distance by which the selected objects have to be horizontally moved
y (optional) number Defines the distance by which the selected objects have to be vertically moved

Returns void

onPropertyChanged

Updates the diagram control when the objects are changed

Parameter Type Description
newProp DiagramModel Lists the new values of the changed properties
oldProp DiagramModel Lists the old values of the changed properties

Returns void

pan

Pans the diagram control to the given horizontal and vertical offsets

Returns void

paste

Adds the given objects/ the objects in the diagram clipboard to diagram control \

Parameter Type Description
obj (optional) [] Defines the objects to be added to diagram

Returns void

print

To print Diagram

Returns void

printImage

To print native/html nodes of diagram

Parameter Type Description
image string defines image content.
options IExportOptions defines the properties of the image

Returns void

redo

Restores the last undone action

Returns void

remove

Removes the given object from diagram

Parameter Type Description
obj (optional) NodeModel | ConnectorModel Defines the object that has to be removed from diagram

Returns void

removeConstraints

Remove constraints at run time \

Parameter Type Description
constraintsType number provide the source value.
constraintsValue number provide the target value.

Returns number

removeData

Removes the user deleted element from the existing database \

Parameter Type Description
node (optional) Node | Connector provide the source value.

Returns object

removeLabels

Remove Labels at the run time \

Parameter Type Description
obj Node | ConnectorModel provide the obj value.
labels ShapeAnnotationModel[] | PathAnnotationModel[] provide the labels value.

Returns void

removeLane

Remove dynamic Lanes to swimLane at runtime \

Parameter Type Description
node NodeModel provide the node value.
lane LaneModel provide the lane value.

Returns void

removeLayer

remove the layer from diagram \

Parameter Type Description
layerId string provide the bound value.

Returns void

removePhase

Remove a phase to a swimLane at runtime \

Parameter Type Description
node NodeModel provide the node value.
phase PhaseModel provide the phase value.

Returns void

removePorts

Remove Ports at the run time \

Parameter Type Description
obj Node provide the Connector value.
ports PointPortModel[] provide the Connector value.

Returns void

removeProcess

Remove a process from the sub-processs \

Parameter Type Description
id string provide the id value.

Returns void

render

Renders the diagram control with nodes and connectors

Returns void

reset

Resets the zoom and scroller offsets to default values

Returns void

resetSegments

Resets the segments of the connectors

Returns void

rotate

Rotates the given nodes/connectors by the given angle

Parameter Type Description
obj NodeModel | ConnectorModel | SelectorModel Defines the objects to be rotated
angle number Defines the angle by which the objects have to be rotated
pivot (optional) PointModel Defines the reference point with reference to which the objects have to be rotated

Returns boolean

sameSize

Scales the given objects to the size of the first object in the group

Parameter Type Description
option SizingOptions Defines whether the node has to be horizontally scaled, vertically scaled or both
objects (optional) [] Defines the collection of objects that have to be scaled

Returns void

saveDiagram

Serializes the diagram control as a string

Returns string

scale

Scales the given objects by the given ratio

Parameter Type Description
obj NodeModel | ConnectorModel | SelectorModel Defines the objects to be resized
sx number Defines the ratio by which the objects have to be horizontally scaled
sy number Defines the ratio by which the objects have to be vertically scaled
pivot PointModel Defines the reference point with respect to which the objects will be resized

Returns boolean

select

Selects the given collection of objects \

Returns void

selectAll

Selects the all the objects. \

Returns void

sendBackward

send the selected nodes or connectors back\

Returns void

sendLayerBackward

move the layer backward \

Parameter Type Description
layerName string define the name of the layer

Returns void

sendToBack

send the selected nodes or connectors back \

Returns void

setActiveLayer

set the active layer\

Parameter Type Description
layerName string defines the name of the layer which is to be active layer.

Returns void

setStackLimit

To limit the history entry of the diagram

Parameter Type Description
stackLimit number defines stackLimit of the history manager.

Returns void

showTooltip

Shows tooltip for corresponding diagram object

Parameter Type Description
obj NodeModel | ConnectorModel Defines the object for that tooltip has to be shown

Returns void

startGroupAction

Starts grouping the actions that will be undone/restored as a whole

Returns void

startTextEdit

Specified annotation to edit mode

Parameter Type Description
node (optional) NodeModel | ConnectorModel Defines node/connector that contains the annotation to be edited
id (optional) string Defines annotation id to be edited in the node

Returns void

unGroup

UnGroup the selected nodes and connectors in diagram \

Returns void

unSelect

Removes the given object from selection list \

Parameter Type Description
obj NodeModel | ConnectorModel Removes the given object from selection list

Returns void

undo

Restores the last action that is performed

Returns void

updateData

updates the user defined element properties into the existing database \

Parameter Type Description
node (optional) Node | Connector provide the source value.

Returns object

updateViewPort

Update the diagram clipboard dimension \

Returns void

zoom

Scales the diagram control by the given factor

Parameter Type Description
factor number Defines the factor by which the diagram is zoomed
focusedPoint (optional) PointModel Defines the point with respect to which the diagram has to be zoomed

Returns void

zoomTo

Scales the diagram control by the given factor

Parameter Type Description
options ZoomOptions used to define the zoom factor, focus point and zoom type.

Returns void

Events

animationComplete

EmitType<Object>

Triggers after animation is completed for the diagram elements.

click

EmitType<IClickEventArgs>

Triggers when a node, connector or diagram is clicked

collectionChange

EmitType<ICollectionChangeEventArgs>

Triggers when a node/connector is added/removed to/from the diagram.

commandExecute

EmitType<ICommandExecuteEventArgs>

Triggers when a command executed.

connectionChange

EmitType<IConnectionChangeEventArgs>

Triggers when the connection is changed

contextMenuBeforeItemRender

EmitType<MenuEventArgs>

Triggers before rendering the context menu item

contextMenuClick

EmitType<MenuEventArgs>

Triggers when a context menu item is clicked

contextMenuOpen

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before opening the context menu

created

EmitType<Object>

Triggered when the diagram is rendered completely.

dataLoaded

EmitType<IDataLoadedEventArgs>

Triggers after diagram is populated from the external data source

doubleClick

EmitType<IDoubleClickEventArgs>

Triggers when a node, connector or diagram model is clicked twice

dragEnter

EmitType<IDragEnterEventArgs>

Triggers when a symbol is dragged into diagram from symbol palette

dragLeave

EmitType<IDragLeaveEventArgs>

Triggers when a symbol is dragged outside of the diagram.

dragOver

EmitType<IDragOverEventArgs>

Triggers when a symbol is dragged over diagram

drop

EmitType<IDropEventArgs>

Triggers when a symbol is dragged and dropped from symbol palette to drawing area

expandStateChange

EmitType<IExpandStateChangeEventArgs>

Triggers when the state of the expand and collapse icon change for a node.

fixedUserHandleClick

EmitType<FixedUserHandleClickEventArgs>

Triggers when a node/connector fixedUserHandle is clicked in the diagram.

historyChange

EmitType<IHistoryChangeArgs>

Triggers when a change is reverted or restored(undo/redo)

historyStateChange

EmitType<IBlazorCustomHistoryChangeArgs>

Triggers when a custom entry change is reverted or restored(undo/redo)

keyDown

EmitType<IKeyEventArgs>

Triggers when a user is pressing a key.

keyUp

EmitType<IKeyEventArgs>

Triggers when a user releases a key.

mouseEnter

EmitType<IMouseEventArgs>

Triggered when mouse enters a node/connector.

mouseLeave

EmitType<IMouseEventArgs>

Triggered when mouse leaves node/connector.

mouseOver

EmitType<IMouseEventArgs>

Triggered when mouse hovers a node/connector.

mouseWheel

EmitType<IMouseWheelEventArgs>

Event triggers whenever the user rotate the mouse wheel either upwards or downwards

onImageLoad

EmitType<IImageLoadEventArgs>

Triggers when the image node is loaded.

onUserHandleMouseDown

EmitType<UserHandleEventsArgs>

Triggers when a mouseDown on the user handle.

onUserHandleMouseEnter

EmitType<UserHandleEventsArgs>

Triggers when a mouseEnter on the user handle.

onUserHandleMouseLeave

EmitType<UserHandleEventsArgs>

Triggers when a mouseLeave on the user handle.

onUserHandleMouseUp

EmitType<UserHandleEventsArgs>

Triggers when a mouseUp on the user handle.

positionChange

EmitType<IDraggingEventArgs>

Triggers while dragging the elements in diagram

propertyChange

EmitType<IPropertyChangeEventArgs>

Triggers once the node or connector property changed.

rotateChange

EmitType<IRotationEventArgs>

Triggers when the diagram elements are rotated

scrollChange

EmitType<IScrollChangeEventArgs>

Triggers when the diagram is zoomed or panned

segmentChange

EmitType<ISegmentChangeEventArgs>

This event is triggered when we drag the segment thumb of Orthogonal/ Straight /Bezier connector

segmentCollectionChange

EmitType<ISegmentCollectionChangeEventArgs>

Triggers when a segment is added/removed to/from the connector.

selectionChange

EmitType<ISelectionChangeEventArgs>

Triggers when the selection is changed in diagram

sizeChange

EmitType<ISizeChangeEventArgs>

Triggers when a node is resized

sourcePointChange

EmitType<IEndChangeEventArgs>

Triggers when the connector’s source point is changed

targetPointChange

EmitType<IEndChangeEventArgs>

Triggers when the connector’s target point is changed

textEdit

EmitType<ITextEditEventArgs>

Triggers when editor got focus at the time of node’s label or text node editing.

Contents
Contents