Implement better persistent tab system

Author: outercloudstudio

src/App.ts

@@ -29,6 +29,7 @@ import { setupImporters } from '@/libs/import/Importers'
 import { TabManager } from '@/components/TabSystem/TabManager'
 import { FileExplorer } from '@/components/FileExplorer/FileExplorer'
 import { CreateProjectWindow } from '@/components/Windows/CreateProject/CreateProjectWindow'
+import { TabTypes } from '@/components/TabSystem/TabTypes'
 
 export function setupBeforeComponents() {
 	NotificationSystem.setup()
@@ -40,6 +41,7 @@ export function setupBeforeComponents() {
 	TextTab.setup()
 	TreeEditorTab.setup()
 	Sidebar.setup()
+	TabTypes.setup()
 	TabManager.setup()
 	FileExplorer.setup()
 	CreateProjectWindow.setup()

src/components/TabSystem/Tab.ts

@@ -1,14 +1,26 @@
+import { Event } from '@/libs/event/Event'
 import { v4 as uuid } from 'uuid'
 import { Component, Ref, ref } from 'vue'
 
+export type RecoveryState = { id: string; state: any; type: string; [key: string]: any }
+
 export class Tab {
 	public id = uuid()
 	public component: Component | null = null
 	public name = ref('New Tab')
 	public icon: Ref<string | null> = ref(null)
 
+	public savedState = new Event<void>()
+
 	public async create() {}
 	public async destroy() {}
 	public async activate() {}
 	public async deactivate() {}
+
+	public async getState(): Promise<any> {}
+	public async recover(state: any) {}
+
+	public async saveState() {
+		this.savedState.dispatch()
+	}
 }

src/components/TabSystem/TabManager.ts

@@ -1,42 +1,83 @@
 import { ShallowRef, shallowRef } from 'vue'
 import { Tab } from './Tab'
-import { TabSystem } from './TabSystem'
-import { TextTab } from '@/components/Tabs/Text/TextTab'
-import { TreeEditorTab } from '@/components/Tabs/TreeEditor/TreeEditorTab'
-import { ImageTab } from '@/components/Tabs/Image/ImageTab'
+import { TabSystem, TabSystemRecoveryState } from './TabSystem'
 import { FileTab } from './FileTab'
 import { Settings } from '@/libs/settings/Settings'
+import { TabTypes } from './TabTypes'
+import { ProjectManager } from '@/libs/project/ProjectManager'
+import { Disposable } from '@/libs/disposeable/Disposeable'
+
+type TabManagerRecoveryState = { tabSystems: TabSystemRecoveryState[]; focusedTabSystem: string }
 
 export class TabManager {
-	public static tabSystems: TabSystem[] = [new TabSystem()]
+	public static tabSystems: ShallowRef<TabSystem[]> = shallowRef([])
 	public static focusedTabSystem: ShallowRef<TabSystem | null> = shallowRef(null)
 
-	private static tabTypes: (typeof FileTab)[] = [ImageTab, TextTab, TreeEditorTab]
+	private static tabSystemSaveListenters: Record<string, Disposable> = {}
 
 	public static setup() {
-		Settings.addSetting('jsonEditor', {
-			default: 'text',
-		})
-
 		Settings.addSetting('compactTabDesign', {
 			default: true,
 		})
 
-		Settings.updated.on((event) => {
-			const { id, value } = event as { id: string; value: any }
-
-			if (id !== 'jsonEditor') return
-
-			if (value === 'text') {
-				this.tabTypes = [ImageTab, TextTab, TreeEditorTab]
+		ProjectManager.updatedCurrentProject.on(() => {
+			if (ProjectManager.currentProject === null) {
+				TabManager.clear()
 			} else {
-				this.tabTypes = [ImageTab, TreeEditorTab, TextTab]
+				TabManager.loadedProject()
 			}
 		})
 	}
 
+	public static async addTabSystem(recoveryState?: TabSystemRecoveryState): Promise<TabSystem> {
+		const tabSystem = new TabSystem()
+
+		if (recoveryState) await tabSystem.applyRecoverState(recoveryState)
+
+		TabManager.tabSystemSaveListenters[tabSystem.id] = tabSystem.savedState.on(() => {
+			TabManager.save()
+		})
+
+		TabManager.tabSystems.value.push(tabSystem)
+
+		return tabSystem
+	}
+
+	public static async removeTabSystem(tabSystem: TabSystem) {
+		if (!TabManager.tabSystems.value.includes(tabSystem)) return
+
+		if (TabManager.focusedTabSystem.value?.id === tabSystem.id) TabManager.focusedTabSystem.value = null
+
+		TabManager.tabSystems.value.splice(TabManager.tabSystems.value.indexOf(tabSystem), 1)
+
+		TabManager.tabSystemSaveListenters[tabSystem.id].dispose()
+		delete TabManager.tabSystemSaveListenters[tabSystem.id]
+
+		await tabSystem.clear()
+	}
+
+	public static async clear() {
+		const tabSystems = TabManager.tabSystems.value
+
+		for (const tabSystem of tabSystems) {
+			await TabManager.removeTabSystem(tabSystem)
+		}
+	}
+
+	public static async loadedProject() {
+		if (!ProjectManager.currentProject) return
+
+		TabManager.tabSystems.value = []
+		TabManager.focusedTabSystem.value = null
+		TabManager.tabSystemSaveListenters = {}
+
+		await TabManager.addTabSystem()
+
+		await TabManager.recover()
+	}
+
 	public static async openTab(tab: Tab) {
-		for (const tabSystem of TabManager.tabSystems) {
+		for (const tabSystem of TabManager.tabSystems.value) {
 			for (const otherTab of tabSystem.tabs.value) {
 				if (otherTab === tab) {
 					await tabSystem.selectTab(tab)
@@ -54,7 +95,7 @@ export class TabManager {
 	}
 
 	public static async openFile(path: string) {
-		for (const tabSystem of TabManager.tabSystems) {
+		for (const tabSystem of TabManager.tabSystems.value) {
 			for (const tab of tabSystem.tabs.value) {
 				if (tab instanceof FileTab && tab.is(path)) {
 					await tabSystem.selectTab(tab)
@@ -66,7 +107,7 @@ export class TabManager {
 			}
 		}
 
-		for (const TabType of TabManager.tabTypes) {
+		for (const TabType of TabTypes.fileTabTypes) {
 			if (TabType.canEdit(path)) {
 				await TabManager.openTab(new TabType(path))
 
@@ -76,7 +117,7 @@ export class TabManager {
 	}
 
 	public static getTabByType<T extends Tab>(tabType: { new (...args: any[]): T }): T | null {
-		for (const tabSystem of TabManager.tabSystems) {
+		for (const tabSystem of TabManager.tabSystems.value) {
 			for (const tab of tabSystem.tabs.value) {
 				if (tab instanceof tabType) {
 					return tab
@@ -88,12 +129,41 @@ export class TabManager {
 	}
 
 	public static getDefaultTabSystem(): TabSystem {
-		return TabManager.tabSystems[0]
+		return TabManager.tabSystems.value[0]
 	}
 
 	public static getFocusedTab(): Tab | null {
 		if (TabManager.focusedTabSystem.value === null) return null
 
 		return TabManager.focusedTabSystem.value.selectedTab.value
 	}
+
+	public static async save() {
+		if (!ProjectManager.currentProject) return
+
+		const state = {
+			tabSystems: await Promise.all(TabManager.tabSystems.value.map((tabSystem) => tabSystem.getRecoveryState())),
+			focusedTabSystem: TabManager.focusedTabSystem.value ? TabManager.focusedTabSystem.value.id : null,
+		}
+
+		await ProjectManager.currentProject.saveTabManagerState(state)
+	}
+
+	public static async recover() {
+		if (!ProjectManager.currentProject) return
+
+		const state = (await ProjectManager.currentProject.getTabManagerState()) as TabManagerRecoveryState | null
+
+		if (state === null) return
+
+		await TabManager.clear()
+
+		for (const tabSystemState of state.tabSystems) {
+			await TabManager.addTabSystem(tabSystemState)
+		}
+
+		TabManager.tabSystems.value = [...TabManager.tabSystems.value]
+
+		TabManager.focusedTabSystem.value = TabManager.tabSystems.value.find((tabSystem) => tabSystem.id === state.focusedTabSystem) ?? null
+	}
 }

src/components/TabSystem/TabSystem.ts

@@ -1,26 +1,44 @@
 import { v4 as uuid } from 'uuid'
-import { Tab } from './Tab'
+import { RecoveryState as TabRecoveryState, Tab, RecoveryState } from './Tab'
 import { Ref, shallowRef } from 'vue'
 import { Editor } from '@/components/Editor/Editor'
+import { Event } from '@/libs/event/Event'
+import { Disposable } from '@/libs/disposeable/Disposeable'
+import { TabTypes } from './TabTypes'
+import { FileTab } from './FileTab'
+
+export type TabSystemRecoveryState = { id: string; selectedTab: string | null; tabs: TabRecoveryState[] }
 
 export class TabSystem {
 	public id = uuid()
 	// Monaco editor freezes browser when made deep reactive, so instead we make it shallow reactive
 	public tabs: Ref<Tab[]> = shallowRef([])
 	public selectedTab: Ref<Tab | null> = shallowRef(null)
 
+	public savedState = new Event<void>()
+
+	private tabSaveListenters: Record<string, Disposable> = {}
+
 	public async addTab(tab: Tab, select = true) {
 		if (this.tabs.value.includes(tab)) {
 			if (select) await this.selectTab(tab)
 
+			await this.saveState()
+
 			return
 		}
 
+		this.tabSaveListenters[tab.id] = tab.savedState.on(() => {
+			this.saveState()
+		})
+
 		await tab.create()
 
 		this.tabs.value.push(tab)
 
 		if (select) await this.selectTab(tab)
+
+		await this.saveState()
 	}
 
 	public async selectTab(tab: Tab) {
@@ -33,12 +51,14 @@ export class TabSystem {
 		Editor.showTabs()
 
 		await tab.activate()
+
+		await this.saveState()
 	}
 
 	public async removeTab(tab: Tab) {
 		if (!this.tabs.value.includes(tab)) return
 
-		if (this.selectedTab.value === tab) await tab.deactivate()
+		if (this.selectedTab.value?.id === tab.id) await tab.deactivate()
 
 		this.selectedTab.value = null
 
@@ -50,6 +70,101 @@ export class TabSystem {
 
 		await tab.destroy()
 
+		this.tabSaveListenters[tab.id].dispose()
+		delete this.tabSaveListenters[tab.id]
+
 		if (this.tabs.value.length === 0) Editor.hideTabs()
+
+		await this.saveState()
+	}
+
+	public async clear() {
+		for (const tab of this.tabs.value) {
+			if (this.selectedTab.value?.id === tab.id) await tab.deactivate()
+
+			await tab.destroy()
+
+			this.tabSaveListenters[tab.id].dispose()
+			delete this.tabSaveListenters[tab.id]
+		}
+
+		this.tabs.value = []
+		this.selectedTab.value = null
+	}
+
+	public async saveState() {
+		this.savedState.dispatch()
+	}
+
+	public async getTabRecoveryState(tab: Tab): Promise<RecoveryState> {
+		if (tab instanceof FileTab)
+			return {
+				id: tab.id,
+				path: tab.path,
+				state: await tab.getState(),
+				type: tab.constructor.name,
+			}
+
+		return {
+			id: tab.id,
+			state: await tab.getState(),
+			type: tab.constructor.name,
+		}
+	}
+
+	public async getRecoveryState(): Promise<TabSystemRecoveryState> {
+		return {
+			id: this.id,
+			selectedTab: this.selectedTab.value ? this.selectedTab.value.id : null,
+			tabs: await Promise.all(this.tabs.value.map((tab) => this.getTabRecoveryState(tab))),
+		}
+	}
+
+	public async applyRecoverState(recoveryState: TabSystemRecoveryState) {
+		this.id = recoveryState.id
+
+		this.tabs.value = []
+
+		for (const tabRecoveryState of recoveryState.tabs) {
+			const tabType = TabTypes.getType(tabRecoveryState.type)
+
+			if (tabType === null) continue
+
+			if (tabType.prototype instanceof FileTab) {
+				const tab = new (tabType as typeof FileTab)(tabRecoveryState.path)
+
+				tab.id = tabRecoveryState.id
+
+				this.tabSaveListenters[tab.id] = tab.savedState.on(() => {
+					this.saveState()
+				})
+
+				await tab.create()
+				await tab.recover(tabRecoveryState.state)
+
+				this.tabs.value.push(tab)
+			} else {
+				const tab = new (tabType as typeof Tab)()
+
+				tab.id = tabRecoveryState.id
+
+				this.tabSaveListenters[tab.id] = tab.savedState.on(() => {
+					this.saveState()
+				})
+
+				await tab.create()
+				await tab.recover(tabRecoveryState.state)
+
+				this.tabs.value.push(tab)
+			}
+		}
+
+		this.tabs.value = [...this.tabs.value]
+
+		this.selectedTab.value = this.tabs.value.find((tab) => tab.id === recoveryState.selectedTab) ?? null
+
+		if (this.selectedTab.value === null) return
+
+		await this.selectedTab.value.activate()
 	}
 }