Add a ValueSliderV2 to the Pencil's spacing options

Translations/Translations.pot

@@ -1414,7 +1414,7 @@ msgstr ""
 msgid "Brush size:"
 msgstr ""
 
-msgid "Overwrite Color"
+msgid "Overwrite color"
 msgstr ""
 
 msgid "Overwrites color instead of blending it. This option is only relevant with colors that are not fully opaque"
@@ -1426,6 +1426,18 @@ msgstr ""
 msgid "Fill inside"
 msgstr ""
 
+#. Found in the tool options of the Pencil tool, and refers to the spacing between brush strokes.
+msgid "Spacing"
+msgstr ""
+
+#. Found in the tool options of the Pencil tool if "Spacing" is enabled, and refers to the horizontal gap between brush strokes.
+msgid "Gap X:"
+msgstr ""
+
+#. Found in the tool options of the Pencil tool if "Spacing" is enabled, and refers to the vertical gap between brush strokes.
+msgid "Gap Y:"
+msgstr ""
+
 msgid "Pixel Perfect\n"
 "Makes lines smooth by removing the extra pixels on the edges"
 msgstr ""

src/Tools/BaseTool.tscn

@@ -1,7 +1,6 @@
-[gd_scene load_steps=3 format=2]
+[gd_scene load_steps=2 format=2]
 
 [ext_resource path="res://src/Tools/BaseTool.gd" type="Script" id=1]
-[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=2]
 
 [node name="ToolOptions" type="VBoxContainer"]
 margin_left = 7.0
@@ -24,34 +23,3 @@ theme_type_variation = "Header"
 text = "Tool Name"
 align = 1
 autowrap = true
-
-[node name="SpacingMode" type="CheckBox" parent="."]
-visible = false
-margin_top = 26.0
-margin_right = 116.0
-margin_bottom = 50.0
-text = "Spacing"
-
-[node name="StrokeGap" type="VBoxContainer" parent="."]
-visible = false
-margin_top = 26.0
-margin_right = 116.0
-margin_bottom = 78.0
-
-[node name="SpacingX" parent="StrokeGap" instance=ExtResource( 2 )]
-margin_right = 116.0
-__meta__ = {
-"_editor_description_": ""
-}
-prefix = "Gap X:"
-suffix = "px"
-
-[node name="SpacingY" parent="StrokeGap" instance=ExtResource( 2 )]
-margin_top = 28.0
-margin_right = 116.0
-margin_bottom = 52.0
-__meta__ = {
-"_editor_description_": ""
-}
-prefix = "Gap Y:"
-suffix = "px"

src/Tools/Pencil.gd

@@ -26,33 +26,29 @@ func _init() -> void:
 	_drawer.color_op = PencilOp.new()
 
 
-func _on_Overwrite_toggled(button_pressed: bool):
+func _on_Overwrite_toggled(button_pressed: bool) -> void:
 	_overwrite = button_pressed
 	update_config()
 	save_config()
 
 
-func _on_FillInside_toggled(button_pressed):
+func _on_FillInside_toggled(button_pressed: bool) -> void:
 	_fill_inside = button_pressed
 	update_config()
 	save_config()
 
 
-func _on_SpacingMode_toggled(button_pressed):
+func _on_SpacingMode_toggled(button_pressed: bool) -> void:
 	# This acts as an interface to access the intrinsic spacing_mode feature
-	# BaseTool holds the spacing system but for a tool to access them i recommend we do it in
+	# BaseTool holds the spacing system, but for a tool to access them it's recommended to do it in
 	# their own script
 	_spacing_mode = button_pressed
 	update_config()
 	save_config()
 
 
-func _on_SpacingX_value_changed(value):
+func _on_Spacing_value_changed(value: Vector2) -> void:
-	_spacing.x = value
+	_spacing = value
-
-
-func _on_SpacingY_value_changed(value):
-	_spacing.y = value
 
 
 func _input(event: InputEvent) -> void:
@@ -90,9 +86,8 @@ func update_config() -> void:
 	$Overwrite.pressed = _overwrite
 	$FillInside.pressed = _fill_inside
 	$SpacingMode.pressed = _spacing_mode
-	$StrokeGap.visible = _spacing_mode
+	$Spacing.visible = _spacing_mode
-	$StrokeGap/SpacingX.value = _spacing.x
+	$Spacing.value = _spacing
-	$StrokeGap/SpacingY.value = _spacing.y
 
 
 func draw_start(position: Vector2) -> void:

src/Tools/Pencil.tscn

@@ -1,62 +1,70 @@
-[gd_scene load_steps=3 format=2]
+[gd_scene load_steps=4 format=2]
 
 [ext_resource path="res://src/Tools/Draw.tscn" type="PackedScene" id=1]
+[ext_resource path="res://src/UI/Nodes/ValueSliderV2.tscn" type="PackedScene" id=2]
 [ext_resource path="res://src/Tools/Pencil.gd" type="Script" id=3]
 
 [node name="ToolOptions" instance=ExtResource( 1 )]
 script = ExtResource( 3 )
 
 [node name="ColorRect" parent="." index="0"]
-margin_right = 128.0
+margin_right = 127.0
 
 [node name="Label" parent="." index="1"]
-margin_right = 128.0
+margin_right = 127.0
 
 [node name="Brush" parent="." index="2"]
-margin_right = 128.0
+margin_right = 127.0
 
 [node name="BrushSize" parent="Brush" index="1"]
-margin_right = 128.0
+margin_right = 127.0
 
 [node name="ColorInterpolation" parent="." index="3"]
 margin_right = 128.0
 
 [node name="Overwrite" type="CheckBox" parent="." index="4"]
 margin_top = 62.0
-margin_right = 128.0
+margin_right = 127.0
 margin_bottom = 86.0
 grow_horizontal = 2
 grow_vertical = 2
 hint_tooltip = "Overwrites color instead of blending it. This option is only relevant with colors that are not fully opaque"
 mouse_default_cursor_shape = 2
-text = "Overwrite Color"
+text = "Overwrite color"
 __meta__ = {
 "_editor_description_": ""
 }
 
 [node name="FillInside" type="CheckBox" parent="." index="5"]
 margin_top = 90.0
-margin_right = 128.0
+margin_right = 127.0
 margin_bottom = 114.0
 mouse_default_cursor_shape = 2
-text = "Fill Inside"
+text = "Fill inside"
 __meta__ = {
 "_editor_description_": ""
 }
 
-[node name="SpacingMode" parent="." index="6"]
+[node name="SpacingMode" type="CheckBox" parent="." index="6"]
-visible = true
 margin_top = 118.0
-margin_right = 128.0
+margin_right = 127.0
 margin_bottom = 142.0
+mouse_default_cursor_shape = 2
+text = "Spacing"
 
-[node name="StrokeGap" parent="." index="7"]
+[node name="Spacing" parent="." index="7" instance=ExtResource( 2 )]
+visible = false
 margin_top = 146.0
-margin_right = 128.0
+margin_right = 127.0
 margin_bottom = 198.0
+allow_greater = true
+show_ratio = true
+prefix_x = "Gap X:"
+prefix_y = "Gap Y:"
+suffix_x = "px"
+suffix_y = "px"
 
 [connection signal="toggled" from="Overwrite" to="." method="_on_Overwrite_toggled"]
 [connection signal="toggled" from="FillInside" to="." method="_on_FillInside_toggled"]
 [connection signal="toggled" from="SpacingMode" to="." method="_on_SpacingMode_toggled"]
-[connection signal="value_changed" from="StrokeGap/SpacingX" to="." method="_on_SpacingX_value_changed"]
+[connection signal="value_changed" from="Spacing" to="." method="_on_Spacing_value_changed"]
-[connection signal="value_changed" from="StrokeGap/SpacingY" to="." method="_on_SpacingY_value_changed"]

src/UI/Nodes/ValueSliderV2.gd

@@ -43,7 +43,7 @@ func _gcd(a: int, b: int) -> int:
 func _on_X_value_changed(val: float) -> void:
 	value.x = val
 	if _locked_ratio:
-		value.y = max(min_value, (value.x / ratio.x) * ratio.y)
+		self.value.y = max(min_value, (value.x / ratio.x) * ratio.y)
 	if _can_emit_signal:
 		emit_signal("value_changed", value)
 
@@ -51,7 +51,7 @@ func _on_X_value_changed(val: float) -> void:
 func _on_Y_value_changed(val: float) -> void:
 	value.y = val
 	if _locked_ratio:
-		value.x = max(min_value, (value.y / ratio.y) * ratio.x)
+		self.value.x = max(min_value, (value.y / ratio.y) * ratio.x)
 	if _can_emit_signal:
 		emit_signal("value_changed", value)
 
@@ -59,6 +59,9 @@ func _on_Y_value_changed(val: float) -> void:
 func _on_RatioButton_toggled(button_pressed: bool) -> void:
 	_locked_ratio = button_pressed
 	var divisor := _gcd(value.x, value.y)
+	if divisor == 0:
+		ratio = Vector2.ONE
+	else:
 		ratio = value / divisor