How to search a node in layout and bring that node into center of viewport

This article explains how to search a node in a layout and bring that node into the center of the viewport. In JavaScript Diagram provides support to auto-arrange the nodes in the diagram area, which is referred to as Layout.

How to search node in layout
To search for a node in the layout, we have implemented a text box that allows users to provide their search value. Enter the search value in the text box, then click the search button. In this process, the search text is trimmed to remove whitespace, converted to lowercase, and used to create a regular expression (searchRegex) for matching each word separately. Then we filter nodes in the diagram based on whether their ‘Role’ property in the data matches the searched value. If a match is found, the matched nodes are stored in the matchingNodes array. The first matching node is then highlighted by changing its stroke color to red and increasing the stroke width. Finally, the dataBind method is called to update the diagram.

document.getElementById('findNodes').onclick = function (args) {
 findNodes(input);
};
function findNodes(input) {
 if (getValue === undefined) {
   diagram.select([diagram.nodes[0]]);
   diagram.dataBind();
 }

 let getContent = document.getElementById('search').value;
 for (let i = 0; i < diagram.nodes.length; i++) {
   var name = diagram.nodes[i].data.Role.toLowerCase();
   if (name.includes(getContent.toLowerCase())) {
     getValue = diagram.nodes[i];
     diagram.bringIntoView(diagram.nodes[i].wrapper.bounds);
     diagram.select([diagram.nodes[i]]);
     diagram.dataBind();
     break;
   }
 }
 document.getElementById('search').value = '';
}

How to get the node to Viewport
To bring a node into the center of the viewport, the bringToCenter method is utilized. In this method, we provide the bounds value of the node as arguments. This enables the specific element to be brought into view within the diagram. If the node is already visible in the diagram, this method takes no action. However, if the node is partially visible or outside the current viewport, the method scrolls the diagram to ensure the node is fully visible.

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed learning about how to search for a node in a layout and bring that node into the viewport.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation to quickly get started with 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!