finish pagination component

app/content/ui/components/button/button.tscn

@@ -1,22 +1,7 @@
-[gd_scene load_steps=7 format=3 uid="uid://bsjqdvkt0u87c"]
+[gd_scene load_steps=6 format=3 uid="uid://bsjqdvkt0u87c"]
 
 [ext_resource type="Script" path="res://content/ui/components/button/button.gd" id="1_74x7g"]
-[ext_resource type="Shader" path="res://assets/materials/glass.gdshader" id="4_2xlpt"]
+[ext_resource type="Material" uid="uid://iercgso83b0a" path="res://content/ui/components/pagination/button.material" id="2_ebyeq"]
-
-[sub_resource type="ShaderMaterial" id="ShaderMaterial_oqan0"]
-resource_local_to_scene = true
-render_priority = -1
-shader = ExtResource("4_2xlpt")
-shader_parameter/color = Color(1, 1, 1, 0.3)
-shader_parameter/border_color = Color(1, 1, 1, 1)
-shader_parameter/edge_color = Color(0, 0, 0, 1)
-shader_parameter/size = Vector2(1, 1)
-shader_parameter/border_size = 0.01
-shader_parameter/border_fade_in = 0.05
-shader_parameter/border_fade_out = 0.0
-shader_parameter/corner_radius = 0.2
-shader_parameter/roughness = 0.3
-shader_parameter/grain_amount = 0.02
 
 [sub_resource type="QuadMesh" id="QuadMesh_bt05p"]
 resource_local_to_scene = true
@@ -42,7 +27,7 @@ collision_mask = 0
 
 [node name="MeshInstance3D" type="MeshInstance3D" parent="Body"]
 transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0.005)
-material_override = SubResource("ShaderMaterial_oqan0")
+material_override = ExtResource("2_ebyeq")
 mesh = SubResource("QuadMesh_bt05p")
 skeleton = NodePath("../..")
 

app/content/ui/components/flex_container/flex_container.gd

@@ -40,7 +40,6 @@ func _ready():
 	)
 
 func _update():
-	print("update")
 	var width = size.y if vertical else size.x
 	var child_size := Vector2(0, 0)
 	var child_count = 0
@@ -66,9 +65,6 @@ func _update():
 
 	child_scale = child_scale.clamp(Vector2(0.001, 0.001), Vector2(1, 1))
 
-	print(child_size)
-	print(child_scale)
-
 	var offset = 0.0
 
 	match justification:
@@ -98,8 +94,6 @@ func _update():
 			child.position = Vector3(offset, 0, 0)
 			offset += child.size.x * child_scale.x
 
-		print(offset)
-
 		match justification:
 			Justification.START, Justification.CENTER, Justification.END:
 				offset += gap

app/content/ui/components/label_container/label_container.gd

@@ -0,0 +1,25 @@
+@tool
+extends Container3D
+class_name LabelContainer3D
+
+const FontTools = preload ("res://lib/utils/font_tools.gd")
+
+@onready var label: Label3D = $Label3D
+
+@export var text: String = "Example":
+	set(value):
+		text = value
+		
+		if !is_inside_tree(): return
+
+		_update_text()
+
+func _ready():
+	print("label %s enter tree" % text)
+	_update_text()
+
+func _update_text():
+	label.text = text
+	var text_size = FontTools.get_font_size(label)
+	size = Vector3(text_size.x, text_size.y, 0.1)
+	print("label %s size %s" % [text, size])

app/content/ui/components/label_container/label_container.tscn

@@ -0,0 +1,15 @@
+[gd_scene load_steps=3 format=3 uid="uid://blkfqa3ttk0d2"]
+
+[ext_resource type="Script" path="res://content/ui/components/label_container/label_container.gd" id="1_hqtij"]
+[ext_resource type="FontVariation" uid="uid://d2ofyimg5s65q" path="res://assets/fonts/ui_font_500.tres" id="2_6y3jl"]
+
+[node name="LabelContainer" type="Node3D"]
+script = ExtResource("1_hqtij")
+size = Vector3(0.08, 0.023, 0.1)
+
+[node name="Label3D" type="Label3D" parent="."]
+pixel_size = 0.001
+text = "Example"
+font = ExtResource("2_6y3jl")
+font_size = 18
+outline_size = 0

app/content/ui/components/pagination/button.material

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a4d9b6aba4df0f124a285b82d6adc8b0682751d95ee946da6478ebcc3cfbd5f
+size 449

app/content/ui/components/pagination/button_active.material

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8221dc259207ca47a110c885bf1e5535f3bef64dd7ddbb0aaac91de95afd2159
+size 496

app/content/ui/components/pagination/pagination.gd

@@ -2,6 +2,10 @@
 extends FlexContainer3D
 
 const ButtonScene = preload ("res://content/ui/components/button/button.tscn")
+const LabelScene = preload ("res://content/ui/components/label_container/label_container.tscn")
+
+const ButtonMaterial = preload ("button.material")
+const ButtonActiveMaterial = preload ("button_active.material")
 
 @onready var prev_button = $Prev
 @onready var next_button = $Next
@@ -9,48 +13,52 @@ const ButtonScene = preload ("res://content/ui/components/button/button.tscn")
 @export var page: int = 0:
 	set(value):
 		page = clamp(value, 0, pages - 1)
-
-		if !is_inside_tree(): return
-
 		_update()
 @export var pages: int = 5:
 	set(value):
 		pages = max(1, value)
-		
-		if !is_inside_tree(): return
-
 		_update()
 @export var visible_pages: int = 5:
 	set(value):
-		visible_pages = max(1, value)
+		visible_pages = max(5, value)
-
-		if !is_inside_tree(): return
-
 		_update()
 
 func _ready():
 	_update()
 
 func _update():
+	if !is_inside_tree(): return
+
 	for child in get_children():
 		if child != prev_button&&child != next_button:
-			print("queue_free", child)
 			child.queue_free()
 			await child.tree_exited
 
 	var display_pages = min(pages, visible_pages)
-	var start_dots = pages > visible_pages&&page > visible_pages - 3
-	var end_dots = pages > visible_pages&&page < pages - visible_pages + 2
 	var center_pos = floor(display_pages / 2)
+	var start_dots = pages > visible_pages&&page > visible_pages - center_pos - 1
+	var end_dots = pages > visible_pages&&page < pages - visible_pages + floor((display_pages - 1) / 2)
+
+	var at_start = page == 0
+	prev_button.disabled = at_start
+	prev_button.mesh.visible = !at_start
+
+	var at_end = page == pages - 1
+	next_button.disabled = at_end
+	next_button.mesh.visible = !at_end
 
 	prev_button.size = Vector3(size.y, size.y, size.z)
 
 	for i in range(display_pages):
 		if (start_dots&&i == 1)||(end_dots&&i == display_pages - 2):
-			var dots = Label3D.new()
+			var container = Container3D.new()
+			container.size = Vector3(size.y, size.y, size.z)
+			add_child(container)
+			move_child(container, -2)
+
+			var dots = LabelScene.instantiate()
 			dots.text = "..."
-			add_child(dots)
+			container.add_child(dots)
-			move_child(dots, -2)
 			continue
 		
 		var button = ButtonScene.instantiate()
@@ -60,8 +68,12 @@ func _update():
 			button.label = "1"
 		elif i == display_pages - 1:
 			button.label = str(pages)
+		elif pages <= visible_pages:
+			button.label = str(i + 1)
+		elif visible_pages % 2 == 1:
+			button.label = str(clamp(page, center_pos, pages - 1 - center_pos) - center_pos + i + 1)
 		else:
-			button.label = str(clamp(page - center_pos + i + 1, 2, pages - 2))
+			button.label = str(clamp(page + 1, 3, pages - 3) - center_pos + i + 1)
 
 		button.on_button_up.connect(func(_arg):
 			page=int(button.label) - 1
@@ -70,5 +82,7 @@ func _update():
 		add_child(button)
 		move_child(button, -2)
 
+		button.mesh.material_override = ButtonActiveMaterial if (int(button.label) - 1) == page else ButtonMaterial
+
 	super._update()
 	

app/content/ui/components/pagination/pagination.tscn

@@ -5,14 +5,17 @@
 
 [node name="Pagination" type="Node3D"]
 script = ExtResource("1_3ylfj")
+page = 4
+pages = 9
+visible_pages = 6
 gap = 0.01
-size = Vector3(10, 0.05, 0.01)
+size = Vector3(9.92, 0.05, 0.01)
 
 [node name="Prev" parent="." instance=ExtResource("2_lsc4w")]
 label = "navigate_before"
 icon = true
 
 [node name="Next" parent="." instance=ExtResource("2_lsc4w")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.36, 0, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.42, 0, 0)
 label = "navigate_next"
 icon = true

app/lib/utils/font_tools.gd

@@ -1,5 +1,5 @@
 ## Returns the size of a Label3D in standard units
-static func get_font_size(label: Label3D, chars=null):
+static func get_font_size(label: Label3D, chars=null) -> Vector2:
 	var font = label.font
 
 	if font == null: