Add TemplateEditor to generate UI based on a block format string

This new component replaces StatementBlock.format_string in favour of a
more declarative API.

https://phabricator.endlessm.com/T35564

Author: dylanmccall

addons/block_code/ui/blocks/parameter_block/parameter_block.gd

@@ -4,14 +4,15 @@ extends Block
 
 const Constants = preload("res://addons/block_code/ui/constants.gd")
 const Util = preload("res://addons/block_code/ui/util.gd")
+const ParameterOutput = preload("res://addons/block_code/ui/blocks/utilities/parameter_output/parameter_output.gd")
 
 @export var block_format: String = ""
 @export var statement: String = ""
 @export var variant_type: Variant.Type
 @export var defaults: Dictionary = {}
 
+@onready var _template_editor := %TemplateEditor
 @onready var _panel := $Panel
-@onready var _hbox := %HBoxContainer
 
 var param_name_input_pairs: Array
 var param_input_strings: Dictionary  # Only loaded from serialized
@@ -36,7 +37,8 @@ func _ready():
 	if not Util.node_is_part_of_edited_scene(self):
 		_panel.add_theme_stylebox_override("panel", _panel_normal)
 
-	format()
+	_template_editor.format_string = block_format
+	_template_editor.parameter_defaults = defaults
 
 	if param_input_strings:
 		for pair in param_name_input_pairs:
@@ -81,10 +83,6 @@ static func get_scene_path():
 	return "res://addons/block_code/ui/blocks/parameter_block/parameter_block.tscn"
 
 
-func format():
-	param_name_input_pairs = StatementBlock.format_string(self, %HBoxContainer, block_format, defaults)
-
-
 func _on_focus_entered():
 	_panel.add_theme_stylebox_override("panel", _panel_focus)
 

addons/block_code/ui/blocks/parameter_block/parameter_block.tscn

@@ -1,7 +1,8 @@
-[gd_scene load_steps=4 format=3 uid="uid://clipm2dd28jde"]
+[gd_scene load_steps=5 format=3 uid="uid://clipm2dd28jde"]
 
 [ext_resource type="Script" path="res://addons/block_code/ui/blocks/parameter_block/parameter_block.gd" id="1_0hajy"]
 [ext_resource type="PackedScene" uid="uid://c7puyxpqcq6xo" path="res://addons/block_code/ui/blocks/utilities/drag_drop_area/drag_drop_area.tscn" id="2_gy5co"]
+[ext_resource type="PackedScene" uid="uid://b1xvp3u11h41s" path="res://addons/block_code/ui/blocks/utilities/template_editor/template_editor.tscn" id="3_shl1a"]
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_dbera"]
 bg_color = Color(1, 1, 1, 1)
@@ -35,17 +36,17 @@ layout_mode = 2
 
 [node name="MarginContainer" type="MarginContainer" parent="."]
 layout_mode = 2
-size_flags_horizontal = 0
 mouse_filter = 2
+
+[node name="TemplateEditor" parent="MarginContainer" instance=ExtResource("3_shl1a")]
+unique_name_in_owner = true
+layout_mode = 2
+size_flags_horizontal = 0
 theme_override_constants/margin_left = 10
 theme_override_constants/margin_top = 8
 theme_override_constants/margin_right = 10
 theme_override_constants/margin_bottom = 8
-
-[node name="HBoxContainer" type="HBoxContainer" parent="MarginContainer"]
-unique_name_in_owner = true
-layout_mode = 2
-mouse_filter = 2
+format_string = ""
 
 [connection signal="focus_entered" from="." to="." method="_on_focus_entered"]
 [connection signal="focus_exited" from="." to="." method="_on_focus_exited"]

addons/block_code/ui/blocks/statement_block/statement_block.gd

@@ -4,13 +4,15 @@ extends Block
 
 const ParameterInput = preload("res://addons/block_code/ui/blocks/utilities/parameter_input/parameter_input.gd")
 const ParameterInputScene = preload("res://addons/block_code/ui/blocks/utilities/parameter_input/parameter_input.tscn")
+const ParameterOutput = preload("res://addons/block_code/ui/blocks/utilities/parameter_output/parameter_output.gd")
+const ParameterOutputScene = preload("res://addons/block_code/ui/blocks/utilities/parameter_output/parameter_output.tscn")
 
 @export var block_format: String = ""
 @export var statement: String = ""
 @export var defaults: Dictionary = {}
 
+@onready var _template_editor := %TemplateEditor
 @onready var _background := %Background
-@onready var _hbox := %HBoxContainer
 
 var param_name_input_pairs: Array
 var param_input_strings: Dictionary  # Only loaded from serialized
@@ -23,7 +25,8 @@ func _ready():
 		_background.show_top = false
 	_background.color = color
 
-	format()
+	_template_editor.format_string = block_format
+	_template_editor.parameter_defaults = defaults
 
 	if param_input_strings:
 		for pair in param_name_input_pairs:
@@ -82,80 +85,16 @@ func get_instruction_node() -> InstructionTree.TreeNode:
 
 
 func format():
-	param_name_input_pairs = format_string(self, %HBoxContainer, block_format, defaults)
+	print("AAAAAH")
 
 
 static func format_string(parent_block: Block, attach_to: Node, string: String, _defaults: Dictionary) -> Array:
-	var _param_name_input_pairs = []
-	var regex = RegEx.new()
-	regex.compile("\\[([^\\]]+)\\]|\\{([^}]+)\\}")  # Capture things of format {test} or [test]
-	var results := regex.search_all(string)
-
-	var start: int = 0
-	for result in results:
-		var label_text := string.substr(start, result.get_start() - start)
-		if label_text != "":
-			var label = Label.new()
-			label.add_theme_color_override("font_color", Color.WHITE)
-			label.text = label_text
-			attach_to.add_child(label)
-
-		var param := result.get_string()
-		var copy_block: bool = param[0] == "["
-		param = param.substr(1, param.length() - 2)
-
-		var split := param.split(": ")
-		var param_name := split[0]
-		var param_type_str := split[1]
-
-		var param_type = null
-		var option := false
-		if param_type_str == "OPTION":  # Easy way to specify dropdown option
-			option = true
-		else:
-			param_type = Types.STRING_TO_VARIANT_TYPE[param_type_str]
-
-		var param_default = null
-		if _defaults.has(param_name):
-			param_default = _defaults[param_name]
-
-		var param_node: Node
-
-		if copy_block:
-			var parameter_output: ParameterOutput = preload("res://addons/block_code/ui/blocks/utilities/parameter_output/parameter_output.tscn").instantiate()
-			parameter_output.name = "ParameterOutput%d" % start  # Unique path
-			parameter_output.block_params = {
-				"block_format": param_name,
-				"statement": param_name,
-				"variant_type": param_type,
-				"color": parent_block.color,
-				"scope": parent_block.get_entry_statement() if parent_block is EntryBlock else ""
-			}
-			parameter_output.block = parent_block
-			attach_to.add_child(parameter_output)
-		else:
-			var parameter_input: ParameterInput = ParameterInputScene.instantiate()
-			parameter_input.name = "ParameterInput%d" % start  # Unique path
-			parameter_input.placeholder = param_name
-			if param_type != null:
-				parameter_input.variant_type = param_type
-			elif option:
-				parameter_input.option = true
-			parameter_input.modified.connect(func(): parent_block.modified.emit())
-
-			attach_to.add_child(parameter_input)
-			if param_default:
-				parameter_input.set_raw_input(param_default)
-
-			_param_name_input_pairs.append([param_name, parameter_input])
-
-		start = result.get_end()
-
-	var label_text := string.substr(start)
-	if label_text != "":
-		var label = Label.new()
-		label.add_theme_color_override("font_color", Color.WHITE)
-		label.text = label_text
-		attach_to.add_child(label)
-
-	return _param_name_input_pairs
+	# FIXME: This is ridiculous. Just rewrite this mess.
+	#        We need the default value to be figured out at the end of it all,
+	#        and not serialized. Only a value the user explicitly sets should
+	#        be serialized. A list of options should not be serialized. It
+	#        populates ParameterInput, but it is not the same thing as its
+	#        value.
+	
+	print("NOOOOO")
+	return []

addons/block_code/ui/blocks/statement_block/statement_block.tscn

@@ -1,15 +1,16 @@
-[gd_scene load_steps=5 format=3 uid="uid://c84vmg3odrtxt"]
+[gd_scene load_steps=6 format=3 uid="uid://c84vmg3odrtxt"]
 
-[ext_resource type="Script" path="res://addons/block_code/ui/blocks/statement_block/statement_block.gd" id="1_6wvlf"]
-[ext_resource type="Script" path="res://addons/block_code/ui/blocks/utilities/background/background.gd" id="2_lctqt"]
-[ext_resource type="PackedScene" uid="uid://c7puyxpqcq6xo" path="res://addons/block_code/ui/blocks/utilities/drag_drop_area/drag_drop_area.tscn" id="2_owgdx"]
-[ext_resource type="PackedScene" uid="uid://b1oge52xhjqnu" path="res://addons/block_code/ui/blocks/utilities/snap_point/snap_point.tscn" id="3_5vaov"]
+[ext_resource type="Script" path="res://addons/block_code/ui/blocks/statement_block/statement_block.gd" id="1_1vvoi"]
+[ext_resource type="Script" path="res://addons/block_code/ui/blocks/utilities/background/background.gd" id="2_xnyfs"]
+[ext_resource type="PackedScene" uid="uid://c7puyxpqcq6xo" path="res://addons/block_code/ui/blocks/utilities/drag_drop_area/drag_drop_area.tscn" id="3_m80p6"]
+[ext_resource type="PackedScene" uid="uid://b1xvp3u11h41s" path="res://addons/block_code/ui/blocks/utilities/template_editor/template_editor.tscn" id="4_fupjs"]
+[ext_resource type="PackedScene" uid="uid://b1oge52xhjqnu" path="res://addons/block_code/ui/blocks/utilities/snap_point/snap_point.tscn" id="5_l3h04"]
 
 [node name="StatementBlock" type="MarginContainer"]
 size_flags_horizontal = 0
 focus_mode = 2
 mouse_filter = 2
-script = ExtResource("1_6wvlf")
+script = ExtResource("1_1vvoi")
 block_name = &"statement_block"
 label = "StatementBlock"
 bottom_snap_path = NodePath("VBoxContainer/SnapPoint")
@@ -33,10 +34,10 @@ theme_override_constants/margin_bottom = 0
 unique_name_in_owner = true
 layout_mode = 2
 mouse_filter = 1
-script = ExtResource("2_lctqt")
+script = ExtResource("2_xnyfs")
 color = Color(1, 1, 1, 1)
 
-[node name="DragDropArea" parent="VBoxContainer/TopMarginContainer" instance=ExtResource("2_owgdx")]
+[node name="DragDropArea" parent="VBoxContainer/TopMarginContainer" instance=ExtResource("3_m80p6")]
 layout_mode = 2
 
 [node name="MarginContainer" type="MarginContainer" parent="VBoxContainer/TopMarginContainer"]
@@ -47,14 +48,12 @@ theme_override_constants/margin_top = 6
 theme_override_constants/margin_right = 12
 theme_override_constants/margin_bottom = 6
 
-[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/TopMarginContainer/MarginContainer"]
+[node name="TemplateEditor" parent="VBoxContainer/TopMarginContainer/MarginContainer" instance=ExtResource("4_fupjs")]
 unique_name_in_owner = true
-custom_minimum_size = Vector2(50, 0)
 layout_mode = 2
-mouse_filter = 2
-theme_override_constants/separation = 0
+format_string = ""
 
-[node name="SnapPoint" parent="VBoxContainer" instance=ExtResource("3_5vaov")]
+[node name="SnapPoint" parent="VBoxContainer" instance=ExtResource("5_l3h04")]
 layout_mode = 2
 
 [connection signal="mouse_down" from="VBoxContainer/TopMarginContainer/DragDropArea" to="." method="_on_drag_drop_area_mouse_down"]

addons/block_code/ui/blocks/utilities/parameter_input/parameter_input.gd

@@ -11,6 +11,7 @@ signal modified
 @export var variant_type: Variant.Type = TYPE_STRING
 @export var block_type: Types.BlockType = Types.BlockType.VALUE
 var option: bool = false
+var default_value: Variant
 
 @onready var _panel := %Panel
 @onready var snap_point := %SnapPoint
@@ -98,6 +99,7 @@ func _set_placeholder(new_placeholder: String) -> void:
 		return
 
 	_line_edit.placeholder_text = placeholder
+	_input_switcher.tooltip_text = placeholder
 
 
 func _ready():
@@ -111,6 +113,9 @@ func _ready():
 
 	_update_visible_input()
 
+	if default_value:
+		set_raw_input(default_value)
+
 
 func get_snapped_block() -> Block:
 	return snap_point.get_snapped_block()

addons/block_code/ui/blocks/utilities/parameter_input/parameter_input.tscn

@@ -10,12 +10,12 @@ corner_radius_top_right = 40
 corner_radius_bottom_right = 40
 corner_radius_bottom_left = 40
 
-[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_6oowp"]
-
 [sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_afyv2"]
 
 [sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_3r4mt"]
 
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_6oowp"]
+
 [sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_5hq7f"]
 
 [sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_fjquj"]
@@ -60,13 +60,13 @@ theme_override_constants/margin_bottom = 4
 unique_name_in_owner = true
 layout_mode = 2
 mouse_filter = 1
-theme_override_colors/font_color = Color(0.118581, 0.118581, 0.118581, 1)
-theme_override_colors/font_uneditable_color = Color(0.117647, 0.117647, 0.117647, 1)
 theme_override_colors/font_placeholder_color = Color(0.76662, 0.76662, 0.76662, 1)
+theme_override_colors/font_uneditable_color = Color(0.117647, 0.117647, 0.117647, 1)
+theme_override_colors/font_color = Color(0.118581, 0.118581, 0.118581, 1)
 theme_override_constants/minimum_character_width = 0
-theme_override_styles/normal = SubResource("StyleBoxEmpty_6oowp")
 theme_override_styles/focus = SubResource("StyleBoxEmpty_afyv2")
 theme_override_styles/read_only = SubResource("StyleBoxEmpty_3r4mt")
+theme_override_styles/normal = SubResource("StyleBoxEmpty_6oowp")
 placeholder_text = "Parameter"
 expand_to_text_length = true
 
@@ -106,13 +106,13 @@ size_flags_horizontal = 3
 unique_name_in_owner = true
 layout_mode = 2
 mouse_filter = 1
-theme_override_colors/font_color = Color(0.118581, 0.118581, 0.118581, 1)
-theme_override_colors/font_uneditable_color = Color(0.117647, 0.117647, 0.117647, 1)
 theme_override_colors/font_placeholder_color = Color(0.76662, 0.76662, 0.76662, 1)
+theme_override_colors/font_uneditable_color = Color(0.117647, 0.117647, 0.117647, 1)
+theme_override_colors/font_color = Color(0.118581, 0.118581, 0.118581, 1)
 theme_override_constants/minimum_character_width = 0
-theme_override_styles/normal = SubResource("StyleBoxEmpty_6oowp")
 theme_override_styles/focus = SubResource("StyleBoxEmpty_afyv2")
 theme_override_styles/read_only = SubResource("StyleBoxEmpty_3r4mt")
+theme_override_styles/normal = SubResource("StyleBoxEmpty_6oowp")
 placeholder_text = "x"
 alignment = 1
 expand_to_text_length = true
@@ -139,13 +139,13 @@ size_flags_horizontal = 3
 unique_name_in_owner = true
 layout_mode = 2
 mouse_filter = 1
-theme_override_colors/font_color = Color(0.118581, 0.118581, 0.118581, 1)
-theme_override_colors/font_uneditable_color = Color(0.117647, 0.117647, 0.117647, 1)
 theme_override_colors/font_placeholder_color = Color(0.76662, 0.76662, 0.76662, 1)
+theme_override_colors/font_uneditable_color = Color(0.117647, 0.117647, 0.117647, 1)
+theme_override_colors/font_color = Color(0.118581, 0.118581, 0.118581, 1)
 theme_override_constants/minimum_character_width = 0
-theme_override_styles/normal = SubResource("StyleBoxEmpty_6oowp")
 theme_override_styles/focus = SubResource("StyleBoxEmpty_afyv2")
 theme_override_styles/read_only = SubResource("StyleBoxEmpty_3r4mt")
+theme_override_styles/normal = SubResource("StyleBoxEmpty_6oowp")
 placeholder_text = "y"
 alignment = 1
 expand_to_text_length = true
@@ -164,14 +164,13 @@ theme_override_constants/margin_left = 8
 unique_name_in_owner = true
 custom_minimum_size = Vector2(60, 0)
 layout_mode = 2
-theme_override_colors/font_color = Color(0, 0, 0, 1)
 theme_override_colors/font_focus_color = Color(0, 0, 0, 1)
+theme_override_colors/font_color = Color(0, 0, 0, 1)
 theme_override_styles/focus = SubResource("StyleBoxEmpty_e7f0k")
 theme_override_styles/normal = SubResource("StyleBoxEmpty_fjquj")
-item_count = 2
 selected = 0
+item_count = 2
 popup/item_0/text = "False"
-popup/item_0/id = 0
 popup/item_1/text = "True"
 popup/item_1/id = 1
 

addons/block_code/ui/blocks/utilities/parameter_output/parameter_output.gd

@@ -1,5 +1,4 @@
 @tool
-class_name ParameterOutput
 extends MarginContainer
 
 const Types = preload("res://addons/block_code/types/types.gd")