Switched to Godot's built-in TabBar UI for open files

docs/changelog.md

@@ -7,13 +7,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [0.7.0] 
 
 ### Breaking Changes
-- The keybindings fromat is different, so you will need to update them again in case you changed them
+- The keybindings format is different, so you will need to update them again in case you changed them
 
 ### Added
 - Setting to disable pressure sensitivity and always draw with a constant brush width
 - Quit shortcut (`CTRL+Q` by default)
 - Alternative way to pan the canvas by holding `SPACE` and moving the mouse
 - Brush stroke stabilizer/smoothing
+- File tabs are now responsive and can be scrolled when not enough screen width is availble
+- File tabs can be moved via drag and drop
 - Translations: Ukrainian, Arabic 
 
 ### Fixed

lorien/Assets/Icons/add.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://bbdkcvds2nxg7"
+path="res://.godot/imported/add.png-3520d3bd6bbe6551666d487ef1026a75.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://Assets/Icons/add.png"
+dest_files=["res://.godot/imported/add.png-3520d3bd6bbe6551666d487ef1026a75.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

lorien/UI/Menubar.gd

@@ -1,90 +1,85 @@
 class_name Menubar
 extends Panel
 
-# -------------------------------------------------------------------------------------------------
-const PROJECT_TAB = preload("res://UI/Components/ProjectTab.tscn")
-
 # -------------------------------------------------------------------------------------------------
 signal project_selected(project_id: int)
 signal project_closed(project_id: int)
 signal create_new_project
 
 # -------------------------------------------------------------------------------------------------
 @onready var _menu_button: TextureButton = $Left/MenuButton
-@onready var _new_file_button: Button = $Left/NewFileButton
-@onready var _file_tabs_container: HBoxContainer = $Left/TabBar
+@onready var _new_file_button: TextureButton = $Left/NewFileButton
+@onready var _tab_bar: TabBar = $Left/TabBar
 
 @export var _main_menu_path: NodePath
-var _active_file_tab: ProjectTab
-var _tabs_map: Dictionary # Dictonary<project_id, ProjectTab>
 
 # -------------------------------------------------------------------------------------------------
 func _ready() -> void:
 	_menu_button.pressed.connect(_on_menu_button_pressed)
-	_new_file_button.pressed.connect(_on_new_file_button_pressed)
+
+	_new_file_button.pressed.connect(func() -> void:
+		create_new_project.emit()
+	)
+
+	_tab_bar.tab_close_pressed.connect(func(index: int) -> void:
+		var project := _tab_bar.get_tab_metadata(index) as Project
+		_tab_bar.remove_tab(index)
+		project_closed.emit(project.id)
+	)
+
+	_tab_bar.tab_clicked.connect(func(index: int) -> void:
+		var project := _tab_bar.get_tab_metadata(index) as Project
+		project_selected.emit(project.id)
+	)
 
 # -------------------------------------------------------------------------------------------------
 func make_tab(project: Project) -> void:
-	var tab: ProjectTab = PROJECT_TAB.instantiate()
-	tab.title = project.get_scene_file_path()
-	tab.project_id = project.id
-	tab.close_requested.connect(_on_tab_close_requested)
-	tab.selected.connect(_on_tab_selected)
-	_file_tabs_container.add_child(tab)
-	_tabs_map[project.id] = tab
-
+	_tab_bar.add_tab(project.get_scene_file_path())
+	_tab_bar.set_tab_metadata(_tab_bar.tab_count - 1, project)
+	_update_tabbar_size()
+
 # ------------------------------------------------------------------------------------------------
 func has_tab(project: Project) -> bool:
-	return _tabs_map.has(project.id)
+	for i: int in _tab_bar.tab_count:
+		var p := _tab_bar.get_tab_metadata(i) as Project
+		if project == p:
+			return true
+	return false
 
 # ------------------------------------------------------------------------------------------------
 func remove_tab(project: Project) -> void:
-	if _tabs_map.has(project.id):
-		var tab: ProjectTab = _tabs_map[project.id]
-		tab.close_requested.disconnect(_on_tab_close_requested)
-		tab.selected.disconnect(_on_tab_selected)
-		_file_tabs_container.remove_child(tab)
-		_tabs_map.erase(project.id)
-		tab.call_deferred("free")
+	for i: int in _tab_bar.tab_count:
+		var p := _tab_bar.get_tab_metadata(i) as Project
+		if project == p:
+			_tab_bar.remove_tab(i)
+			_update_tabbar_size()
+			return
+
 
 # ------------------------------------------------------------------------------------------------
 func remove_all_tabs() -> void:
-	for project_id: int in _tabs_map.keys():
-		var project: Project = ProjectManager.get_project_by_id(project_id)
-		remove_tab(project)
-	_tabs_map.clear()
-	_active_file_tab = null
+	_tab_bar.clear_tabs()
+	_update_tabbar_size()
 
 # ------------------------------------------------------------------------------------------------
 func update_tab_title(project: Project) -> void:
-	if _tabs_map.has(project.id):
-		var new_title := project.get_scene_file_path()
-		if project.dirty:
-			new_title += " (*)"
-		_tabs_map[project.id].title = new_title
+	for i: int in _tab_bar.tab_count:
+		var p := _tab_bar.get_tab_metadata(i) as Project
+		if project == p:
+			var new_title := project.get_scene_file_path()
+			if project.dirty:
+				new_title += " (*)"
+			_tab_bar.set_tab_title(i, new_title)
+			_update_tabbar_size()
+			return
 
 # ------------------------------------------------------------------------------------------------
 func set_tab_active(project: Project) -> void:
-	if _tabs_map.has(project.id):
-		var tab: ProjectTab = _tabs_map[project.id]
-		_active_file_tab = tab
-		for c in _file_tabs_container.get_children():
-			c.set_active(false)
-		tab.set_active(true)
-	else:
-		print_debug("Project tab not found")
-
-# -------------------------------------------------------------------------------------------------
-func _on_tab_close_requested(tab: ProjectTab) -> void:
-	project_closed.emit(tab.project_id)
-
-# -------------------------------------------------------------------------------------------------
-func _on_tab_selected(tab: ProjectTab) -> void:
-	project_selected.emit(tab.project_id)
-
-# -------------------------------------------------------------------------------------------------
-func _on_new_file_button_pressed() -> void:
-	create_new_project.emit()
+	for i: int in _tab_bar.tab_count:
+		var p := _tab_bar.get_tab_metadata(i) as Project
+		if project == p:
+			_tab_bar.current_tab = i
+			return
 
 # -------------------------------------------------------------------------------------------------
 func _on_menu_button_pressed() -> void:
@@ -93,6 +88,16 @@ func _on_menu_button_pressed() -> void:
 
 # -------------------------------------------------------------------------------------------------
 func get_first_project_id() -> int:
-	if _file_tabs_container.get_child_count() == 0:
+	if _tab_bar.tab_count == 0:
 		return -1
-	return _file_tabs_container.get_child(0).project_id
+	else:
+		var project := _tab_bar.get_tab_metadata(0) as Project
+		return project.id
+
+# -------------------------------------------------------------------------------------------------
+func _update_tabbar_size() -> void:
+	var width := 0
+	for i: int in _tab_bar.tab_count:
+		width += _tab_bar.get_tab_rect(i).size.x
+
+	_tab_bar.custom_minimum_size.x = min(width, get_viewport_rect().size.x - 128)

lorien/UI/Menubar.tscn

@@ -1,9 +1,10 @@
-[gd_scene load_steps=7 format=3 uid="uid://e4oiel4oqq0b"]
+[gd_scene load_steps=8 format=3 uid="uid://e4oiel4oqq0b"]
 
 [ext_resource type="Theme" uid="uid://u5qnpgxqykiv" path="res://UI/Themes/theme_dark.tres" id="1"]
 [ext_resource type="Script" path="res://UI/Menubar.gd" id="2"]
 [ext_resource type="Texture2D" uid="uid://r233fnxk5qkf" path="res://Assets/Icons/menu.png" id="3"]
 [ext_resource type="Script" path="res://UI/Components/FlatTextureButton.gd" id="4"]
+[ext_resource type="Texture2D" uid="uid://bbdkcvds2nxg7" path="res://Assets/Icons/add.png" id="5_4fxbm"]
 
 [sub_resource type="StyleBoxEmpty" id="1"]
 
@@ -50,15 +51,16 @@ mouse_filter = 2
 theme_override_constants/separation = 12
 theme_override_styles/separator = SubResource("2")
 
-[node name="TabBar" type="HBoxContainer" parent="Left"]
-custom_minimum_size = Vector2(50, 38)
+[node name="TabBar" type="TabBar" parent="Left"]
 layout_mode = 2
-size_flags_horizontal = 4
+size_flags_vertical = 8
+tab_close_display_policy = 2
+drag_to_rearrange_enabled = true
+scroll_to_selected = false
 
-[node name="NewFileButton" type="Button" parent="Left"]
+[node name="NewFileButton" type="TextureButton" parent="Left"]
+custom_minimum_size = Vector2(32, 26)
 layout_mode = 2
-size_flags_horizontal = 4
 size_flags_vertical = 8
-theme_override_font_sizes/font_size = 18
-text = "+"
-flat = true
+texture_normal = ExtResource("5_4fxbm")
+stretch_mode = 3

lorien/UI/Themes/tab_active_dark.tres

@@ -0,0 +1,11 @@
+[gd_resource type="StyleBoxFlat" format=3 uid="uid://dtn7ehcyfik4a"]
+
+[resource]
+content_margin_left = 8.0
+content_margin_top = 6.0
+content_margin_right = 8.0
+content_margin_bottom = 6.0
+bg_color = Color(0.207843, 0.211765, 0.227451, 1)
+border_color = Color(1, 1, 1, 0.75)
+corner_radius_top_left = 6
+corner_radius_top_right = 6

lorien/UI/Themes/tab_inactive_dark.tres

@@ -0,0 +1,8 @@
+[gd_resource type="StyleBoxFlat" format=3 uid="uid://kdduww61cjw"]
+
+[resource]
+content_margin_left = 8.0
+content_margin_top = 6.0
+content_margin_right = 8.0
+content_margin_bottom = 6.0
+bg_color = Color(0.6, 0.6, 0.6, 0)

lorien/UI/Themes/toolbar_dark.tres

@@ -0,0 +1,4 @@
+[gd_resource type="StyleBoxFlat" format=3 uid="uid://bv2204gysvy56"]
+
+[resource]
+bg_color = Color(0.207843, 0.211765, 0.227451, 1)