Expand icon and collapse icon in TypeScript Diagram control

Diagram provides support to describe the state of the node. i.e., the node is expanded or collapsed state. The IsExpanded property of node is used to expand or collapse the children nodes.The Expand and Collapse support is used to compress the hierarchy view so that only the roots of each elements are visible.

The following properties of the Node are used to represent the state of the node and allows user to Expand and Collapse the desired Node:

  • ExpandIcon

  • CollapseIcon

NOTE

Icon can be created only when the node has outEdges.

To explore the properties of expand and collapse icon, refer to expandIcon and collapseIcon.

Customizing expand and collapse icon

Size and shape

Set a size for an icon by using width and height properties.

The expandIcon’s and collapseIcon’s shape property allows to define the shape of the icon.

The following code example illustrates how to create an icon of various shapes.

import {
    Diagram,
    NodeModel,
    ConnectorModel,
    HierarchicalTree,
  } from '@syncfusion/ej2-diagrams';
  Diagram.Inject(HierarchicalTree);
  let nodes: NodeModel[] = [
    {
      id: 'Start',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 50,
      annotations: [
        {
          content: 'Node1',
        },
      ],
      style: {
        fill: '#6BA5D7',
        strokeColor: 'white',
      },
      expandIcon: {
        shape: 'ArrowDown',
        width: 20,
        height: 15,
      },
      collapseIcon: {
        shape: 'ArrowUp',
        width: 20,
        height: 15,
      },
    },
    {
      id: 'Init',
      width: 140,
      height: 50,
      offsetX: 300,
      offsetY: 140,
      style: {
        fill: '#6BA5D7',
        strokeColor: 'white',
      },
      annotations: [
        {
          content: 'Node2',
        },
      ],
    },
  ];
  let connectors: ConnectorModel = {
    // Unique name for the connector
    id: 'connector1',
    // Source and Target node's name to which connector needs to be connected.
    sourceID: 'Start',
    targetID: 'Init',
    type: 'Orthogonal',
  };
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '600px',
    layout: { type: 'HierarchicalTree' },
    nodes: nodes,
    connectors: [connectors],
  });
  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/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
</head>

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

</html>

Appearance and alignment of icon

Set the borderColor, borderWidth, and background color for an icon using borderColor, borderWidth, and fill properties.

The corner radius can be set using the cornerRadius property of the icon.

The icon can be aligned relative to the node boundaries. It has margin, offset, horizontalAlignment, and verticalAlignment settings. It is quite tricky, when all four alignments are used together but gives you more control over alignment.

The iconColor property can be used to set the strokeColor of the Icon.

The following code example illustrates the customization of icons.

import { Diagram, NodeModel, ConnectorModel,HierarchicalTree } from '@syncfusion/ej2-diagrams';
Diagram.Inject(HierarchicalTree);
let nodes: NodeModel[] = [
    {
        id: 'Start',
        width: 140,
        height: 50,
        offsetX: 300,
        offsetY: 50,
        annotations: [
          {
            content: 'Node1',
          },
        ],
        style: { fill: '#6BA5D7', strokeColor: 'white' },
        expandIcon: {
          shape: 'Minus',
          width: 20,
          height: 20,
          fill: 'red',
          borderColor: 'blue',
          iconColor: 'white',
          cornerRadius: 7,
          borderWidth: 2.5,
        },
        collapseIcon: {
          shape: 'Plus',
          width: 20,
          height: 20,
          fill: 'green',
          borderColor: 'blue',
          iconColor: 'white',
          cornerRadius: 7,
          borderWidth: 2.5,
        },
      },
    {
        id: 'Init',
        width: 140,
        height: 50,
        offsetX: 300,
        offsetY: 140,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
        annotations: [{
            content: 'Node2'
        }],
    }
];
let connectors: ConnectorModel = {
    // Unique name for the connector
    id: "connector1",
    // Source and Target node's name to which connector needs to be connected.
    sourceID: "Start",
    targetID: "Init",
    type: 'Orthogonal'
};
let diagram: Diagram = new Diagram({
    width: '100%',
    height: '600px',
    layout:{type:'HierarchicalTree'},
    nodes: nodes,
    connectors: [connectors]
});
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/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
</head>

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

</html>

IsExpanded

isExpanded property is used to defines whether the node is expanded or not. The following example demonstrate node’s isExpanded property. The default value of isExpanded property is true.

let node:NodeModel =  {
        id: 'Start', width: 140, height: 50, offsetX: 300, offsetY: 50,
        //Expand state of node
        isExpanded:false
        expandIcon: {shape: 'ArrowDown',   width: 20,
        height: 15},
        collapseIcon: {shape: 'ArrowUp',  width: 20,
        height: 15}
    }