Diagram properties in TypeScript

4 Dec 202421 minutes to read

Get diagram bounds

The get the diagram bounds, the getDiagramBounds method is used. The following code example shows how to get the diagram bounds

   /**
   * Retrieves the bounding rectangle that encloses the entire diagram
   */
  let bounds = diagram.getDiagramBounds();

Refresh diagram

Refreshing the diagram will re-render the entire diagram component while preserving all the property changes you have made. The refresh method is used to refresh the diagram.

   /**
   * Refresh the diagram
   */
 diagram.refresh();

Clear diagram

The clear method is used to clear the diagram. It removes all nodes and objects, making the diagram empty.

   /**
   * Clears the diagram
   */
 diagram.clear();

Destroy diagram

The destroy method is used to completely remove the diagram component from the DOM and free up any associated resources. This method is useful when you no longer need the diagram and want to ensure that all memory and resources allocated to it are properly released.

   /**
   * Destroys the diagram
   */
 diagram.destroy();

Custom cursor

The customCursor collection specified in the diagram is called on every mouse movement within the diagram is used to set the cursor based on the action. The getCursor function is then utilized to retrieve the cursor style for the specified action.

The following example demonstrates how to apply custom cursors for the Select and Drag tools using the customCursor property.

import { Diagram } from '@syncfusion/ej2-diagrams';
//Initializes the Diagram component
let diagram: Diagram = new Diagram(
  {
    width: '100%',
    height: '350px',
    //Defines nodes
    nodes: [
      {
        id: 'node1',
        width: 100,
        height: 100,
        annotations: [{ content: 'Node 1' }],
        offsetX: 200,
        offsetY: 100,
        style: {
          strokeColor: '#6BA5D7',
          fill: '#6BA5D7',
        },
      },
    ],
    //Custom cursors for Drag and select
    customCursor: [
      { action: 'Drag', cursor: '-webkit-grab' },
      { action: 'Select', cursor: 'pointer' },
    ],
  },
  '#element'
);

(document.getElementById('getCursor') as HTMLInputElement).onclick = () => {
  /**
   * parameter 1 - The action for which the cursor is defined.
   * parameter 2 - Indicates whether the action is active.
   */
  let cursor = diagram.getCursor('Drag', false);
  console.log(cursor);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <input type="button" value="getCursor" id="getCursor" />
        <div id="element"></div>
    </div>
</body>

</html>

Get custom tool

The getCustomtTool function is called when a mouse down event occurs on diagram elements. This function allows you to specify the tool to use based on the action. The getTool method is used to retrieve the tool that handles a particular action.

In the following example, getCustomTool is used to clone a node when clicking on the user handle.

/**
 * Custom tool
 */

import {
  Diagram,
  NodeModel,
  UserHandleModel,
  SelectorConstraints,
  MoveTool,
  MouseEventArgs,
  cloneObject,
  randomId,
  IElement,
  ToolBase,
} from '@syncfusion/ej2-diagrams';

let diagram: Diagram;

//Enable the clone Tool for UserHandle.
function getTool(action: string): ToolBase {
  let tool: ToolBase;
  if (action === 'clone') {
    tool = new CloneTool(diagram.commandHandler);
  }
  return tool;
}

//Defines the clone tool used to copy Node
class CloneTool extends MoveTool {
  public mouseDown(args: MouseEventArgs): void {
    let newObject: any;
    if (diagram.selectedItems.nodes.length > 0) {
      newObject = cloneObject(diagram.selectedItems.nodes[0]) as NodeModel;
    }
    newObject.id += randomId();
    diagram.paste([newObject]);
    args.source = diagram.nodes[diagram.nodes.length - 1] as IElement;
    args.sourceWrapper = args.source.wrapper;
    super.mouseDown(args);
    this.inAction = true;
  }
}

//Defines the nodes collection in diagram
let nodes: NodeModel[] = [
  {
    id: 'NewIdea',
    width: 150,
    height: 60,
    offsetX: 300,
    offsetY: 60,
    shape: { type: 'Flow', shape: 'Terminator' },
    annotations: [{ content: 'Custom tool' }],
  },
];

//Defines the user handle collection for nodes in diagram
let handles: UserHandleModel[] = [
  {
    name: 'clone',
    pathData:
      'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,' +
      '0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z ' +
      'M68.5,72.5h-30V34.4h30V72.5z',
    visible: true,
    offset: 0,
    side: 'Bottom',
    margin: { top: 0, bottom: 0, left: 0, right: 0 },
  },
];

diagram = new Diagram({
  width: '100%',
  height: '600px',
  nodes: nodes,
  selectedItems: {
    constraints: SelectorConstraints.UserHandle,
    userHandles: handles,
  },
  //set CustomTool
  getCustomTool: getTool,
});
diagram.appendTo('#element');
diagram.select([diagram.nodes[0]]);

(document.getElementById('getTool') as HTMLInputElement).onclick = () => {
  /**
   * To get tool
   * parameter  -  A string that defines the action that is going to be performed.
   */
  let cursor = diagram.getTool('clone');
  console.log(cursor);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <input type="button" value="getTool" id="getTool" />
        <div id="element"></div>
    </div>
</body>

</html>

Background color

The backgroundColor property of the diagram is used to set the background color for the entire diagram area. This property accepts various color formats such as color names, hex codes, RGB, or RGBA values.

AddInfo

The addInfo property of the diagram is used to store additional information or metadata related to the diagram. This property can hold custom data that may be useful for various purposes.

In the following example, both backgroundColor and addInfo are set for the diagram:

import { Diagram, NodeModel } from '@syncfusion/ej2-diagrams';

let diagram: Diagram;

//Defines the nodes collection in diagram
let nodes: NodeModel[] = [
  {
    id: 'NewIdea',
    width: 150,
    height: 60,
    offsetX: 300,
    offsetY: 60,
    shape: { type: 'Flow', shape: 'Terminator' },
    annotations: [{ content: 'Node' }],
  },
];
diagram = new Diagram({
  width: '100%',
  height: '600px',
  nodes: nodes,
  //Sets backgrounf color for diagram
  backgroundColor: 'yellow',
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="element"></div>
    </div>
</body>

</html>

Mode

There are two types of mode available for rendering diagrams:

  • SVG Mode: Renders the diagram objects as SVG elements.
  • Canvas Mode: Renders the diagram in a canvas.

NodeDefaults and ConnectorDefaults

The getNodeDefaults and getConnectorDefaults properties are used to assign default values to nodes and connectors, respectively. The properties set in getNodeDefaults and getConnectorDefaults have higher priority when setting default values.

The following example demonstrates how to set getNodeDefaults and getConnectorDefaults.

import { Diagram, NodeModel, ConnectorModel } from '@syncfusion/ej2-diagrams';

let diagram: Diagram;

//Defines the nodes collection in diagram
let nodes: NodeModel[] = [
  {
    id: 'NewIdea',
    offsetX: 300,
    offsetY: 60,
    shape: { type: 'Flow', shape: 'Terminator' },
    annotations: [{ content: 'Node' }],
  },
];
//Defines the connectors collection in diagram
let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourcePoint: { x: 100, y: 100 },
    targetPoint: { x: 100, y: 250 },
    annotations: [{ content: 'Connector' }],
  },
];
diagram = new Diagram({
  width: '100%',
  height: '600px',
  nodes: nodes,
  connectors: connectors,
  ///Sets node default values
  getNodeDefaults: function (node: NodeModel) {
    node.style.fill = 'green';
  },

  //Sets Connector default values
  getConnectorDefaults: function (connector: ConnectorModel) {
    connector.targetDecorator = { shape: 'Arrow' };
    connector.style = { strokeColor: 'red' };
  },
});
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="element"></div>
    </div>
</body>

</html>

Diagram settings

The inversedAlignment property in diagramSettings controls the alignment of labels and ports in a node. By default, inversedAlignment is set to true.

The example below demonstrates how to set inversedAlignment for a diagram to align node labels accordingly.

import { Diagram, PortVisibility } from '@syncfusion/ej2-diagrams';
//Initializes the Diagram component
let diagram: Diagram = new Diagram(
  {
    width: '100%',
    height: '350px',
    //Defines nodes
    nodes: [
      {
        id: 'node1',
        width: 100,
        height: 100,
        annotations: [
          {
            content: 'Node 1',
            horizontalAlignment: 'Right',
            verticalAlignment: 'Top',
          },
        ],
        offsetX: 200,
        offsetY: 100,
        style: {
          strokeColor: '#6BA5D7',
          fill: '#6BA5D7',
        },
        ports: [
          {
            id: 'p1',
            offset: { x: 0.5, y: 0 },
            horizontalAlignment: 'Right',
            verticalAlignment: 'Bottom',
            visibility: PortVisibility.Visible,
          },
        ],
      },
    ],
    //Disables inversed alignment of port and annotation
    diagramSettings: { inversedAlignment: false },
  },
  '#element'
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="element"></div>
    </div>
</body>

</html>