Layout events in React Diagram control

25 Mar 202523 minutes to read

DataLoaded event

The dataLoaded event is triggered after the diagram is populated from the external data source.

The following code example explains the data loaded event in the diagram.

  function dataLoaded(args) {
    //we can get diagram instance in args.
    console.log(args);
  }
  <DiagramComponent id="diagram" width={'100%'} height={'600px'}
      nodes={nodes} connectors={connectors}
      // Event Triggers when the state of the layout rendering changes
      dataLoaded={dataLoaded}
      //Uses layout to auto-arrange nodes on the diagram page
      layout=>
      {/* Inject necessary services for the diagram */}
      <Inject services={[HierarchicalTree]} />
  </DiagramComponent>

ExpandStateChange event

The expandStateChange will be triggered when the state of the expand and collapse icon change for a node.

The following code example explains the expandStateChange event in the diagram.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, HierarchicalTree } from '@syncfusion/ej2-react-diagrams';


//Initialize nodes 
let nodes = [
    {
        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' }],
    },
];

//Initializes connectors
let connectors = [{
    id: 'connector1',
    sourceID: 'Start',
    targetID: 'Init',
    type: 'Orthogonal',
}];

export default function App() {

    // Function expand/collapse state changes
    function expandStateChange(args) {
        //We can get the expanded or collapsed state in args
        console.log('Expanded ' + args.state);
    }
    return (
        <div>
            <DiagramComponent
                id="container"
                width={'100%'}
                height={'550px'}
                nodes={nodes}
                connectors={connectors}
                // Event Triggers when the state of the expand and collapse icon change
                expandStateChange={expandStateChange}
                //Uses layout to auto-arrange nodes on the diagram page
                layout={{
                    //Sets layout type
                    type: 'HierarchicalTree',
                }}
            >

                {/* Inject necessary services for the diagram */}
                <Inject services={[HierarchicalTree]} />
            </DiagramComponent>

        </div>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, HierarchicalTree, ConnectorModel, NodeModel, IExpandStateChangeEventArgs } from '@syncfusion/ej2-react-diagrams';


//Initialize nodes 
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' }],
  },
];

//Initializes connectors
let connectors: ConnectorModel[] = [{
  id: 'connector1',
  sourceID: 'Start',
  targetID: 'Init',
  type: 'Orthogonal',
}];

export default function App() {

  // Function expand/collapse state changes
  function expandStateChange(args: IExpandStateChangeEventArgs) {
    //We can get the expanded or collapsed state in args
    console.log('Expanded ' + args.state);
  }
  return (
    <div>
      <DiagramComponent
        id="container"
        width={'100%'}
        height={'550px'}
        nodes={nodes}
        connectors={connectors}
        // Event Triggers when the state of the expand and collapse icon change
        expandStateChange={expandStateChange}
        //Uses layout to auto-arrange nodes on the diagram page
        layout={{
          //Sets layout type
          type: 'HierarchicalTree',
        }}
      >

        {/* Inject necessary services for the diagram */}
        <Inject services={[HierarchicalTree]} />
      </DiagramComponent>

    </div>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render(<App />);

Animation complete event

The animationComplete event is triggered after the animation of the diagram elements is completed. The following example demonstrates how to handle the animation complete event and customize based on the expand state of the root node.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, HierarchicalTree, LayoutAnimation } from '@syncfusion/ej2-react-diagrams';


//Initialize nodes 
let nodes = [
    {
        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' }],
    },
    {
        id: 'Init2',
        width: 140,
        height: 50,
        offsetX: 100,
        offsetY: 140,
        style: { fill: '#6BA5D7', strokeColor: 'white' },
        annotations: [{ content: 'Node3' }],
    },
    {
        id: 'Init3',
        width: 140,
        height: 50,
        offsetX: 150,
        offsetY: 140,
        style: { fill: '#6BA5D7', strokeColor: 'white' },
        annotations: [{ content: 'Node4' }],
    }
];

//Initializes connectors
let connectors = [
    {
        id: 'connector1',
        sourceID: 'Start',
        targetID: 'Init',
        type: 'Orthogonal',
    },
    {
        id: 'connector2',
        sourceID: 'Start',
        targetID: 'Init2',
        type: 'Orthogonal',
    },
    {
        id: 'connector3',
        sourceID: 'Init2',
        targetID: 'Init3',
        type: 'Orthogonal',
    }
];

export default function App() {
    let diagramInstance;

    // Function to handle animation state changes
    function animationComplete() {
        console.log('Animation complete');
        diagramInstance.nodes[0].style.fill =
            diagramInstance.nodes[0].style.fill === '#6BA5D7' ? 'red' : '#6BA5D7';
        diagramInstance.dataBind();

        //customize
    }
    return (
        <div>
            <DiagramComponent
                id="container"
                width={'80%'}
                height={'550px'}
                nodes={nodes}
                connectors={connectors}
                ref={(diagram) => (diagramInstance = diagram)}
                // Event Triggers when animation complete
                animationComplete={animationComplete}
                //Uses layout to auto-arrange nodes on the diagram page
                layout={{
                    //Sets layout type
                    type: 'HierarchicalTree',
                }}
            >

                {/* Inject necessary services for the diagram */}
                <Inject services={[LayoutAnimation, HierarchicalTree]} />
            </DiagramComponent>

        </div>
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, HierarchicalTree, LayoutAnimation, ConnectorModel, NodeModel, ShapeStyleModel } from '@syncfusion/ej2-react-diagrams';


//Initialize nodes 
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' }],
  },
  {
    id: 'Init2',
    width: 140,
    height: 50,
    offsetX: 100,
    offsetY: 140,
    style: { fill: '#6BA5D7', strokeColor: 'white' },
    annotations: [{ content: 'Node3' }],
  },
  {
    id: 'Init3',
    width: 140,
    height: 50,
    offsetX: 150,
    offsetY: 140,
    style: { fill: '#6BA5D7', strokeColor: 'white' },
    annotations: [{ content: 'Node4' }],
  }
];

//Initializes connectors
let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourceID: 'Start',
    targetID: 'Init',
    type: 'Orthogonal',
  },
  {
    id: 'connector2',
    sourceID: 'Start',
    targetID: 'Init2',
    type: 'Orthogonal',
  },
  {
    id: 'connector3',
    sourceID: 'Init2',
    targetID: 'Init3',
    type: 'Orthogonal',
  }
];

export default function App() {
  let diagramInstance: DiagramComponent;

  // Function to handle animation state changes
  function animationComplete() {
    console.log('Animation complete');
    (diagramInstance.nodes[0].style as ShapeStyleModel).fill =
      (diagramInstance.nodes[0].style as ShapeStyleModel).fill === '#6BA5D7' ? 'red' : '#6BA5D7';
    diagramInstance.dataBind();

    //customize
  }
  return (
    <div>
      <DiagramComponent
        id="container"
        width={'80%'}
        height={'550px'}
        nodes={nodes}
        connectors={connectors}
        ref={(diagram: any) => (diagramInstance = diagram)}
        // Event Triggers when the animation complete
        animationComplete={animationComplete}
        //Uses layout to auto-arrange nodes on the diagram page
        layout={{
          //Sets layout type
          type: 'HierarchicalTree',
        }}
      >

        {/* Inject necessary services for the diagram */}
        <Inject services={[LayoutAnimation, HierarchicalTree]} />
      </DiagramComponent>

    </div>
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render(<App />);

Layout updated event

The layoutUpdated event is triggered when the layout rendering process in the diagram either starts or completes. This event allows users to track the state of the layout rendering process.

The following code example explains the layout updated event in the diagram.

function handleLayoutUpdated(args){
        if (args.state === 'Started') {
            console.log('Layout started rendering');
        }
}

<DiagramComponent id="diagram" width={'100%'} height={'550px'}
    nodes={nodes} connectors={connectors}
    layout=
    // Event Triggers when the state of the layout rendering changes
    layoutUpdated={handleLayoutUpdated}>
    {/* Inject necessary services for the diagram */}
    <Inject services={[HierarchicalTree]} />
</DiagramComponent>