From ea134caf2bf98793396f725efb47b488f6a4419f Mon Sep 17 00:00:00 2001 From: itdominator <1itdominator@gmail.com> Date: Sat, 8 Nov 2025 16:07:15 -0600 Subject: [PATCH] Added tab highlighting and scroll into view logic --- src/app/editor/code-view/view.component.ts | 11 +++- src/app/editor/tabs/tabs.component.ts | 60 ++++++++++++++++++---- 2 files changed, 61 insertions(+), 10 deletions(-) diff --git a/src/app/editor/code-view/view.component.ts b/src/app/editor/code-view/view.component.ts index 7c16d09..4b601c5 100644 --- a/src/app/editor/code-view/view.component.ts +++ b/src/app/editor/code-view/view.component.ts @@ -158,6 +158,11 @@ export class CodeViewComponent extends CodeViewBase { this.lspManagerService.sendMessage(message); this.markdownPreviewService.sendMessage(message); + message = new ServiceMessage(); + message.action = "highlight-active-tab"; + message.filePath = this.activeFile?.path; + this.tabsService.sendMessage(message); + this.updateInfoBar(); }); @@ -226,7 +231,6 @@ export class CodeViewComponent extends CodeViewBase { message.action = "file-changed"; message.filePath = this.activeFile.path; this.tabsService.sendMessage(message); - }); this.editor.on("changeSession", (session) => { @@ -236,6 +240,11 @@ export class CodeViewComponent extends CodeViewBase { this.lspManagerService.sendMessage(message); + message = new ServiceMessage(); + message.action = "highlight-active-tab"; + message.filePath = this.activeFile?.path; + this.tabsService.sendMessage(message); + this.updateInfoBar(); }); } diff --git a/src/app/editor/tabs/tabs.component.ts b/src/app/editor/tabs/tabs.component.ts index 4150208..fa07f57 100644 --- a/src/app/editor/tabs/tabs.component.ts +++ b/src/app/editor/tabs/tabs.component.ts @@ -43,6 +43,7 @@ export class TabsComponent { tabs: any[] = this.tabsService.tabs; targetEvent!: any; + activeTab!: any; constructor() { @@ -54,7 +55,7 @@ export class TabsComponent { this.tabsService.getMessage$().pipe( takeUntilDestroyed(this.#destroyRef) ).subscribe((message: ServiceMessage) => { - let elm = document.querySelectorAll(`[title="${message.filePath}"]`)[1]; + let elm = document.querySelector(`[title="${message.filePath}"]`); switch ( message.action ) { case "create-tab": @@ -71,6 +72,42 @@ export class TabsComponent { case "file-saved": elm.classList.remove("file-deleted"); elm.classList.remove("file-changed"); + break; + case "highlight-active-tab": + console.log("\n\n") + console.log(message) + console.log(elm) + console.log(this.activeTab) + + if (!elm) { + if (this.activeTab) { + this.activeTab.classList.remove("active-tab") + this.activeTab = elm; + } + + break; + }; + + if (this.activeTab) { + if ( + this.activeTab.getAttribute("title") == elm.getAttribute("title") + ) { + break; + } + + this.activeTab.classList.remove("active-tab") + } + + this.activeTab = elm; + elm.classList.add("active-tab"); + elm.scrollIntoView( + { + behavior: "smooth", + block: "center", + inline: "center" + } + ); + break; default: break; @@ -208,16 +245,14 @@ export class TabsComponent { let target = event.target; if ( target.classList.contains("tab") ) { - this.tabsService.sendEditorsServiceAMessage( - "set-tab-to-editor", - event.srcElement.getAttribute("title") - ); + let fpath = event.srcElement.getAttribute("title") + this.tabsService.sendEditorsServiceAMessage("set-tab-to-editor", fpath); + // this.updateActiveTabHighlight(fpath); } else if ( target.classList.contains("title") ) { - this.tabsService.sendEditorsServiceAMessage( - "set-tab-to-editor", - event.srcElement.parentElement.getAttribute("title") - ); + let fpath = event.srcElement.parentElement.getAttribute("title") + this.tabsService.sendEditorsServiceAMessage("set-tab-to-editor", fpath); + // this.updateActiveTabHighlight(fpath); } else if ( target.classList.contains("close-button") ) { this.tabsService.closeTab( event.srcElement.parentElement.getAttribute("title") @@ -225,4 +260,11 @@ export class TabsComponent { } } + private updateActiveTabHighlight(fpath: string): void { + let message = new ServiceMessage(); + message.action = "highlight-active-tab"; + message.filePath = fpath; + this.tabsService.sendMessage(message); + } + } \ No newline at end of file