Merge pull request #98 from endlessm/scratch-like-categories

Scratch-like category UI

addons/block_code/block_code_plugin.gd

@@ -41,7 +41,8 @@ const DISABLED_CLASSES := [
 	"Picker",
 	"TitleBar",
 	"MainPanel",
-	"BlockCodePlugin"
+	"BlockCodePlugin",
+	"BlockCategoryButton"
 ]
 
 

addons/block_code/ui/main_panel.gd

@@ -9,11 +9,17 @@ var eia: EditorInterfaceAccess
 @onready var _drag_manager: DragManager = %DragManager
 @onready var _title_bar: TitleBar = %TitleBar
 @onready var _editor_inspector: EditorInspector = EditorInterface.get_inspector()
+@onready var _picker_split: HSplitContainer = %PickerSplit
+@onready var _collapse_button: Button = %CollapseButton
+
+@onready var _icon_collapse := EditorInterface.get_editor_theme().get_icon("Back", "EditorIcons")
+@onready var _icon_expand := EditorInterface.get_editor_theme().get_icon("Forward", "EditorIcons")
 
 var block_code_tab: Button
 var _current_block_code_node: BlockCode
 var _scene_root: Node
 var _block_code_nodes: Array
+var _collapsed: bool = false
 
 var undo_redo: EditorUndoRedoManager
 
@@ -30,6 +36,8 @@ func _ready():
 	block_code_tab = eia.Utils.find_child_by_name(eia.context_switcher, "Block Code")
 	undo_redo.version_changed.connect(_on_undo_redo_version_changed)
 
+	_collapse_button.icon = _icon_collapse
+
 
 func _on_undo_redo_version_changed():
 	if _current_block_code_node == null:
@@ -92,6 +100,11 @@ func _input(event):
 			else:
 				_drag_manager.drag_ended()
 
+	if event is InputEventKey:
+		if Input.is_key_pressed(KEY_CTRL) and event.pressed and event.keycode == KEY_BACKSLASH:
+			_collapse_button.button_pressed = not _collapse_button.button_pressed
+			toggle_collapse()
+
 
 func _print_generated_script():
 	if _current_block_code_node == null:
@@ -100,3 +113,15 @@ func _print_generated_script():
 	var script: String = _block_canvas.generate_script_from_current_window(block_script.script_inherits)
 	print(script)
 	print("Debug script! (not saved)")
+
+
+func toggle_collapse():
+	_collapsed = not _collapsed
+
+	_collapse_button.icon = _icon_expand if _collapsed else _icon_collapse
+	_picker.set_collapsed(_collapsed)
+	_picker_split.collapsed = _collapsed
+
+
+func _on_collapse_button_pressed():
+	toggle_collapse()

addons/block_code/ui/main_panel.tscn

@@ -45,24 +45,46 @@ text = "Print Generated Script"
 layout_mode = 2
 size_flags_vertical = 3
 
-[node name="HBoxContainer" type="HBoxContainer" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer"]
+[node name="PickerSplit" type="HSplitContainer" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer"]
+unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3
 size_flags_vertical = 3
 
-[node name="Picker" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/HBoxContainer" instance=ExtResource("2_hv5f3")]
+[node name="Picker" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit" instance=ExtResource("2_hv5f3")]
+unique_name_in_owner = true
+layout_mode = 2
+
+[node name="MarginContainer" type="MarginContainer" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit"]
+layout_mode = 2
+theme_override_constants/margin_bottom = 4
+
+[node name="VBoxContainer" type="VBoxContainer" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit/MarginContainer"]
+layout_mode = 2
+
+[node name="NodeBlockCanvas" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit/MarginContainer/VBoxContainer" instance=ExtResource("3_ml5y3")]
 unique_name_in_owner = true
 layout_mode = 2
 
-[node name="NodeBlockCanvas" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/HBoxContainer" instance=ExtResource("3_ml5y3")]
+[node name="BottomBar" type="HBoxContainer" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit/MarginContainer/VBoxContainer"]
+layout_mode = 2
+
+[node name="CollapseButton" type="Button" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit/MarginContainer/VBoxContainer/BottomBar"]
 unique_name_in_owner = true
 layout_mode = 2
+size_flags_horizontal = 8
+tooltip_text = "Collapse the picker toolbar. Shortcut (Ctrl-Space)"
+flat = true
+
+[node name="HBoxContainer" type="HBoxContainer" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit/MarginContainer/VBoxContainer/BottomBar"]
+layout_mode = 2
 
 [node name="DragManager" parent="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer" instance=ExtResource("4_yijtu")]
 unique_name_in_owner = true
 layout_mode = 2
 mouse_filter = 2
-picker_path = NodePath("../HBoxContainer/Picker")
-block_canvas_path = NodePath("../HBoxContainer/NodeBlockCanvas")
+picker_path = NodePath("../PickerSplit/Picker")
+block_canvas_path = NodePath("../PickerSplit/MarginContainer/VBoxContainer/NodeBlockCanvas")
 
 [connection signal="pressed" from="MarginContainer/HBoxContainer/ScriptVBox/HBoxContainer/Button" to="." method="_on_button_pressed"]
+[connection signal="pressed" from="MarginContainer/HBoxContainer/ScriptVBox/MarginContainer/PickerSplit/MarginContainer/VBoxContainer/BottomBar/CollapseButton" to="." method="_on_collapse_button_pressed"]

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)

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"]

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

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"]

addons/block_code/ui/picker/picker.gd

@@ -5,6 +5,9 @@ extends MarginContainer
 signal block_picked(block: Block)
 
 @onready var _block_list := %BlockList
+@onready var _block_scroll := %BlockScroll
+@onready var _category_list := %CategoryList
+@onready var _widget_container := %WidgetContainer
 
 
 func bsd_selected(bsd: BlockScriptData):
@@ -33,6 +36,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 +52,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 +67,19 @@ 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
+
+
+func set_collapsed(collapsed: bool):
+	_widget_container.visible = not collapsed