Search results

DiagramModel API in JavaScript Diagram API control

Interface for a class Diagram

Properties

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.

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

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.

addInfo

Object

Allows the user to save custom information/data about diagram

annotationTemplate

string | Function

Customizes the annotation template

backgroundColor

string

Defines the background color of the diagram

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

commandManager

CommandManagerModel

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

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');

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

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.

dataSourceSettings

DataSourceModel

Configures the data source that is to be bound with diagram

diagramSettings

DiagramSettingsModel

Represents the diagram settings

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

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');

elementDraw

EmitType<IElementDrawEventArgs>

Triggered when an element is drawn using drawing Tool @event

enableConnectorSplit

boolean

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

enablePersistence

boolean

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

enableRtl

boolean

Enable or disable rendering component in right to left direction.

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');

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');

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');

height

string | number

Defines the height of the diagram model.

historyManager

History

Customizes the undo redo functionality

layers

LayerModel[]

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

layout

LayoutModel

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

locale

string

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

mode

RenderingMode

Defines the diagram rendering mode.

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

nodeDefaults

NodeModel

Helps to assign the default properties of nodes

nodeTemplate

string | Function

Customizes the node template

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');

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');

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');

scrollSettings

ScrollSettingsModel

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

segmentThumbShape

SegmentThumbShapes

Defines the segmentThumbShape

selectedItems

SelectorModel

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

serializationSettings

SerializationSettingsModel

Defines the serialization settings of diagram.

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

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; } … }

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');

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

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

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');

userHandleTemplate

string | Function

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

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');