0

Description

"There's many use-cases requiring to display a graduated grid. This grid being in background, using a derivative of `StyleBox` seems appropriate.\r\n\r\n> [!NOTE]\r\n> This might not be the \"best\" implementation or UI choice. But as always, you are more than welcome to contribute and propose any enhancement or idea.\r\n\r\nAs for any `StyleBox`es, it can be used in any theme of your choice. The only restriction resides in the fact that the user has to specify the values ranges for X and Y axises.\r\n\r\nIn the case of this `StyleBox`, the user can define any number of grids, all with their own value steps (on both axises), line thickness and color. The grids are drawn in their definition order.\r\n\r\n> [!CAUTION]\r\n> All grids are centered around (0, 0).\r\n\r\nA text can be displayed to give an hint about values on both axises. Those text are display on the left side for the Y axis, and on the bottom side for the X axis. \r\n\r\n## Parameters\r\n\r\n* **color_background** : Background color (alpha can be conveniently be used for displaying any texture laying below the box)\r\n* **color_grids** : Colors of the successive grids\r\n\r\n\r\n* **text_disabled** : If `true`, no text is displayed\r\n* **text_level** : Defines the grid level on which the text will be displayed\r\n\r\n\r\n* **font_main** : Font to display text. If not specified, `ThemeDB.fallback_font` will be used instead\r\n* **font_size** : Size of the font. If not specified, `ThemeDB.fallback_font_size` will be used instead\r\n* **font_color** : Color of the font (_default : Black_)\r\n\r\n\r\n* **constant_thickness** : Thickness of each grid (in pixels)\r\n* **value_steps** : value increments for each grid on both axises\r\n\r\nThe following parameters have to be set programatically to reflect the value\/domain that need to be represented.\r\n\r\n* **range_min_x** : Minimum value to be displayed on X axis\r\n* **range_max_x** : Maximum value to be displayed on X axis\r\n* **range_min_y** : Minimum value to be displayed on Y axis\r\n* **range_max_y** : Maximum value to be displayed on Y axis\r\n"

Screenshots

Main code

## Custom Stylebox to draw grid.
## A grid will always start and get reference from (0, 0)
class_name StyleBoxGrid
extends StyleBox

## Colors
@export_subgroup("Colors", "color_")
## Main background color
@export var color_background : Color
## Grids color
@export var color_grids : Array[Color]

## Text
@export_subgroup("Text", "text_")
## Disable text
@export var text_disabled : bool
## Grid level to display text
@export var text_level : int

## Font
@export_subgroup("Fonts", "font_")
## Main font
@export var font_main : Font
## Font size
@export var font_size : int
## Font color
@export var font_color : Color

## Constants
@export_subgroup("Constants", "constant_")
## Grid Thickness
@export var constant_thickness : Array[float]

## Values
@export_subgroup("Values", "value_")
## Grids value steps (on both axises)
@export var value_steps : Array[Vector2]

## Ranges
@export_subgroup("Ranges", "range_")
## Min value (on Y-Axis)
@export var range_min_y : float
## Max value (on Y-Axis)
@export var range_max_y : float
## Min domain (on X-Axis)
@export var range_min_x: float
## Max domain (on X-Axis)
@export var range_max_x : float

func _draw(rid: RID, rect: Rect2) -> void:
	RenderingServer.canvas_item_set_clip(rid, true)
	var font : Font = font_main if font_main else ThemeDB.fallback_font
	var ft_sz : int = font_size if font_size != 0 else ThemeDB.fallback_font_size

	RenderingServer.canvas_item_add_rect(rid, rect, color_background)
	var valid_grid_num : int = min(
		color_grids.size(),
		value_steps.size(),
		constant_thickness.size())
	var max_thickness : float = 0
	for i : int in range(valid_grid_num):
		max_thickness = max(max_thickness, constant_thickness[i])

	var rate : Vector2 = rect.size / Vector2(range_max_x - range_min_x, range_max_y - range_min_y)

	var tx_flags : int = TextServer.BREAK_MANDATORY + TextServer.BREAK_WORD_BOUND + TextServer.BREAK_TRIM_EDGE_SPACES

	var grid_start : Vector2 = Vector2(range_min_x, range_min_y)
	for i : int in range(valid_grid_num):
		# Compute starting offset
		var cnt : Vector2 = grid_start / value_steps[i]
		var start : Vector2 = Vector2(int(cnt.x), int(cnt.y)) * value_steps[i]
		var x_st : float = start.x
		var x_pos : float = ((x_st - range_min_x) * rate.x) + max_thickness

		var skip : bool = true
		while start.x <= range_max_x:
			var logical : float = start.x - range_min_x
			var start_line : Vector2 = Vector2(logical, 0) * rate
			var end_line : Vector2 = Vector2(logical, range_max_y - range_min_y) * rate
			if i == text_level and not text_disabled:
				var txt : String = "x:%.02f\ny:%.02f" % [start.x, start.y] if skip else "%.02f" % (start.x)
				var tx_sz : Vector2 = font.get_multiline_string_size(txt, HORIZONTAL_ALIGNMENT_LEFT, -1, ft_sz, 2, tx_flags)
				var ft_dsc : float = tx_sz.y - font.get_ascent(ft_sz)
				var pos : float = max_thickness if end_line.x + max_thickness + tx_sz.x < rect.size.x else -(max_thickness + tx_sz.x)
				font.draw_multiline_string(rid, end_line + Vector2(pos, - ft_dsc - max_thickness), txt, HORIZONTAL_ALIGNMENT_LEFT, -1, ft_sz, 2, font_color, tx_flags)
			skip = false
			RenderingServer.canvas_item_add_line(rid, start_line, end_line, color_grids[i], constant_thickness[i], false)
			start.x += value_steps[i].x
		skip = true
		while start.y <= range_max_y:
			var r_y : float = range_max_y - range_min_y - start.y
			var start_line : Vector2 = Vector2(0, r_y + range_min_y) * rate
			var end_line : Vector2 = Vector2(range_max_x - range_min_x, r_y + range_min_y) * rate
			if i == text_level and not text_disabled:
				if not skip:
					var txt : String = "%.02f" % (start.y)
					var tx_sz : Vector2 = font.get_string_size(txt, HORIZONTAL_ALIGNMENT_LEFT, -1, ft_sz)
					var ft_dsc : float = font.get_descent(ft_sz)
					var y_pos : float = -max_thickness if start_line.y - max_thickness - tx_sz.y > 0 else (max_thickness + tx_sz.y - ft_dsc)
					font.draw_string(rid, start_line + Vector2(x_pos, y_pos), txt, HORIZONTAL_ALIGNMENT_LEFT, -1, ft_sz, font_color)
				skip = false
			RenderingServer.canvas_item_add_line(rid, start_line, end_line, color_grids[i], constant_thickness[i], false)
			start.y += value_steps[i].y

Comments