Styles Choices: Add override for custom choice buttons (#2554)

The choice buttons for the `Centered Choices` and `Textbubble Layer` layers can be replaced with a `PackedScene` descending from `DialogicNode_ChoiceButton`. This is intended for users who want custom behavior for their buttons (the choice must be pressed 3 times, on-hover animations, multi-`Control` UI, etc.).

**New Settings:**
_Centered Choices:_ `Choices/Behavior/Custom Button`, `Choices/Behavior/Maximum Choices`
_Textbubble Layer:_ `Choices/Behavior/Custom Button`, `Choices/Behavior/Maximum Choices`

**Changes to `DialogicNode_ChoiceButton`:**
The on-pressed behavior of the button can be customized by overriding `_pressed()`. By default, this preserves the existing behavior by emitting the new `choice_selected` signal when the button is pressed. The Choices Subsystem has now listens for the button's `choice_selected` signal instead of `pressed`.

**Changes to VN/Centered Choice Layer:**
The centered choice layer now instantiates its buttons when the style is changed (functionally similar to Textbubble Layer) so that custom buttons are applied, including while the timeline is running.

Author: HuntJSparra

addons/dialogic/Modules/Choice/node_choice_button.gd

@@ -12,6 +12,10 @@ extends Button
 ## not supported on buttons at this point.
 
 
+## Emitted when the choice is selected. Unless overridden, this is when the button or its shortcut is pressed.
+signal choice_selected
+
+
 ## Used to identify what choices to put on. If you leave it at -1, choices will be distributed automatically.
 @export var choice_index: int = -1
 
@@ -31,6 +35,24 @@ func _ready() -> void:
 	hide()
 
 
+## Custom choice buttons can override this for specialized behavior when the choice button is pressed.
+func _pressed():
+	choice_selected.emit()
+
+
+## Custom choice buttons can override this if their behavior should change
+## based on event data. If the custom choice button does not override
+## visibility, disabled-ness, nor the choice text, consider
+## calling super(choice_info) at the start of the override.
+##
+## The choice_info Dictionary has the following keys:
+## - event_index:    The index of the choice event in the timeline.
+## - button_index:   The relative index of the choice (starts from 1).
+## - visible:        If the choice should be visible.
+## - disabled:       If the choice should be selectable.
+## - text:           The text of the choice.
+## - visited_before: If the choice has been selected before. Only available is the History submodule is enabled.
+## - *:              Information from the event's additional info.
 func _load_info(choice_info: Dictionary) -> void:
 	set_choice_text(choice_info.text)
 	visible = choice_info.visible

addons/dialogic/Modules/Choice/subsystem_choices.gd

@@ -70,8 +70,8 @@ func post_install() -> void:
 func hide_all_choices() -> void:
 	for node in get_tree().get_nodes_in_group('dialogic_choice_button'):
 		node.hide()
-		if node.pressed.is_connected(_on_choice_selected):
-			node.pressed.disconnect(_on_choice_selected)
+		if node.choice_selected.is_connected(_on_choice_selected):
+			node.choice_selected.disconnect(_on_choice_selected)
 
 
 ## Collects information on all the choices of the current question.
@@ -182,9 +182,9 @@ func show_current_question(instant:=true) -> void:
 					shortcut.events.append(input_key)
 					node.shortcut = shortcut
 
-		if node.pressed.is_connected(_on_choice_selected):
-			node.pressed.disconnect(_on_choice_selected)
-		node.pressed.connect(_on_choice_selected.bind(choice))
+		if node.choice_selected.is_connected(_on_choice_selected):
+			node.choice_selected.disconnect(_on_choice_selected)
+		node.choice_selected.connect(_on_choice_selected.bind(choice))
 
 	_choice_blocker.start(block_delay)
 	question_shown.emit(question_info)
@@ -202,12 +202,12 @@ func focus_choice(button_index:int) -> void:
 func select_choice(button_index:int) -> void:
 	var node: DialogicNode_ChoiceButton = get_choice_button(button_index)
 	if node:
-		node.pressed.emit()
+		node.choice_selected.emit()
 
 
 func select_focused_choice() -> void:
 	if get_viewport().gui_get_focus_owner() is DialogicNode_ChoiceButton:
-		(get_viewport().gui_get_focus_owner() as DialogicNode_ChoiceButton).pressed.emit()
+		(get_viewport().gui_get_focus_owner() as DialogicNode_ChoiceButton).choice_selected.emit()
 
 
 func get_choice_button(button_index:int) -> DialogicNode_ChoiceButton:

addons/dialogic/Modules/DefaultLayoutParts/Layer_Textbubble/text_bubble.gd

@@ -155,7 +155,7 @@ func get_base_content_size() -> Vector2:
 		)
 
 
-func add_choice_container(node:Container, alignment:=FlowContainer.ALIGNMENT_BEGIN) -> void:
+func add_choice_container(node:Container, alignment:=FlowContainer.ALIGNMENT_BEGIN, choices_button_path:="", maximum_choices:=5) -> void:
 	if choice_container:
 		choice_container.get_parent().remove_child(choice_container)
 		choice_container.queue_free()
@@ -168,9 +168,21 @@ func add_choice_container(node:Container, alignment:=FlowContainer.ALIGNMENT_BEG
 
 	if node is HFlowContainer:
 		(node as HFlowContainer).alignment = alignment
-
-	for i:int in range(5):
-		choice_container.add_child(DialogicNode_ChoiceButton.new())
+	
+	var choices_button: PackedScene = null
+	if not choices_button_path.is_empty():
+		if ResourceLoader.exists(choices_button_path):
+			choices_button = (load(choices_button_path) as PackedScene)
+		else:
+			printerr("[Dialogic] Unable to load custom choice button from ", choices_button_path)
+
+	for i:int in range(maximum_choices):
+		var new_button : DialogicNode_ChoiceButton
+		if choices_button == null:
+			new_button = DialogicNode_ChoiceButton.new()
+		else:
+			new_button = (choices_button.instantiate() as DialogicNode_ChoiceButton)
+		choice_container.add_child(new_button)
 		if node is HFlowContainer:
 			continue
 		match alignment:

addons/dialogic/Modules/DefaultLayoutParts/Layer_Textbubble/text_bubble_layer.gd

@@ -56,6 +56,10 @@ extends DialogicLayoutLayer
 @export var choices_layout_force_lines: bool = false
 @export_file('*.tres', "*.res") var choices_base_theme: String = ""
 
+@export_subgroup('Behavior')
+@export var maximum_choices: int = 5
+@export_file('*.tscn') var choices_custom_button: String = ""
+
 const TextBubble := preload("res://addons/dialogic/Modules/DefaultLayoutParts/Layer_Textbubble/text_bubble.gd")
 
 var bubbles: Array[TextBubble] = []
@@ -150,9 +154,9 @@ func bubble_apply_overrides(bubble:TextBubble) -> void:
 
 	## CHOICE SETTINGS
 	if choices_layout_force_lines:
-		bubble.add_choice_container(VBoxContainer.new(), choices_layout_alignment)
+		bubble.add_choice_container(VBoxContainer.new(), choices_layout_alignment, choices_custom_button, maximum_choices)
 	else:
-		bubble.add_choice_container(HFlowContainer.new(), choices_layout_alignment)
+		bubble.add_choice_container(HFlowContainer.new(), choices_layout_alignment, choices_custom_button, maximum_choices)
 
 	var choice_theme: Theme = null
 	if choices_base_theme.is_empty() or not ResourceLoader.exists(choices_base_theme):

addons/dialogic/Modules/DefaultLayoutParts/Layer_VN_Choices/vn_choice_layer.gd

@@ -39,6 +39,11 @@ extends DialogicLayoutLayer
 @export_file("*.wav", "*.ogg", "*.mp3") var sounds_hover: String = "res://addons/dialogic/Example Assets/sound-effects/typing2.wav"
 @export_file("*.wav", "*.ogg", "*.mp3") var sounds_focus: String = "res://addons/dialogic/Example Assets/sound-effects/typing4.wav"
 
+@export_group('Choices')
+@export_subgroup('Behavior')
+@export var maximum_choices: int = 10
+@export_file('*.tscn') var choices_custom_button: String = ""
+
 func get_choices() -> VBoxContainer:
 	return $Choices
 
@@ -96,20 +101,36 @@ func _apply_export_overrides() -> void:
 	if ResourceLoader.exists(boxes_stylebox_focused):
 		layer_theme.set_stylebox(&'focus', &'Button', load(boxes_stylebox_focused) as StyleBox)
 
-	get_choices().add_theme_constant_override(&"separation", boxes_v_separation)
+	var choices : Control = get_choices()
+	choices.add_theme_constant_override(&"separation", boxes_v_separation)
 	self.position = boxes_offset
 
-	for child: Node in get_choices().get_children():
-		if not child is DialogicNode_ChoiceButton:
-			continue
-		var choice: DialogicNode_ChoiceButton = child as DialogicNode_ChoiceButton
+	# replace choice buttons and apply settings
+	for child: Node in choices.get_children():
+		if child is DialogicNode_ChoiceButton:
+			child.queue_free()
+
+	var choices_button: PackedScene = null
+	if not choices_custom_button.is_empty():
+		if ResourceLoader.exists(choices_custom_button):
+			choices_button = (load(choices_custom_button) as PackedScene)
+		else:
+			printerr("[Dialogic] Unable to load custom choice button from ", choices_custom_button)
+
+	for i in range(0, maximum_choices):
+		var new_choice : DialogicNode_ChoiceButton
+		if choices_button != null:
+			new_choice = (choices_button.instantiate() as DialogicNode_ChoiceButton)
+		else:
+			new_choice = DialogicNode_ChoiceButton.new()
+		choices.add_child(new_choice)
 
 		if boxes_fill_width:
-			choice.size_flags_horizontal = Control.SIZE_FILL
+			new_choice.size_flags_horizontal = Control.SIZE_FILL
 		else:
-			choice.size_flags_horizontal = Control.SIZE_SHRINK_CENTER
+			new_choice.size_flags_horizontal = Control.SIZE_SHRINK_CENTER
 
-		choice.custom_minimum_size = boxes_min_size
+		new_choice.custom_minimum_size = boxes_min_size
 
 
 	set(&'theme', layer_theme)

addons/dialogic/Modules/DefaultLayoutParts/Layer_VN_Choices/vn_choice_layer.tscn

@@ -35,61 +35,6 @@ mouse_filter = 2
 alignment = 1
 metadata/_edit_layout_mode = 1
 
-[node name="DialogicNode_ChoiceButton1" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton2" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton3" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton4" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton5" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton6" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton7" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton8" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton9" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton10" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
-[node name="DialogicNode_ChoiceButton11" type="Button" parent="Choices"]
-layout_mode = 2
-text = "Some text"
-script = ExtResource("1_w632k")
-
 [node name="DialogicNode_ButtonSound" type="AudioStreamPlayer" parent="Choices"]
 unique_name_in_owner = true
 script = ExtResource("2_mgko6")