Replace HSliders+SpinBoxes with ValueSliders in the tool options

Still WIP, the tool options may change even more later.

Translations/Translations.pot

@@ -1347,9 +1347,11 @@ msgstr ""
 msgid "Fill with:"
 msgstr ""
 
-msgid "Selected Color"
+#. Found in the bucket tool options, one of the fill with options.
+msgid "Selected color"
 msgstr ""
 
+#. Found in the bucket tool options, one of the fill with options.
 msgid "Pattern"
 msgstr ""
 

src/Tools/Bucket.gd

@@ -44,25 +44,17 @@ func _on_FillAreaOptions_item_selected(index: int) -> void:
 
 
 func _select_fill_area_optionbutton() -> void:
-	$FillAreaOptions.selected = _fill_area
+	$"%FillAreaOptions".selected = _fill_area
-	$Similarity.visible = (_fill_area == FillArea.COLORS)
+	$SimilaritySlider.visible = (_fill_area == FillArea.COLORS)
 
 
 func _on_FillWithOptions_item_selected(index: int) -> void:
 	_fill_with = index
-	$Similarity/Value.value = _similarity
 	update_config()
 	save_config()
 
 
-func _on_Value_value_changed(value: float) -> void:
+func _on_SimilaritySlider_value_changed(value: float) -> void:
-	_similarity = value
-	$Similarity/Slider.value = _similarity
-	update_config()
-	save_config()
-
-
-func _on_Slider_value_changed(value: float) -> void:
 	_similarity = value
 	update_config()
 	save_config()
@@ -120,9 +112,8 @@ func set_config(config: Dictionary) -> void:
 
 func update_config() -> void:
 	_select_fill_area_optionbutton()
-	$FillWithOptions.selected = _fill_with
+	$"%FillWithOptions".selected = _fill_with
-	$Similarity/Value.value = _similarity
+	$SimilaritySlider.value = _similarity
-	$Similarity/Slider.value = _similarity
 	$FillPattern.visible = _fill_with == FillWith.PATTERN
 	$FillPattern/XOffset/OffsetX.value = _offset_x
 	$FillPattern/YOffset/OffsetY.value = _offset_y

src/Tools/Bucket.tscn

@@ -1,5 +1,6 @@
-[gd_scene load_steps=5 format=2]
+[gd_scene load_steps=6 format=2]
 
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=1]
 [ext_resource path="res://src/Tools/BaseTool.tscn" type="PackedScene" id=2]
 [ext_resource path="res://src/Tools/Bucket.gd" type="Script" id=3]
 
@@ -32,109 +33,73 @@ margin_right = 131.0
 [node name="Label" parent="." index="1"]
 margin_right = 131.0
 
-[node name="FillArea" type="Label" parent="." index="2"]
+[node name="FillAreaContainer" type="HBoxContainer" parent="." index="2"]
-margin_left = 38.0
 margin_top = 26.0
-margin_right = 92.0
+margin_right = 131.0
 margin_bottom = 40.0
+
+[node name="FillArea" type="Label" parent="FillAreaContainer" index="0"]
+margin_right = 131.0
+margin_bottom = 14.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
+size_flags_horizontal = 3
 text = "Fill area:"
 
 [node name="FillAreaOptions" type="OptionButton" parent="." index="3"]
-margin_left = 13.0
+unique_name_in_owner = true
 margin_top = 44.0
-margin_right = 117.0
+margin_right = 131.0
 margin_bottom = 64.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
+size_flags_horizontal = 3
 text = "Similar area"
 items = [ "Similar area", null, false, 0, null, "Similar colors", null, false, 1, null, "Whole selection", null, false, 2, null ]
 selected = 0
 
-[node name="Similarity" type="VBoxContainer" parent="." index="4"]
+[node name="SimilaritySlider" parent="." index="4" instance=ExtResource( 1 )]
 visible = false
-margin_top = 60.0
-margin_right = 131.0
-margin_bottom = 122.0
-alignment = 1
-
-[node name="Label" type="Label" parent="Similarity" index="0"]
-margin_left = 33.0
-margin_right = 97.0
-margin_bottom = 14.0
-size_flags_horizontal = 4
-text = "Similarity:"
-
-[node name="Value" type="SpinBox" parent="Similarity" index="1"]
-margin_left = 28.0
-margin_top = 18.0
-margin_right = 102.0
-margin_bottom = 42.0
-hint_tooltip = "How much two colors are Similar/Close together"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-step = 0.001
-value = 100.0
-align = 1
-suffix = "%"
-__meta__ = {
-"_editor_description_": ""
-}
-
-[node name="Slider" type="HSlider" parent="Similarity" index="2"]
-margin_left = 19.0
-margin_top = 46.0
-margin_right = 111.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-hint_tooltip = "How much two colors are Similar/Close together"
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-step = 0.001
-value = 100.0
-ticks_on_borders = true
-__meta__ = {
-"_editor_description_": ""
-}
-
-[node name="FillWith" type="Label" parent="." index="5"]
-margin_left = 38.0
 margin_top = 68.0
-margin_right = 92.0
+margin_right = 131.0
+margin_bottom = 92.0
+value = 100.0
+prefix = "Similarity:"
+
+[node name="FillWithContainer" type="HBoxContainer" parent="." index="5"]
+margin_top = 68.0
+margin_right = 131.0
 margin_bottom = 82.0
-size_flags_horizontal = 4
+
+[node name="FillWith" type="Label" parent="FillWithContainer" index="0"]
+margin_right = 131.0
+margin_bottom = 14.0
+size_flags_horizontal = 3
 text = "Fill with:"
 
 [node name="FillWithOptions" type="OptionButton" parent="." index="6"]
-margin_left = 5.0
+unique_name_in_owner = true
 margin_top = 86.0
-margin_right = 126.0
+margin_right = 131.0
 margin_bottom = 106.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
+size_flags_horizontal = 3
-text = "Selected Color"
+text = "Selected color"
-items = [ "Selected Color", null, false, 0, null, "Pattern", null, false, 1, null ]
+items = [ "Selected color", null, false, 0, null, "Pattern", null, false, 1, null ]
 selected = 0
 
 [node name="FillPattern" type="VBoxContainer" parent="." index="7"]
 visible = false
-margin_left = 22.0
+margin_top = 110.0
-margin_top = 102.0
+margin_right = 131.0
-margin_right = 108.0
+margin_bottom = 216.0
-margin_bottom = 208.0
+size_flags_horizontal = 3
-size_flags_horizontal = 4
 
 [node name="Type" type="Button" parent="FillPattern" index="0"]
-margin_left = 27.0
+margin_right = 32.0
-margin_right = 59.0
 margin_bottom = 32.0
 rect_min_size = Vector2( 32, 32 )
 hint_tooltip = "Select a brush"
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
+size_flags_horizontal = 0
 custom_styles/hover = SubResource( 1 )
 custom_styles/pressed = SubResource( 1 )
 custom_styles/focus = SubResource( 2 )
@@ -146,20 +111,16 @@ margin_right = 32.0
 margin_bottom = 32.0
 expand = true
 stretch_mode = 6
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
 [node name="Offset" type="Label" parent="FillPattern" index="1"]
 margin_top = 36.0
-margin_right = 86.0
+margin_right = 131.0
 margin_bottom = 50.0
 text = "Offset"
-align = 1
 
 [node name="XOffset" type="HBoxContainer" parent="FillPattern" index="2"]
 margin_top = 54.0
-margin_right = 86.0
+margin_right = 131.0
 margin_bottom = 78.0
 
 [node name="Label" type="Label" parent="FillPattern/XOffset" index="0"]
@@ -170,13 +131,14 @@ text = "X"
 
 [node name="OffsetX" type="SpinBox" parent="FillPattern/XOffset" index="1"]
 margin_left = 12.0
-margin_right = 86.0
+margin_right = 131.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 
 [node name="YOffset" type="HBoxContainer" parent="FillPattern" index="3"]
 margin_top = 82.0
-margin_right = 86.0
+margin_right = 131.0
 margin_bottom = 106.0
 
 [node name="Label" type="Label" parent="FillPattern/YOffset" index="0"]
@@ -187,13 +149,13 @@ text = "Y"
 
 [node name="OffsetY" type="SpinBox" parent="FillPattern/YOffset" index="1"]
 margin_left = 11.0
-margin_right = 85.0
+margin_right = 131.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 
 [connection signal="item_selected" from="FillAreaOptions" to="." method="_on_FillAreaOptions_item_selected"]
-[connection signal="value_changed" from="Similarity/Value" to="." method="_on_Value_value_changed"]
+[connection signal="value_changed" from="SimilaritySlider" to="." method="_on_SimilaritySlider_value_changed"]
-[connection signal="value_changed" from="Similarity/Slider" to="." method="_on_Slider_value_changed"]
 [connection signal="item_selected" from="FillWithOptions" to="." method="_on_FillWithOptions_item_selected"]
 [connection signal="pressed" from="FillPattern/Type" to="." method="_on_PatternType_pressed"]
 [connection signal="value_changed" from="FillPattern/XOffset/OffsetX" to="." method="_on_PatternOffsetX_value_changed"]

src/Tools/ColorPicker.tscn

@@ -12,20 +12,17 @@ margin_right = 116.0
 margin_bottom = 64.0
 
 [node name="Label" type="Label" parent="ColorPicker" index="0"]
-margin_left = 32.0
+margin_right = 116.0
-margin_right = 83.0
 margin_bottom = 14.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
+size_flags_vertical = 1
 text = "Pick for:"
 
 [node name="Options" type="OptionButton" parent="ColorPicker" index="1"]
-margin_left = 13.0
 margin_top = 18.0
-margin_right = 103.0
+margin_right = 116.0
 margin_bottom = 38.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 text = "Left Color"
 items = [ "Left Color", null, false, 0, null, "Right Color", null, false, 1, null ]
 selected = 0

src/Tools/Draw.gd

@@ -104,15 +104,13 @@ func set_config(config: Dictionary) -> void:
 
 
 func update_config() -> void:
-	$Brush/Size.value = _brush_size
+	$Brush/BrushSize.value = _brush_size
-	$BrushSize.value = _brush_size
+	$ColorInterpolation.value = _brush_interpolate
-	$ColorInterpolation/Factor.value = _brush_interpolate
-	$ColorInterpolation/Slider.value = _brush_interpolate
 	update_brush()
 
 
 func update_brush() -> void:
-	$Brush/Size.suffix = "px"  # Assume we are using default brushes
+	$Brush/BrushSize.suffix = "px"  # Assume we are using default brushes
 	match _brush.type:
 		Brushes.PIXEL:
 			_brush_texture.create_from_image(load("res://assets/graphics/pixel_image.png"), 0)
@@ -121,7 +119,7 @@ func update_brush() -> void:
 		Brushes.FILLED_CIRCLE:
 			_brush_texture.create_from_image(load("res://assets/graphics/circle_filled_9x9.png"), 0)
 		Brushes.FILE, Brushes.RANDOM_FILE, Brushes.CUSTOM:
-			$Brush/Size.suffix = "00 %"  # It's an image so a different size convention is used
+			$Brush/BrushSize.suffix = "00 %"  # Use a different size convention on images
 			if _brush.random.size() <= 1:
 				_brush_image = _create_blended_brush_image(_brush.image)
 			else:

src/Tools/Draw.tscn

@@ -1,5 +1,6 @@
-[gd_scene load_steps=5 format=2]
+[gd_scene load_steps=6 format=2]
 
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=1]
 [ext_resource path="res://src/Tools/BaseTool.tscn" type="PackedScene" id=2]
 [ext_resource path="res://src/Tools/Draw.gd" type="Script" id=3]
 
@@ -31,8 +32,7 @@ margin_bottom = 58.0
 alignment = 1
 
 [node name="Type" type="Button" parent="Brush" index="0"]
-margin_left = 3.0
+margin_right = 32.0
-margin_right = 35.0
 margin_bottom = 32.0
 rect_min_size = Vector2( 32, 32 )
 hint_tooltip = "Select a brush"
@@ -49,77 +49,26 @@ margin_right = 32.0
 margin_bottom = 32.0
 expand = true
 stretch_mode = 6
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
-[node name="Size" type="SpinBox" parent="Brush" index="1"]
+[node name="BrushSize" parent="Brush" index="1" instance=ExtResource( 1 )]
-margin_left = 39.0
+margin_left = 36.0
-margin_right = 113.0
+margin_right = 116.0
 margin_bottom = 32.0
-mouse_default_cursor_shape = 2
-min_value = 1.0
-value = 1.0
-align = 1
-suffix = "px"
-
-[node name="BrushSize" type="HSlider" parent="." index="3"]
-margin_left = 12.0
-margin_top = 62.0
-margin_right = 104.0
-margin_bottom = 78.0
-rect_min_size = Vector2( 92, 0 )
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
 min_value = 1.0
 max_value = 25.0
 value = 1.0
 allow_greater = true
-ticks_on_borders = true
+prefix = "Size:"
+suffix = "px"
 
-[node name="ColorInterpolation" type="VBoxContainer" parent="." index="4"]
+[node name="ColorInterpolation" parent="." index="3" instance=ExtResource( 1 )]
 visible = false
-margin_top = 102.0
+margin_top = 62.0
 margin_right = 116.0
-margin_bottom = 164.0
+margin_bottom = 86.0
-alignment = 1
-
-[node name="Label" type="Label" parent="ColorInterpolation" index="0"]
-margin_left = 4.0
-margin_right = 111.0
-margin_bottom = 14.0
 hint_tooltip = "0: Color from the brush itself, 100: the currently selected color"
-mouse_filter = 1
+prefix = "Brush color from:"
-size_flags_horizontal = 4
-text = "Brush color from"
-
-[node name="Factor" type="SpinBox" parent="ColorInterpolation" index="1"]
-margin_left = 21.0
-margin_top = 18.0
-margin_right = 95.0
-margin_bottom = 42.0
-hint_tooltip = "0: Color from the brush itself, 100: the currently selected color"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-align = 1
-
-[node name="Slider" type="HSlider" parent="ColorInterpolation" index="2"]
-margin_left = 12.0
-margin_top = 46.0
-margin_right = 104.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-hint_tooltip = "0: Color from the brush itself, 100: the currently selected color"
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-ticks_on_borders = true
 
 [connection signal="pressed" from="Brush/Type" to="." method="_on_BrushType_pressed"]
-[connection signal="value_changed" from="Brush/Size" to="." method="_on_BrushSize_value_changed"]
+[connection signal="value_changed" from="Brush/BrushSize" to="." method="_on_BrushSize_value_changed"]
-[connection signal="value_changed" from="BrushSize" to="." method="_on_BrushSize_value_changed"]
+[connection signal="value_changed" from="ColorInterpolation" to="." method="_on_InterpolateFactor_value_changed"]
-[connection signal="value_changed" from="ColorInterpolation/Factor" to="." method="_on_InterpolateFactor_value_changed"]
-[connection signal="value_changed" from="ColorInterpolation/Slider" to="." method="_on_InterpolateFactor_value_changed"]

src/Tools/Eraser.gd

@@ -124,8 +124,7 @@ func _on_Opacity_value_changed(value: float) -> void:
 
 func update_config() -> void:
 	.update_config()
-	$Opacity/OpacitySpinBox.value = _strength * 255
+	$OpacitySlider.value = _strength * 255
-	$Opacity/OpacitySlider.value = _strength * 255
 
 
 func update_brush() -> void:

src/Tools/Eraser.tscn

@@ -1,46 +1,22 @@
-[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/Tools/Eraser.gd" type="Script" id=2]
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=3]
 
 [node name="ToolOptions" instance=ExtResource( 1 )]
 script = ExtResource( 2 )
 
-[node name="Opacity" type="VBoxContainer" parent="." index="4"]
+[node name="ColorInterpolation" parent="." index="3"]
-margin_top = 82.0
+margin_top = 134.0
-margin_right = 116.0
+margin_bottom = 196.0
-margin_bottom = 144.0
 
-[node name="OpacityLabel" type="Label" parent="Opacity" index="0"]
+[node name="OpacitySlider" parent="." index="4" instance=ExtResource( 3 )]
+margin_top = 62.0
 margin_right = 116.0
-margin_bottom = 14.0
+margin_bottom = 86.0
-text = "Opacity:"
-align = 1
-
-[node name="OpacitySpinBox" type="SpinBox" parent="Opacity" index="1"]
-margin_left = 21.0
-margin_top = 18.0
-margin_right = 95.0
-margin_bottom = 42.0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 max_value = 255.0
 value = 255.0
-align = 1
+prefix = "Opacity:"
-__meta__ = {
-"_edit_use_anchors_": false
-}
 
-[node name="OpacitySlider" type="HSlider" parent="Opacity" index="2"]
+[connection signal="value_changed" from="OpacitySlider" to="." method="_on_Opacity_value_changed"]
-margin_left = 12.0
-margin_top = 46.0
-margin_right = 104.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-max_value = 255.0
-value = 255.0
-
-[connection signal="value_changed" from="Opacity/OpacitySpinBox" to="." method="_on_Opacity_value_changed"]
-[connection signal="value_changed" from="Opacity/OpacitySlider" to="." method="_on_Opacity_value_changed"]

src/Tools/LineTool.gd

@@ -48,7 +48,6 @@ func set_config(config: Dictionary) -> void:
 func update_config() -> void:
 	.update_config()
 	$ThicknessSlider.value = _thickness
-	$ShapeThickness/ThicknessSpinbox.value = _thickness
 
 
 func _get_shape_points(_size: Vector2) -> PoolVector2Array:

src/Tools/LineTool.tscn

@@ -1,60 +1,26 @@
-[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/Tools/LineTool.gd" type="Script" id=2]
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=3]
 
 [node name="ToolOptions" instance=ExtResource( 1 )]
 script = ExtResource( 2 )
 
-[node name="Brush" parent="." index="1"]
+[node name="ThicknessSlider" parent="." index="2" instance=ExtResource( 3 )]
-visible = false
+margin_top = 26.0
-
+margin_right = 116.0
-[node name="ShapeThickness" type="HBoxContainer" parent="." index="2"]
+margin_bottom = 50.0
-margin_left = 6.0
-margin_top = 18.0
-margin_right = 110.0
-margin_bottom = 42.0
-size_flags_horizontal = 4
-custom_constants/separation = 0
-
-[node name="Label2" type="Label" parent="ShapeThickness" index="0"]
-margin_top = 5.0
-margin_right = 30.0
-margin_bottom = 19.0
-text = "Size:"
-align = 1
-
-[node name="ThicknessSpinbox" type="SpinBox" parent="ShapeThickness" index="1"]
-margin_left = 30.0
-margin_right = 104.0
-margin_bottom = 24.0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 min_value = 1.0
 value = 1.0
-align = 1
+prefix = "Size:"
 suffix = "px"
 
-[node name="ThicknessSlider" type="HSlider" parent="." index="3"]
+[node name="Brush" parent="." index="3"]
-margin_left = 12.0
-margin_top = 46.0
-margin_right = 104.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-min_value = 1.0
-value = 1.0
-
-[node name="BrushSize" parent="." index="4"]
 visible = false
-margin_top = 18.0
-margin_bottom = 34.0
 
-[node name="ColorInterpolation" parent="." index="5"]
+[node name="ColorInterpolation" parent="." index="4"]
 margin_top = 66.0
 margin_bottom = 128.0
 
-[connection signal="value_changed" from="ShapeThickness/ThicknessSpinbox" to="." method="_on_Thickness_value_changed"]
 [connection signal="value_changed" from="ThicknessSlider" to="." method="_on_Thickness_value_changed"]

src/Tools/Pencil.tscn

@@ -9,48 +9,34 @@ script = ExtResource( 3 )
 [node name="ColorRect" parent="." index="0"]
 margin_right = 128.0
 
-[node name="Label" parent="." index="1"]
-margin_right = 128.0
-
 [node name="Brush" parent="." index="2"]
 margin_right = 128.0
 
-[node name="Type" parent="Brush" index="0"]
+[node name="BrushSize" parent="Brush" index="1"]
-margin_left = 9.0
+margin_right = 128.0
-margin_right = 41.0
 
-[node name="Size" parent="Brush" index="1"]
+[node name="ColorInterpolation" parent="." index="3"]
-margin_left = 45.0
+margin_right = 128.0
-margin_right = 119.0
-
-[node name="BrushSize" parent="." index="3"]
-margin_left = 18.0
-margin_right = 110.0
 
 [node name="Overwrite" type="CheckBox" parent="." index="4"]
-margin_top = 82.0
+margin_top = 62.0
 margin_right = 128.0
-margin_bottom = 106.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
-size_flags_horizontal = 4
 text = "Overwrite Color"
-align = 1
 __meta__ = {
 "_editor_description_": ""
 }
 
 [node name="FillInside" type="CheckBox" parent="." index="5"]
-margin_left = 19.0
+margin_top = 90.0
-margin_top = 110.0
+margin_right = 128.0
-margin_right = 109.0
+margin_bottom = 114.0
-margin_bottom = 134.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 text = "Fill inside"
-align = 1
 __meta__ = {
 "_editor_description_": ""
 }

src/Tools/SelectionTools/ColorSelect.gd

@@ -13,8 +13,7 @@ func set_config(config: Dictionary) -> void:
 
 
 func update_config() -> void:
-	$Similarity/SimilaritySpinBox.value = _similarity
+	$SimilaritySlider.value = _similarity
-	$Similarity/SimilaritySlider.value = _similarity
 
 
 func _on_Similarity_value_changed(value: float) -> void:

src/Tools/SelectionTools/ColorSelect.tscn

@@ -1,54 +1,17 @@
-[gd_scene load_steps=3 format=2]
+[gd_scene load_steps=4 format=2]
 
 [ext_resource path="res://src/Tools/SelectionTools/SelectionTool.tscn" type="PackedScene" id=1]
 [ext_resource path="res://src/Tools/SelectionTools/ColorSelect.gd" type="Script" id=2]
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=3]
 
 [node name="ToolOptions" instance=ExtResource( 1 )]
 script = ExtResource( 2 )
 
-[node name="Similarity" type="VBoxContainer" parent="." index="8"]
+[node name="SimilaritySlider" parent="." index="9" instance=ExtResource( 3 )]
-margin_top = 166.0
+margin_top = 174.0
 margin_right = 116.0
-margin_bottom = 228.0
+margin_bottom = 198.0
-alignment = 1
-
-[node name="Label" type="Label" parent="Similarity" index="0"]
-margin_left = 26.0
-margin_right = 90.0
-margin_bottom = 14.0
-size_flags_horizontal = 4
-text = "Similarity:"
-
-[node name="SimilaritySpinBox" type="SpinBox" parent="Similarity" index="1"]
-margin_left = 21.0
-margin_top = 18.0
-margin_right = 95.0
-margin_bottom = 42.0
-hint_tooltip = "How much two colors are Similar/Close together"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 value = 100.0
-align = 1
+prefix = "Similarity:"
-suffix = "%"
-__meta__ = {
-"_editor_description_": ""
-}
 
-[node name="SimilaritySlider" type="HSlider" parent="Similarity" index="2"]
+[connection signal="value_changed" from="SimilaritySlider" to="." method="_on_Similarity_value_changed"]
-margin_left = 12.0
-margin_top = 46.0
-margin_right = 104.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-hint_tooltip = "How much two colors are Similar/Close together"
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-value = 100.0
-__meta__ = {
-"_editor_description_": ""
-}
-
-[connection signal="value_changed" from="Similarity/SimilaritySpinBox" to="." method="_on_Similarity_value_changed"]
-[connection signal="value_changed" from="Similarity/SimilaritySlider" to="." method="_on_Similarity_value_changed"]

src/Tools/SelectionTools/SelectionTool.tscn

@@ -11,14 +11,11 @@ margin_top = 26.0
 margin_right = 116.0
 margin_bottom = 40.0
 text = "Position:"
-align = 1
 
 [node name="XContainer" type="HBoxContainer" parent="." index="3"]
-margin_left = 10.0
 margin_top = 44.0
-margin_right = 105.0
+margin_right = 116.0
 margin_bottom = 68.0
-size_flags_horizontal = 4
 
 [node name="Label" type="Label" parent="XContainer" index="0"]
 margin_top = 5.0
@@ -29,19 +26,18 @@ text = "X:"
 
 [node name="XSpinBox" type="SpinBox" parent="XContainer" index="1"]
 margin_left = 21.0
-margin_right = 95.0
+margin_right = 116.0
 margin_bottom = 24.0
 hint_tooltip = "X coordinate of the top left corner"
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 allow_greater = true
 allow_lesser = true
 
 [node name="YContainer" type="HBoxContainer" parent="." index="4"]
-margin_left = 10.0
 margin_top = 72.0
-margin_right = 105.0
+margin_right = 116.0
 margin_bottom = 96.0
-size_flags_horizontal = 4
 
 [node name="Label" type="Label" parent="YContainer" index="0"]
 margin_top = 5.0
@@ -52,10 +48,11 @@ text = "Y:"
 
 [node name="YSpinBox" type="SpinBox" parent="YContainer" index="1"]
 margin_left = 21.0
-margin_right = 95.0
+margin_right = 116.0
 margin_bottom = 24.0
 hint_tooltip = "Y coordinate of the top left corner"
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 allow_greater = true
 allow_lesser = true
 
@@ -64,14 +61,11 @@ margin_top = 100.0
 margin_right = 116.0
 margin_bottom = 114.0
 text = "Size:"
-align = 1
 
 [node name="WidthContainer" type="HBoxContainer" parent="." index="6"]
-margin_left = 10.0
 margin_top = 118.0
-margin_right = 105.0
+margin_right = 116.0
 margin_bottom = 142.0
-size_flags_horizontal = 4
 
 [node name="Label" type="Label" parent="WidthContainer" index="0"]
 margin_top = 5.0
@@ -82,20 +76,19 @@ text = "W:"
 
 [node name="WSpinBox" type="SpinBox" parent="WidthContainer" index="1"]
 margin_left = 21.0
-margin_right = 95.0
+margin_right = 116.0
 margin_bottom = 24.0
 hint_tooltip = "Width of selection"
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 min_value = 1.0
 value = 1.0
 allow_greater = true
 
 [node name="HeightContainer" type="HBoxContainer" parent="." index="7"]
-margin_left = 10.0
 margin_top = 146.0
-margin_right = 105.0
+margin_right = 116.0
 margin_bottom = 170.0
-size_flags_horizontal = 4
 
 [node name="Label" type="Label" parent="HeightContainer" index="0"]
 margin_top = 5.0
@@ -106,10 +99,11 @@ text = "H:"
 
 [node name="HSpinBox" type="SpinBox" parent="HeightContainer" index="1"]
 margin_left = 21.0
-margin_right = 95.0
+margin_right = 116.0
 margin_bottom = 24.0
 hint_tooltip = "Height of selection"
 mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
 min_value = 1.0
 value = 1.0
 allow_greater = true

src/Tools/Shading.gd

@@ -188,15 +188,11 @@ func update_config() -> void:
 	.update_config()
 	$ShadingMode.selected = _shading_mode
 	$LightenDarken.selected = _mode
-	$Amount/Spinbox.value = _amount
+	$AmountSlider.value = _amount
-	$Amount/Slider.value = _amount
+	$HueShiftingOptions/HueSlider.value = _hue_amount
-	$HueShiftingOptions/AmountHue/Spinbox.value = _hue_amount
+	$HueShiftingOptions/SatSlider.value = _sat_amount
-	$HueShiftingOptions/AmountHue/Slider.value = _hue_amount
+	$HueShiftingOptions/ValueSlider.value = _value_amount
-	$HueShiftingOptions/AmountSat/Spinbox.value = _sat_amount
+	$AmountSlider.visible = _shading_mode == ShadingMode.SIMPLE
-	$HueShiftingOptions/AmountSat/Slider.value = _sat_amount
-	$HueShiftingOptions/AmountValue/Spinbox.value = _value_amount
-	$HueShiftingOptions/AmountValue/Slider.value = _value_amount
-	$Amount.visible = _shading_mode == ShadingMode.SIMPLE
 	$HueShiftingOptions.visible = _shading_mode == ShadingMode.HUE_SHIFTING
 	update_strength()
 

src/Tools/Shading.tscn

@@ -1,7 +1,8 @@
-[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/Tools/Shading.gd" type="Script" id=2]
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=3]
 
 [node name="ToolOptions" instance=ExtResource( 1 )]
 script = ExtResource( 2 )
@@ -15,222 +16,71 @@ margin_right = 126.0
 [node name="Brush" parent="." index="2"]
 margin_right = 126.0
 
-[node name="Type" parent="Brush" index="0"]
+[node name="BrushSize" parent="Brush" index="1"]
-margin_left = 8.0
-margin_right = 40.0
-
-[node name="Size" parent="Brush" index="1"]
-margin_left = 44.0
-margin_right = 118.0
-
-[node name="BrushSize" parent="." index="3"]
-margin_left = 17.0
-margin_right = 109.0
-
-[node name="ShadingMode" type="OptionButton" parent="." index="4"]
-margin_top = 82.0
 margin_right = 126.0
-margin_bottom = 102.0
+
+[node name="ColorInterpolation" parent="." index="3"]
+margin_top = 216.0
+margin_right = 126.0
+margin_bottom = 278.0
+
+[node name="LightenDarken" type="OptionButton" parent="." index="4"]
+margin_top = 62.0
+margin_right = 126.0
+margin_bottom = 82.0
+rect_min_size = Vector2( 92, 0 )
+mouse_default_cursor_shape = 2
+text = "Lighten"
+items = [ "Lighten", null, false, 0, null, "Darken", null, false, 1, null ]
+selected = 0
+
+[node name="ShadingMode" type="OptionButton" parent="." index="5"]
+margin_top = 86.0
+margin_right = 126.0
+margin_bottom = 106.0
 mouse_default_cursor_shape = 2
 text = "Simple Shading"
 items = [ "Simple Shading", null, false, 0, null, "Hue Shifting", null, false, 1, null ]
 selected = 0
 
-[node name="LightenDarken" type="OptionButton" parent="." index="5"]
+[node name="AmountSlider" parent="." index="6" instance=ExtResource( 3 )]
-margin_left = 17.0
+margin_top = 110.0
-margin_top = 106.0
-margin_right = 109.0
-margin_bottom = 126.0
-rect_min_size = Vector2( 92, 0 )
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-text = "Lighten"
-items = [ "Lighten", null, false, 0, null, "Darken", null, false, 1, null ]
-selected = 0
-
-[node name="Amount" type="VBoxContainer" parent="." index="6"]
-margin_top = 130.0
 margin_right = 126.0
-margin_bottom = 192.0
+margin_bottom = 134.0
-alignment = 1
-
-[node name="Label" type="Label" parent="Amount" index="0"]
-margin_left = 35.0
-margin_right = 90.0
-margin_bottom = 14.0
-size_flags_horizontal = 4
-text = "Amount:"
-
-[node name="Spinbox" type="SpinBox" parent="Amount" index="1"]
-margin_left = 26.0
-margin_top = 18.0
-margin_right = 100.0
-margin_bottom = 42.0
 hint_tooltip = "Lighten/Darken amount"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 value = 10.0
-align = 1
+prefix = "Amount:"
-
-[node name="Slider" type="HSlider" parent="Amount" index="2"]
-margin_left = 17.0
-margin_top = 46.0
-margin_right = 109.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-hint_tooltip = "Lighten/Darken amount"
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-value = 10.0
-ticks_on_borders = true
 
 [node name="HueShiftingOptions" type="VBoxContainer" parent="." index="7"]
 visible = false
-margin_top = 216.0
+margin_top = 138.0
 margin_right = 126.0
-margin_bottom = 410.0
+margin_bottom = 218.0
 
-[node name="AmountHue" type="VBoxContainer" parent="HueShiftingOptions" index="0"]
+[node name="HueSlider" parent="HueShiftingOptions" index="0" instance=ExtResource( 3 )]
 margin_right = 126.0
-margin_bottom = 62.0
+margin_bottom = 24.0
-alignment = 1
-
-[node name="Label" type="Label" parent="HueShiftingOptions/AmountHue" index="0"]
-margin_left = 48.0
-margin_right = 78.0
-margin_bottom = 14.0
-size_flags_horizontal = 4
-text = "Hue:"
-
-[node name="Spinbox" type="SpinBox" parent="HueShiftingOptions/AmountHue" index="1"]
-margin_left = 26.0
-margin_top = 18.0
-margin_right = 100.0
-margin_bottom = 42.0
-hint_tooltip = "Lighten/Darken amount"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 max_value = 180.0
 value = 10.0
-align = 1
+prefix = "Hue:"
 
-[node name="Slider" type="HSlider" parent="HueShiftingOptions/AmountHue" index="2"]
+[node name="SatSlider" parent="HueShiftingOptions" index="1" instance=ExtResource( 3 )]
-margin_left = 17.0
+margin_top = 28.0
-margin_top = 46.0
-margin_right = 109.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-hint_tooltip = "Lighten/Darken amount"
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-max_value = 180.0
-value = 10.0
-ticks_on_borders = true
-
-[node name="AmountSat" type="VBoxContainer" parent="HueShiftingOptions" index="1"]
-margin_top = 66.0
 margin_right = 126.0
-margin_bottom = 128.0
+margin_bottom = 52.0
-alignment = 1
-
-[node name="Label" type="Label" parent="HueShiftingOptions/AmountSat" index="0"]
-margin_left = 29.0
-margin_right = 97.0
-margin_bottom = 14.0
-size_flags_horizontal = 4
-text = "Saturation:"
-
-[node name="Spinbox" type="SpinBox" parent="HueShiftingOptions/AmountSat" index="1"]
-margin_left = 26.0
-margin_top = 18.0
-margin_right = 100.0
-margin_bottom = 42.0
-hint_tooltip = "Lighten/Darken amount"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 value = 10.0
-align = 1
+prefix = "Saturation:"
 
-[node name="Slider" type="HSlider" parent="HueShiftingOptions/AmountSat" index="2"]
+[node name="ValueSlider" parent="HueShiftingOptions" index="2" instance=ExtResource( 3 )]
-margin_left = 17.0
+margin_top = 56.0
-margin_top = 46.0
-margin_right = 109.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-hint_tooltip = "Lighten/Darken amount"
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-value = 10.0
-ticks_on_borders = true
-
-[node name="AmountValue" type="VBoxContainer" parent="HueShiftingOptions" index="2"]
-margin_top = 132.0
 margin_right = 126.0
-margin_bottom = 194.0
+margin_bottom = 80.0
-alignment = 1
-
-[node name="Label" type="Label" parent="HueShiftingOptions/AmountValue" index="0"]
-margin_left = 43.0
-margin_right = 82.0
-margin_bottom = 14.0
-size_flags_horizontal = 4
-text = "Value:"
-
-[node name="Spinbox" type="SpinBox" parent="HueShiftingOptions/AmountValue" index="1"]
-margin_left = 26.0
-margin_top = 18.0
-margin_right = 100.0
-margin_bottom = 42.0
-hint_tooltip = "Lighten/Darken amount"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 value = 10.0
-align = 1
+prefix = "Value:"
 
-[node name="Slider" type="HSlider" parent="HueShiftingOptions/AmountValue" index="2"]
-margin_left = 17.0
-margin_top = 46.0
-margin_right = 109.0
-margin_bottom = 62.0
-rect_min_size = Vector2( 92, 0 )
-hint_tooltip = "Lighten/Darken amount"
-focus_mode = 0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-size_flags_vertical = 1
-value = 10.0
-ticks_on_borders = true
-
-[node name="ColorInterpolation" parent="." index="8"]
-margin_top = 216.0
-margin_right = 126.0
-margin_bottom = 278.0
-
-[node name="Label" parent="ColorInterpolation" index="0"]
-margin_left = 9.0
-margin_right = 116.0
-
-[node name="Factor" parent="ColorInterpolation" index="1"]
-margin_left = 26.0
-margin_right = 100.0
-
-[node name="Slider" parent="ColorInterpolation" index="2"]
-margin_left = 17.0
-margin_right = 109.0
-
-[connection signal="item_selected" from="ShadingMode" to="." method="_on_ShadingMode_item_selected"]
 [connection signal="item_selected" from="LightenDarken" to="." method="_on_LightenDarken_item_selected"]
-[connection signal="value_changed" from="Amount/Spinbox" to="." method="_on_LightenDarken_value_changed"]
+[connection signal="item_selected" from="ShadingMode" to="." method="_on_ShadingMode_item_selected"]
-[connection signal="value_changed" from="Amount/Slider" to="." method="_on_LightenDarken_value_changed"]
+[connection signal="value_changed" from="AmountSlider" to="." method="_on_LightenDarken_value_changed"]
-[connection signal="value_changed" from="HueShiftingOptions/AmountHue/Spinbox" to="." method="_on_LightenDarken_hue_value_changed"]
+[connection signal="value_changed" from="HueShiftingOptions/HueSlider" to="." method="_on_LightenDarken_hue_value_changed"]
-[connection signal="value_changed" from="HueShiftingOptions/AmountHue/Slider" to="." method="_on_LightenDarken_hue_value_changed"]
+[connection signal="value_changed" from="HueShiftingOptions/SatSlider" to="." method="_on_LightenDarken_sat_value_changed"]
-[connection signal="value_changed" from="HueShiftingOptions/AmountSat/Spinbox" to="." method="_on_LightenDarken_sat_value_changed"]
+[connection signal="value_changed" from="HueShiftingOptions/ValueSlider" to="." method="_on_LightenDarken_value_value_changed"]
-[connection signal="value_changed" from="HueShiftingOptions/AmountSat/Slider" to="." method="_on_LightenDarken_sat_value_changed"]
-[connection signal="value_changed" from="HueShiftingOptions/AmountValue/Spinbox" to="." method="_on_LightenDarken_value_value_changed"]
-[connection signal="value_changed" from="HueShiftingOptions/AmountValue/Slider" to="." method="_on_LightenDarken_value_value_changed"]

src/Tools/ShapeDrawer.gd

@@ -63,7 +63,6 @@ func update_config() -> void:
 	.update_config()
 	$FillCheckbox.pressed = _fill
 	$ThicknessSlider.value = _thickness
-	$ShapeThickness/ThicknessSpinbox.value = _thickness
 
 
 func _get_shape_points(_size: Vector2) -> PoolVector2Array:

src/Tools/ShapeDrawer.tscn

@@ -1,71 +1,35 @@
-[gd_scene load_steps=3 format=2]
+[gd_scene load_steps=4 format=2]
 
 [ext_resource path="res://src/Tools/ShapeDrawer.gd" type="Script" id=1]
 [ext_resource path="res://src/Tools/Draw.tscn" type="PackedScene" id=2]
+[ext_resource path="res://src/UI/Nodes/ValueSlider.tscn" type="PackedScene" id=3]
 
 [node name="ToolOptions" instance=ExtResource( 2 )]
 script = ExtResource( 1 )
 
-[node name="Brush" parent="." index="1"]
+[node name="ThicknessSlider" parent="." index="2" instance=ExtResource( 3 )]
-visible = false
+margin_top = 26.0
-
+margin_right = 116.0
-[node name="ShapeThickness" type="HBoxContainer" parent="." index="2"]
+margin_bottom = 50.0
-margin_left = 6.0
-margin_top = 18.0
-margin_right = 110.0
-margin_bottom = 42.0
-size_flags_horizontal = 4
-custom_constants/separation = 0
-
-[node name="Label2" type="Label" parent="ShapeThickness" index="0"]
-margin_top = 5.0
-margin_right = 30.0
-margin_bottom = 19.0
-text = "Size:"
-align = 1
-
-[node name="ThicknessSpinbox" type="SpinBox" parent="ShapeThickness" index="1"]
-margin_left = 30.0
-margin_right = 104.0
-margin_bottom = 24.0
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 min_value = 1.0
 value = 1.0
-align = 1
+prefix = "Size:"
 suffix = "px"
 
-[node name="ThicknessSlider" type="HSlider" parent="." index="3"]
+[node name="FillCheckbox" type="CheckBox" parent="." index="3"]
-margin_left = 12.0
+margin_top = 54.0
-margin_top = 46.0
+margin_right = 116.0
-margin_right = 104.0
+margin_bottom = 78.0
-margin_bottom = 62.0
+hint_tooltip = "Fills the drawn shape with color, instead of drawing a hollow shape"
-rect_min_size = Vector2( 92, 0 )
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
+text = "Fill Shape"
-size_flags_vertical = 1
-min_value = 1.0
-value = 1.0
 
-[node name="BrushSize" parent="." index="4"]
+[node name="Brush" parent="." index="4"]
 visible = false
-margin_top = 18.0
-margin_bottom = 34.0
 
 [node name="ColorInterpolation" parent="." index="5"]
 margin_top = 66.0
 margin_bottom = 128.0
 
-[node name="FillCheckbox" type="CheckBox" parent="." index="6"]
-margin_left = 13.0
-margin_top = 66.0
-margin_right = 102.0
-margin_bottom = 90.0
-hint_tooltip = "Fills the drawn shape with color, instead of drawing a hollow shape"
-mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
-text = "Fill Shape"
-
-[connection signal="value_changed" from="ShapeThickness/ThicknessSpinbox" to="." method="_on_Thickness_value_changed"]
 [connection signal="value_changed" from="ThicknessSlider" to="." method="_on_Thickness_value_changed"]
 [connection signal="toggled" from="FillCheckbox" to="." method="_on_FillCheckbox_toggled"]

src/Tools/Zoom.tscn

@@ -7,53 +7,43 @@
 script = ExtResource( 2 )
 
 [node name="Mode" type="Label" parent="." index="2"]
-margin_left = 38.0
 margin_top = 26.0
-margin_right = 78.0
+margin_right = 116.0
 margin_bottom = 40.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 text = "Mode:"
 
 [node name="ModeOptions" type="OptionButton" parent="." index="3"]
-margin_left = 12.0
 margin_top = 44.0
-margin_right = 104.0
+margin_right = 116.0
 margin_bottom = 64.0
 rect_min_size = Vector2( 92, 0 )
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 text = "Zoom in"
 items = [ "Zoom in", null, false, 0, null, "Zoom out", null, false, 1, null ]
 selected = 0
 
 [node name="Options" type="Label" parent="." index="4"]
-margin_left = 30.0
 margin_top = 68.0
-margin_right = 85.0
+margin_right = 116.0
 margin_bottom = 82.0
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 text = "Options:"
 
 [node name="FitToFrame" type="Button" parent="." index="5"]
-margin_left = 12.0
 margin_top = 86.0
-margin_right = 104.0
+margin_right = 116.0
 margin_bottom = 106.0
 rect_min_size = Vector2( 92, 0 )
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 text = "Fit to frame"
 
 [node name="100%" type="Button" parent="." index="6"]
-margin_left = 12.0
 margin_top = 110.0
-margin_right = 104.0
+margin_right = 116.0
 margin_bottom = 130.0
 rect_min_size = Vector2( 92, 0 )
 mouse_default_cursor_shape = 2
-size_flags_horizontal = 4
 text = "100% Zoom"
 
 [connection signal="item_selected" from="ModeOptions" to="." method="_on_ModeOptions_item_selected"]