Interface for a class Diagram
EmitType<Object>
Triggers after animation is completed for the diagram elements.
Triggers when a node, connector or diagram is clicked
EmitType<ICollectionChangeEventArgs>
Triggers when a node/connector is added/removed to/from the diagram.
EmitType<ICommandExecuteEventArgs>
Triggers when a command executed.
EmitType<IConnectionChangeEventArgs>
Triggers when the connection is changed
EmitType<MenuEventArgs>
Triggers before rendering the context menu item
EmitType<MenuEventArgs>
Triggers when a context menu item is clicked
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before opening the context menu
EmitType<Object>
Triggered when the diagram is rendered completely.
EmitType<IDataLoadedEventArgs>
Triggers after diagram is populated from the external data source
EmitType<IDoubleClickEventArgs>
Triggers when a node, connector or diagram model is clicked twice
Triggers when a symbol is dragged into diagram from symbol palette
Triggers when a symbol is dragged outside of the diagram.
Triggers when a symbol is dragged over diagram
Triggers when a symbol is dragged and dropped from symbol palette to drawing area
EmitType<IElementDrawEventArgs>
Triggered when an element is drawn using drawing Tool
EmitType<IExpandStateChangeEventArgs>
Triggers when the state of the expand and collapse icon change for a node.
EmitType<FixedUserHandleClickEventArgs>
Triggers when a node/connector fixedUserHandle is clicked in the diagram.
Triggers when a change is reverted or restored(undo/redo)
EmitType<IBlazorCustomHistoryChangeArgs>
Triggers when a custom entry change is reverted or restored(undo/redo)
Triggers when a user is pressing a key.
Triggers when a user releases a key.
This event triggers before the diagram load.
This event triggers after the diagram elements finished loading using loadDiagram method
Triggered when mouse enters a node/connector.
Triggered when mouse leaves node/connector.
Triggered when mouse hovers a node/connector.
EmitType<IMouseWheelEventArgs>
Event triggers whenever the user rotate the mouse wheel either upwards or downwards
EmitType<FixedUserHandleEventsArgs>
Triggers when a mouseDown on the fixed user handle.
EmitType<FixedUserHandleEventsArgs>
Triggers when a mouseEnter on the fixed user handle.
EmitType<FixedUserHandleEventsArgs>
Triggers when a mouseLeave on the fixed user handle.
EmitType<FixedUserHandleEventsArgs>
Triggers when a mouseUp on the fixed user handle.
Triggers when the image node is loaded.
EmitType<UserHandleEventsArgs>
Triggers when a mouseDown on the user handle.
EmitType<UserHandleEventsArgs>
Triggers when a mouseEnter on the user handle.
EmitType<UserHandleEventsArgs>
Triggers when a mouseLeave on the user handle.
EmitType<UserHandleEventsArgs>
Triggers when a mouseUp on the user handle.
Triggers while dragging the elements in diagram
EmitType<IPropertyChangeEventArgs>
Triggers once the node or connector property changed.
Triggers when the diagram elements are rotated
EmitType<IScrollChangeEventArgs>
Triggers when the diagram is zoomed or panned
EmitType<ISegmentChangeEventArgs>
This event is triggered when we drag the segment thumb of Orthogonal/ Straight /Bezier connector
EmitType<ISegmentCollectionChangeEventArgs>
Triggers when a segment is added/removed to/from the connector.
EmitType<ISelectionChangeEventArgs>
Triggers when the selection is changed in diagram
EmitType<ISizeChangeEventArgs>
Triggers when a node is resized
Triggers when the connector’s source point is changed
Triggers when the connector’s target point is changed
Triggers when editor got focus at the time of node’s label or text node editing.
Object
Allows the user to save custom information/data about diagram
string | Function
Customizes the annotation template
string
Defines the background color of the diagram
Defines the direction of the bridge that is inserted when the segments are intersected
Defines a set of custom commands and binds them with a set of desired key gestures
Helps to assign the default properties of connector
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');Constraints are used to enable/disable certain behaviors of the diagram.
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');A collection of JSON objects where each object represents a custom cursor action. Layer is a named category of diagram shapes.
Configures the data source that is to be bound with diagram
Represents the diagram settings
<div id='diagram'></div>let diagram: Diagram = new Diagram({
...
diagramSettings: { inversedAlignment: true }
...
});
diagram.appendTo('#diagram');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'); boolean
Split the connector, when the node is dropped onto it and establish connection with that dropped node.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
string | Function
This property allows us to define HTML elements for fixed user handle
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'); 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'); 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'); 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'); 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;
} 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'); string | number
Defines the height of the diagram model.
Customizes the undo redo functionality
A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes.
Layout is used to auto-arrange the nodes in the Diagram area
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defines the diagram rendering mode.
Helps to assign the default properties of nodes
string | Function
Customizes the node template
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');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');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');Defines the current zoom value, zoom factor, scroll status and view port size of the diagram
Defines the segmentThumbShape
number
Specifies the size of the segment thumb. When not set, it defaults to matching the underlying path data.
Defines the collection of selected items, size and position of the selector
Defines the serialization settings of diagram.
<div id='diagram'></div>let diagram: Diagram = new Diagram({
...
serializationSettings: { preventDefaults: true },
...
});
diagram.appendTo('#diagram'); 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; } … }
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');Defines the precedence of the interactive tools. They are,
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
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'); string | Function
This property represents the template content of a user handle. The user can define any HTML element as a template.
string | number
Defines the width of the diagram model.
<div id='diagram'/>let diagram: Diagram = new Diagram({
width:'1000px', height:'500px' });
diagram.appendTo('#diagram');