Scratch-like category UI

wnbaum · wnbaum · commit a01f06f21220 · 2024-06-28T17:39:46.000-04:00
This adds all uncollapsed block categories back into one large scroll container, but now with buttons that can navigate to each category.
This allows the user to see the entire selection of blocks, without the tedium of scrolling.
I think this will be nicer for adding in a little menu to create variables within the scrollbox as well.
diff --git a/addons/block_code/block_code_plugin.gd b/addons/block_code/block_code_plugin.gd
@@ -41,7 +41,8 @@ const DISABLED_CLASSES := [
 	"Picker",
 	"TitleBar",
 	"MainPanel",
-	"BlockCodePlugin"
+	"BlockCodePlugin",
+	"BlockCategoryButton"
 ]
 
 
diff --git a/addons/block_code/ui/picker/categories/block_category_button.gd b/addons/block_code/ui/picker/categories/block_category_button.gd
@@ -0,0 +1,26 @@
+@tool
+class_name BlockCategoryButton
+extends MarginContainer
+
+signal selected
+
+var category: BlockCategory
+
+@onready var _panel := %Panel
+@onready var _label := %Label
+
+
+func _ready():
+	if not category:
+		category = BlockCategory.new("Example", Color.RED)
+
+	var new_stylebox: StyleBoxFlat = _panel.get_theme_stylebox("panel").duplicate()
+	new_stylebox.bg_color = category.color
+
+	_panel.add_theme_stylebox_override("panel", new_stylebox)
+
+	_label.text = category.name
+
+
+func _on_button_pressed():
+	selected.emit(category)
diff --git a/addons/block_code/ui/picker/categories/block_category_button.tscn b/addons/block_code/ui/picker/categories/block_category_button.tscn
@@ -0,0 +1,57 @@
+[gd_scene load_steps=7 format=3 uid="uid://bdtetj0gs45hv"]
+
+[ext_resource type="Script" path="res://addons/block_code/ui/picker/categories/block_category_button.gd" id="1_pxxnl"]
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_eogpc"]
+bg_color = Color(1, 0, 0, 1)
+corner_radius_top_left = 100
+corner_radius_top_right = 100
+corner_radius_bottom_right = 100
+corner_radius_bottom_left = 100
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_ousiv"]
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_fyk0j"]
+bg_color = Color(1, 1, 1, 0.196078)
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_ha83k"]
+bg_color = Color(1, 1, 1, 0.392157)
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_dgecf"]
+
+[node name="BlockCategoryButton" type="MarginContainer"]
+custom_minimum_size = Vector2(150, 0)
+offset_right = 148.0
+offset_bottom = 32.0
+script = ExtResource("1_pxxnl")
+
+[node name="HBoxContainer" type="HBoxContainer" parent="."]
+layout_mode = 2
+
+[node name="MarginContainer" type="MarginContainer" parent="HBoxContainer"]
+custom_minimum_size = Vector2(40, 40)
+layout_mode = 2
+theme_override_constants/margin_left = 8
+theme_override_constants/margin_top = 8
+theme_override_constants/margin_right = 8
+theme_override_constants/margin_bottom = 8
+
+[node name="Panel" type="Panel" parent="HBoxContainer/MarginContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxFlat_eogpc")
+
+[node name="Label" type="Label" parent="HBoxContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+text = "Example"
+
+[node name="Button" type="Button" parent="."]
+layout_mode = 2
+mouse_default_cursor_shape = 2
+theme_override_styles/normal = SubResource("StyleBoxEmpty_ousiv")
+theme_override_styles/hover = SubResource("StyleBoxFlat_fyk0j")
+theme_override_styles/pressed = SubResource("StyleBoxFlat_ha83k")
+theme_override_styles/focus = SubResource("StyleBoxEmpty_dgecf")
+
+[connection signal="pressed" from="Button" to="." method="_on_button_pressed"]
diff --git a/addons/block_code/ui/picker/categories/block_category_display.gd b/addons/block_code/ui/picker/categories/block_category_display.gd
@@ -2,53 +2,18 @@
 class_name BlockCategoryDisplay
 extends MarginContainer
 
-signal category_expanded(value: bool)
-
 var category: BlockCategory
 
-@onready var _button := %Button
-@onready var _blocks_container := %BlocksContainer
+@onready var _label := %Label
 @onready var _blocks := %Blocks
-@onready var _background := %Background
-
-@onready var _icon_collapsed := EditorInterface.get_editor_theme().get_icon("GuiTreeArrowRight", "EditorIcons")
-@onready var _icon_expanded := EditorInterface.get_editor_theme().get_icon("GuiTreeArrowDown", "EditorIcons")
-
-var expanded: bool:
-	set = _set_expanded
-
-
-func _set_expanded(value: bool):
-	expanded = value
-
-	_blocks_container.visible = expanded
-	if expanded:
-		_button.icon = _icon_expanded
-		_background.color = category.color.darkened(0.5)
-		_background.color.a = 0.3
-	else:
-		_button.icon = _icon_collapsed
-		_background.color = category.color.darkened(0.2)
-		_background.color.a = 0.3
-
-	category_expanded.emit(expanded)
 
 
 func _ready():
-	if not category:
-		category = BlockCategory.new()
-
-	_button.text = category.name
+	_label.text = category.name
 
 	for _block in category.block_list:
 		var block: Block = _block as Block
 
 		block.color = category.color
 
 		_blocks.add_child(block)
-
-	expanded = false
-
-
-func _on_button_toggled(toggled_on):
-	expanded = toggled_on
diff --git a/addons/block_code/ui/picker/categories/block_category_display.tscn b/addons/block_code/ui/picker/categories/block_category_display.tscn
@@ -10,53 +10,25 @@ offset_right = -918.0
 offset_bottom = -246.0
 grow_horizontal = 2
 grow_vertical = 2
+theme_override_constants/margin_left = 4
+theme_override_constants/margin_bottom = 40
 script = ExtResource("1_wkdht")
 
-[node name="Background" type="ColorRect" parent="."]
-unique_name_in_owner = true
+[node name="VBoxContainer" type="VBoxContainer" parent="."]
 layout_mode = 2
 
-[node name="MarginContainer" type="MarginContainer" parent="."]
+[node name="MarginContainer" type="MarginContainer" parent="VBoxContainer"]
 layout_mode = 2
-theme_override_constants/margin_left = 10
-theme_override_constants/margin_top = 4
-theme_override_constants/margin_right = 10
 theme_override_constants/margin_bottom = 4
 
-[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer"]
-custom_minimum_size = Vector2(400, 0)
-layout_mode = 2
-
-[node name="Spacer" type="Control" parent="MarginContainer/VBoxContainer"]
-custom_minimum_size = Vector2(0, 4)
-layout_mode = 2
-
-[node name="Button" type="Button" parent="MarginContainer/VBoxContainer"]
+[node name="Label" type="Label" parent="VBoxContainer/MarginContainer"]
 unique_name_in_owner = true
 layout_mode = 2
-theme_override_font_sizes/font_size = 16
-toggle_mode = true
-text = "Category"
-flat = true
-alignment = 0
-icon_alignment = 2
+theme_override_font_sizes/font_size = 18
+text = "Example Category
+"
 
-[node name="BlocksContainer" type="VBoxContainer" parent="MarginContainer/VBoxContainer"]
-unique_name_in_owner = true
-visible = false
-layout_mode = 2
-
-[node name="Spacer2" type="Control" parent="MarginContainer/VBoxContainer/BlocksContainer"]
-custom_minimum_size = Vector2(0, 4)
-layout_mode = 2
-
-[node name="Blocks" type="VBoxContainer" parent="MarginContainer/VBoxContainer/BlocksContainer"]
+[node name="Blocks" type="VBoxContainer" parent="VBoxContainer"]
 unique_name_in_owner = true
 layout_mode = 2
 theme_override_constants/separation = 14
-
-[node name="Spacer3" type="Control" parent="MarginContainer/VBoxContainer/BlocksContainer"]
-custom_minimum_size = Vector2(0, 50)
-layout_mode = 2
-
-[connection signal="toggled" from="MarginContainer/VBoxContainer/Button" to="." method="_on_button_toggled"]
diff --git a/addons/block_code/ui/picker/picker.gd b/addons/block_code/ui/picker/picker.gd
@@ -5,6 +5,8 @@ extends MarginContainer
 signal block_picked(block: Block)
 
 @onready var _block_list := %BlockList
+@onready var _block_scroll := %BlockScroll
+@onready var _category_list := %CategoryList
 
 
 func bsd_selected(bsd: BlockScriptData):
@@ -33,6 +35,9 @@ func bsd_selected(bsd: BlockScriptData):
 
 
 func reset_picker():
+	for c in _category_list.get_children():
+		c.queue_free()
+
 	for c in _block_list.get_children():
 		c.queue_free()
 
@@ -46,6 +51,12 @@ func init_picker(extra_blocks: Array[Block] = [], extra_categories: Array[BlockC
 	for _category in block_categories:
 		var category: BlockCategory = _category as BlockCategory
 
+		var block_category_button: BlockCategoryButton = preload("res://addons/block_code/ui/picker/categories/block_category_button.tscn").instantiate()
+		block_category_button.category = category
+		block_category_button.selected.connect(_category_selected)
+
+		_category_list.add_child(block_category_button)
+
 		var block_category_display := preload("res://addons/block_code/ui/picker/categories/block_category_display.tscn").instantiate()
 		block_category_display.category = category
 
@@ -55,6 +66,15 @@ func init_picker(extra_blocks: Array[Block] = [], extra_categories: Array[BlockC
 			var block: Block = _block as Block
 			block.drag_started.connect(_block_picked)
 
+		_block_scroll.scroll_vertical = 0
+
 
 func _block_picked(block: Block):
 	block_picked.emit(block)
+
+
+func _category_selected(category: BlockCategory):
+	for block_category_display in _block_list.get_children():
+		if block_category_display.category.name == category.name:
+			_block_scroll.scroll_vertical = block_category_display.position.y
+			break
diff --git a/addons/block_code/ui/picker/picker.tscn b/addons/block_code/ui/picker/picker.tscn
@@ -4,18 +4,48 @@
 
 [node name="Picker" type="MarginContainer"]
 custom_minimum_size = Vector2(200, 0)
-offset_right = 200.0
-offset_bottom = 104.0
+offset_right = 251.0
+offset_bottom = 253.0
 script = ExtResource("1_tkt44")
 
 [node name="Panel" type="Panel" parent="."]
 layout_mode = 2
 
-[node name="ScrollContainer" type="ScrollContainer" parent="."]
+[node name="HBoxContainer" type="HBoxContainer" parent="."]
 layout_mode = 2
+theme_override_constants/separation = 12
+
+[node name="CategoryMarginContainer" type="MarginContainer" parent="HBoxContainer"]
+layout_mode = 2
+theme_override_constants/margin_left = 12
+theme_override_constants/margin_top = 12
+theme_override_constants/margin_right = 0
+theme_override_constants/margin_bottom = 12
+
+[node name="CategoryScroll" type="ScrollContainer" parent="HBoxContainer/CategoryMarginContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+horizontal_scroll_mode = 0
+
+[node name="CategoryList" type="VBoxContainer" parent="HBoxContainer/CategoryMarginContainer/CategoryScroll"]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_constants/separation = 4
+
+[node name="BlockMarginContainer" type="MarginContainer" parent="HBoxContainer"]
+layout_mode = 2
+theme_override_constants/margin_left = 0
+theme_override_constants/margin_top = 12
+theme_override_constants/margin_right = 12
+theme_override_constants/margin_bottom = 12
+
+[node name="BlockScroll" type="ScrollContainer" parent="HBoxContainer/BlockMarginContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+size_flags_horizontal = 3
 horizontal_scroll_mode = 0
 
-[node name="BlockList" type="VBoxContainer" parent="ScrollContainer"]
+[node name="BlockList" type="VBoxContainer" parent="HBoxContainer/BlockMarginContainer/BlockScroll"]
 unique_name_in_owner = true
 layout_mode = 2
 theme_override_constants/separation = 0

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,8 @@ const DISABLED_CLASSES := [`
`41`	`41`	`"Picker",`
`42`	`42`	`"TitleBar",`
`43`	`43`	`"MainPanel",`
`44`		`- "BlockCodePlugin"`
	`44`	`+ "BlockCodePlugin",`
	`45`	`+ "BlockCategoryButton"`
`45`	`46`	`]`
`46`	`47`
`47`	`48`