From 4db21dae95e6e6e6d2c31a70fb8e85c187d3f46d Mon Sep 17 00:00:00 2001 From: Manolis Papadeas <35376950+OverloadedOrama@users.noreply.github.com> Date: Wed, 27 Jan 2021 00:45:12 +0200 Subject: [PATCH] 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. --- CHANGELOG.md | 3 +- Translations/Translations.pot | 6 + .../dark_themes/misc/lock_aspect_guides.png | Bin 624 -> 118 bytes src/UI/Dialogs/CreateNewImage.tscn | 60 +++-- src/UI/Dialogs/ImageEffects/ScaleImage.gd | 49 ++++- src/UI/Dialogs/ImageEffects/ScaleImage.tscn | 206 +++++++++++++++--- 6 files changed, 262 insertions(+), 62 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f7326c75..4cfacd9e5 100644 --- 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)) diff --git a/Translations/Translations.pot b/Translations/Translations.pot index c6eab8563..9a9f262f9 100644 --- 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 "" diff --git a/assets/graphics/dark_themes/misc/lock_aspect_guides.png b/assets/graphics/dark_themes/misc/lock_aspect_guides.png index aa819201a3a5f4db76c4bec5e0723783f95a5c4d..2f1a181dd46b7aba19d938ed7c3b790e2c0c7c72 100644 GIT binary patch literal 118 zcmeAS@N?(olHy`uVBq!ia0vp^oItF{!3HFMSs2d)QjEnx?oJHr&dIz4atu6O978O6 zlM@z*CB*En`&;kSHKW6bbH2(Mu|+;op)RhjixWh6{0yQJc)VP%tQKSlde4(+;eX;j PP%ne0tDnm{r-UW|p@tzw literal 624 zcmV-$0+0QPP)EX>4Tx04R}tkv&MmP!xqvQ$>-Af*n*GGSp5jh>AE$6^me@v=v%)FnQ@8G-*gu zTpR`0f`dPcRRozmhi@;1h}Gm~L3a8^kl4 zmd<&fILJzpLVQjfG3bKCk6f2se&bwpSm2pKBa@mZ4ibyS4wgHZl?;`5nmDAW8s!UF zmle)ioYhK=weHDZ7|3fYX|B^6LmW#;APEsNYAB-u3sKrNQcR@iJm%pab^J+k$>b`7 zkz)Z>sE`~#_#gb9ty!3wbdv%xp!>zPKgNNcU7%UF?eAmTZk_=CXW&X}`>PFL_LKB_ zTMHcl1KYsGbz777fXf|V_(_)x$&viDghBy$KcjET0YkSy-_CX>@2HM@dakSAh-}0000-Nkl% zZi}R0iHPuQrr8gY#?B9(ypSNll0g7KDJ)9_3EmF&lS`_`IyV8$P!n#X1H?1{0000< KMNUMnLSTXeBl}?h diff --git a/src/UI/Dialogs/CreateNewImage.tscn b/src/UI/Dialogs/CreateNewImage.tscn index f5a065e94..799fc8144 100644 --- 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"] diff --git a/src/UI/Dialogs/ImageEffects/ScaleImage.gd b/src/UI/Dialogs/ImageEffects/ScaleImage.gd index bab0fd0a7..89b5df288 100644 --- 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 diff --git a/src/UI/Dialogs/ImageEffects/ScaleImage.tscn b/src/UI/Dialogs/ImageEffects/ScaleImage.tscn index 55046bf55..3a99d6967 100644 --- 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"]