ScaleImage dialog improvements

It now automatically sets the size to the current project's size, has a button to lock aspect ratio, and resizing based on percentage. Some UI changes to CreateNewImage too.
2025-01-18 17:19:50 +00:00 · 2021-01-27 00:45:12 +02:00 · 2021-01-27 00:45:12 +02:00 · 4db21dae95
parent 6edfbad663
commit 4db21dae95
6 changed files with 262 additions and 62 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -14,7 +14,7 @@ Laurenz Reinthaler (Schweini07), kleonc, Variable-ind
 - A new pan tool, used to move around the canvas. ([#399](https://github.com/Orama-Interactive/Pixelorama/pull/399))
 - Added a new "Performance" tab in the Preferences that exposes options related to the application's FPS to the user.
 - Added a new pixel grid, which is a grid of size 1px and it appears after a certain zoom level. ([#427](https://github.com/Orama-Interactive/Pixelorama/pull/427))
- Addet offset options to the grid. ([#434](https://github.com/Orama-Interactive/Pixelorama/pull/434))
+- Added offset options to the grid. ([#434](https://github.com/Orama-Interactive/Pixelorama/pull/434))
 - The isometric grid has been refactored to work better and to offer more changeable options, such as the width and height of the cell bounds. ([#430](https://github.com/Orama-Interactive/Pixelorama/pull/430))
 - Added portrait and landscape buttons in the new image dialog.
 - Added a new Centralize Image option in the Image menu, which places the visible pixels of the image in the center of the canvas. ([#441](https://github.com/Orama-Interactive/Pixelorama/pull/441))
@ -26,6 +26,7 @@ Laurenz Reinthaler (Schweini07), kleonc, Variable-ind
 - You can now toggle if you want the grid to be drawn over the tile mode or just the original part of the canvas. ([#434](https://github.com/Orama-Interactive/Pixelorama/pull/434))
 - Frame tags can now be set for frames larger than 100. ([#408](https://github.com/Orama-Interactive/Pixelorama/pull/408))
 - The "lock aspect ratio" button in the create new image dialog has been changed to a texture button.
+- Improved the "Scale Image" dialog. It now automatically sets the size to the current project's size, has a button to lock aspect ratio, and resizing based on percentage.

 ### Fixed
 - Fixed layer button textures not being updated properly when changing theme. ([#404](https://github.com/Orama-Interactive/Pixelorama/issues/404))
--- a/Translations/Translations.pot
+++ b/Translations/Translations.pot
@ -115,6 +115,12 @@ msgstr ""
 msgid "Scale Image"
 msgstr ""

+msgid "Pixels"
+msgstr ""
+
+msgid "Percentage"
+msgstr ""
+
 msgid "Crop Image"
 msgstr ""

--- a/assets/graphics/dark_themes/misc/lock_aspect_guides.png
+++ b/assets/graphics/dark_themes/misc/lock_aspect_guides.png
--- a/src/UI/Dialogs/CreateNewImage.tscn
+++ b/src/UI/Dialogs/CreateNewImage.tscn
@ -11,6 +11,8 @@
 margin_right = 300.0
 margin_bottom = 200.0
 rect_min_size = Vector2( 375, 200 )
+window_title = "New..."
+resizable = true
 script = ExtResource( 1 )
 __meta__ = {
 "_edit_use_anchors_": false
@ -43,15 +45,17 @@ margin_bottom = 46.0

 [node name="TemplatesLabel" type="Label" parent="VBoxContainer/TemplatesContainer"]
 margin_top = 3.0
-margin_right = 71.0
+margin_right = 100.0
 margin_bottom = 17.0
+rect_min_size = Vector2( 100, 0 )
 text = "Templates:"

 [node name="TemplatesOptions" type="OptionButton" parent="VBoxContainer/TemplatesContainer"]
-margin_left = 75.0
-margin_right = 150.0
+margin_left = 104.0
+margin_right = 359.0
 margin_bottom = 20.0
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 toggle_mode = false
 text = "Default"
 items = [ "Default", null, false, 0, null ]
@ -63,25 +67,27 @@ margin_right = 359.0
 margin_bottom = 102.0

 [node name="VBoxContainer" type="VBoxContainer" parent="VBoxContainer/SizeContainer"]
-margin_right = 124.0
+margin_right = 346.0
 margin_bottom = 52.0
+size_flags_horizontal = 3

 [node name="WidthContainer" type="HBoxContainer" parent="VBoxContainer/SizeContainer/VBoxContainer"]
-margin_right = 124.0
+margin_right = 346.0
 margin_bottom = 24.0

 [node name="WidthLabel" type="Label" parent="VBoxContainer/SizeContainer/VBoxContainer/WidthContainer"]
 margin_top = 5.0
-margin_right = 46.0
+margin_right = 100.0
 margin_bottom = 19.0
-rect_min_size = Vector2( 46, 0 )
+rect_min_size = Vector2( 100, 0 )
 text = "Width:"

 [node name="WidthValue" type="SpinBox" parent="VBoxContainer/SizeContainer/VBoxContainer/WidthContainer"]
-margin_left = 50.0
-margin_right = 124.0
+margin_left = 104.0
+margin_right = 346.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 min_value = 1.0
 max_value = 16384.0
 value = 64.0
@ -89,36 +95,42 @@ suffix = "px"

 [node name="HeightContainer" type="HBoxContainer" parent="VBoxContainer/SizeContainer/VBoxContainer"]
 margin_top = 28.0
-margin_right = 124.0
+margin_right = 346.0
 margin_bottom = 52.0

-[node name="Height" type="Label" parent="VBoxContainer/SizeContainer/VBoxContainer/HeightContainer"]
+[node name="HeightLabel" type="Label" parent="VBoxContainer/SizeContainer/VBoxContainer/HeightContainer"]
 margin_top = 5.0
-margin_right = 46.0
+margin_right = 100.0
 margin_bottom = 19.0
+rect_min_size = Vector2( 100, 0 )
 text = "Height:"

 [node name="HeightValue" type="SpinBox" parent="VBoxContainer/SizeContainer/VBoxContainer/HeightContainer"]
-margin_left = 50.0
-margin_right = 124.0
+margin_left = 104.0
+margin_right = 346.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 min_value = 1.0
 max_value = 16384.0
 value = 64.0
 suffix = "px"

 [node name="TextureRect" type="TextureRect" parent="VBoxContainer/SizeContainer"]
-margin_left = 128.0
-margin_right = 148.0
+margin_left = 350.0
+margin_right = 359.0
 margin_bottom = 52.0
 texture = ExtResource( 6 )

 [node name="AspectRatioButton" type="TextureButton" parent="VBoxContainer/SizeContainer/TextureRect"]
-margin_left = 2.0
-margin_top = 14.0
-margin_right = 18.0
-margin_bottom = 30.0
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+margin_left = -4.5
+margin_top = -9.0
+margin_right = 11.5
+margin_bottom = 7.0
 hint_tooltip = "Lock aspect ratio"
 mouse_default_cursor_shape = 2
 toggle_mode = true
@ -189,16 +201,18 @@ margin_bottom = 150.0

 [node name="FillColorLabel" type="Label" parent="VBoxContainer/FillColorContainer"]
 margin_top = 3.0
-margin_right = 90.0
+margin_right = 100.0
 margin_bottom = 17.0
+rect_min_size = Vector2( 100, 0 )
 text = "Fill with color:"

 [node name="FillColor" type="ColorPickerButton" parent="VBoxContainer/FillColorContainer"]
-margin_left = 94.0
-margin_right = 158.0
+margin_left = 104.0
+margin_right = 359.0
 margin_bottom = 20.0
 rect_min_size = Vector2( 64, 20 )
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 color = Color( 0, 0, 0, 0 )
 [connection signal="confirmed" from="." to="." method="_on_CreateNewImage_confirmed"]
 [connection signal="item_selected" from="VBoxContainer/TemplatesContainer/TemplatesOptions" to="." method="_on_TemplatesOptions_item_selected"]
--- a/src/UI/Dialogs/ImageEffects/ScaleImage.gd
+++ b/src/UI/Dialogs/ImageEffects/ScaleImage.gd
@ -1,12 +1,55 @@
 extends ConfirmationDialog


+var aspect_ratio := 1.0
+
+onready var width_value : SpinBox = find_node("WidthValue")
+onready var height_value : SpinBox = find_node("HeightValue")
+onready var width_value_perc : SpinBox = find_node("WidthValuePerc")
+onready var height_value_perc : SpinBox = find_node("HeightValuePerc")
+onready var interpolation_type : OptionButton = find_node("InterpolationType")
+onready var ratio_box : BaseButton = find_node("AspectRatioButton")
+
+
+func _on_ScaleImage_about_to_show() -> void:
+	width_value.value = Global.current_project.size.x
+	height_value.value = Global.current_project.size.y
+	width_value_perc.value = 100
+	height_value_perc.value = 100
+	aspect_ratio = width_value.value / height_value.value
+
+
 func _on_ScaleImage_confirmed() -> void:
-	var width : int = $VBoxContainer/OptionsContainer/WidthValue.value
-	var height : int = $VBoxContainer/OptionsContainer/HeightValue.value
-	var interpolation : int = $VBoxContainer/OptionsContainer/InterpolationType.selected
+	var width : int = width_value.value
+	var height : int = height_value.value
+	var interpolation : int = interpolation_type.selected
 	DrawingAlgos.scale_image(width, height, interpolation)


 func _on_ScaleImage_popup_hide() -> void:
 	Global.dialog_open(false)
+
+
+func _on_WidthValue_value_changed(value : float) -> void:
+	if ratio_box.pressed:
+		height_value.value = width_value.value / aspect_ratio
+	width_value_perc.value = (value * 100) / Global.current_project.size.x
+
+
+func _on_HeightValue_value_changed(value : float) -> void:
+	if ratio_box.pressed:
+		width_value.value = height_value.value * aspect_ratio
+	height_value_perc.value = (value * 100) / Global.current_project.size.y
+
+
+func _on_WidthValuePerc_value_changed(value : float) -> void:
+	width_value.value = (Global.current_project.size.x * value) / 100
+
+
+func _on_HeightValuePerc_value_changed(value : float) -> void:
+	height_value.value = (Global.current_project.size.y * value) / 100
+
+
+func _on_AspectRatioButton_toggled(button_pressed : bool) -> void:
+	if button_pressed:
+		height_value.value = width_value.value / aspect_ratio
--- a/src/UI/Dialogs/ImageEffects/ScaleImage.tscn
+++ b/src/UI/Dialogs/ImageEffects/ScaleImage.tscn
@ -1,79 +1,215 @@
-[gd_scene load_steps=2 format=2]
+[gd_scene load_steps=5 format=2]

 [ext_resource path="res://src/UI/Dialogs/ImageEffects/ScaleImage.gd" type="Script" id=1]
+[ext_resource path="res://assets/graphics/dark_themes/misc/lock_aspect_guides.png" type="Texture" id=2]
+[ext_resource path="res://assets/graphics/dark_themes/misc/lock_aspect_2.png" type="Texture" id=3]
+[ext_resource path="res://assets/graphics/dark_themes/misc/lock_aspect.png" type="Texture" id=4]

 [node name="ScaleImage" type="ConfirmationDialog"]
 margin_right = 200.0
 margin_bottom = 114.0
 rect_min_size = Vector2( 250, 87.5 )
 window_title = "Scale Image"
+resizable = true
 script = ExtResource( 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}

 [node name="VBoxContainer" type="VBoxContainer" parent="."]
 margin_left = 8.0
 margin_top = 8.0
 margin_right = 242.0
-margin_bottom = 102.0
+margin_bottom = 218.0
+size_flags_horizontal = 3
+__meta__ = {
+"_edit_use_anchors_": false
+}

 [node name="ImageSize" type="Label" parent="VBoxContainer"]
 margin_right = 234.0
-margin_bottom = 14.0
+margin_bottom = 23.0
 text = "Image Size"

-[node name="OptionsContainer" type="GridContainer" parent="VBoxContainer"]
-margin_top = 18.0
+[node name="HSeparator" type="HSeparator" parent="VBoxContainer"]
+margin_top = 27.0
 margin_right = 234.0
-margin_bottom = 94.0
-custom_constants/vseparation = 4
-custom_constants/hseparation = 2
-columns = 2
+margin_bottom = 31.0

-[node name="WidthLabel" type="Label" parent="VBoxContainer/OptionsContainer"]
-margin_top = 5.0
-margin_right = 87.0
-margin_bottom = 19.0
+[node name="PixelsLabel" type="Label" parent="VBoxContainer"]
+margin_top = 35.0
+margin_right = 234.0
+margin_bottom = 58.0
+text = "Pixels"
+
+[node name="SizeContainer" type="HBoxContainer" parent="VBoxContainer"]
+margin_top = 62.0
+margin_right = 234.0
+margin_bottom = 112.0
+
+[node name="VBoxContainer" type="VBoxContainer" parent="VBoxContainer/SizeContainer"]
+margin_right = 221.0
+margin_bottom = 50.0
+size_flags_horizontal = 3
+
+[node name="WidthContainer" type="HBoxContainer" parent="VBoxContainer/SizeContainer/VBoxContainer"]
+margin_right = 221.0
+margin_bottom = 23.0
+
+[node name="WidthLabel" type="Label" parent="VBoxContainer/SizeContainer/VBoxContainer/WidthContainer"]
+margin_right = 90.0
+margin_bottom = 23.0
+rect_min_size = Vector2( 90, 0 )
 text = "Width:"

-[node name="WidthValue" type="SpinBox" parent="VBoxContainer/OptionsContainer"]
-margin_left = 89.0
-margin_right = 168.0
-margin_bottom = 24.0
+[node name="WidthValue" type="SpinBox" parent="VBoxContainer/SizeContainer/VBoxContainer/WidthContainer"]
+margin_left = 94.0
+margin_right = 221.0
+margin_bottom = 23.0
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 min_value = 1.0
 max_value = 16384.0
 value = 64.0
 suffix = "px"

-[node name="Height" type="Label" parent="VBoxContainer/OptionsContainer"]
-margin_top = 33.0
-margin_right = 87.0
-margin_bottom = 47.0
+[node name="HeightContainer" type="HBoxContainer" parent="VBoxContainer/SizeContainer/VBoxContainer"]
+margin_top = 27.0
+margin_right = 221.0
+margin_bottom = 50.0
+
+[node name="Height" type="Label" parent="VBoxContainer/SizeContainer/VBoxContainer/HeightContainer"]
+margin_right = 90.0
+margin_bottom = 23.0
+rect_min_size = Vector2( 90, 0 )
 text = "Height:"

-[node name="HeightValue" type="SpinBox" parent="VBoxContainer/OptionsContainer"]
-margin_left = 89.0
-margin_top = 28.0
-margin_right = 168.0
-margin_bottom = 52.0
+[node name="HeightValue" type="SpinBox" parent="VBoxContainer/SizeContainer/VBoxContainer/HeightContainer"]
+margin_left = 94.0
+margin_right = 221.0
+margin_bottom = 23.0
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 min_value = 1.0
 max_value = 16384.0
 value = 64.0
 suffix = "px"

-[node name="InterpolationLabel" type="Label" parent="VBoxContainer/OptionsContainer"]
-margin_top = 59.0
-margin_right = 87.0
-margin_bottom = 73.0
+[node name="TextureRect" type="TextureRect" parent="VBoxContainer/SizeContainer"]
+margin_left = 225.0
+margin_right = 234.0
+margin_bottom = 50.0
+texture = ExtResource( 2 )
+
+[node name="AspectRatioButton" type="TextureButton" parent="VBoxContainer/SizeContainer/TextureRect"]
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+margin_left = -4.5
+margin_top = -9.0
+margin_right = 11.5
+margin_bottom = 7.0
+hint_tooltip = "Lock aspect ratio"
+mouse_default_cursor_shape = 2
+toggle_mode = true
+texture_normal = ExtResource( 3 )
+texture_pressed = ExtResource( 4 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="HSeparator2" type="HSeparator" parent="VBoxContainer"]
+margin_top = 116.0
+margin_right = 234.0
+margin_bottom = 120.0
+
+[node name="PercentageLabel" type="Label" parent="VBoxContainer"]
+margin_top = 124.0
+margin_right = 234.0
+margin_bottom = 147.0
+text = "Percentage"
+
+[node name="PercentageContainer" type="VBoxContainer" parent="VBoxContainer"]
+margin_top = 151.0
+margin_right = 234.0
+margin_bottom = 201.0
+
+[node name="WidthContainer" type="HBoxContainer" parent="VBoxContainer/PercentageContainer"]
+margin_right = 234.0
+margin_bottom = 23.0
+
+[node name="WidthLabel" type="Label" parent="VBoxContainer/PercentageContainer/WidthContainer"]
+margin_right = 90.0
+margin_bottom = 23.0
+rect_min_size = Vector2( 90, 0 )
+text = "Width:"
+
+[node name="WidthValuePerc" type="SpinBox" parent="VBoxContainer/PercentageContainer/WidthContainer"]
+margin_left = 94.0
+margin_right = 234.0
+margin_bottom = 23.0
+mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
+min_value = 1.0
+max_value = 16384.0
+step = 0.01
+value = 100.0
+suffix = "%"
+
+[node name="HeightContainer" type="HBoxContainer" parent="VBoxContainer/PercentageContainer"]
+margin_top = 27.0
+margin_right = 234.0
+margin_bottom = 50.0
+
+[node name="Height" type="Label" parent="VBoxContainer/PercentageContainer/HeightContainer"]
+margin_right = 90.0
+margin_bottom = 23.0
+rect_min_size = Vector2( 90, 0 )
+text = "Height:"
+
+[node name="HeightValuePerc" type="SpinBox" parent="VBoxContainer/PercentageContainer/HeightContainer"]
+margin_left = 94.0
+margin_right = 234.0
+margin_bottom = 23.0
+mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
+min_value = 1.0
+max_value = 16384.0
+step = 0.01
+value = 100.0
+suffix = "%"
+
+[node name="HSeparator3" type="HSeparator" parent="VBoxContainer"]
+margin_top = 205.0
+margin_right = 234.0
+margin_bottom = 209.0
+
+[node name="InterpolationContainer" type="HBoxContainer" parent="VBoxContainer"]
+margin_top = 213.0
+margin_right = 234.0
+margin_bottom = 236.0
+
+[node name="InterpolationLabel" type="Label" parent="VBoxContainer/InterpolationContainer"]
+margin_right = 90.0
+margin_bottom = 23.0
+rect_min_size = Vector2( 90, 0 )
 text = "Interpolation:"

-[node name="InterpolationType" type="OptionButton" parent="VBoxContainer/OptionsContainer"]
-margin_left = 89.0
-margin_top = 56.0
-margin_right = 168.0
-margin_bottom = 76.0
+[node name="InterpolationType" type="OptionButton" parent="VBoxContainer/InterpolationContainer"]
+margin_left = 94.0
+margin_right = 234.0
+margin_bottom = 23.0
+mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 text = "Nearest"
 items = [ "Nearest", null, false, 0, null, "Bilinear", null, false, 1, null, "Cubic", null, false, 2, null, "Trilinear", null, false, 3, null, "Lanczos", null, false, 4, null, "Scale3X", null, false, 5, null ]
 selected = 0
+[connection signal="about_to_show" from="." to="." method="_on_ScaleImage_about_to_show"]
 [connection signal="confirmed" from="." to="." method="_on_ScaleImage_confirmed"]
 [connection signal="popup_hide" from="." to="." method="_on_ScaleImage_popup_hide"]
+[connection signal="value_changed" from="VBoxContainer/SizeContainer/VBoxContainer/WidthContainer/WidthValue" to="." method="_on_WidthValue_value_changed"]
+[connection signal="value_changed" from="VBoxContainer/SizeContainer/VBoxContainer/HeightContainer/HeightValue" to="." method="_on_HeightValue_value_changed"]
+[connection signal="toggled" from="VBoxContainer/SizeContainer/TextureRect/AspectRatioButton" to="." method="_on_AspectRatioButton_toggled"]
+[connection signal="value_changed" from="VBoxContainer/PercentageContainer/WidthContainer/WidthValuePerc" to="." method="_on_WidthValuePerc_value_changed"]
+[connection signal="value_changed" from="VBoxContainer/PercentageContainer/HeightContainer/HeightValuePerc" to="." method="_on_HeightValuePerc_value_changed"]