Added right click options to tabs bar

src/app/editor/tabs/tabs.component.ts

@@ -2,6 +2,8 @@ import {
     Component,
     ChangeDetectorRef,
     DestroyRef,
+    ElementRef,
+    ViewChild,
     inject
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -12,6 +14,8 @@ import { TabsService } from '../../common/services/editor/tabs/tabs.service';
 
 import { ServiceMessage } from '../../common/types/service-message.type';
 
+import { ButtonMap } from '../../common/constants/button.map';
+
 
 
 @Component({
@@ -34,7 +38,11 @@ export class TabsComponent {
     private tabsService: TabsService             = inject(TabsService);
     private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
 
+    @ViewChild('contextMenu') contextMenu!: ElementRef;
+    public showContextMenu: boolean = false;
+
     tabs: any[] = this.tabsService.tabs;
+    targetEvent!: any;
 
 
     constructor() {
@@ -74,23 +82,41 @@ export class TabsComponent {
     protected handleAction(event: any): void {
         let target = event.target;
 
-        if ( target.classList.contains("tab") ) {
-            this.tabsService.sendEditorsServiceAMessage(
-                "set-tab-to-editor",
-                event.srcElement.getAttribute("title")
-            );
+        if (ButtonMap.RIGHT === event.button) {
+            let menuElm = this.contextMenu.nativeElement;
+            let pageX = event.clientX;
+            let pageY = event.clientY;
 
-        } else if ( target.classList.contains("title") ) {
-            this.tabsService.sendEditorsServiceAMessage(
-                "set-tab-to-editor",
-                event.srcElement.parentElement.getAttribute("title")
-            );
-        } else if ( target.classList.contains("close-button") ) {
-            this.tabsService.closeTab(
-                event.srcElement.parentElement.getAttribute("title")
-            );
+            const origin = {
+                left: pageX + 5,
+                top: pageY - 5
+            };
+
+            menuElm.style.left   = `${origin.left}px`;
+            menuElm.style.top    = `${origin.top}px`;
+            this.showContextMenu = true;
+
+            this.targetEvent     = event;
+            return;
         }
 
+        this.showContextMenu = false;
+        this.processTargetEvent(event);
+    }
+
+    public hideContextMenu() {
+        this.showContextMenu = false;
+    }
+
+    public contextMenuClicked(event: any) {
+        this.showContextMenu = false;
+
+        const command = event.target.getAttribute("command");
+        const args    = event.target.getAttribute("args");
+
+        if (!command) return;
+
+        this[command]( (args) ? args : null );
     }
 
     public createTab(title: string, uuid: string, path: string): void {
@@ -117,4 +143,82 @@ export class TabsComponent {
         this.tabsService.move(event.previousIndex);
     }
 
+
+    private close(event: any): void {
+        this.tabsService.closeTab(
+            this.targetEvent.srcElement.parentElement.getAttribute("title")
+        );
+    }
+
+    private closeAll(event: any): void {
+        let elm      = this.targetEvent.srcElement.parentElement;
+        let startElm = elm;
+
+        // clear right
+        while (elm) {
+            elm = elm.nextSibling;
+            if (!elm || elm.nodeType == 8) continue;
+
+            this.tabsService.closeTab( elm.getAttribute("title") );
+        }
+
+        // clear left
+        elm = startElm;
+        while (elm) {
+            elm = elm.previousSibling;
+            if (!elm || elm.nodeType == 8) continue;
+
+            this.tabsService.closeTab( elm.getAttribute("title") );
+        }
+
+        // clear initial target
+        elm = startElm;
+        this.tabsService.closeTab( elm.getAttribute("title") );
+    }
+
+    private closeAllLeft(event: any): void {
+        let elm = this.targetEvent.srcElement.parentElement;
+
+        // clear left
+        while (elm) {
+            elm = elm.previousSibling;
+            if (!elm || elm.nodeType == 8) continue;
+
+            this.tabsService.closeTab( elm.getAttribute("title") );
+        }
+    }
+
+    private closeAllRight(event: any): void {
+        let elm = this.targetEvent.srcElement.parentElement;
+
+        // clear right
+        while (elm) {
+            elm = elm.nextSibling;
+            if (!elm || elm.nodeType == 8) continue;
+
+            this.tabsService.closeTab( elm.getAttribute("title") );
+        }
+    }
+
+    private processTargetEvent(event: any): void {
+        let target = event.target;
+
+        if ( target.classList.contains("tab") ) {
+            this.tabsService.sendEditorsServiceAMessage(
+                "set-tab-to-editor",
+                event.srcElement.getAttribute("title")
+            );
+
+        } else if ( target.classList.contains("title") ) {
+            this.tabsService.sendEditorsServiceAMessage(
+                "set-tab-to-editor",
+                event.srcElement.parentElement.getAttribute("title")
+            );
+        } else if ( target.classList.contains("close-button") ) {
+            this.tabsService.closeTab(
+                event.srcElement.parentElement.getAttribute("title")
+            );
+        }
+    }
+
 }