How to automatically increase the node size when text exceeds the node size using React Diagram?

In Syncfusion React Diagram, annotations can be applied to both nodes and connectors. The annotations of a node can be dynamically edited by double-clicking the node. Upon completing the text editing, the associated “text edit” event is triggered.

Within this event, it is possible to retrieve the bounds of both the annotations and the corresponding node. Consequently, adjustments to the size of the node can be made based on the bounds of the annotations within the text edit event handler.

Code-snippet:

<DiagramComponent
           id="diagram"
           ref={(diagram) => (diagramInstance = diagram)}
           width={'100%'}
           height={'645px'}
           nodes={nodes}
           textEdit={() => {
             var nodes = diagramInstance.selectedItems.nodes[0];
             setTimeout(() => {
               let id = nodes.id;
               let node = nodes;
               let annotation = node.annotations[0].id;
               let bounds = document
                 .getElementById(node.id + '_' + annotation)
                 .getBoundingClientRect();
               if (bounds.height > node.height) {
                 node.height = bounds.height + 15;
               } else if (bounds.height < 50) {
                 node.height = 50;
               } else {
                 node.height = bounds.height + 15;
                 diagramInstance.dataBind();
               }
               if (bounds.width > node.width) {
                 node.width = bounds.width + 15;
               } else if (bounds.width < 50) {
                 node.width = 50;
               } else {
                 node.width = bounds.width + 15;
               }
               diagramInstance.dataBind();
             }, 50);
           }}
         >
           <Inject services={[UndoRedo]} />
         </DiagramComponent> 

Inside the textEdit event, the bounds of the annotation are determined using the getBoundingClientRect method. Subsequently, a comparison is performed between these values and the dimensions of the node. If the dimensions of the annotation exceed those of the node, the size of the node is adjusted accordingly, with an additional 15px to prevent congestion. Moreover, to ensure a minimum size, the node is set to a minimum of 50px.

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to automatically increase the node size when text exceeds the node size using React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present 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 React Spreadsheet and other components.

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