Text search on canvas

[PoojaUppalapati]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

When nodes and combos are drawn on canvas, there is no way to search for some text within those nodes

Environment	Info
g2	4.0.15
System	-
Browser	-

---

When there is a large graph, it will be helpful to the user to search for something and find it rather than expand each node

[hustcc]

很好的建议。

类似语雀的 canvas 文本搜索，基于 G 的栈，都能使用一套方案，我们最近试试，如果感兴趣的，也可以参入，我来指导你实现。

[hustcc]

nice suggestion.

Similar to the canvas text search of Yuque, based on the G stack, we can use one set of solutions on G2 G2Plot G6.

We recently tried it. If you are interested, you can also participate. I will guide you to implement it.

[PoojaUppalapati]

Yes, please, I would like to try

[hustcc]

How

G2 and G6 all based on antvis/g . G has a model layer which contains all the node information, and the data structure of no is TREE. Text is a node type in G. so:

1. We should get the G instance from G2/G6 instance
2. Recursive traversal the node tree of G
3. Filter out the nodes with type = 'text'
4. Get all the text information, include: x, y, width, height, text, font, as var named textInfoArray
5. generate text dom node with html by textInfoArray, and set the style color: transparent
6. done

Press ctrl+f to test.

API design

import GTS rom 'g-text-search';

// G2 instance
const chart = new Chart('container', { ... });

// new with G instance
const gts = new GTS(chart.canvas);

gts.generate('container');