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

This article explains how to automatically increase the node size when text exceeds the node size using Vue Diagram.
In Syncfusion Vue 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:

<template>
 <div class="control-section">
   <div class="col-lg-9 control-section">
     <div class="content-wrapper">
       <ejs-diagram
         style="display: block"
         ref="diagramObject"
         id="diagram"
         :width="width"
         :height="height"
         :nodes="nodes"
         :connectors="connectors"
         :getNodeDefaults="getNodeDefaults"
         :textEdit="textEdit"
       ></ejs-diagram>
     </div>
   </div>
 </div>
</template>

data: function () {
   return {
     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;
         }
         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);
     },
   };
 },
 mounted: function () {
   diagramInstance = this.$refs.diagramObject.ej2Instances;
   diagramInstance.fitToPage();
 },

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:

Refer to the working sample for additional details and implementation: Click here for sample

Conclusion

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

You can refer to our Vue Diagram feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to quickly get started with configuration specifications. You can also explore our Vue 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, BoldDesk Support, or feedback portal. We are always happy to assist you!