How to Add Extra Rectangle Boxes Under Layout Nodes in React Diagram?

In Syncfusion® React Diagram, you can dynamically add rectangle-shaped nodes during runtime by utilizing the add method. To create these nodes, the shape property is used, where the type is set to Basic and the shape is set to Rectangle. This allows you to add new rectangle nodes to the diagram at specific positions with custom spacing.

The following code snippet demonstrates how to add extra rectangle boxes below existing nodes during runtime

const addNodes = () => {
   const diagram = diagramInstance;
   const existingNodesCount = diagram.nodes.length;
   const newNodes = [];

   // Set a smaller vertical spacing for newly added nodes
   const horizontalSpacing = 55;
   const verticalSpacing = 40;

   for (let i = 0; i < existingNodesCount; i++) {
     const existingNode = diagram.nodes[i];

     const xPos1 = existingNode.offsetX - horizontalSpacing;
     const yPos1 = existingNode.offsetY + verticalSpacing;

     const xPos2 = existingNode.offsetX + horizontalSpacing;
     const yPos2 = existingNode.offsetY + verticalSpacing;

     // Create new nodes with adjusted positions and annotations
     const newNode1 = {
       id: 'node' + (existingNodesCount + i + 2),
       offsetX: xPos1,
       offsetY: yPos1,
       width: 30,
       height: 5,
       shape: { type: 'Basic', shape: 'Rectangle' },
       style: { fill: '#357BD2', strokeColor: 'white' },
       annotations: [
         {
           content: 'Node ' + (existingNodesCount + i + 1),
           style: { color: 'white', fill: 'transparent', bold: true },
         },
       ],
     };

     const newNode2 = {
       id: 'node1' + (existingNodesCount + i + 2),
       offsetX: xPos2,
       offsetY: yPos2,
       width: 30,
       height: 5,
       shape: { type: 'Basic', shape: 'Rectangle' },
       style: { fill: '#357BD2', strokeColor: 'white' },
       annotations: [
         {
           content: 'Node ' + (existingNodesCount + i + 2),
           style: { color: 'white', fill: 'transparent', bold: true, fontSize: 12 },
         },
       ],
     };

     diagram.add(newNode1);
     diagram.add(newNode2);
     newNodes.push(newNode1, newNode2);
   }
 }; 

The function adds new rectangle nodes below existing ones, using offsetX and offsetY to position them correctly. The horizontalSpacing controls the distance between nodes along the x-axis, while verticalSpacing adjusts the distance between nodes along the y-axis.

Sample : Click here for sample

Conclusion

I hope you enjoyed about how to add extra rectangle boxes under nodes at runtime in React diagram

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our React Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!