Search results

Diagram

Represents the Diagram control

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

Properties

addInfo

Object

Allows the user to save custom information/data about diagram

Defaults to undefined

annotationTemplate

string | Function

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

string | Function

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 ‘Circle’

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

string | Function

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 provided object, which can be a node, group, or connector, onto the diagram canvas.

Parameter Type Description
obj NodeModel | ConnectorModel Specifies the object to be added to the diagram.
group (optional) boolean If a group object is passed, set it to true.

Returns Node | Connector

addChildToGroup

Adds the specified diagram object to the specified group node.

Parameter Type Description
group NodeModel The group node to which the diagram object will be added.
child string | NodeModel | ConnectorModel The diagram object to be added to the group.

Returns void

addChildToUmlNode

addChildToUmlNode - Add methods, members and attributes into a UML class runtime. \

Parameter Type Description
node NodeModel Specifies the existing UmlClass node in the diagram to which you intend to add child elements.
child UmlClassMethodModel | UmlClassAttributeModel | UmlEnumerationMemberModel Specify the child elements, such as attributes, members, or methods, to be added to the UML class.
umlChildType UmlClassChildType Specify the enum that you intend to add to the UML class.

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

Adds labels to a connector at runtime in the Blazor platform.\

Parameter Type Description
obj ConnectorModel The connector to which labels will be added.
labels PathAnnotationModel[] An array of labels to add to the connector.

Returns void

addConstraints

Adds constraints at run time. \

Parameter Type Description
constraintsType number The source value for constraints.
constraintsValue number The target value for constraints.

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

addElements

AddElements method allows us to add diagram elements such as nodes and connectors as a collection into the diagram canvas.

Parameter Type Description
obj NodeModel[] | ConnectorModel[] -Specifies the colelction object to be added to the diagram.

Returns void

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

addHistoryEntry

Adds a history entry for a change in the diagram control to the track.

Parameter Type Description
entry HistoryEntry The history entry that describes a change in the diagram.
sourceId (optional) string[] An optional array of source IDs associated with the change.

Returns void

addLabels

Adds labels to a node or connector at runtime. \

Parameter Type Description
obj NodeModel | ConnectorModel The node or connector to which labels will be added.
labels ShapeAnnotationModel[] | PathAnnotation[] | PathAnnotationModel[] An array of label objects to be added.

Returns void

addLanes

Dynamically add lanes to a swimlane at runtime. You can specify the swimlane (node), the lanes to be added (lane), and an optional index to determine where the lanes should be inserted. \

Parameter Type Description
node NodeModel The swimlane to which lanes will be added.
lane LaneModel[] -An array of LaneModel objects representing the lanes to be added.
index (optional) number The index at which the lanes should be inserted.

Returns void

addLayer

add the layer into diagram\

Parameter Type Description
layer LayerModel representing the layer to be added to the diagram.
layerObject (optional) Object[] An optional array of objects associated with the layer.

Returns void

addNode

Adds the specified node to the diagram control.

Parameter Type Description
obj NodeModel representing the node to be added to the diagram.
group (optional) boolean A boolean value indicating whether the node should be added to a group.

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 specified node to a lane within a swimlane.

Parameter Type Description
node NodeModel representing the node to be added to the lane.
swimLane string A string representing the ID of the swimlane containing the lane.
lane string A string representing the ID of the lane where the node will be added.

Returns void

addPhases

Adds phases to a swimlane at runtime. \

Parameter Type Description
node NodeModel object representing the swimlane to which phases will be added.
phases PhaseModel[] objects representing the phases to be added.

Returns void

addPorts

Adds ports to a node or connector at runtime. \

Parameter Type Description
obj NodeModel | ConnectorModel object representing the node or connector to which ports will be added.
ports PointPortModel[] | PathPortModel[] objects representing the ports to be added.

Returns void

addProcess

Adds a process into the sub-process. \

Parameter Type Description
process NodeModel A NodeModel representing the process to be added.
parentId string A string representing the parent ID where the process will be added.

Returns void

addTextAnnotation

Adds the given annotation to the specified node.

Parameter Type Description
annotation BpmnAnnotationModel Object representing the annotation to be added.
node NodeModel object representing the node to which the annotation will be added.

Returns void

align

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

Parameter Type Description
option AlignmentOptions Defining the factor by which the objects have to be aligned.
objects (optional) [] A collection of node or connector objects to be aligned.
type (optional) AlignmentMode Defines the type to be aligned

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

bringIntoView

Brings the specified bounds into view within the diagram’s viewport. \

Parameter Type Description
bound Rect Representing the bounds to be brought into view.

Returns void

bringLayerForward

Moves the specified layer forward in the drawing order. \

Parameter Type Description
layerName string A string representing the name of the layer to be moved forward.

Returns void

bringToCenter

Brings the specified bounds to the center of the viewport. \

Parameter Type Description
bound Rect representing the bounds to be centered in the viewport.

Returns void

bringToFront

Brings the selected nodes or connectors to the front of the drawing order. \

Returns void

clear

Clears all nodes and objects in the diagram, effectively resetting the diagram to an empty state.

Returns void

clearHistory

Clears the history of the diagram, removing all the recorded actions from the undo and redo history.

Returns void

clearSelection

Removes all elements from the selection list, clearing the current selection.\

Returns void

cloneLayer

Clones a layer along with its objects.\

Parameter Type Description
layerName string A string representing the name of the layer to be cloned.

Returns void

copy

Copies the selected nodes and connectors from the diagram to the diagram clipboard for copying. \

Returns Object

cut

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

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Destroys the diagram, freeing up its resources.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

distribute

Arranges a group of objects with equal intervals within the group.

Parameter Type Description
option DistributeOptions Objects that have to be equally spaced within the group.
objects (optional) [] Object defining the factor to distribute the shapes.

Returns void

doLayout

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

Returns ILayout | boolean

drag

Drags the given object (nodes, connectors, or selector) by the specified horizontal and vertical distances.

Parameter Type Description
obj NodeModel | ConnectorModel | SelectorModel representing the nodes, connectors, or selector to be dragged.
tx number A number representing the horizontal distance by which the given objects should be moved.
ty number A number representing the vertical distance by which the given objects should be moved.

Returns void

dragSourceEnd

Moves the source point of the given connector by the specified horizontal and vertical distances.

Parameter Type Description
obj ConnectorModel representing the connector whose source point needs to be moved.
tx number A number representing the horizontal distance by which the source point should be moved.
ty number A number representing the vertical distance by which the source point should be moved.

Returns void

dragTargetEnd

Moves the target point of the given connector by the specified horizontal and vertical distances.

Parameter Type Description
obj ConnectorModel representing the connector whose target point needs to be moved.
tx number A number representing the horizontal distance by which the target point should be moved.
ty number A number representing the vertical distance by which the target point should be moved.

Returns void

editSegment

Used to add or remove intermediate segments to the straight connector.

Parameter Type Description
editOptions IEditSegmentOptions An object containing various options for adding/removing segments.

Returns void

endGroupAction

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

Returns void

exportDiagram

Exports the diagram as an image or SVG element based on the specified options.

Parameter Type Description
options IExportOptions An object defining how the diagram image should be exported.

Returns string | SVGElement

exportImage

Exports a diagram as a image.

Parameter Type Description
image string A string representing the image content to be exported.
options IExportOptions -An object defining the properties of the image export.

Returns void

findElementUnderMouse

Finds the child element of the given object at the given position based on specified criteria.

Parameter Type Description
obj IElement representing the object, the child element of which has to be found.
position PointModel defines the position. The child element under this position will be found.
diagram Diagram defines the diagram value.
padding (optional) number A number representing the padding for the search area around the position.

Returns DiagramElement

findObjectUnderMouse

Finds the object that is under the given mouse position based on specified criteria.

Parameter Type Description
objects [] A collection of NodeModel or ConnectorModel objects, from which the target object has to be found.
action Actions Defines the action used to find the relevant object.
inAction boolean A boolean indicating the active state of the action.

Returns IElement

findObjectsUnderMouse

Finds all the objects that are under the given mouse position based on specified criteria.

Parameter Type Description
position PointModel The PointModel that defines the position. The objects under this position will be found.
source (optional) IElement Representing the source object. The objects under this source will be found.

Returns IElement[]

findTargetObjectUnderMouse

Finds the object that is under the given active object (source) based on specified criteria.

Parameter Type Description
objects [] A collection of node or connector objects, from which the target object has to be found.
action Actions defines the action used to find the relevant object.
inAction boolean A boolean indicating the active state of the action.
position PointModel The PointModel that defines the position
source (optional) IElement Representing the source element.

Returns IElement

fitToPage

Fits the diagram to the page with respect to mode and region. \

Parameter Type Description
options (optional) IFitOptions specify the options for fitting the diagram to the page.

Returns void

getActiveLayer

Retrieves the active layer. \

Returns LayerModel

getConnectorObject

Retrieves the connector object for the given node ID. \

Parameter Type Description
id string The ID of the node for which the connector object is to be retrieved.

Returns ConnectorModel

getCursor

Defines the cursor that corresponds to the given action.

Parameter Type Description
action string The action for which the cursor is defined.
active boolean Indicates whether the action is active.

Returns string

getDiagramAction

Returns the diagram action as a string representation.

Parameter Type Description
diagramAction DiagramAction The diagram action to be converted to a string.

Returns string

getDiagramBounds

Retrieves the bounding rectangle that encloses the entire 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

Returns the edges connected to the given node.

Parameter Type Description
args Object An object containing information about the node for which edges are to be retrieved.

Returns string[]

getHistoryStack

Retrieves the history stack values for either undo or redo actions.

Parameter Type Description
isUndoStack boolean If true, retrieves the undo stack values; if false, retrieves the redo stack values.

Returns HistoryEntry[]

getLocalData

Returns the persistence data for component

Returns any

getModuleName

Retrieves the module name associated with the diagram.

Returns string

getNodeObject

Retrieves the node object for the given node ID. \

Parameter Type Description
id string The ID of the node for which the node object is to be retrieved.

Returns NodeModel

getObject

gets the node or connector having the given name \

Parameter Type Description
name string define the name of the layer

Returns Object

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

getRootElement

Returns the route element of the component

Returns HTMLElement

getTool

Returns the tool that handles the given action.

Parameter Type Description
action string A string that defines the action that is going to be performed.

Returns ToolBase

group

Groups the selected nodes and connectors in the diagram. \

Returns void

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideTooltip

Hides the tooltip for the corresponding diagram object.

Parameter Type Description
obj NodeModel | ConnectorModel The node or connector object for which the tooltip should be hidden.

Returns void

insertData

Inserts a newly added element into the database. \

Parameter Type Description
node (optional) Node | Connector The node or connector to be inserted into the database.

Returns object

loadDiagram

Converts the given string into a Diagram Control.

Parameter Type Description
data string The string representing the diagram model JSON to be loaded.
isEJ1Data (optional) boolean A boolean indicating whether the JSON data is EJ1 data.

Returns Object

moveForward

Sends the selected nodes or connectors forward in the visual order. \

Returns void

moveObjects

Moves objects from one layer to another layer within the diagram. \

Parameter Type Description
objects string[] An array of object IDs represented as strings to be moved.
targetLayer (optional) string The ID of the target layer to which the objects should be moved.

Returns void

moveObjectsUp

Moves the node or connector forward within the given layer. \

Parameter Type Description
node NodeModel | ConnectorModel The node or connector to be moved forward within the layer.
currentLayer LayerModel representing the layer in which the node or connector should be moved.

Returns void

nudge

Moves the selected objects towards the given direction by a specified distance.

Parameter Type Description
direction NudgeDirection Defines the direction in which the objects should be moved.
x (optional) number The horizontal distance by which the selected objects should be moved.
y (optional) number The vertical distance by which the selected objects should be moved.
type (optional) string A string that defines the type of nudge action.

Returns void

onPropertyChanged

Updates the diagram control when the objects are changed by comparing new and old property values.

Parameter Type Description
newProp DiagramModel A object that lists the new values of the changed properties.
oldProp DiagramModel A object that lists the old values of the changed properties.

Returns void

pan

Pans the diagram control to the given horizontal and vertical offsets.

Parameter Type Description
horizontalOffset number The horizontal distance to which the diagram should be scrolled.
verticalOffset number The vertical distance to which the diagram should be scrolled.
focusedPoint (optional) PointModel representing the focused point during panning.
isInteractiveZoomPan (optional) boolean A boolean indicating whether the panning is interactive zoom pan.

Returns void

paste

Adds the given objects or the objects in the diagram clipboard to the diagram control. \

Parameter Type Description
obj (optional) [] An array of nodes or connectors objects to be added to diagram.

Returns void

print

Prints the diagram.

Returns void

printImage

Prints the native or HTML nodes of the diagram as an image.

Parameter Type Description
image string A string that defines the image content to be printed.
options IExportOptions An IExportOptions object that defines the properties of the image and printing options.

Returns void

redo

Reverse an undo action, essentially restoring the state of the component to a previous state after an undo operation has been performed.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

remove

Removes the specified object from the diagram.

Parameter Type Description
obj (optional) NodeModel | ConnectorModel The node or connector object to be removed from the diagram.

Returns void

removeChildFromGroup

Removes the specified diagram object from the specified group node.

Parameter Type Description
group NodeModel The group node to which the diagram object will be removed.
child string | NodeModel | ConnectorModel The diagram object to be removed from the group.

Returns void

removeConstraints

Remove constraints at run time. \

Parameter Type Description
constraintsType number The type of constraints to be removed.
constraintsValue number The value of constraints to be removed.

Returns number

removeData

Removes the user-deleted element from the existing database.\

Parameter Type Description
node (optional) Node | Connector The node or connector to be removed from the database.

Returns object

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

removeLabels

Removes labels from a node or connector at runtime. \

Parameter Type Description
obj Node | ConnectorModel Representing the node or connector to remove labels from.
labels ShapeAnnotationModel[] | PathAnnotationModel[] objects representing the labels to be removed.

Returns void

removeLane

Removes a dynamic lane from a swimlane at runtime. \

Parameter Type Description
node NodeModel representing the swimlane to remove the lane from.
lane LaneModel representing the dynamic lane to be removed.

Returns void

removeLayer

remove the layer from diagram \

Parameter Type Description
layerId string provide the bound value.

Returns void

removePhase

Removes a phase from a swimlane at runtime.\

Parameter Type Description
node NodeModel representing the swimlane to remove the phase from.
phase PhaseModel representing the phase to be removed.

Returns void

removePorts

Removes Ports at run time. \

Parameter Type Description
obj Node | Connector The node or connector to remove ports from.
ports PointPortModel[] | PathPortModel[] An array of ports to be removed.

Returns void

removeProcess

Removes a process from the BPMN sub-process. \

Parameter Type Description
id string The ID of the process to be removed.

Returns void

render

Renders the diagram control with nodes and connectors

Returns void

reset

Resets the zoom and scroller offsets to their default values.

Returns void

resetSegments

Resets the segments of the connectors to their default state. This removes any custom segments and restores the connectors to their original configuration.

Returns void

rotate

Rotates the specified nodes, connectors, or selector by the given angle.

Parameter Type Description
obj NodeModel | ConnectorModel | SelectorModel The objects to be rotated
angle number The angle by which the objects should be rotated (in degrees).
pivot (optional) PointModel The reference point with respect to which the objects will be rotated.
rotateUsingHandle (optional) boolean Whether to rotate using the handle.

Returns boolean

sameSize

Scales the specified objects to match the size of the first object in the group.

Parameter Type Description
option SizingOptions Specifies whether the objects should be horizontally scaled, vertically scaled, or both.
objects (optional) [] The collection of objects to be scaled.

Returns void

saveDiagram

Serializes the diagram control as a string.

Returns string

scale

Use this method to scale one or more objects in the diagram by specifying the horizontal and vertical scaling ratios. You can also provide a pivot point as a reference for scaling.

Parameter Type Description
obj NodeModel | ConnectorModel | SelectorModel The objects to be resized.
sx number The horizontal scaling ratio.
sy number The vertical scaling ratio.
pivot PointModel The reference point with respect to which the objects will be resized.

Returns boolean

select

Select a specified collection of nodes and connectors in the diagram. You can specify whether to clear the existing selection and provide an old value if needed. \

Parameter Type Description
objects [] An array containing the collection of nodes and connectors to be selected.
multipleSelection (optional) boolean Determines whether the existing selection should be cleared (default is false).
oldValue (optional) [] Defines the old value

Returns void

selectAll

Select all objects, including nodes and connectors, in the diagram. \

Returns void

sendBackward

Sends the selected nodes or connectors one step backward in the z-order.\

Returns void

sendLayerBackward

Use this method to change the order of layers in the diagram. This moves the specified layer behind the layer that comes after it in the layer order. \

Parameter Type Description
layerName string The name of the layer to be moved.

Returns void

sendToBack

Use this method to move the currently selected nodes or connectors to the back of the drawing order. This effectively places them behind other elements in the diagram. \

Returns void

setActiveLayer

Specify which layer in the diagram should be considered the active layer. The active layer is the one where new elements will be added and where user interactions are primarily focused. \

Parameter Type Description
layerName string The name of the layer to set as the active layer.

Returns void

setStackLimit

Define a limit on the number of history entries that the diagram’s history manager can store. This can help manage memory usage and control the undo/redo history size. Or Sets the limit for the history entries in the diagram.

Parameter Type Description
stackLimit number The limit for the history manager’s stack.

Returns void

showTooltip

Displays a tooltip for the specified diagram object.

Parameter Type Description
obj NodeModel | ConnectorModel The object for which the tooltip will be shown.

Returns void

startGroupAction

Use this method to start a group action, allowing multiple actions to be treated as a single unit during undo/redo operations. This is useful when you want to group related actions together.

Returns void

startTextEdit

Initiate the editing mode for a specific annotation within a node or connector.

Parameter Type Description
node (optional) NodeModel | ConnectorModel The node or connector containing the annotation to be edited.
id (optional) string The ID of the annotation to be edited within the node or connector.

Returns void

unGroup

UnGroup the selected nodes and connectors in diagram \

Returns void

unSelect

Remove a specific object from the current selection in the diagram. \

Parameter Type Description
obj NodeModel | ConnectorModel The object to remove from the selection.

Returns void

undo

Restores the last action that was performed.

Returns void

updateData

Updates user-defined element properties in the existing database. \

Parameter Type Description
node (optional) Node | Connector The source value representing the element to update.

Returns object

updateViewPort

Updates the dimensions of the diagram viewport. \

Returns void

zoom

Scales the diagram control based on the provided zoom factor. You can optionally specify a focused point around which the diagram will be zoomed.

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 will be zoomed.

Returns void

zoomTo

Scales the diagram control based on the provided options, which include the desired zoom factor, focus point, and zoom type.

Parameter Type Description
options ZoomOptions An object specifying the zoom factor, focus point, and zoom type.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

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

elementDraw

EmitType<IElementDrawEventArgs>

Triggered when an element is drawn using drawing Tool

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.

load

EmitType<ILoadEventArgs>

This event triggers before the diagram load.

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

onFixedUserHandleMouseDown

EmitType<FixedUserHandleEventsArgs>

Triggers when a mouseDown on the fixed user handle.

onFixedUserHandleMouseEnter

EmitType<FixedUserHandleEventsArgs>

Triggers when a mouseEnter on the fixed user handle.

onFixedUserHandleMouseLeave

EmitType<FixedUserHandleEventsArgs>

Triggers when a mouseLeave on the fixed user handle.

onFixedUserHandleMouseUp

EmitType<FixedUserHandleEventsArgs>

Triggers when a mouseUp on the fixed user handle.

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