From 5cfc22a3ad2c8c2bdc4bb477a95f8dbb727218b9 Mon Sep 17 00:00:00 2001 From: Emmanouil Papadeas <35376950+OverloadedOrama@users.noreply.github.com> Date: Wed, 15 Jan 2025 19:22:41 +0200 Subject: [PATCH] Improve GradientEdit's UI and add reverse and evenly distribute points options --- assets/graphics/misc/settings.svg | 19 +++++ assets/graphics/misc/settings.svg.import | 37 +++++++++ src/UI/Nodes/GradientEdit.gd | 16 +++- src/UI/Nodes/GradientEdit.tscn | 101 +++++++++++------------ 4 files changed, 120 insertions(+), 53 deletions(-) create mode 100644 assets/graphics/misc/settings.svg create mode 100644 assets/graphics/misc/settings.svg.import diff --git a/assets/graphics/misc/settings.svg b/assets/graphics/misc/settings.svg new file mode 100644 index 000000000..3fb6ab8f1 --- /dev/null +++ b/assets/graphics/misc/settings.svg @@ -0,0 +1,19 @@ + + + + + + diff --git a/assets/graphics/misc/settings.svg.import b/assets/graphics/misc/settings.svg.import new file mode 100644 index 000000000..172f6572d --- /dev/null +++ b/assets/graphics/misc/settings.svg.import @@ -0,0 +1,37 @@ +[remap] + +importer="texture" +type="CompressedTexture2D" +uid="uid://cis71foi5jt31" +path="res://.godot/imported/settings.svg-9e60faa1666134ef3fcd7b95fe437b98.ctex" +metadata={ +"vram_texture": false +} + +[deps] + +source_file="res://assets/graphics/misc/settings.svg" +dest_files=["res://.godot/imported/settings.svg-9e60faa1666134ef3fcd7b95fe437b98.ctex"] + +[params] + +compress/mode=0 +compress/high_quality=false +compress/lossy_quality=0.7 +compress/hdr_compression=1 +compress/normal_map=0 +compress/channel_pack=0 +mipmaps/generate=false +mipmaps/limit=-1 +roughness/mode=0 +roughness/src_normal="" +process/fix_alpha_border=true +process/premult_alpha=false +process/normal_map_invert_y=false +process/hdr_as_srgb=false +process/hdr_clamp_exposure=false +process/size_limit=0 +detect_3d/compress_to=1 +svg/scale=1.0 +editor/scale_with_editor_scale=false +editor/convert_colors_with_editor_theme=false diff --git a/src/UI/Nodes/GradientEdit.gd b/src/UI/Nodes/GradientEdit.gd index 337da9517..d97af52f6 100644 --- a/src/UI/Nodes/GradientEdit.gd +++ b/src/UI/Nodes/GradientEdit.gd @@ -107,6 +107,7 @@ func _ready() -> void: _create_cursors() %InterpolationOptionButton.select(gradient.interpolation_mode) %ColorSpaceOptionButton.select(gradient.interpolation_color_space) + %ToolsMenuButton.get_popup().index_pressed.connect(_on_tools_menu_button_index_pressed) func _create_cursors() -> void: @@ -203,8 +204,19 @@ func _on_color_space_option_button_item_selected(index: Gradient.ColorSpace) -> updated.emit(gradient, continuous_change) -func _on_DivideButton_pressed() -> void: - divide_dialog.popup_centered() +func _on_tools_menu_button_index_pressed(index: int) -> void: + if index == 0: # Reverse + gradient.reverse() + _create_cursors() + updated.emit(gradient, continuous_change) + elif index == 1: # Evenly distribute points + var point_count := gradient.get_point_count() + for i in range(point_count): + gradient.set_offset(i, 1.0 / (point_count - 1) * i) + _create_cursors() + updated.emit(gradient, continuous_change) + elif index == 2: # Divide into equal parts + divide_dialog.popup_centered() func _on_DivideConfirmationDialog_confirmed() -> void: diff --git a/src/UI/Nodes/GradientEdit.tscn b/src/UI/Nodes/GradientEdit.tscn index c1bde37f0..aed5f4cf9 100644 --- a/src/UI/Nodes/GradientEdit.tscn +++ b/src/UI/Nodes/GradientEdit.tscn @@ -1,6 +1,7 @@ -[gd_scene load_steps=2 format=3 uid="uid://bn4aw27dj7pwi"] +[gd_scene load_steps=3 format=3 uid="uid://bn4aw27dj7pwi"] [ext_resource type="Script" path="res://src/UI/Nodes/GradientEdit.gd" id="1"] +[ext_resource type="Texture2D" uid="uid://cis71foi5jt31" path="res://assets/graphics/misc/settings.svg" id="2_2dyyb"] [node name="GradientEdit" type="VBoxContainer"] anchors_preset = 15 @@ -8,6 +9,52 @@ anchor_right = 1.0 anchor_bottom = 1.0 script = ExtResource("1") +[node name="InterpolationContainer" type="HBoxContainer" parent="."] +layout_mode = 2 + +[node name="InterpolationOptionButton" type="OptionButton" parent="InterpolationContainer"] +unique_name_in_owner = true +layout_mode = 2 +size_flags_horizontal = 3 +tooltip_text = "Interpolation" +mouse_default_cursor_shape = 2 +selected = 0 +item_count = 3 +popup/item_0/text = "Linear" +popup/item_1/text = "Constant" +popup/item_1/id = 1 +popup/item_2/text = "Cubic" +popup/item_2/id = 2 + +[node name="ColorSpaceOptionButton" type="OptionButton" parent="InterpolationContainer"] +unique_name_in_owner = true +layout_mode = 2 +size_flags_horizontal = 3 +tooltip_text = "Color space" +mouse_default_cursor_shape = 2 +selected = 0 +item_count = 3 +popup/item_0/text = "sRGB" +popup/item_1/text = "Linear sRGB" +popup/item_1/id = 1 +popup/item_2/text = "Oklab" +popup/item_2/id = 2 + +[node name="ToolsMenuButton" type="MenuButton" parent="InterpolationContainer"] +unique_name_in_owner = true +layout_mode = 2 +tooltip_text = "Tools" +mouse_default_cursor_shape = 2 +icon = ExtResource("2_2dyyb") +flat = false +icon_alignment = 1 +item_count = 3 +popup/item_0/text = "Reverse" +popup/item_1/text = "Evenly distribute points" +popup/item_1/id = 1 +popup/item_2/text = "Divide into equal parts" +popup/item_2/id = 2 + [node name="TextureRect" type="TextureRect" parent="."] custom_minimum_size = Vector2(0, 30) layout_mode = 2 @@ -35,53 +82,6 @@ offset_top = 4.0 offset_right = 302.0 offset_bottom = 580.0 -[node name="InterpolationContainer" type="HBoxContainer" parent="."] -layout_mode = 2 - -[node name="Label" type="Label" parent="InterpolationContainer"] -layout_mode = 2 -size_flags_horizontal = 3 -text = "Interpolation:" - -[node name="InterpolationOptionButton" type="OptionButton" parent="InterpolationContainer"] -unique_name_in_owner = true -layout_mode = 2 -size_flags_horizontal = 3 -mouse_default_cursor_shape = 2 -selected = 0 -item_count = 3 -popup/item_0/text = "Linear" -popup/item_1/text = "Constant" -popup/item_1/id = 1 -popup/item_2/text = "Cubic" -popup/item_2/id = 2 - -[node name="ColorSpaceContainer" type="HBoxContainer" parent="."] -layout_mode = 2 - -[node name="Label" type="Label" parent="ColorSpaceContainer"] -layout_mode = 2 -size_flags_horizontal = 3 -text = "Color space:" - -[node name="ColorSpaceOptionButton" type="OptionButton" parent="ColorSpaceContainer"] -unique_name_in_owner = true -layout_mode = 2 -size_flags_horizontal = 3 -mouse_default_cursor_shape = 2 -selected = 0 -item_count = 3 -popup/item_0/text = "sRGB" -popup/item_1/text = "Linear sRGB" -popup/item_1/id = 1 -popup/item_2/text = "Oklab" -popup/item_2/id = 2 - -[node name="DivideButton" type="Button" parent="."] -layout_mode = 2 -mouse_default_cursor_shape = 2 -text = "Divide into equal parts" - [node name="DivideConfirmationDialog" type="ConfirmationDialog" parent="."] [node name="VBoxContainer" type="VBoxContainer" parent="DivideConfirmationDialog"] @@ -118,8 +118,7 @@ mouse_default_cursor_shape = 2 text = "Add point at the end" [connection signal="resized" from="." to="." method="_on_GradientEdit_resized"] -[connection signal="color_changed" from="Popup/ColorPicker" to="." method="_on_ColorPicker_color_changed"] [connection signal="item_selected" from="InterpolationContainer/InterpolationOptionButton" to="." method="_on_InterpolationOptionButton_item_selected"] -[connection signal="item_selected" from="ColorSpaceContainer/ColorSpaceOptionButton" to="." method="_on_color_space_option_button_item_selected"] -[connection signal="pressed" from="DivideButton" to="." method="_on_DivideButton_pressed"] +[connection signal="item_selected" from="InterpolationContainer/ColorSpaceOptionButton" to="." method="_on_color_space_option_button_item_selected"] +[connection signal="color_changed" from="Popup/ColorPicker" to="." method="_on_ColorPicker_color_changed"] [connection signal="confirmed" from="DivideConfirmationDialog" to="." method="_on_DivideConfirmationDialog_confirmed"]