How to automatically increase the node size when text exceeds the node size
let diagram: Diagram = new Diagram({
width: '100%', height: 600, nodes: nodes, connectors: connectors,
constraints: DiagramConstraints.Default | (DiagramConstraints.Bridging | DiagramConstraints.LineRouting),
getNodeDefaults: getNodeDefaults,
getConnectorDefaults: getConnectorDefaults,
created: onCreated,
// to automatically increase the node size when text exceeds the node size
textEdit: function () {
var nodes = diagram.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;
diagram.dataBind();
} else if (bounds.height < 50) {
node.height = 50;
diagram.dataBind();
} else {
node.height = bounds.height + 15;
diagram.dataBind();
}
if (bounds.width > node.width) {
node.width = bounds.width + 15;
diagram.dataBind();
} else if (bounds.width < 50) {
node.width = 50;
diagram.dataBind();
} else {
node.width = bounds.width + 15;
diagram.dataBind();
}
diagram.doLayout();
}, 50);
},
});- The selected node is stored in a variable “node”. The height and width of the annotation are obtained from the selected node. The bounds of the node’s annotation are stored in the variable “bounds”.
- If the annotation’s height is greater than the node’s height, then the node’s height is assigned with the value of annotation’s height plus 15. If the annotation’s width is greater than the node’s width, then the node’s width is assigned with the value of annotation’s width plus 15. A value of 15 is added to annotation’s height or width to prevent the annotation from getting congested in the node.
- If the height and width of the annotation are lesser than 50, then the height and width of the node are set to 50.
Refer to the working sample for additional details and implementation: Sample
Conclusion
We hope you enjoyed learning about how to automatically increase the node size when text exceeds the node size.
You can refer to our JavaScript 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 JavaScript 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!