Sort layouts alphabetically when adding a new one so that Pixelorama will remember the correct last used layout when opening again

This way, Pixelorama remembers the changes users make to the UI, without them having to go to Window, Manage Layouts and clicking on Edit, which was an unintuitive and slow way. Needs testing because bugs may linger.

This commit also adds a new `save_on_change` variable and a `save` method on layout.gd of the dockable_container plugin. Perhaps I should also add this upstream as well.

I also need to add a way to create new layouts based off the default ones (which are permanently stored within Pixelorama's pck file and cannot be modified), so users will always have the option to resort to the default layouts.

Translations/Translations.pot

@@ -289,7 +289,13 @@ msgstr ""
 msgid "Add Layout"
 msgstr ""
 
-msgid "Edit Layout"
+msgid "Copy from"
+msgstr ""
+
+msgid "Rename"
+msgstr ""
+
+msgid "Rename Layout"
 msgstr ""
 
 msgid "Are you sure you want to delete this layout?"

addons/README.md

@@ -24,7 +24,7 @@ Files extracted from source:
 ## godot-dockable-container
 
 - Upstream: https://github.com/gilzoide/godot-dockable-container
-- Version: [274ea7264440003071bcd024f31e130c984df3c6](https://github.com/gilzoide/godot-dockable-container/pull/27/commits/274ea7264440003071bcd024f31e130c984df3c6) (PR #27)
+- Version: Based on [274ea7264440003071bcd024f31e130c984df3c6](https://github.com/gilzoide/godot-dockable-container/pull/27/commits/274ea7264440003071bcd024f31e130c984df3c6) (PR #27), but with changes in layout.gd that add a `save_on_change` variable and a `save()` method.
 - License: [CC0-1.0](https://github.com/gilzoide/godot-dockable-container/blob/main/LICENSE)
 
 ## SmartSlicer

addons/dockable_container/layout.gd

@@ -23,6 +23,15 @@ enum { MARGIN_LEFT, MARGIN_RIGHT, MARGIN_TOP, MARGIN_BOTTOM, MARGIN_CENTER }
 		if value != _hidden_tabs:
 			_hidden_tabs = value
 			changed.emit()
+@export var save_on_change := false:
+	set(value):
+		save_on_change = value
+		if value:
+			if not changed.is_connected(save):
+				changed.connect(save)
+		else:
+			if changed.is_connected(save):
+				changed.disconnect(save)
 
 var _changed_signal_queued := false
 var _first_leaf: DockableLayoutPanel
@@ -61,6 +70,12 @@ func get_names() -> PackedStringArray:
 	return _root.get_names()
 
 
+func save(path := resource_path) -> void:
+	if path.is_empty():
+		return
+	ResourceSaver.save(self, path)
+
+
 ## Add missing nodes on first leaf and remove nodes outside indices from leaves.
 ##
 ## _leaf_by_node_name = {

assets/layouts/Default.tres

@@ -165,7 +165,7 @@ first = SubResource("Resource_atmme")
 second = SubResource("Resource_2qk0j")
 
 [resource]
-resource_name = "Layout"
+resource_name = "Default"
 script = ExtResource("3_bjjec")
 root = SubResource("Resource_msuil")
 hidden_tabs = {
@@ -176,3 +176,4 @@ hidden_tabs = {
 "Reference Images": true,
 "Second Canvas": true
 }
+save_on_change = false

assets/layouts/Tallscreen.tres

@@ -137,7 +137,7 @@ first = SubResource("Resource_otntk")
 second = SubResource("Resource_1xpva")
 
 [resource]
-resource_name = "Layout"
+resource_name = "Tallscreen"
 script = ExtResource("3_ox7l5")
 root = SubResource("Resource_6dytr")
 hidden_tabs = {
@@ -145,3 +145,4 @@ hidden_tabs = {
 "Recorder": true,
 "Second Canvas": true
 }
+save_on_change = false

src/Autoload/Global.gd

@@ -79,6 +79,8 @@ const OVERRIDE_FILE := "override.cfg"
 const HOME_SUBDIR_NAME := "pixelorama"
 ## The name of folder that contains subdirectories for users to place brushes, palettes, patterns.
 const CONFIG_SUBDIR_NAME := "pixelorama_data"
+## The path of the directory where the UI layouts are being stored.
+const LAYOUT_DIR := "user://layouts"
 const VALUE_SLIDER_V2_TSCN := preload("res://src/UI/Nodes/ValueSliderV2.tscn")
 const GRADIENT_EDIT_TSCN := preload("res://src/UI/Nodes/GradientEdit.tscn")
 
@@ -109,6 +111,11 @@ var current_project_index := 0:
 		project_switched.emit()
 		project_switched.disconnect(current_project.change_project)
 		cel_switched.emit()
+var default_layouts: Array[DockableLayout] = [
+	preload("res://assets/layouts/Default.tres"),
+	preload("res://assets/layouts/Tallscreen.tres"),
+]
+var layouts: Array[DockableLayout] = []
 
 # Canvas related stuff
 ## Tells if the user allowed to draw on the canvas. Usually it is temporarily set to

src/Main.gd

@@ -17,6 +17,7 @@ var cursor_image := preload("res://assets/graphics/cursor.png")
 
 func _init() -> void:
 	Global.shrink = _get_auto_display_scale()
+	_handle_layout_files()
 
 
 func _ready() -> void:
@@ -96,6 +97,24 @@ func _get_auto_display_scale() -> float:
 	return 1.0
 
 
+func _handle_layout_files() -> void:
+	if not DirAccess.dir_exists_absolute(Global.LAYOUT_DIR):
+		DirAccess.make_dir_absolute(Global.LAYOUT_DIR)
+	var dir := DirAccess.open(Global.LAYOUT_DIR)
+	var files := dir.get_files()
+	if files.size() == 0:
+		for layout in Global.default_layouts:
+			var file_name := layout.resource_path.get_basename().get_file() + ".tres"
+			ResourceSaver.save(layout, Global.LAYOUT_DIR.path_join(file_name))
+		files = dir.get_files()
+	for file in files:
+		var layout := ResourceLoader.load(Global.LAYOUT_DIR.path_join(file))
+		if layout is DockableLayout:
+			Global.layouts.append(layout)
+			# Save the layout every time it changes
+			layout.save_on_change = true
+
+
 func _setup_application_window_size() -> void:
 	var root := get_tree().root
 	root.content_scale_aspect = Window.CONTENT_SCALE_ASPECT_IGNORE
@@ -402,7 +421,7 @@ func _on_backup_confirmation_visibility_changed() -> void:
 
 
 func _exit_tree() -> void:
-	Global.config_cache.set_value("window", "layout", Global.top_menu_container.selected_layout)
+	Global.config_cache.set_value("window", "layout", Global.layouts.find(main_ui.layout))
 	Global.config_cache.set_value("window", "screen", get_window().current_screen)
 	Global.config_cache.set_value(
 		"window",

src/UI/Dialogs/ManageLayouts.gd

@@ -3,18 +3,25 @@ extends AcceptDialog
 var layout_selected := -1
 var is_editing := false
 
-@onready var layout_list: ItemList = find_child("SavedLayouts")
+@onready var layout_list := %SavedLayouts as ItemList
-@onready var edit_layout: Button = find_child("EditLayout")
+@onready var rename_layout := %RenameLayout as Button
-@onready var delete_layout: Button = find_child("DeleteLayout")
+@onready var delete_layout := %DeleteLayout as Button
-@onready var layout_settings: ConfirmationDialog = $LayoutSettings
+@onready var layout_settings := $LayoutSettings as ConfirmationDialog
-@onready var layout_name: LineEdit = $LayoutSettings/LayoutName
+@onready var layout_name := %LayoutName as LineEdit
-@onready var delete_confirmation: ConfirmationDialog = $DeleteConfirmation
+@onready var layout_from := %LayoutFrom as OptionButton
-@onready var mimic_ui = find_child("LayoutPreview")
+@onready var delete_confirmation := $DeleteConfirmation as ConfirmationDialog
+@onready var mimic_ui := %LayoutPreview as DockableContainer
+
+
+func _ready() -> void:
+	# Fill the copy layout from option button with the default layouts
+	for layout in Global.default_layouts:
+		layout_from.add_item(layout.resource_path.get_basename().get_file())
 
 
 func _on_ManageLayouts_about_to_show() -> void:
-	for layout in Global.top_menu_container.layouts:
+	for layout in Global.layouts:
-		layout_list.add_item(layout[0])
+		layout_list.add_item(layout.resource_path.get_basename().get_file())
 	refresh_preview()
 	if layout_selected != -1:
 		layout_list.select(layout_selected)
@@ -33,13 +40,13 @@ func _on_SavedLayouts_item_activated(index: int) -> void:
 
 func _on_SavedLayouts_item_selected(index: int) -> void:
 	layout_selected = index
-	edit_layout.disabled = index < Global.top_menu_container.default_layout_size
+	rename_layout.disabled = false
-	delete_layout.disabled = index < Global.top_menu_container.default_layout_size
+	delete_layout.disabled = false
 	refresh_preview()
 
 
 func _on_SavedLayouts_empty_clicked(_position: Vector2, _button_index: int) -> void:
-	edit_layout.disabled = true
+	rename_layout.disabled = true
 	delete_layout.disabled = true
 
 
@@ -47,13 +54,15 @@ func _on_AddLayout_pressed() -> void:
 	is_editing = false
 	layout_name.text = "New Layout"
 	layout_settings.title = "Add Layout"
+	layout_from.get_parent().visible = true
 	layout_settings.popup_centered()
 
 
-func _on_EditLayout_pressed() -> void:
+func _on_rename_layout_pressed() -> void:
 	is_editing = true
 	layout_name.text = layout_list.get_item_text(layout_selected)
-	layout_settings.title = "Edit Layout"
+	layout_settings.title = "Rename Layout"
+	layout_from.get_parent().visible = false
 	layout_settings.popup_centered()
 
 
@@ -63,52 +72,62 @@ func _on_DeleteLayout_pressed() -> void:
 
 func _on_LayoutSettings_confirmed() -> void:
 	var file_name := layout_name.text + ".tres"
-	var path := "user://layouts/".path_join(file_name)
+	var path := Global.LAYOUT_DIR.path_join(file_name)
-	var layout: DockableLayout = Global.control.main_ui.layout
+	var layout: DockableLayout
+	if layout_from.selected == 0:
+		layout = Global.control.main_ui.layout.clone()
+	else:
+		layout = Global.default_layouts[layout_from.selected - 1].clone()
+	layout.resource_name = layout_name.text
+	layout.resource_path = path
 	var err := ResourceSaver.save(layout, path)
 	if err != OK:
 		print(err)
+		return
+	if is_editing:
+		var old_file_name: String = layout_list.get_item_text(layout_selected) + ".tres"
+		if old_file_name != file_name:
+			delete_layout_file(old_file_name)
+		Global.layouts[layout_selected] = layout
+		layout_list.set_item_text(layout_selected, layout_name.text)
 	else:
-		if is_editing:
+		Global.layouts.append(layout)
-			var old_file_name: String = layout_list.get_item_text(layout_selected) + ".tres"
+		# Save the layout every time it changes
-			if old_file_name != file_name:
+		layout.save_on_change = true
-				delete_layout_file(old_file_name)
+		Global.control.main_ui.layout = layout
-			Global.top_menu_container.layouts[layout_selected][0] = layout_name.text
+		layout_list.add_item(layout_name.text)
-			Global.top_menu_container.layouts[layout_selected][1] = layout
+	Global.layouts.sort_custom(
-			layout_list.set_item_text(layout_selected, layout_name.text)
+		func(a: DockableLayout, b: DockableLayout): return (
-			Global.top_menu_container.layouts_submenu.set_item_text(
+			a.resource_path.get_file() < b.resource_path.get_file()
-				layout_selected + 1, layout_name.text
+		)
-			)
+	)
-		else:
+	var layout_index := Global.layouts.find(layout)
-			Global.top_menu_container.layouts.append([layout_name.text, layout])
+	Global.top_menu_container.populate_layouts_submenu()
-			layout_list.add_item(layout_name.text)
+	Global.top_menu_container.layouts_submenu.set_item_checked(layout_index + 1, true)
-			Global.top_menu_container.populate_layouts_submenu()
-			var n: int = Global.top_menu_container.layouts_submenu.get_item_count()
-			Global.top_menu_container.layouts_submenu.set_item_checked(n - 1, true)
 
 
 func delete_layout_file(file_name: String) -> void:
-	var dir := DirAccess.open("user://layouts/")
+	var dir := DirAccess.open(Global.LAYOUT_DIR)
 	if not is_instance_valid(dir):
 		return
-	dir.remove("user://layouts/".path_join(file_name))
+	dir.remove(Global.LAYOUT_DIR.path_join(file_name))
 
 
 func _on_DeleteConfirmation_confirmed() -> void:
 	delete_layout_file(layout_list.get_item_text(layout_selected) + ".tres")
-	Global.top_menu_container.layouts.remove_at(layout_selected)
+	Global.layouts.remove_at(layout_selected)
 	layout_list.remove_item(layout_selected)
 	Global.top_menu_container.populate_layouts_submenu()
 	layout_selected = -1
-	edit_layout.disabled = true
+	rename_layout.disabled = true
 	delete_layout.disabled = true
 	refresh_preview()
 
 
-func refresh_preview():
+func refresh_preview() -> void:
 	for tab in mimic_ui.get_tabs():
 		mimic_ui.remove_child(tab)
-	for item in Global.top_menu_container.main_ui.get_tabs():
+	for item in Global.control.main_ui.get_tabs():
 		var box := TextEdit.new()
 		box.name = item.name
 		box.text = item.name
@@ -118,4 +137,4 @@ func refresh_preview():
 		mimic_ui.visible = false
 		return
 	mimic_ui.visible = true
-	mimic_ui.set_layout(Global.top_menu_container.layouts[layout_selected][1].clone())
+	mimic_ui.set_layout(Global.layouts[layout_selected].clone())

src/UI/Dialogs/ManageLayouts.tscn

@@ -16,9 +16,11 @@ resource_name = "Layout"
 script = ExtResource("3")
 root = SubResource("1")
 hidden_tabs = {}
+save_on_change = false
 
 [node name="ManageLayouts" type="AcceptDialog"]
 title = "Manage Layouts"
+size = Vector2i(500, 500)
 exclusive = false
 popup_window = true
 script = ExtResource("1")
@@ -30,7 +32,7 @@ anchor_bottom = 1.0
 offset_left = 8.0
 offset_top = 8.0
 offset_right = -8.0
-offset_bottom = -36.0
+offset_bottom = -49.0
 
 [node name="PreviewHeader" type="HBoxContainer" parent="VBoxContainer"]
 layout_mode = 2
@@ -54,6 +56,7 @@ layout_mode = 2
 size_flags_vertical = 3
 
 [node name="LayoutPreview" type="Container" parent="VBoxContainer/PreviewContainer"]
+unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3
 size_flags_vertical = 3
@@ -79,6 +82,7 @@ layout_mode = 2
 text = "Double click to set as new startup layout"
 
 [node name="SavedLayouts" type="ItemList" parent="VBoxContainer"]
+unique_name_in_owner = true
 custom_minimum_size = Vector2(0, 100)
 layout_mode = 2
 
@@ -87,38 +91,53 @@ layout_mode = 2
 
 [node name="AddLayout" type="Button" parent="VBoxContainer/ButtonsContainer"]
 layout_mode = 2
-size_flags_horizontal = 0
+size_flags_horizontal = 3
 mouse_default_cursor_shape = 2
 text = "Add"
 
-[node name="EditLayout" type="Button" parent="VBoxContainer/ButtonsContainer"]
+[node name="RenameLayout" type="Button" parent="VBoxContainer/ButtonsContainer"]
+unique_name_in_owner = true
 layout_mode = 2
-size_flags_horizontal = 0
+size_flags_horizontal = 3
 mouse_default_cursor_shape = 2
 disabled = true
-text = "Edit"
+text = "Rename"
 
 [node name="DeleteLayout" type="Button" parent="VBoxContainer/ButtonsContainer"]
+unique_name_in_owner = true
 layout_mode = 2
-size_flags_horizontal = 0
+size_flags_horizontal = 3
 mouse_default_cursor_shape = 2
 disabled = true
 text = "Delete"
 
 [node name="LayoutSettings" type="ConfirmationDialog" parent="."]
 
-[node name="LayoutName" type="LineEdit" parent="LayoutSettings"]
+[node name="VBoxContainer" type="VBoxContainer" parent="LayoutSettings"]
-anchors_preset = 14
+offset_right = 40.0
-anchor_top = 0.5
+offset_bottom = 40.0
-anchor_right = 1.0
+
-anchor_bottom = 0.5
+[node name="LayoutName" type="LineEdit" parent="LayoutSettings/VBoxContainer"]
-offset_left = 8.0
+unique_name_in_owner = true
-offset_top = -26.0
+layout_mode = 2
-offset_right = -8.0
-offset_bottom = -2.0
 size_flags_horizontal = 3
 placeholder_text = "Insert name"
 
+[node name="HBoxContainer" type="HBoxContainer" parent="LayoutSettings/VBoxContainer"]
+layout_mode = 2
+
+[node name="LayoutFromLabel" type="Label" parent="LayoutSettings/VBoxContainer/HBoxContainer"]
+layout_mode = 2
+text = "Copy from"
+
+[node name="LayoutFrom" type="OptionButton" parent="LayoutSettings/VBoxContainer/HBoxContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+item_count = 1
+selected = 0
+popup/item_0/text = "Current layout"
+popup/item_0/id = 0
+
 [node name="DeleteConfirmation" type="ConfirmationDialog" parent="."]
 dialog_text = "Are you sure you want to delete this layout?"
 
@@ -128,7 +147,7 @@ dialog_text = "Are you sure you want to delete this layout?"
 [connection signal="item_activated" from="VBoxContainer/SavedLayouts" to="." method="_on_SavedLayouts_item_activated"]
 [connection signal="item_selected" from="VBoxContainer/SavedLayouts" to="." method="_on_SavedLayouts_item_selected"]
 [connection signal="pressed" from="VBoxContainer/ButtonsContainer/AddLayout" to="." method="_on_AddLayout_pressed"]
-[connection signal="pressed" from="VBoxContainer/ButtonsContainer/EditLayout" to="." method="_on_EditLayout_pressed"]
+[connection signal="pressed" from="VBoxContainer/ButtonsContainer/RenameLayout" to="." method="_on_rename_layout_pressed"]
 [connection signal="pressed" from="VBoxContainer/ButtonsContainer/DeleteLayout" to="." method="_on_DeleteLayout_pressed"]
 [connection signal="confirmed" from="LayoutSettings" to="." method="_on_LayoutSettings_confirmed"]
 [connection signal="confirmed" from="DeleteConfirmation" to="." method="_on_DeleteConfirmation_confirmed"]

src/UI/TopMenuContainer/TopMenuContainer.gd

@@ -10,11 +10,6 @@ const PIXELORAMA_ICON := preload("res://assets/graphics/icons/icon_16x16.png")
 const HEART_ICON := preload("res://assets/graphics/misc/heart.svg")
 
 var recent_projects := []
-var layouts: Array[DockableLayout] = [
-	preload("res://assets/layouts/Default.tres"),
-	preload("res://assets/layouts/Tallscreen.tres"),
-]
-var default_layout_size := layouts.size()
 var selected_layout := 0
 var zen_mode := false
 
@@ -39,8 +34,6 @@ var zen_mode := false
 
 
 func _ready() -> void:
-	var dir := DirAccess.open("user://")
-	dir.make_dir("user://layouts")
 	_setup_file_menu()
 	_setup_edit_menu()
 	_setup_view_menu()
@@ -248,19 +241,6 @@ func _setup_panels_submenu(item: String) -> void:
 
 
 func _setup_layouts_submenu(item: String) -> void:
-	var path := "user://layouts"
-	var dir := DirAccess.open(path)
-	if DirAccess.get_open_error() == OK:
-		dir.list_dir_begin()
-		var file_name = dir.get_next()
-		while file_name != "":
-			if !dir.current_is_dir():
-				var layout := ResourceLoader.load(path.path_join(file_name))
-				if layout is DockableLayout:
-					layouts.append(layout)
-			file_name = dir.get_next()
-		dir.list_dir_end()
-
 	layouts_submenu.set_name("layouts_submenu")
 	layouts_submenu.hide_on_checkable_item_selection = false
 	populate_layouts_submenu()
@@ -269,14 +249,14 @@ func _setup_layouts_submenu(item: String) -> void:
 	window_menu.add_child(layouts_submenu)
 	window_menu.add_submenu_item(item, layouts_submenu.get_name())
 
-	var saved_layout = Global.config_cache.get_value("window", "layout", 0)
+	var saved_layout: int = Global.config_cache.get_value("window", "layout", 0)
 	set_layout(saved_layout)
 
 
 func populate_layouts_submenu() -> void:
 	layouts_submenu.clear()  # Does not do anything if it's called for the first time
 	layouts_submenu.add_item("Manage Layouts", 0)
-	for layout in layouts:
+	for layout in Global.layouts:
 		var layout_name := layout.resource_path.get_basename().get_file()
 		layouts_submenu.add_radio_check_item(layout_name)
 
@@ -570,11 +550,13 @@ func _layouts_submenu_id_pressed(id: int) -> void:
 
 
 func set_layout(id: int) -> void:
-	if id >= layouts.size():
+	if Global.layouts.size() == 0:
+		return
+	if id >= Global.layouts.size():
 		id = 0
 	selected_layout = id
-	main_ui.layout = layouts[id].clone()  # Clone is needed to avoid modifying premade layouts
+	main_ui.layout = Global.layouts[id]
-	for i in layouts.size():
+	for i in Global.layouts.size():
 		var offset := i + 1
 		layouts_submenu.set_item_checked(offset, offset == (id + 1))
 

src/UI/UI.tscn

@@ -204,6 +204,7 @@ hidden_tabs = {
 "Recorder": true,
 "Second Canvas": true
 }
+save_on_change = false
 
 [sub_resource type="ShaderMaterial" id="2"]
 shader = ExtResource("9")
@@ -253,6 +254,7 @@ script = ExtResource("35")
 tabs_visible = false
 tabs_visible_if_more_than_one = true
 layout = SubResource("Resource_b6o2t")
+clone_layout_on_ready = false
 
 [node name="Tools" parent="DockableContainer" instance=ExtResource("1")]
 layout_mode = 2