Add an offset slider for GradientEdit's selected point

assets/graphics/misc/settings.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <path
+     fill="#e0e0e0"
+     d="m 9,1 0.564,2.258 0.69,0.28 1.988,-1.194 1.414,1.414 L 12.46,5.752 12.746,6.436 15,7 V 9 H 9.75 C 10.487539,7.6669775 9.5234194,6.0317774 8,6.0317774 6.4765806,6.0317774 5.5124609,7.6669775 6.25,9 H 1 V 7 L 3.26,6.436 3.538,5.748 2.344,3.758 3.758,2.344 5.752,3.54 6.438,3.254 7,1 Z"
+     id="path1" />
+  <path
+     fill="#e0e0e0"
+     d="m 9.0061583,15.000001 0.564,-2.258 0.6900007,-0.28 1.987999,1.194 1.414,-1.414 -1.196,-1.994 0.286,-0.6840005 2.254,-0.564 V 7 H 9.7561583 c 0.7375387,1.3330235 -0.2265806,2.9682225 -1.75,2.9682225 -1.5234194,0 -2.4875391,-1.635199 -1.75,-2.9682224 h -5.25 v 2.0000004 l 2.26,0.564 0.278,0.6880005 -1.194,1.99 1.414,1.414 1.9939999,-1.196 0.686,0.286 0.5620001,2.254 z"
+     id="path2" />
+</svg>

assets/graphics/misc/settings.svg.import

@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://cis71foi5jt31"
+path="res://.godot/imported/settings.svg-9e60faa1666134ef3fcd7b95fe437b98.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/misc/settings.svg"
+dest_files=["res://.godot/imported/settings.svg-9e60faa1666134ef3fcd7b95fe437b98.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1
+svg/scale=1.0
+editor/scale_with_editor_scale=false
+editor/convert_colors_with_editor_theme=false

src/UI/Nodes/GradientEdit.gd

@@ -7,11 +7,21 @@ extends Control
 signal updated(gradient: Gradient, cc: bool)
 
 var continuous_change := true
-var active_cursor: GradientCursor  ## Showing a color picker popup to change a cursor's color
+var active_cursor: GradientCursor:  ## Showing a color picker popup to change a cursor's color
+	set(value):
+		active_cursor = value
+		if is_instance_valid(active_cursor):
+			await get_tree().process_frame
+			offset_value_slider.set_value_no_signal_update_display(
+				active_cursor.get_cursor_offset()
+			)
+		for i in texture_rect.get_children():
+			i.queue_redraw()
 var texture := GradientTexture2D.new()
 var gradient := Gradient.new()
 
 @onready var x_offset: float = size.x - GradientCursor.WIDTH
+@onready var offset_value_slider := %OffsetValueSlider as ValueSlider
 @onready var texture_rect := $TextureRect as TextureRect
 @onready var color_picker := $Popup.get_node("ColorPicker") as ColorPicker
 @onready var divide_dialog := $DivideConfirmationDialog as ConfirmationDialog
@@ -27,28 +37,39 @@ class GradientCursor:
 	var sliding := false
 
 	@onready var parent: TextureRect = get_parent()
-	@onready var grand_parent: Container = parent.get_parent()
-	@onready var label: Label = parent.get_node("Value")
+	@onready var grand_parent: GradientEditNode = parent.get_parent()
 
 	func _ready() -> void:
-		position = Vector2(0, 15)
-		size = Vector2(WIDTH, 15)
+		size = Vector2(WIDTH, get_parent().size.y)
 
 	func _draw() -> void:
 		var polygon := PackedVector2Array(
 			[
-				Vector2(0, 5),
-				Vector2(WIDTH / 2.0, 0),
-				Vector2(WIDTH, 5),
-				Vector2(WIDTH, 15),
-				Vector2(0, 15),
-				Vector2(0, 5)
+				Vector2(0, size.y * 0.75),
+				Vector2(WIDTH * 0.5, size.y * 0.5),
+				Vector2(WIDTH, size.y * 0.75),
+				Vector2(WIDTH, size.y),
+				Vector2(0, size.y),
+				Vector2(0, size.y * 0.75)
 			]
 		)
 		var c := color
 		c.a = 1.0
 		draw_colored_polygon(polygon, c)
-		draw_polyline(polygon, Color(0.0, 0.0, 0.0) if color.v > 0.5 else Color(1.0, 1.0, 1.0))
+		var outline_color := Color.BLACK if (color.get_luminance() > 0.5) else Color.WHITE
+		draw_polyline(polygon, outline_color)
+		draw_dashed_line(Vector2(WIDTH * 0.5, 0), Vector2(WIDTH * 0.5, size.y * 0.5), outline_color)
+		# Draw the TRIANGLE (house roof) shape
+		if grand_parent.active_cursor == self:
+			var active_polygon: PackedVector2Array = PackedVector2Array(
+				[
+					Vector2(0, size.y * 0.75),
+					Vector2(WIDTH * 0.5, size.y * 0.5),
+					Vector2(WIDTH, size.y * 0.75),
+					Vector2(0, size.y * 0.75)
+				]
+			)
+			draw_colored_polygon(active_polygon, outline_color)
 
 	func _gui_input(ev: InputEvent) -> void:
 		if ev is InputEventMouseButton:
@@ -56,36 +77,46 @@ class GradientCursor:
 				if ev.double_click:
 					grand_parent.select_color(self, ev.global_position)
 				elif ev.pressed:
+					grand_parent.active_cursor = self
 					grand_parent.continuous_change = false
 					sliding = true
-					label.visible = true
-					label.text = "%.03f" % get_caret_column()
 				else:
 					sliding = false
-					label.visible = false
 			elif (
 				ev.button_index == MOUSE_BUTTON_RIGHT
 				and grand_parent.get_sorted_cursors().size() > 2
 			):
+				var node_index := get_index()
 				parent.remove_child(self)
+				queue_free()
+				if grand_parent.active_cursor == self:
+					if node_index > 0:
+						node_index -= 1
+					grand_parent.active_cursor = parent.get_child(node_index)
 				grand_parent.continuous_change = false
 				grand_parent.update_from_value()
-				queue_free()
 		elif (
 			ev is InputEventMouseMotion
 			and (ev.button_mask & MOUSE_BUTTON_MASK_LEFT) != 0
 			and sliding
 		):
-			position.x += get_local_mouse_position().x
-			if ev.ctrl_pressed:
-				position.x = (roundi(get_caret_column() * 20.0) * 0.05 * (parent.size.x - WIDTH))
+			move_to(position.x + get_local_mouse_position().x, true, ev.ctrl_pressed)
+
+	func move_to(pos: float, update_slider: bool, snap := false) -> void:
+		position.x = pos
+		if snap:
+			position.x = (roundi(get_cursor_offset() * 20.0) * 0.05 * (parent.size.x - WIDTH))
 		position.x = mini(maxi(0, position.x), parent.size.x - size.x)
 		grand_parent.update_from_value()
-			label.text = "%.03f" % get_caret_column()
+		if update_slider:
+			grand_parent.offset_value_slider.value = get_cursor_offset()
 
-	func get_caret_column() -> float:
+	func get_cursor_offset() -> float:
 		return position.x / (parent.size.x - WIDTH)
 
+	func get_cursor_position_from_offset(offset: float) -> float:
+		return offset * (parent.size.x - WIDTH)
+
 	func set_color(c: Color) -> void:
 		color = c
 		grand_parent.update_from_value()
@@ -107,6 +138,7 @@ func _ready() -> void:
 	_create_cursors()
 	%InterpolationOptionButton.select(gradient.interpolation_mode)
 	%ColorSpaceOptionButton.select(gradient.interpolation_color_space)
+	%ToolsMenuButton.get_popup().index_pressed.connect(_on_tools_menu_button_index_pressed)
 
 
 func _create_cursors() -> void:
@@ -140,12 +172,12 @@ func update_from_value() -> void:
 func add_cursor(x: float, color: Color) -> void:
 	var cursor := GradientCursor.new()
 	texture_rect.add_child(cursor)
+	active_cursor = cursor
 	cursor.position.x = x
 	cursor.color = color
 
 
 func select_color(cursor: GradientCursor, pos: Vector2) -> void:
-	active_cursor = cursor
 	color_picker.color = cursor.color
 	if pos.x > global_position.x + (size.x / 2.0):
 		pos.x = global_position.x + size.x
@@ -193,6 +225,12 @@ func _on_GradientEdit_resized() -> void:
 	_create_cursors()
 
 
+func _on_offset_value_slider_value_changed(value: float) -> void:
+	var cursor_pos := active_cursor.get_cursor_position_from_offset(value)
+	if cursor_pos != active_cursor.get_cursor_offset():
+		active_cursor.move_to(cursor_pos, false)
+
+
 func _on_InterpolationOptionButton_item_selected(index: Gradient.InterpolationMode) -> void:
 	gradient.interpolation_mode = index
 	updated.emit(gradient, continuous_change)
@@ -203,7 +241,18 @@ func _on_color_space_option_button_item_selected(index: Gradient.ColorSpace) ->
 	updated.emit(gradient, continuous_change)
 
 
-func _on_DivideButton_pressed() -> void:
+func _on_tools_menu_button_index_pressed(index: int) -> void:
+	if index == 0:  # Reverse
+		gradient.reverse()
+		_create_cursors()
+		updated.emit(gradient, continuous_change)
+	elif index == 1:  # Evenly distribute points
+		var point_count := gradient.get_point_count()
+		for i in range(point_count):
+			gradient.set_offset(i, 1.0 / (point_count - 1) * i)
+		_create_cursors()
+		updated.emit(gradient, continuous_change)
+	elif index == 2:  # Divide into equal parts
 		divide_dialog.popup_centered()
 
 

src/UI/Nodes/GradientEdit.tscn

@@ -1,6 +1,8 @@
-[gd_scene load_steps=2 format=3 uid="uid://bn4aw27dj7pwi"]
+[gd_scene load_steps=4 format=3 uid="uid://bn4aw27dj7pwi"]
 
 [ext_resource type="Script" path="res://src/UI/Nodes/GradientEdit.gd" id="1"]
+[ext_resource type="Texture2D" uid="uid://cis71foi5jt31" path="res://assets/graphics/misc/settings.svg" id="2_2dyyb"]
+[ext_resource type="Script" path="res://src/UI/Nodes/Sliders/ValueSlider.gd" id="2_y6708"]
 
 [node name="GradientEdit" type="VBoxContainer"]
 anchors_preset = 15
@@ -8,23 +10,76 @@ anchor_right = 1.0
 anchor_bottom = 1.0
 script = ExtResource("1")
 
+[node name="InterpolationContainer" type="HBoxContainer" parent="."]
+layout_mode = 2
+
+[node name="OffsetValueSlider" type="TextureProgressBar" parent="InterpolationContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+size_flags_horizontal = 3
+focus_mode = 2
+mouse_filter = 0
+mouse_default_cursor_shape = 2
+theme_type_variation = &"ValueSlider"
+max_value = 1.0
+step = 0.001
+nine_patch_stretch = true
+stretch_margin_left = 3
+stretch_margin_top = 3
+stretch_margin_right = 3
+stretch_margin_bottom = 3
+script = ExtResource("2_y6708")
+snap_step = 0.1
+
+[node name="InterpolationOptionButton" type="OptionButton" parent="InterpolationContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+size_flags_horizontal = 3
+tooltip_text = "Interpolation"
+mouse_default_cursor_shape = 2
+selected = 0
+item_count = 3
+popup/item_0/text = "Linear"
+popup/item_1/text = "Constant"
+popup/item_1/id = 1
+popup/item_2/text = "Cubic"
+popup/item_2/id = 2
+
+[node name="ColorSpaceOptionButton" type="OptionButton" parent="InterpolationContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+size_flags_horizontal = 3
+tooltip_text = "Color space"
+mouse_default_cursor_shape = 2
+selected = 0
+item_count = 3
+popup/item_0/text = "sRGB"
+popup/item_1/text = "Linear sRGB"
+popup/item_1/id = 1
+popup/item_2/text = "Oklab"
+popup/item_2/id = 2
+
+[node name="ToolsMenuButton" type="MenuButton" parent="InterpolationContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+tooltip_text = "Tools"
+mouse_default_cursor_shape = 2
+icon = ExtResource("2_2dyyb")
+flat = false
+icon_alignment = 1
+item_count = 3
+popup/item_0/text = "Reverse"
+popup/item_1/text = "Evenly distribute points"
+popup/item_1/id = 1
+popup/item_2/text = "Divide into equal parts"
+popup/item_2/id = 2
+
 [node name="TextureRect" type="TextureRect" parent="."]
 custom_minimum_size = Vector2(0, 30)
 layout_mode = 2
 size_flags_vertical = 3
 expand_mode = 1
 
-[node name="Value" type="Label" parent="TextureRect"]
-layout_mode = 0
-anchor_left = 0.5
-anchor_top = 0.5
-anchor_right = 0.5
-anchor_bottom = 0.5
-offset_left = -20.0
-offset_top = -7.0
-offset_right = 20.0
-offset_bottom = 7.0
-
 [node name="Popup" type="PopupPanel" parent="."]
 unresizable = false
 borderless = false
@@ -35,53 +90,6 @@ offset_top = 4.0
 offset_right = 302.0
 offset_bottom = 580.0
 
-[node name="InterpolationContainer" type="HBoxContainer" parent="."]
-layout_mode = 2
-
-[node name="Label" type="Label" parent="InterpolationContainer"]
-layout_mode = 2
-size_flags_horizontal = 3
-text = "Interpolation:"
-
-[node name="InterpolationOptionButton" type="OptionButton" parent="InterpolationContainer"]
-unique_name_in_owner = true
-layout_mode = 2
-size_flags_horizontal = 3
-mouse_default_cursor_shape = 2
-selected = 0
-item_count = 3
-popup/item_0/text = "Linear"
-popup/item_1/text = "Constant"
-popup/item_1/id = 1
-popup/item_2/text = "Cubic"
-popup/item_2/id = 2
-
-[node name="ColorSpaceContainer" type="HBoxContainer" parent="."]
-layout_mode = 2
-
-[node name="Label" type="Label" parent="ColorSpaceContainer"]
-layout_mode = 2
-size_flags_horizontal = 3
-text = "Color space:"
-
-[node name="ColorSpaceOptionButton" type="OptionButton" parent="ColorSpaceContainer"]
-unique_name_in_owner = true
-layout_mode = 2
-size_flags_horizontal = 3
-mouse_default_cursor_shape = 2
-selected = 0
-item_count = 3
-popup/item_0/text = "sRGB"
-popup/item_1/text = "Linear sRGB"
-popup/item_1/id = 1
-popup/item_2/text = "Oklab"
-popup/item_2/id = 2
-
-[node name="DivideButton" type="Button" parent="."]
-layout_mode = 2
-mouse_default_cursor_shape = 2
-text = "Divide into equal parts"
-
 [node name="DivideConfirmationDialog" type="ConfirmationDialog" parent="."]
 
 [node name="VBoxContainer" type="VBoxContainer" parent="DivideConfirmationDialog"]
@@ -118,8 +126,8 @@ mouse_default_cursor_shape = 2
 text = "Add point at the end"
 
 [connection signal="resized" from="." to="." method="_on_GradientEdit_resized"]
-[connection signal="color_changed" from="Popup/ColorPicker" to="." method="_on_ColorPicker_color_changed"]
+[connection signal="value_changed" from="InterpolationContainer/OffsetValueSlider" to="." method="_on_offset_value_slider_value_changed"]
 [connection signal="item_selected" from="InterpolationContainer/InterpolationOptionButton" to="." method="_on_InterpolationOptionButton_item_selected"]
-[connection signal="item_selected" from="ColorSpaceContainer/ColorSpaceOptionButton" to="." method="_on_color_space_option_button_item_selected"]
-[connection signal="pressed" from="DivideButton" to="." method="_on_DivideButton_pressed"]
+[connection signal="item_selected" from="InterpolationContainer/ColorSpaceOptionButton" to="." method="_on_color_space_option_button_item_selected"]
+[connection signal="color_changed" from="Popup/ColorPicker" to="." method="_on_ColorPicker_color_changed"]
 [connection signal="confirmed" from="DivideConfirmationDialog" to="." method="_on_DivideConfirmationDialog_confirmed"]

src/UI/Nodes/Sliders/ValueSlider.gd

@@ -255,6 +255,11 @@ func _confirm_text(confirm := true) -> void:
 	_reset_display(true)
 
 
+func set_value_no_signal_update_display(new_value: float) -> void:
+	set_value_no_signal(new_value)
+	_reset_display()
+
+
 func _reset_display(theme_has_changed := false) -> void:
 	_line_edit.selecting_enabled = false  # Remove the selection
 	_line_edit.editable = false