How to highlight some text in a TreeItem

[jowan-spooner]

Does anyone have a clue how I can highlight parts of text in a TreeItem of a Tree? The godot search results tree has this (unless that isn’t actually a tree), but I cannot find how to achieve this with my own trees.

I’d like to use a similar style in a plugin. Thanks in advance.

[dbat]

Random thought: It may be a kind of style or bbcode on the text itself. You may have to replace the text of each tree item with the marked-up text.

[jowan-spooner]

Actually that is what I’m expecting as well. But I want to know HOW to format it.

[dbat]

It is far from obvious. I’ll spend some time today trying and let you know.

[mrcdk]

This is how the editor does it godot/editor/find_in_files.cpp at master · godotengine/godot · GitHub

Basically:

extends Tree


func _ready() -> void:
	var root = create_item()
	root.set_text(0, "ROOT")
	for i in 10:
		var item = create_item(root)
		item.set_cell_mode(0, TreeItem.CELL_MODE_CUSTOM)
		item.set_text(0, "Item %s" % (i+1))
		item.set_custom_draw(0, self, "_custom_draw")


func _custom_draw(item:TreeItem, rect:Rect2) -> void:
	var text = item.get_text(0)

	var idx = text.find("1")
	if idx < 0:
		return

	var font = get_theme_font("font")
	var font_size = get_theme_font_size("font_size")

	var match_rect = rect
	match_rect.position.x += font.get_string_size(text.left(idx), HORIZONTAL_ALIGNMENT_LEFT, -1, font_size).x
	match_rect.size.x = font.get_string_size("1", HORIZONTAL_ALIGNMENT_LEFT, -1, font_size).x

	draw_rect(match_rect, Color.RED, false)

Result:

[dbat]

Great reply. Thanks (not even the OP!) Been hacking on it and it’s so confounding!

[jowan-spooner]

Hey @mrcdk, thank you so very much! I will try to see if I can make this work for my purposes. I would never have found this myself!