use custom buttons for choices

addons/dialogic/Editor/SettingsEditor/SettingsEditor.gd

@@ -8,6 +8,7 @@ onready var nodes = {
 	'auto_color_names': $VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2/HBoxContainer3/AutoColorNames,
 	'propagate_input': $VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2/HBoxContainer4/PropagateInput,
 	'dim_characters': $VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2/HBoxContainer5/DimCharacters,
+	'advanced_themes': $VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2/HBoxContainer6/AdvancedThemes,
 }
 
 
@@ -20,6 +21,7 @@ func _ready():
 	nodes['auto_color_names'].connect('toggled', self, '_on_auto_color_names_toggled')
 	nodes['propagate_input'].connect('toggled', self, '_on_propagate_input_toggled')
 	nodes['dim_characters'].connect('toggled', self, '_on_dim_characters_toggled')
+	nodes['advanced_themes'].connect('toggled', self, '_on_advanced_themes_toggled')
 
 
 func update_data():
@@ -39,6 +41,8 @@ func dialog_options(settings):
 		nodes['propagate_input'].pressed = settings.get_value('dialog', 'propagate_input')
 	if settings.has_section_key('dialog', 'dim_characters'):
 		nodes['dim_characters'].pressed = settings.get_value('dialog', 'dim_characters')
+	if settings.has_section_key('dialog', 'advanced_themes'):
+		nodes['advanced_themes'].pressed = settings.get_value('dialog', 'advanced_themes')
 
 
 func refresh_themes(settings):
@@ -88,6 +92,11 @@ func _on_propagate_input_toggled(value):
 func _on_dim_characters_toggled(value):
 	set_value('dialog', 'dim_characters', value)
 
+
+func _on_advanced_themes_toggled(value):
+	set_value('dialog', 'advanced_themes', value)
+
+
 # Reading and saving data to the settings file
 func set_value(section, key, value):
 	DialogicResources.set_settings_value(section, key, value)

addons/dialogic/Editor/SettingsEditor/SettingsEditor.tscn

@@ -18,11 +18,11 @@ size_flags_vertical = 3
 
 [node name="HBoxContainer3" type="HBoxContainer" parent="VBoxContainer"]
 margin_right = 1024.0
-margin_bottom = 240.0
+margin_bottom = 268.0
 
 [node name="VBoxContainer" type="VBoxContainer" parent="VBoxContainer/HBoxContainer3"]
 margin_right = 304.0
-margin_bottom = 240.0
+margin_bottom = 268.0
 custom_constants/separation = 16
 
 [node name="VBoxContainer" type="VBoxContainer" parent="VBoxContainer/HBoxContainer3/VBoxContainer"]
@@ -59,20 +59,18 @@ margin_left = 50.0
 margin_right = 190.0
 margin_bottom = 20.0
 rect_min_size = Vector2( 140, 0 )
-text = "Basic"
+text = "normal"
-items = [ "Alternative", null, false, 0, {
+items = [ "no_gloss", null, false, 0, {
-"file": "theme-1617143167.cfg"
+"file": "theme-1618722854.cfg"
-}, "Basic", null, false, 1, {
+}, "normal", null, false, 1, {
-"file": "theme-1616778229.cfg"
+"file": "theme-1616687382.cfg"
-}, "New Theme", null, false, 2, {
-"file": "theme-1617143282.cfg"
 } ]
 selected = 1
 
 [node name="VBoxContainer2" type="VBoxContainer" parent="VBoxContainer/HBoxContainer3/VBoxContainer"]
 margin_top = 70.0
 margin_right = 304.0
-margin_bottom = 240.0
+margin_bottom = 268.0
 
 [node name="Panel2" type="Panel" parent="VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2"]
 margin_right = 304.0
@@ -175,3 +173,20 @@ margin_left = 280.0
 margin_right = 304.0
 margin_bottom = 24.0
 pressed = true
+
+[node name="HBoxContainer6" type="HBoxContainer" parent="VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2"]
+margin_top = 174.0
+margin_right = 304.0
+margin_bottom = 198.0
+hint_tooltip = "These options can lead to unexpected behaviors. Make sure to read the documentation before using these."
+
+[node name="Label" type="Label" parent="VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2/HBoxContainer6"]
+margin_top = 5.0
+margin_right = 160.0
+margin_bottom = 19.0
+text = "Advanced theme options"
+
+[node name="AdvancedThemes" type="CheckBox" parent="VBoxContainer/HBoxContainer3/VBoxContainer/VBoxContainer2/HBoxContainer6"]
+margin_left = 164.0
+margin_right = 188.0
+margin_bottom = 24.0

addons/dialogic/Editor/ThemeEditor/ThemeEditor.gd

@@ -6,6 +6,8 @@ onready var master_tree = get_node('../MasterTreeContainer/MasterTree')
 onready var settings_editor = get_node('../SettingsEditor')
 var current_theme : String = ''
 
+var use_advanced_themes := false
+
 # When loading the variables to the input fields in the 
 # load_theme function, every element thinks the value was updated
 # so it has to perform a "saving" of that property. 
@@ -17,6 +19,14 @@ var loading : bool = true
 # complain because "that is not how you are supposed to work". If there was only
 # a way to set an id and then access that node via id...
 # Here you have paths in all its glory. Praise the paths (っ´ω`c)♡
+
+onready var advanced_containers := {
+	'buttons' : {
+		'container': $"VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer",
+		'disabled_text': $"VBoxContainer/TabContainer/Choice Buttons/Column3/Label"
+	}
+}
+
 onready var n : Dictionary = {
 	# Dialog Text
 	'theme_text_shadow': $"VBoxContainer/TabContainer/Dialog Text/Column/GridContainer/HBoxContainer2/CheckBoxShadow",
@@ -71,6 +81,8 @@ onready var n : Dictionary = {
 	'button_modulation': $"VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer/HBoxContainer6/CheckBox",
 	'button_modulation_color': $"VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer/HBoxContainer6/ColorPickerButton",
 	'button_use_native': $"VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer/CheckBox",
+	'button_use_custom': $"VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer/HBoxContainer5/CustomButtonsCheckBox",
+	'button_custom_path': $"VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer/HBoxContainer5/CustomButtonsButton",
 	'button_offset_x': $"VBoxContainer/TabContainer/Choice Buttons/Column2/GridContainer/HBoxContainer/TextOffsetH",
 	'button_offset_y': $"VBoxContainer/TabContainer/Choice Buttons/Column2/GridContainer/HBoxContainer/TextOffsetV",
 	'button_separation': $"VBoxContainer/TabContainer/Choice Buttons/Column2/GridContainer/VerticalSeparation",
@@ -106,10 +118,24 @@ func _ready() -> void:
 	_on_visibility_changed()
 
 
+func setup_advanced_containers():
+	use_advanced_themes = DialogicResources.get_settings_config().get_value('dialog', 'advanced_themes', false)
+	
+	for key in advanced_containers:
+		var c = advanced_containers[key]
+		if use_advanced_themes:
+			c["container"].show()
+			c["disabled_text"].hide()
+		else:
+			c["container"].hide()
+			c["disabled_text"].show()
+
+
 func load_theme(filename):
 	loading = true
 	current_theme = filename
 	var theme = DialogicResources.get_theme_config(filename)
+	setup_advanced_containers()
 	# Settings
 	n['theme_action_key'].text = theme.get_value('settings', 'action_key', 'ui_accept')
 	
@@ -142,6 +168,8 @@ func load_theme(filename):
 	n['button_image'].text = DialogicResources.get_filename_from_path(theme.get_value('buttons', 'image', 'res://addons/dialogic/Example Assets/backgrounds/background-2.png'))
 	n['button_image_visible'].pressed = theme.get_value('buttons', 'use_image', true)
 	n['button_use_native'].pressed = theme.get_value('buttons', 'use_native', false)
+	n['button_use_custom'].pressed = theme.get_value('buttons', 'use_custom', false)
+	n['button_custom_path'].text = DialogicResources.get_filename_from_path(theme.get_value('buttons', 'custom_path', ""))
 	n['button_offset_x'].value = theme.get_value('buttons', 'padding', Vector2(5,5)).x
 	n['button_offset_y'].value = theme.get_value('buttons', 'padding', Vector2(5,5)).y
 	n['button_separation'].value = theme.get_value('buttons', 'gap', 5)
@@ -151,7 +179,7 @@ func load_theme(filename):
 	n['button_fixed_x'].value = theme.get_value('buttons', 'fixed_size', Vector2(130,40)).x
 	n['button_fixed_y'].value = theme.get_value('buttons', 'fixed_size', Vector2(130,40)).y
 	
-	toggle_button_customization_fields(not theme.get_value('buttons', 'use_native', false))
+	toggle_button_customization_fields(theme.get_value('buttons', 'use_native', false), theme.get_value('buttons', 'use_custom', false))
 	
 	# Definitions
 	n['glossary_color'].color = Color(theme.get_value('definitions', 'color', "#ffffffff"))
@@ -461,20 +489,42 @@ func _on_native_button_toggled(button_pressed) -> void:
 	if loading:
 		return
 	DialogicResources.set_theme_value(current_theme, 'buttons', 'use_native', button_pressed)
-	toggle_button_customization_fields(not button_pressed)
+	toggle_button_customization_fields(button_pressed, false)
 
-func toggle_button_customization_fields(enabled) -> void:
+
-	var disabled = not enabled
+func toggle_button_customization_fields(native_enabled: bool, custom_enabled: bool) -> void:
-	n['button_text_color_enabled'].disabled = disabled
+	var customization_disabled = native_enabled or custom_enabled
-	n['button_text_color'].disabled = disabled
+	n['button_text_color_enabled'].disabled = customization_disabled
-	n['button_background'].disabled = disabled
+	n['button_text_color'].disabled = customization_disabled
-	n['button_background_visible'].disabled = disabled
+	n['button_background'].disabled = customization_disabled
-	n['button_image'].disabled = disabled
+	n['button_background_visible'].disabled = customization_disabled
-	n['button_image_visible'].disabled = disabled
+	n['button_image'].disabled = customization_disabled
-	n['button_modulation'].disabled = disabled
+	n['button_image_visible'].disabled = customization_disabled
-	n['button_modulation_color'].disabled = disabled
+	n['button_modulation'].disabled = customization_disabled
-	n['button_offset_x'].editable = enabled
+	n['button_modulation_color'].disabled = customization_disabled
-	n['button_offset_y'].editable = enabled
+	n['button_use_native'].disabled = custom_enabled
+	n['button_use_custom'].disabled = native_enabled
+	n['button_custom_path'].disabled = native_enabled
+	n['button_offset_x'].editable = not customization_disabled
+	n['button_offset_y'].editable = not customization_disabled
+
+
+func _on_CustomButtonsCheckBox_toggled(button_pressed):
+	if loading:
+		return
+	DialogicResources.set_theme_value(current_theme, 'buttons', 'use_custom', button_pressed)
+	toggle_button_customization_fields(false, button_pressed)
+
+
+func _on_CustomButtonsButton_pressed():
+	editor_reference.godot_dialog("*.tscn")
+	editor_reference.godot_dialog_connect(self, "_on_custom_button_selected")
+
+func _on_custom_button_selected(path, target) -> void:
+	if loading:
+		return
+	DialogicResources.set_theme_value(current_theme, 'buttons', 'custom_path', path)
+	n['button_custom_path'].text = DialogicResources.get_filename_from_path(path)
 
 
 func _on_GlossaryColorPicker_color_changed(color) -> void:

addons/dialogic/Editor/ThemeEditor/ThemeEditor.tscn

@@ -824,7 +824,6 @@ allow_greater = true
 allow_lesser = true
 
 [node name="Choice Buttons" type="HBoxContainer" parent="VBoxContainer/TabContainer"]
-visible = false
 anchor_right = 1.0
 anchor_bottom = 1.0
 margin_left = 4.0
@@ -851,7 +850,7 @@ text = "Visuals"
 [node name="GridContainer" type="GridContainer" parent="VBoxContainer/TabContainer/Choice Buttons/Column"]
 margin_top = 26.0
 margin_right = 270.0
-margin_bottom = 162.0
+margin_bottom = 170.0
 size_flags_horizontal = 3
 custom_constants/hseparation = 10
 columns = 2
@@ -951,17 +950,34 @@ margin_right = 126.0
 margin_bottom = 24.0
 size_flags_horizontal = 3
 
-[node name="Label2" type="Label" parent="VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer"]
+[node name="HSeparator" type="HSeparator" parent="VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer"]
-margin_top = 117.0
+margin_top = 112.0
 margin_right = 134.0
-margin_bottom = 131.0
+margin_bottom = 116.0
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="HSeparator2" type="HSeparator" parent="VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer"]
+margin_left = 144.0
+margin_top = 112.0
+margin_right = 270.0
+margin_bottom = 116.0
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Label2" type="Label" parent="VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer"]
+margin_top = 125.0
+margin_right = 134.0
+margin_bottom = 139.0
 text = "Use Native Buttons"
 
 [node name="CheckBox" type="CheckBox" parent="VBoxContainer/TabContainer/Choice Buttons/Column/GridContainer"]
 margin_left = 144.0
-margin_top = 112.0
+margin_top = 120.0
 margin_right = 270.0
-margin_bottom = 136.0
+margin_bottom = 144.0
 
 [node name="VSeparator" type="VSeparator" parent="VBoxContainer/TabContainer/Choice Buttons"]
 margin_left = 280.0
@@ -1068,7 +1084,71 @@ rounded = true
 allow_greater = true
 allow_lesser = true
 
+[node name="VSeparator2" type="VSeparator" parent="VBoxContainer/TabContainer/Choice Buttons"]
+margin_left = 613.0
+margin_right = 617.0
+margin_bottom = 488.0
+
+[node name="Column3" type="VBoxContainer" parent="VBoxContainer/TabContainer/Choice Buttons"]
+margin_left = 627.0
+margin_right = 897.0
+margin_bottom = 488.0
+rect_min_size = Vector2( 270, 0 )
+size_flags_vertical = 3
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="SectionTitle" type="Label" parent="VBoxContainer/TabContainer/Choice Buttons/Column3"]
+margin_right = 270.0
+margin_bottom = 22.0
+custom_styles/normal = SubResource( 1 )
+text = "Advanced"
+
+[node name="Label" type="Label" parent="VBoxContainer/TabContainer/Choice Buttons/Column3"]
+margin_top = 26.0
+margin_right = 270.0
+margin_bottom = 40.0
+text = "Go to settings to enable those options"
+
+[node name="GridContainer" type="GridContainer" parent="VBoxContainer/TabContainer/Choice Buttons/Column3"]
+margin_top = 44.0
+margin_right = 270.0
+margin_bottom = 68.0
+size_flags_horizontal = 3
+custom_constants/hseparation = 10
+columns = 2
+
+[node name="CustomButtonsLabel" type="Label" parent="VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer"]
+margin_top = 5.0
+margin_right = 132.0
+margin_bottom = 19.0
+hint_tooltip = "The selected scene must have the 'pressed' signal and the 'text' property'"
+mouse_filter = 1
+text = "Use Custom Buttons"
+__meta__ = {
+"_editor_description_": ""
+}
+
+[node name="HBoxContainer5" type="HBoxContainer" parent="VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer"]
+margin_left = 142.0
+margin_right = 230.0
+margin_bottom = 24.0
+
+[node name="CustomButtonsCheckBox" type="CheckBox" parent="VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer/HBoxContainer5"]
+margin_right = 24.0
+margin_bottom = 24.0
+
+[node name="CustomButtonsButton" type="Button" parent="VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer/HBoxContainer5"]
+margin_left = 28.0
+margin_right = 88.0
+margin_bottom = 24.0
+hint_tooltip = "The selected scene must have the 'pressed' signal and the 'text' property'"
+size_flags_horizontal = 3
+text = "custom"
+
 [node name="Glossary" type="HBoxContainer" parent="VBoxContainer/TabContainer"]
+visible = false
 anchor_right = 1.0
 anchor_bottom = 1.0
 margin_left = 4.0
@@ -1256,6 +1336,8 @@ one_shot = true
 [connection signal="toggled" from="VBoxContainer/TabContainer/Choice Buttons/Column2/GridContainer/HBoxContainer2/FixedSize" to="." method="_on_FixedSize_toggled"]
 [connection signal="value_changed" from="VBoxContainer/TabContainer/Choice Buttons/Column2/GridContainer/HBoxContainer2/ButtonSizeX" to="." method="_on_ButtonSize_value_changed"]
 [connection signal="value_changed" from="VBoxContainer/TabContainer/Choice Buttons/Column2/GridContainer/HBoxContainer2/ButtonSizeY" to="." method="_on_ButtonSize_value_changed"]
+[connection signal="toggled" from="VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer/HBoxContainer5/CustomButtonsCheckBox" to="." method="_on_CustomButtonsCheckBox_toggled"]
+[connection signal="pressed" from="VBoxContainer/TabContainer/Choice Buttons/Column3/GridContainer/HBoxContainer5/CustomButtonsButton" to="." method="_on_CustomButtonsButton_pressed"]
 [connection signal="pressed" from="VBoxContainer/TabContainer/Glossary/Column/GridContainer/FontButton" to="." method="_on_GlossaryFontButton_pressed"]
 [connection signal="color_changed" from="VBoxContainer/TabContainer/Glossary/Column/GridContainer/ColorPickerButton" to="." method="_on_GlossaryColorPicker_color_changed"]
 [connection signal="toggled" from="VBoxContainer/TabContainer/Glossary/Column/GridContainer/ShowGlossaryCheckBox" to="." method="_on_ShowGlossaryCheckBox_toggled"]

addons/dialogic/Nodes/dialog_node.gd

@@ -649,18 +649,31 @@ func _should_add_choice_button(option: Dictionary):
 		return true
 
 
-func add_choice_button(option: Dictionary):
+func use_custom_choice_button():
-	if not _should_add_choice_button(option):
+	return current_theme.get_value('buttons', 'use_custom', false) and not current_theme.get_value('buttons', 'custom_path', "").empty()
-		return
-	
-	var theme = current_theme
 
-	var button = ChoiceButton.instance()
+func use_native_choice_button():
-	button.text = option['label']
+	return current_theme.get_value('buttons', 'use_native', false)
+
+
+
+func get_custom_choice_button(label: String):
+	var theme = current_theme
+	var custom_path = current_theme.get_value('buttons', 'custom_path', "")
+	var CustomChoiceButton = load(custom_path)
+	var button = CustomChoiceButton.instance()
+	button.text = label
+	return button
+
+
+func get_classic_choice_button(label: String):
+	var theme = current_theme
+	var button : Button = ChoiceButton.instance()
+	button.text = label
 	# Text
 	button.set('custom_fonts/font', DialogicUtil.path_fixer_load(theme.get_value('text', 'font', "res://addons/dialogic/Example Assets/Fonts/DefaultFont.tres")))
 
-	if not theme.get_value('buttons', 'use_native', false):
+	if not use_native_choice_button():
 		var text_color = Color(theme.get_value('text', 'color', "#ffffffff"))
 		button.set('custom_colors/font_color', text_color)
 		button.set('custom_colors/font_color_hover', text_color)
@@ -703,11 +716,23 @@ func add_choice_button(option: Dictionary):
 		button.get_node('ColorRect').visible = false
 		button.get_node('TextureRect').visible = false
 		button.set_flat(false)
-		
+	return button
-		$Options.set('custom_constants/separation', theme.get_value('buttons', 'gap', 20))
 
+
+func add_choice_button(option: Dictionary):
+	if not _should_add_choice_button(option):
+		return
+	
+	var button
+	print(use_custom_choice_button())
+	if use_custom_choice_button():
+		button = get_custom_choice_button(option['label'])
+	else:
+		button = get_classic_choice_button(option['label'])
 	button.connect("pressed", self, "answer_question", [button, option['event_id'], option['question_id']])
 
+	if use_native_choice_button() or use_custom_choice_button():
+		$Options.set('custom_constants/separation', current_theme.get_value('buttons', 'gap', 20))
 	$Options.add_child(button)
 
 	if Input.get_mouse_mode() != Input.MOUSE_MODE_VISIBLE:

dialogic/settings.cfg

@@ -1,3 +1,7 @@
 [theme]
 
 default="theme-1616657657.cfg"
+
+[dialog]
+
+advanced_themes=true

dialogic/themes/theme-1616657657.cfg

@@ -7,7 +7,9 @@ name="theme_normal"
 use_background_color=false
 background_color="#ff3c7c11"
 text_color="#ff30c3f0"
-use_native=true
+use_native=false
+use_custom=true
+custom_path="res://scenes/typo/Button.tscn"
 
 [box]
 

dialogic/themes/theme-1618913551.cfg

@@ -7,7 +7,9 @@ name="theme_question"
 use_background_color=false
 background_color="#ff3c7c11"
 text_color="#ff30c3f0"
-use_native=true
+use_native=false
+custom_path="res://scenes/typo/Button.tscn"
+use_custom=true
 
 [box]