Improve the UI of the tile mode offsets dialog and add an Isometric button

Translations/Translations.pot

@@ -267,19 +267,16 @@ msgstr ""
 msgid "Tile Mode Offsets"
 msgstr ""
 
-msgid "X-basis x:"
+#. Found under "Tile Mode Offsets". Basis is a linear algebra term. https://en.wikipedia.org/wiki/Basis_(linear_algebra)
+msgid "X-basis:"
 msgstr ""
 
-msgid "X-basis y:"
+#. Found under "Tile Mode Offsets". Basis is a linear algebra term. https://en.wikipedia.org/wiki/Basis_(linear_algebra)
+msgid "Y-basis:"
 msgstr ""
 
-msgid "Y-basis x:"
+#. Found under "Tile Mode Offsets". It's a button that when pressed, enables masking for tile mode. Masking essentially limits drawing to the visible pixels of the image, thus preventing from drawing on transparent pixels.
-msgstr ""
+msgid "Masking:"
-
-msgid "Y-basis y:"
-msgstr ""
-
-msgid "Tile Mask"
 msgstr ""
 
 msgid "Reset"

src/UI/Canvas/TileMode.gd

@@ -3,7 +3,7 @@ extends Node2D
 var tiles: Tiles
 var draw_center := false
 
-@onready var canvas := get_parent() as Canvas
+@onready var canvas := Global.canvas
 
 
 func _draw() -> void:

src/UI/Dialogs/TileModeOffsetsDialog.gd

@@ -1,11 +1,12 @@
 extends ConfirmationDialog
 
-@onready var x_basis_x_spinbox: SpinBox = $VBoxContainer/HBoxContainer/OptionsContainer/XBasisX
+@onready var x_basis_label: Label = $VBoxContainer/OptionsContainer/XBasisLabel
-@onready var x_basis_y_spinbox: SpinBox = $VBoxContainer/HBoxContainer/OptionsContainer/XBasisY
+@onready var x_basis: ValueSliderV2 = $VBoxContainer/OptionsContainer/XBasis
-@onready var y_basis_x_spinbox: SpinBox = $VBoxContainer/HBoxContainer/OptionsContainer/YBasisX
+@onready var y_basis_label: Label = $VBoxContainer/OptionsContainer/YBasisLabel
-@onready var y_basis_y_spinbox: SpinBox = $VBoxContainer/HBoxContainer/OptionsContainer/YBasisY
+@onready var y_basis: ValueSliderV2 = $VBoxContainer/OptionsContainer/YBasis
 @onready var preview_rect: Control = $VBoxContainer/AspectRatioContainer/Preview
 @onready var tile_mode: Node2D = $VBoxContainer/AspectRatioContainer/Preview/TileMode
+@onready var masking: CheckButton = $VBoxContainer/OptionsContainer/Masking
 
 
 func _ready() -> void:
@@ -37,35 +38,25 @@ func _on_TileModeOffsetsDialog_about_to_show() -> void:
 		tile_mode.tiles.mode = Global.current_project.tiles.mode
 	tile_mode.tiles.x_basis = Global.current_project.tiles.x_basis
 	tile_mode.tiles.y_basis = Global.current_project.tiles.y_basis
-	x_basis_x_spinbox.value = tile_mode.tiles.x_basis.x
+	x_basis.value = tile_mode.tiles.x_basis
-	x_basis_y_spinbox.value = tile_mode.tiles.x_basis.y
+	y_basis.value = tile_mode.tiles.y_basis
-	y_basis_x_spinbox.value = tile_mode.tiles.y_basis.x
-	y_basis_y_spinbox.value = tile_mode.tiles.y_basis.y
 
 	_show_options()
 	if Global.current_project.tiles.mode == Tiles.MODE.X_AXIS:
-		y_basis_x_spinbox.visible = false
+		y_basis.visible = false
-		y_basis_y_spinbox.visible = false
+		y_basis_label.visible = false
-		$VBoxContainer/HBoxContainer/OptionsContainer/YBasisXLabel.visible = false
-		$VBoxContainer/HBoxContainer/OptionsContainer/YBasisYLabel.visible = false
 	elif Global.current_project.tiles.mode == Tiles.MODE.Y_AXIS:
-		x_basis_x_spinbox.visible = false
+		x_basis.visible = false
-		x_basis_y_spinbox.visible = false
+		x_basis_label.visible = false
-		$VBoxContainer/HBoxContainer/OptionsContainer/XBasisXLabel.visible = false
-		$VBoxContainer/HBoxContainer/OptionsContainer/XBasisYLabel.visible = false
 
 	update_preview()
 
 
 func _show_options() -> void:
-	x_basis_x_spinbox.visible = true
+	x_basis.visible = true
-	x_basis_y_spinbox.visible = true
+	y_basis.visible = true
-	y_basis_x_spinbox.visible = true
+	x_basis_label.visible = true
-	y_basis_y_spinbox.visible = true
+	y_basis_label.visible = true
-	$VBoxContainer/HBoxContainer/OptionsContainer/YBasisXLabel.visible = true
-	$VBoxContainer/HBoxContainer/OptionsContainer/YBasisYLabel.visible = true
-	$VBoxContainer/HBoxContainer/OptionsContainer/XBasisXLabel.visible = true
-	$VBoxContainer/HBoxContainer/OptionsContainer/XBasisYLabel.visible = true
 
 
 func _on_TileModeOffsetsDialog_confirmed() -> void:
@@ -75,23 +66,13 @@ func _on_TileModeOffsetsDialog_confirmed() -> void:
 	Global.transparent_checker.update_rect()
 
 
-func _on_XBasisX_value_changed(value: int) -> void:
+func _on_x_basis_value_changed(value: Vector2) -> void:
-	tile_mode.tiles.x_basis.x = value
+	tile_mode.tiles.x_basis = value
 	update_preview()
 
 
-func _on_XBasisY_value_changed(value: int) -> void:
+func _on_y_basis_value_changed(value: Vector2) -> void:
-	tile_mode.tiles.x_basis.y = value
+	tile_mode.tiles.y_basis = value
-	update_preview()
-
-
-func _on_YBasisX_value_changed(value: int) -> void:
-	tile_mode.tiles.y_basis.x = value
-	update_preview()
-
-
-func _on_YBasisY_value_changed(value: int) -> void:
-	tile_mode.tiles.y_basis.y = value
 	update_preview()
 
 
@@ -122,10 +103,17 @@ func _on_TileModeOffsetsDialog_size_changed() -> void:
 func _on_Reset_pressed() -> void:
 	tile_mode.tiles.x_basis = Vector2i(Global.current_project.size.x, 0)
 	tile_mode.tiles.y_basis = Vector2i(0, Global.current_project.size.y)
-	x_basis_x_spinbox.value = Global.current_project.size.x
+	x_basis.value = tile_mode.tiles.x_basis
-	x_basis_y_spinbox.value = 0
+	y_basis.value = tile_mode.tiles.y_basis
-	y_basis_x_spinbox.value = 0
+	update_preview()
-	y_basis_y_spinbox.value = Global.current_project.size.y
+
+
+func _on_isometric_pressed() -> void:
+	tile_mode.tiles.x_basis = Global.current_project.size / 2
+	tile_mode.tiles.x_basis.y *= -1
+	tile_mode.tiles.y_basis = Global.current_project.size / 2
+	x_basis.value = tile_mode.tiles.x_basis
+	y_basis.value = tile_mode.tiles.y_basis
 	update_preview()
 
 
@@ -138,10 +126,7 @@ func change_mask() -> void:
 	var tiles_size := tiles.tile_size
 	var image := Image.create(tiles_size.x, tiles_size.y, false, Image.FORMAT_RGBA8)
 	DrawingAlgos.blend_layers(image, current_frame)
-	if (
+	if image.get_used_rect().size == Vector2i.ZERO or not masking.button_pressed:
-		image.get_used_rect().size == Vector2i.ZERO
-		or not $VBoxContainer/HBoxContainer/Masking.button_pressed
-	):
 		tiles.reset_mask()
 	else:
 		load_mask(image)

src/UI/Dialogs/TileModeOffsetsDialog.tscn

@@ -1,7 +1,8 @@
-[gd_scene load_steps=5 format=3 uid="uid://c0nuukjakmai2"]
+[gd_scene load_steps=6 format=3 uid="uid://c0nuukjakmai2"]
 
 [ext_resource type="PackedScene" uid="uid://3pmb60gpst7b" path="res://src/UI/Nodes/TransparentChecker.tscn" id="1"]
 [ext_resource type="Script" path="res://src/UI/Canvas/TileMode.gd" id="2"]
+[ext_resource type="PackedScene" path="res://src/UI/Nodes/ValueSliderV2.tscn" id="2_ul2eq"]
 [ext_resource type="Script" path="res://src/UI/Dialogs/TileModeOffsetsDialog.gd" id="3"]
 
 [sub_resource type="CanvasItemMaterial" id="1"]
@@ -10,83 +11,72 @@ blend_mode = 4
 [node name="TileModeOffsetsDialog" type="ConfirmationDialog"]
 canvas_item_default_texture_filter = 0
 title = "Tile Mode Offsets"
+position = Vector2i(0, 36)
+size = Vector2i(298, 536)
 script = ExtResource("3")
 
 [node name="VBoxContainer" type="VBoxContainer" parent="."]
 offset_left = 8.0
 offset_top = 8.0
-offset_right = 293.0
+offset_right = 290.0
-offset_bottom = 386.0
+offset_bottom = 487.0
 
 [node name="TileModeOffsets" type="Label" parent="VBoxContainer"]
 layout_mode = 2
 text = "Tile Mode Offsets"
 
-[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer"]
+[node name="OptionsContainer" type="GridContainer" parent="VBoxContainer"]
-layout_mode = 2
-
-[node name="OptionsContainer" type="GridContainer" parent="VBoxContainer/HBoxContainer"]
 layout_mode = 2
 theme_override_constants/h_separation = 2
 theme_override_constants/v_separation = 4
 columns = 2
 
-[node name="XBasisXLabel" type="Label" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
+[node name="XBasisLabel" type="Label" parent="VBoxContainer/OptionsContainer"]
 layout_mode = 2
-text = "X-basis x:"
+size_flags_horizontal = 3
+text = "X-basis:"
 
-[node name="XBasisX" type="SpinBox" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
+[node name="XBasis" parent="VBoxContainer/OptionsContainer" instance=ExtResource("2_ul2eq")]
 layout_mode = 2
-mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
-min_value = -16384.0
+allow_greater = true
-max_value = 16384.0
+allow_lesser = true
-suffix = "px"
+suffix_x = "px"
+suffix_y = "px"
 
-[node name="XBasisYLabel" type="Label" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
+[node name="YBasisLabel" type="Label" parent="VBoxContainer/OptionsContainer"]
 layout_mode = 2
-text = "X-basis y:"
+size_flags_horizontal = 3
+text = "Y-basis:"
 
-[node name="XBasisY" type="SpinBox" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
+[node name="YBasis" parent="VBoxContainer/OptionsContainer" instance=ExtResource("2_ul2eq")]
 layout_mode = 2
-mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
-min_value = -16384.0
+allow_greater = true
-max_value = 16384.0
+allow_lesser = true
-suffix = "px"
+suffix_x = "px"
+suffix_y = "px"
 
-[node name="YBasisXLabel" type="Label" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
+[node name="MaskingLabel" type="Label" parent="VBoxContainer/OptionsContainer"]
 layout_mode = 2
-text = "Y-basis x:"
+text = "Masking:"
 
-[node name="YBasisX" type="SpinBox" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
+[node name="Masking" type="CheckButton" parent="VBoxContainer/OptionsContainer"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-min_value = -16384.0
-max_value = 16384.0
-suffix = "px"
-
-[node name="YBasisYLabel" type="Label" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
-layout_mode = 2
-text = "Y-basis y:"
-
-[node name="YBasisY" type="SpinBox" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-min_value = -16384.0
-max_value = 16384.0
-suffix = "px"
-
-[node name="Reset" type="Button" parent="VBoxContainer/HBoxContainer/OptionsContainer"]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "Reset"
-
-[node name="VSeparator" type="VSeparator" parent="VBoxContainer/HBoxContainer"]
-layout_mode = 2
-
-[node name="Masking" type="CheckButton" parent="VBoxContainer/HBoxContainer"]
 layout_mode = 2
+size_flags_horizontal = 3
 size_flags_vertical = 0
-text = "Masking"
+
+[node name="Reset" type="Button" parent="VBoxContainer/OptionsContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+mouse_default_cursor_shape = 2
+text = "Default"
+
+[node name="Isometric" type="Button" parent="VBoxContainer/OptionsContainer"]
+layout_mode = 2
+size_flags_horizontal = 3
+mouse_default_cursor_shape = 2
+text = "Isometric"
 
 [node name="AspectRatioContainer" type="AspectRatioContainer" parent="VBoxContainer"]
 layout_mode = 2
@@ -111,9 +101,8 @@ anchor_bottom = 1.0
 [connection signal="confirmed" from="." to="." method="_on_TileModeOffsetsDialog_confirmed"]
 [connection signal="size_changed" from="." to="." method="_on_TileModeOffsetsDialog_size_changed"]
 [connection signal="visibility_changed" from="." to="." method="_on_TileModeOffsetsDialog_visibility_changed"]
-[connection signal="value_changed" from="VBoxContainer/HBoxContainer/OptionsContainer/XBasisX" to="." method="_on_XBasisX_value_changed"]
+[connection signal="value_changed" from="VBoxContainer/OptionsContainer/XBasis" to="." method="_on_x_basis_value_changed"]
-[connection signal="value_changed" from="VBoxContainer/HBoxContainer/OptionsContainer/XBasisY" to="." method="_on_XBasisY_value_changed"]
+[connection signal="value_changed" from="VBoxContainer/OptionsContainer/YBasis" to="." method="_on_y_basis_value_changed"]
-[connection signal="value_changed" from="VBoxContainer/HBoxContainer/OptionsContainer/YBasisX" to="." method="_on_YBasisX_value_changed"]
+[connection signal="toggled" from="VBoxContainer/OptionsContainer/Masking" to="." method="_on_Masking_toggled"]
-[connection signal="value_changed" from="VBoxContainer/HBoxContainer/OptionsContainer/YBasisY" to="." method="_on_YBasisY_value_changed"]
+[connection signal="pressed" from="VBoxContainer/OptionsContainer/Reset" to="." method="_on_Reset_pressed"]
-[connection signal="pressed" from="VBoxContainer/HBoxContainer/OptionsContainer/Reset" to="." method="_on_Reset_pressed"]
+[connection signal="pressed" from="VBoxContainer/OptionsContainer/Isometric" to="." method="_on_isometric_pressed"]
-[connection signal="toggled" from="VBoxContainer/HBoxContainer/Masking" to="." method="_on_Masking_toggled"]