Rework palette previews (#1656)

Author: MewPurPur

src/autoload/HandlerGUI.gd

@@ -196,8 +196,8 @@ func add_popup(new_popup: Control, add_shadow := true) -> Control:
 	if add_shadow:
 		var shadow_container := PanelContainer.new()
 		var sb := StyleBoxFlat.new()
-		sb.bg_color = Color(0, 0, 0, 0.1)
-		sb.shadow_color = Color(0, 0, 0, 0.1)
+		sb.bg_color = ThemeUtils.shadow_color
+		sb.shadow_color = ThemeUtils.shadow_color
 		sb.shadow_size = 8
 		if new_popup is PanelContainer:
 			var stylebox_wrapped := new_popup.get_theme_stylebox("panel")
@@ -269,17 +269,21 @@ func popup_under_rect(popup: Control, rect: Rect2, vp: Viewport) -> void:
 # Should usually be the global rect of a control.
 func popup_under_rect_center(popup: Control, rect: Rect2, vp: Viewport) -> void:
 	var top_popup := add_popup(popup)
+	top_popup.resized.connect(_move_popup_under_rect_center.bind(top_popup, rect, vp))
+	_move_popup_under_rect_center(top_popup, rect, vp)
+
+func _move_popup_under_rect_center(popup: Control, rect: Rect2, vp: Viewport) -> void:
 	var screen_transform := vp.get_screen_transform()
 	var screen_h := vp.get_visible_rect().size.y
-	var popup_pos := Vector2(rect.position.x - top_popup.size.x / 2.0 + rect.size.x / 2, 0)
+	var popup_pos := Vector2(rect.position.x - popup.size.x / 2.0 + rect.size.x / 2, 0)
 	# Popup below if there's enough space or we're in the bottom half of the screen.
-	if rect.position.y + rect.size.y + top_popup.size.y < screen_h or rect.position.y + rect.size.y / 2 <= screen_h / 2.0:
+	if rect.position.y + rect.size.y + popup.size.y < screen_h or rect.position.y + rect.size.y / 2 <= screen_h / 2.0:
 		popup_pos.y = rect.position.y + rect.size.y
 	else:
-		popup_pos.y = rect.position.y - top_popup.size.y
+		popup_pos.y = rect.position.y - popup.size.y
 	# Align horizontally and other things.
 	popup_pos += screen_transform.get_origin() / screen_transform.get_scale()
-	top_popup.position = popup_clamp_pos(top_popup, popup_pos, vp)
+	popup.position = popup_clamp_pos(popup, popup_pos, vp)
 
 # Should usually be the global position of the mouse.
 func popup_under_pos(popup: Control, pos: Vector2, vp: Viewport) -> void:

src/config_classes/SaveData.gd

@@ -76,8 +76,8 @@ func get_setting_default(setting: String) -> Variant:
 				ThemePreset.LIGHT: return Color("b22")
 		"basic_color_warning":
 			match theme_preset:
-				ThemePreset.DARK, ThemePreset.BLACK, ThemePreset.GRAY: return Color("ee6")
-				ThemePreset.LIGHT: return Color("991")
+				ThemePreset.DARK, ThemePreset.BLACK, ThemePreset.GRAY: return Color("fd5")
+				ThemePreset.LIGHT: return Color("b92")
 		"handle_size": return 1.0 if OS.get_name() != "Android" else 2.0
 		"handle_inner_color": return Color("fff")
 		"handle_color": return Color("111")
@@ -378,7 +378,7 @@ const CURRENT_VERSION = 1
 			emit_changed()
 			Configs.basic_colors_changed.emit()
 
-@export var basic_color_warning := Color("ee6"):
+@export var basic_color_warning := Color("fd5"):
 	set(new_value):
 		if basic_color_warning != new_value:
 			basic_color_warning = new_value

src/data_classes/ColorParser.gd

@@ -152,21 +152,22 @@ static func are_colors_same(col1: String, col2: String) -> bool:
 			return _get_url_id(col1) == _get_url_id(col2)
 
 	# Represent both colors as 6-digit hex codes to serve as basis for comparison.
-	for i in 2:
-		var col := col1 if i == 0 else col2
-		# Start of conversion logic.
-		if is_valid_rgb(col):
-			col = text_to_color(col).to_html(false)
-		elif is_valid_hex(col) and col.length() == 4:
-			col = col[1] + col[1] + col[2] + col[2] + col[3] + col[3]
-		elif is_valid_named(col, false):
-			col = AttributeColor.get_named_colors()[col]
-		col = col.trim_prefix("#")
-		# End of conversion logic.
-		if i == 0:
-			col1 = col
-		elif i == 1:
-			col2 = col
+	if is_valid_rgb(col1):
+		col1 = text_to_color(col1).to_html(false)
+	elif is_valid_hex(col1) and col1.length() == 4:
+		col1 = col1[1] + col1[1] + col1[2] + col1[2] + col1[3] + col1[3]
+	elif is_valid_named(col1, false):
+		col1 = AttributeColor.get_named_colors()[col1]
+	col1 = col1.trim_prefix("#")
+	
+	if is_valid_rgb(col2):
+		col2 = text_to_color(col2).to_html(false)
+	elif is_valid_hex(col2) and col2.length() == 4:
+		col2 = col2[1] + col2[1] + col2[2] + col2[2] + col2[3] + col2[3]
+	elif is_valid_named(col2, false):
+		col2 = AttributeColor.get_named_colors()[col2]
+	col2 = col2.trim_prefix("#")
+	
 	return col1 == col2
 
 

src/shaders/color_area.gdshader

@@ -6,6 +6,8 @@ shader_type canvas_item;
 // 1 = HS+L Circle
 // 2 = SV+H Square
 // 3 = SL+H Square
+// 4 = HL+S Square
+// 100 = Normal Circle
 uniform int interpolation = 0;
 uniform float third_value = 1.0;
 
@@ -24,5 +26,15 @@ void fragment() {
 		COLOR = vec4(hsv_to_rgb(vec3(third_value, clamp(UV.x, 0.0, 1.0), clamp(1.0 - UV.y, 0.0, 1.0))), 1.0);
 	} else if (interpolation == 3) {
 		COLOR = vec4(hsl_to_rgb(vec3(third_value, clamp(UV.x, 0.0, 1.0), clamp(1.0 - UV.y, 0.0, 1.0))), 1.0);
+	} else if (interpolation == 4) {
+		COLOR = vec4(hsl_to_rgb(vec3(clamp(UV.x, 0.0, 1.0), 1.0, clamp(1.0 - UV.y, 0.0, 1.0))), 1.0);
+	} else if (interpolation == 100) {
+		vec2 p = UV - vec2(0.5);
+		vec2 xy = p * 2.0;
+		xy.y = -xy.y;
+		float dist = length(p);
+		float edge = fwidth(dist);
+		vec3 final_normal = normalize(mix(vec3(0.0, 0.0, 1.0), vec3(xy, sqrt(1.0 - dot(xy, xy))), third_value));
+		COLOR = vec4(final_normal * 0.5 + 0.5, 1.0 - smoothstep(0.5 - edge * 0.5, 0.5 + edge * 0.5, dist));
 	}
 }

src/shaders/slider_visuals.gdshader

@@ -10,6 +10,7 @@ uniform bool inverted = false;
 // RGB --> 1 = Red, 2 = Green, 3 = Blue
 // HSV --> 4 = Hue, 5 = HSV saturation, 6 = Value
 // HSL --> 4 = Hue, 7 = HSL saturation, 8 = Lightness
+// 100 = Normal intensity
 uniform int interpolation = 0;
 
 void fragment() {
@@ -42,6 +43,16 @@ void fragment() {
 			hsl.z = offset;
 		}
 		COLOR = vec4(hsl_to_rgb(hsl), 1.0);
+	} else if (interpolation == 100) {
+		vec2 dir = normalize(base_color.rgb * 2.0 - 1.0).xy;
+		float len = length(dir);
+		if (len > 0.00001) {
+		    dir /= len;
+		} else {
+		    dir = vec2(0.0);
+		}
+		vec2 xy = dir * offset;
+		COLOR = vec4(vec3(xy, sqrt(max(0.0, 1.0 - dot(xy, xy)))) * 0.5 + 0.5, 1.0);
 	} else {
 		COLOR = base_color;
 	}

src/ui_parts/debug_content.gd

@@ -8,8 +8,8 @@ var advanced_mode := false
 
 func _ready() -> void:
 	var shortcuts := ShortcutsRegistration.new()
-	shortcuts.add_shortcut("debug", toggle_debug)
-	shortcuts.add_shortcut("advanced_debug", toggle_debug.bind(true))
+	shortcuts.add_shortcut("debug", toggle_debug, ShortcutsRegistration.Behavior.PASS_THROUGH_POPUPS)
+	shortcuts.add_shortcut("advanced_debug", toggle_debug.bind(true), ShortcutsRegistration.Behavior.PASS_THROUGH_POPUPS)
 	HandlerGUI.register_shortcuts(self, shortcuts)
 
 	set_debug_visibility(false)

src/ui_parts/previews.gd

@@ -1,6 +1,5 @@
 extends VTitledPanel
 
-const ColorSwatch = preload("res://src/ui_widgets/color_swatch.gd")
 const ColorEdit = preload("res://src/ui_widgets/color_edit.gd")
 const NumberEdit = preload("res://src/ui_widgets/number_edit.gd")
 
@@ -21,10 +20,6 @@ const MAX_ICON_PREVIEW_SIZE = 128
 @onready var scaled_preview_panel: PanelContainer = %ScaledPreviewPanel
 @onready var size_label: Label = %SizeLabel
 @onready var split_container: SplitContainer = %SplitContainer
-@onready var transparent_color_swatch: ColorSwatch = %TransparentColorSwatch
-@onready var black_color_swatch: ColorSwatch = %BlackColorSwatch
-@onready var white_color_swatch: ColorSwatch = %WhiteColorSwatch
-@onready var color_edit: ColorEdit = %ColorEdit
 @onready var preview_top_panel: PanelContainer = $SplitContainer/PreviewTopPanel
 @onready var more_button: Button = $ActionContainer/MoreButton
 @onready var size_label_margins: MarginContainer = %SizeLabelMargins
@@ -80,16 +75,6 @@ func _ready() -> void:
 	icon_preview_tiles.mouse_exited.connect(_on_tiles_mouse_exited)
 	more_button.pressed.connect(_on_more_button_pressed)
 
-	transparent_color_swatch.color = "none"
-	transparent_color_swatch.pressed.connect(func() -> void: color_edit.value = "#fff0")
-	black_color_swatch.color = "#000"
-	black_color_swatch.pressed.connect(func() -> void: color_edit.value = "#000")
-	white_color_swatch.color = "#fff"
-	white_color_swatch.pressed.connect(func() -> void: color_edit.value = "#fff")
-	
-	color_edit.value_changed.connect(_update_preview_background)
-	color_edit.value = Configs.savedata.previews_background.to_html()
-	
 	Configs.theme_changed.connect(sync_theming)
 	sync_theming()
 
@@ -110,8 +95,7 @@ func _ready() -> void:
 	)
 	icon_preview_tiles.resized.connect(sync_tile_positions)
 	sync_tiles()
-	HandlerGUI.register_focus_sequence(self, [add_new_preview_button,
-			transparent_color_swatch, black_color_swatch, white_color_swatch, color_edit, more_button])
+	HandlerGUI.register_focus_sequence(self, [add_new_preview_button, more_button])
 
 
 func sync_theming() -> void:
@@ -284,7 +268,7 @@ func _edit_tile_size(tile: IconPreviewTileData) -> void:
 	edit_field.position = icon_preview_tiles.position + tile.position + tile.label_rect.position - Vector2(3, 4)
 	edit_field.size = tile.label_rect.size
 	edit_field.add_theme_font_override("font", ThemeUtils.main_font)
-	edit_field.focus_exited.connect(edit_field.queue_free)
+	edit_field.editing_toggled.connect(_on_edit_field_editing_toggled)
 	edit_field.value_changed.connect(_on_edit_field_value_changed)
 	edit_field.grab_focus()
 	edit_field.select_all()
@@ -297,6 +281,10 @@ func _on_edit_field_value_changed(new_value: float) -> void:
 	if edited_tile_index == selected_tile_index:
 		_select_tile(edited_tile_index)
 
+func _on_edit_field_editing_toggled(toggled_on: bool) -> void:
+	if not toggled_on:
+		edit_field.queue_free()
+
 func _delete_tile(tile: IconPreviewTileData) -> void:
 	var sizes := Configs.savedata.preview_sizes.duplicate()
 	if tile.index >= 0 and tile.index <= Configs.savedata.preview_sizes.size() - 1:
@@ -334,15 +322,16 @@ func _add_new_tile() -> void:
 	Configs.savedata.preview_sizes = old_icon_sizes
 	sync_tiles()
 
-func _update_preview_background(new_value: String) -> void:
-	Configs.savedata.previews_background = ColorParser.text_to_color(new_value, Color.BLACK, true)
-	sync_tiles()
-	if Configs.savedata.previews_background == Color.TRANSPARENT:
-		scaled_preview_panel.remove_theme_stylebox_override("panel")
-	else:
-		var colored_sb := StyleBoxFlat.new()
-		colored_sb.bg_color = Configs.savedata.previews_background
-		scaled_preview_panel.add_theme_stylebox_override("panel", colored_sb)
+# TODO reinstate
+#func _update_preview_background(new_value: String) -> void:
+	#Configs.savedata.previews_background = ColorParser.text_to_color(new_value, Color.BLACK, true)
+	#sync_tiles()
+	#if Configs.savedata.previews_background == Color.TRANSPARENT:
+		#scaled_preview_panel.remove_theme_stylebox_override("panel")
+	#else:
+		#var colored_sb := StyleBoxFlat.new()
+		#colored_sb.bg_color = Configs.savedata.previews_background
+		#scaled_preview_panel.add_theme_stylebox_override("panel", colored_sb)
 
 
 func _on_more_button_pressed() -> void:

src/ui_parts/previews.tscn

@@ -2,8 +2,6 @@
 
 [ext_resource type="Script" uid="uid://dpn15qyr7xsds" path="res://src/ui_parts/previews.gd" id="1_uogc6"]
 [ext_resource type="Texture2D" uid="uid://eif2ioi0mw17" path="res://assets/icons/Plus.svg" id="2_pm7dr"]
-[ext_resource type="PackedScene" uid="uid://bujllg1bqlub6" path="res://src/ui_widgets/color_swatch.tscn" id="3_auodr"]
-[ext_resource type="PackedScene" uid="uid://5f8uxavn1or1" path="res://src/ui_widgets/color_edit.tscn" id="4_mkhk3"]
 [ext_resource type="Texture2D" uid="uid://ccbta5q43jobk" path="res://assets/icons/More.svg" id="5_ue2r5"]
 [ext_resource type="Script" uid="uid://bniafq6ma1iln" path="res://src/ui_widgets/ProceduralControl.gd" id="6_6v74c"]
 
@@ -22,6 +20,7 @@ metadata/_custom_type_script = "uid://ojo0537b6hcy"
 
 [node name="ActionContainer" type="HBoxContainer" parent="." unique_id=1812445449]
 layout_mode = 2
+size_flags_horizontal = 3
 theme_override_constants/separation = 8
 
 [node name="AddNewPreviewButton" type="Button" parent="ActionContainer" unique_id=1393167346]
@@ -33,33 +32,9 @@ mouse_default_cursor_shape = 2
 theme_type_variation = &"IconButton"
 icon = ExtResource("2_pm7dr")
 
-[node name="ColorsContainer" type="HBoxContainer" parent="ActionContainer" unique_id=1645315072]
-layout_mode = 2
-size_flags_horizontal = 6
-
-[node name="TransparentColorSwatch" parent="ActionContainer/ColorsContainer" unique_id=940556769 instance=ExtResource("3_auodr")]
-unique_name_in_owner = true
-layout_mode = 2
-size_flags_vertical = 4
-
-[node name="BlackColorSwatch" parent="ActionContainer/ColorsContainer" unique_id=181031709 instance=ExtResource("3_auodr")]
-unique_name_in_owner = true
-layout_mode = 2
-size_flags_vertical = 4
-
-[node name="WhiteColorSwatch" parent="ActionContainer/ColorsContainer" unique_id=780192261 instance=ExtResource("3_auodr")]
-unique_name_in_owner = true
-layout_mode = 2
-size_flags_vertical = 4
-
-[node name="ColorEdit" parent="ActionContainer/ColorsContainer" unique_id=382124865 instance=ExtResource("4_mkhk3")]
-unique_name_in_owner = true
-layout_mode = 2
-size_flags_vertical = 4
-enable_alpha = true
-
 [node name="MoreButton" type="Button" parent="ActionContainer" unique_id=1528240669]
 layout_mode = 2
+size_flags_horizontal = 10
 mouse_default_cursor_shape = 2
 theme_type_variation = &"IconButton"
 icon = ExtResource("5_ue2r5")

src/ui_parts/tab_bar.gd

@@ -194,9 +194,8 @@ func _gui_input(event: InputEvent) -> void:
 					if hovered_idx == Configs.savedata.get_active_tab_index():
 						scroll_to_active()
 					else:
-						# Give time for deferred callbacks that might change the active SVG.
-						# For example, the code editor might get unfocused by clicking on a tab,
-						# changing the SVG, so this should be deferred.
+						# Give time for deferred callbacks that might change the active SVG. For example, the code editor
+						# might get unfocused by clicking on a tab, changing the SVG, so this should be deferred.
 						Configs.savedata.set_active_tab_index.call_deferred(hovered_idx)
 				if event.button_index == MOUSE_BUTTON_LEFT:
 					var scroll_backwards_area_rect := get_scroll_backwards_area_rect()

src/ui_widgets/color_configuration_popup.gd

@@ -1,7 +1,5 @@
 extends PanelContainer
 
-signal color_deletion_requested
-
 @onready var color_label: Label = %LabelContainer/ColorLabel
 @onready var color_name_edit: BetterLineEdit = %ConfigureContainer/TopContainer/ColorNameEdit
 @onready var color_edit: LineEditButton = %ConfigureContainer/BottomContainer/ColorEdit
@@ -10,17 +8,19 @@ signal color_deletion_requested
 @onready var label_container: HBoxContainer = %LabelContainer
 
 var palette: Palette
-var idx: int
+var index: int
 
 func _ready() -> void:
 	Configs.language_changed.connect(sync_localization)
-	set_label_text(palette.get_color_name(idx))
-	color_edit.value = palette.get_color(idx)
+	color_edit.value = palette.get_color(index)
 	sync_localization()
 	color_name_edit.text_submitted.connect(_on_name_edit_text_submitted)
-	color_name_edit.text_change_canceled.connect(hide_name_edit)
+	color_name_edit.editing_toggled.connect(_on_editing_toggled)
+	color_edit.value_changed.connect(change_color)
 	edit_button.pressed.connect(_on_edit_button_pressed)
-	delete_button.pressed.connect(_on_delete_button_pressed)
+	delete_button.pressed.connect(queue_free)
+	palette.changed_deferred.connect(sync)
+	sync()
 	HandlerGUI.register_focus_sequence(self, [edit_button, color_name_edit, color_edit, delete_button], true)
 
 
@@ -29,32 +29,30 @@ func sync_localization() -> void:
 	$ConfigureContainer/BottomContainer/DeleteButton.tooltip_text = Translator.translate("Delete color")
 
 func _on_edit_button_pressed() -> void:
-	color_name_edit.text = palette.get_color_name(idx)
+	color_name_edit.text = palette.get_color_name(index)
 	color_name_edit.show()
 	color_name_edit.grab_focus()
 	color_name_edit.caret_column = color_name_edit.text.length()
 	label_container.hide()
 
-
 func _on_name_edit_text_submitted(new_text: String) -> void:
 	var new_name := new_text.strip_edges()
-	set_label_text(new_name)
-	hide_name_edit()
+	palette.modify_color_name(index, new_name)
 
+func change_color(new_color: String) -> void:
+	palette.modify_color(index, new_color)
 
-func hide_name_edit() -> void:
-	color_name_edit.hide()
-	label_container.show()
+func _on_editing_toggled(toggled_on: bool) -> void:
+	if not toggled_on:
+		color_name_edit.hide()
+		label_container.show()
 
-func set_label_text(new_text: String) -> void:
-	if new_text.is_empty():
+func sync() -> void:
+	var color_name := palette.get_color_name(index)
+	if color_name.is_empty():
 		color_label.text = Translator.translate("Unnamed")
 		color_label.add_theme_color_override("font_color", ThemeUtils.subtle_text_color)
 	else:
-		color_label.text = new_text
+		color_label.text = color_name
 		color_label.remove_theme_color_override("font_color")
-
-
-func _on_delete_button_pressed() -> void:
-	color_deletion_requested.emit()
-	queue_free()
+	reset_size()