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

Vue Diagram provides support to auto-arrange the nodes in the diagram area that is referred 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 filters nodes in the diagram based on whether their ‘Role’ property in 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.

SubmitButtonClick() {
     if (matchingNodes && matchingNodes.length > 0) {
       matchingNodes[currentIndex].style.strokeColor = 'black';
       matchingNodes[currentIndex].style.strokeWidth = 1;
     }

     const searchText = (document.getElementById('searchBox') as any).value
       .replace(/\s+/g, '')
       .toLowerCase();
     const searchWords = searchText.split(/\s+/);
     const searchRegex = new RegExp(
       searchWords.map((word) => `\\b${word}\\b`).join('.*'),
       'i'
     );
     matchingNodes = [];
     currentIndex = 0;
     diagramInstance.clearSelection();
     if (searchText !== '') {
       matchingNodes = diagramInstance.nodes.filter((node) => {
         if (
           searchRegex.test(
             (node.data as any).Role.replace(/\s+/g, '').toLowerCase()
           ) ||
           (node.data as any).Role.toLowerCase().includes(searchText)
         ) {
           return true;
         }
       });
       if (matchingNodes && matchingNodes.length > 0) {
         matchingNodes[currentIndex].style.strokeColor = 'red';
         matchingNodes[currentIndex].style.strokeWidth = 3;
         diagramInstance.dataBind();
       }
     } else {
       matchingNodes = [];
     }
     diagramInstance.bringToCenter(matchingNodes[currentIndex].wrapper.bounds);
   }

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.

Sample

Conclusion

I hope you enjoyed learning about how to search a node in layout and bring that node into center of viewport in Vue Diagram.

You can refer to our Vue 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 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, Direct-Trac, or feedback portal. We are always happy to assist you!