Replace TabBar with TabPanel for better usability on mobile (#28)

Author: syntaxerror247

assets/icons/TabSwitcher.svg

@@ -0,0 +1,37 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://8x628rb2bnep"
+path="res://.godot/imported/TabSwitcher.svg-2223859299d150806d6ebc1516a3686d.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/icons/TabSwitcher.svg"
+dest_files=["res://.godot/imported/TabSwitcher.svg-2223859299d150806d6ebc1516a3686d.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

assets/icons/TabSwitcher.svg.import

@@ -30,6 +30,10 @@ signal active_tab_changed
 @warning_ignore("unused_signal")
 signal tabs_changed
 @warning_ignore("unused_signal")
+signal tab_removed
+@warning_ignore("unused_signal")
+signal tab_selected(index: int)
+@warning_ignore("unused_signal")
 signal layout_changed
 
 const savedata_path = "user://savedata.tres"

src/autoload/Configs.gd

@@ -31,9 +31,8 @@ func _ready() -> void:
 	await get_tree().process_frame  # Helps make things more consistent.
 	update_ui_scale()
 
-	if OS.get_name() == "Android":
-		shortcut_panel = ShortcutPanelScene.instantiate()
-		get_tree().root.add_child(shortcut_panel)
+	shortcut_panel = ShortcutPanelScene.instantiate()
+	get_tree().root.add_child(shortcut_panel)
 
 func _notification(what: int) -> void:
 	if what == NOTIFICATION_WM_ABOUT:

src/autoload/HandlerGUI.gd

@@ -714,7 +714,6 @@ func remove_tab(idx: int) -> void:
 	_tabs.remove_at(idx)
 	if idx < _active_tab_index:
 		new_active_tab_index -= 1
-	
 	# Clear unnecessary files. This will clear the removed tab too.
 	var used_file_paths := PackedStringArray()
 	for tab in _tabs:
@@ -729,11 +728,14 @@ func remove_tab(idx: int) -> void:
 	if _tabs.is_empty():
 		_add_new_tab()
 
-	emit_changed()
-	Configs.tabs_changed.emit()
 	var has_tab_changed := (_active_tab_index == idx)
 	_active_tab_index = clampi(new_active_tab_index, 0, _tabs.size() - 1)
 	_tabs[_active_tab_index].activate()
+	
+	emit_changed()
+	Configs.tab_removed.emit()
+	Configs.tabs_changed.emit()
+	
 	if has_tab_changed:
 		Configs.active_tab_changed.emit()
 

src/config_classes/SaveData.gd

@@ -8,6 +8,7 @@ const EDITED_FILES_DIR = "user://edited"
 
 signal status_changed
 signal reference_changed
+signal data_synced
 
 var presented_name: String:
 	set(new_value):
@@ -143,7 +144,6 @@ func queue_sync() -> void:
 func _sync() -> void:
 	if not _sync_pending:
 		return
-	_sync_pending = false
 
 	if is_saved():
 		# The extension is included in the presented name too.
@@ -163,6 +163,7 @@ func _sync() -> void:
 						SVGParser.root_to_export_text(edited_text_parse_result.svg)
 			else:
 				marked_unsaved = true
+				
 
 	elif not FileAccess.file_exists(get_edited_file_path()) or\
 	SVGParser.text_check_is_root_empty(get_true_svg_text()):
@@ -173,7 +174,9 @@ func _sync() -> void:
 		empty_unsaved = false
 		marked_unsaved = false
 		presented_name = "[ %s ]" % Translator.translate("Unsaved")
-
+	
+	_sync_pending = false
+	data_synced.emit()
 
 func activate() -> void:
 	active = true

src/config_classes/TabData.gd

@@ -1,6 +1,7 @@
 extends VBoxContainer
 
 const NumberEdit = preload("res://src/ui_widgets/number_edit.gd")
+const TabPanel = preload("res://src/ui_parts/tab_panel.tscn")
 
 @onready var viewport: SubViewport = %Viewport
 @onready var reference_texture: TextureRect = %Viewport/ReferenceTexture
@@ -14,6 +15,8 @@ const NumberEdit = preload("res://src/ui_widgets/number_edit.gd")
 @onready var input_debug_label: Label = %DebugContainer/InputDebugLabel
 @onready var toolbar: PanelContainer = $ViewportPanel/VBoxContainer/Toolbar
 
+var tab_panel: PanelContainer
+
 var reference_overlay := false
 
 func _ready() -> void:
@@ -33,7 +36,14 @@ func _ready() -> void:
 	update_theme()
 	update_snap_config()
 	get_window().window_input.connect(_update_input_debug)
-
+	
+	tab_panel = TabPanel.instantiate()
+	var overlay_ref := ColorRect.new()
+	overlay_ref.color = Color(0, 0, 0, 0.4)
+	overlay_ref.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
+	overlay_ref.hide()
+	get_tree().root.add_child.call_deferred(overlay_ref)
+	overlay_ref.add_child(tab_panel)
 
 func update_translations() -> void:
 	%LeftMenu/Visuals.tooltip_text = Translator.translate("Visuals")
@@ -159,3 +169,8 @@ func _update_input_debug(event: InputEvent) -> void:
 			new_text = new_text.right(-new_text.find("\n") - 1)
 		new_text += event_text + "\n"
 		input_debug_label.text = new_text
+
+
+func _on_tab_switcher_pressed() -> void:
+	tab_panel.get_parent().show()
+	tab_panel.animate_in()

src/ui_parts/display.gd

@@ -8,11 +8,11 @@
 [ext_resource type="PackedScene" uid="uid://dad7fkhmsooc6" path="res://src/ui_widgets/number_edit.tscn" id="7_wrrfr"]
 [ext_resource type="PackedScene" uid="uid://oltvrf01xrxl" path="res://src/ui_widgets/zoom_menu.tscn" id="8_xtdmn"]
 [ext_resource type="Script" uid="uid://b6pmlbnl76wmm" path="res://src/ui_parts/viewport.gd" id="9_4xrk7"]
-[ext_resource type="Script" uid="uid://rqrxhe8wa6fn" path="res://src/ui_parts/tab_bar.gd" id="9_rll1m"]
 [ext_resource type="Shader" uid="uid://i2y5pyhcgra2" path="res://src/shaders/zoom_shader.gdshader" id="10_x7ybk"]
 [ext_resource type="Texture2D" uid="uid://c68og6bsqt0lb" path="res://assets/icons/backgrounds/Checkerboard.svg" id="11_1bm1s"]
 [ext_resource type="Script" uid="uid://dtplje5mhdmrj" path="res://src/ui_parts/display_texture.gd" id="12_qi23s"]
 [ext_resource type="Script" uid="uid://csqewpxr21ywy" path="res://src/ui_parts/handles_manager.gd" id="13_lwhwy"]
+[ext_resource type="Texture2D" uid="uid://8x628rb2bnep" path="res://assets/icons/TabSwitcher.svg" id="14_ryr8t"]
 [ext_resource type="Script" uid="uid://cm5033meho5vr" path="res://src/ui_widgets/camera.gd" id="15_hevpa"]
 
 [sub_resource type="ShaderMaterial" id="ShaderMaterial_kqplg"]
@@ -33,13 +33,6 @@ grow_vertical = 2
 theme_override_constants/separation = 0
 script = ExtResource("1_oib5g")
 
-[node name="TabBar" type="Control" parent="."]
-clip_contents = true
-custom_minimum_size = Vector2(0, 24)
-layout_mode = 2
-size_flags_horizontal = 3
-script = ExtResource("9_rll1m")
-
 [node name="ViewportPanel" type="PanelContainer" parent="."]
 layout_mode = 2
 size_flags_vertical = 3
@@ -58,7 +51,7 @@ unique_name_in_owner = true
 disable_3d = true
 handle_input_locally = false
 gui_snap_controls_to_pixels = false
-size = Vector2i(720, 1225)
+size = Vector2i(720, 1249)
 size_2d_override_stretch = true
 render_target_update_mode = 4
 script = ExtResource("9_4xrk7")
@@ -111,7 +104,6 @@ alignment = 2
 [node name="LeftMenu" type="HBoxContainer" parent="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions"]
 unique_name_in_owner = true
 layout_mode = 2
-size_flags_horizontal = 2
 theme_override_constants/separation = 5
 
 [node name="Visuals" type="Button" parent="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/LeftMenu"]
@@ -155,6 +147,22 @@ max_length = 20
 min_value = 0.001
 allow_lower = false
 
+[node name="spacer" type="Control" parent="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions"]
+layout_mode = 2
+size_flags_horizontal = 3
+
+[node name="TabSwitcher" type="Button" parent="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions"]
+layout_mode = 2
+focus_mode = 0
+mouse_default_cursor_shape = 2
+theme_type_variation = &"IconButton"
+icon = ExtResource("14_ryr8t")
+icon_alignment = 1
+
+[node name="spacer2" type="Control" parent="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions"]
+layout_mode = 2
+size_flags_horizontal = 3
+
 [node name="ZoomMenu" parent="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions" instance=ExtResource("8_xtdmn")]
 unique_name_in_owner = true
 layout_mode = 2
@@ -197,5 +205,6 @@ horizontal_alignment = 2
 [connection signal="pressed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/LeftMenu/Reference" to="." method="_on_reference_pressed"]
 [connection signal="toggled" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/LeftMenu/Snapping/SnapButton" to="." method="_on_snap_button_toggled"]
 [connection signal="value_changed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/LeftMenu/Snapping/SnapNumberEdit" to="." method="_on_snap_number_edit_value_changed"]
+[connection signal="pressed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/TabSwitcher" to="." method="_on_tab_switcher_pressed"]
 [connection signal="zoom_changed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/ZoomMenu" to="ViewportPanel/VBoxContainer/ViewportContainer/Viewport" method="_on_zoom_changed"]
 [connection signal="zoom_reset_pressed" from="ViewportPanel/VBoxContainer/Toolbar/ViewportOptions/ZoomMenu" to="ViewportPanel/VBoxContainer/ViewportContainer/Viewport" method="center_frame"]

src/ui_parts/display.tscn

@@ -44,6 +44,7 @@ func update_layout() -> void:
 	top_margin_container.add_theme_constant_override("margin_top", 6)
 	top_margin_container.add_theme_constant_override("margin_bottom", 6)
 	top_margin_container.add_theme_constant_override("margin_left", 6)
+	top_margin_container.add_theme_constant_override("margin_right", 6)
 	top_margin_container.end_bulk_theme_override()
 	main_splitter.add_child(top_margin_container)
 

src/ui_parts/editor_scene.gd

@@ -0,0 +1,74 @@
+extends PanelContainer
+
+const tabItem = preload("res://src/ui_widgets/tab_item.tscn")
+
+@onready var tab_container: VBoxContainer = $VBoxContainer/ScrollContainer/VBoxContainer
+
+func _ready() -> void:
+	get_parent().gui_input.connect(_on_parent_gui_input)
+	Configs.tab_removed.connect(refresh_tabs)
+	Configs.tab_selected.connect(highlight_active_tab)
+	refresh_tabs()
+
+func animate_in() -> void:
+	var tween := get_tree().create_tween()
+	tween.tween_property(self, "position:x", 0, 0.3).from(-200).set_ease(Tween.EASE_IN_OUT)
+
+func animate_out() -> void:
+	var tween := get_tree().create_tween()
+	tween.tween_property(self, "position:x", -200, 0.3).set_ease(Tween.EASE_IN_OUT)
+	await tween.finished
+	get_parent().hide()
+
+func refresh_tabs() -> void:
+	print("Refreshing tabs...")
+	for i in tab_container.get_children():
+		i.queue_free()
+	
+	var has_transient_tab := not State.transient_tab_path.is_empty()
+	var total_tabs := Configs.savedata.get_tab_count()
+	
+	# If there's a transient tab, we want to draw one more
+	if has_transient_tab:
+		total_tabs += 1
+	
+	for tab_index in total_tabs:
+		var is_transient := (has_transient_tab and tab_index == total_tabs)
+		var tab_name := ""
+		var svg_text := ""
+		
+		if is_transient:
+			tab_name = State.transient_tab_path.get_file()
+		else:
+			var tab_data = Configs.savedata.get_tab(tab_index)
+			if tab_data._sync_pending:
+				await tab_data.data_synced
+			tab_name = tab_data.presented_name
+			svg_text = FileAccess.get_file_as_string(TabData.get_edited_file_path_for_id(tab_data.id))
+			if tab_data.marked_unsaved:
+				tab_name = "* " + tab_name
+		
+		var is_active := (
+			(is_transient and has_transient_tab) or
+			(not is_transient and tab_index == Configs.savedata.get_active_tab_index())
+		)
+		
+		var tab = tabItem.instantiate()
+		tab_container.add_child(tab)
+		tab.setup(tab_name, svg_text, is_active)
+
+func highlight_active_tab(new_index: int) -> void:
+	var active_index = Configs.savedata.get_active_tab_index()
+	tab_container.get_child(active_index).highlight(false)
+	Configs.savedata.set_active_tab_index(new_index)
+	tab_container.get_child(new_index).highlight(true)
+
+func _on_new_tab_pressed() -> void:
+	Configs.savedata.add_empty_tab()
+	refresh_tabs()
+
+func _on_parent_gui_input(event: InputEvent) -> void:
+	if not event is InputEventMouseButton:
+		return
+	if event.is_pressed() and event.button_index == MOUSE_BUTTON_LEFT:
+		animate_out()