Wiring tabs to update editor and handle closing of file view

src/app/common/services/editor/editors.service.ts

@@ -10,7 +10,10 @@ import { ServiceMessage } from '../../types/service-message.type';
 })
 export class EditorsService {
     private messageSubject: ReplaySubject<ServiceMessage> = new ReplaySubject<ServiceMessage>(1);
-    private activationSubject: ReplaySubject<string> = new ReplaySubject<string>(1);
+    private activationSubject: ReplaySubject<string>      = new ReplaySubject<string>(1);
+    private switchSessionSubject: ReplaySubject<string>   = new ReplaySubject<string>(1);
+    private closeTabSubject: ReplaySubject<string>        = new ReplaySubject<string>(1);
+
 
     constructor() {}
 
@@ -30,4 +33,19 @@ export class EditorsService {
         return this.activationSubject.asObservable();
     }
 
+    setTabToEditor(data: string): void {
+        this.switchSessionSubject.next(data);
+    }
+
+    loadTabToEditor$(): Observable<string> {
+        return this.switchSessionSubject.asObservable();
+    }
+
+    closeTab(data: string): void {
+        this.closeTabSubject.next(data);
+    }
+
+    closeTabRequested$(): Observable<string> {
+        return this.closeTabSubject.asObservable();
+    }
 }

src/app/common/types/service-message.type.ts

@@ -2,4 +2,5 @@ export class ServiceMessage {
     action: string  = "none";
     message: string = "";
     uuid!: string;
+    data: any;
 } 

src/app/editor/ace/ace-editor.component.ts

@@ -144,4 +144,11 @@ export class AceEditorComponent extends AceEditorBase {
         });
     }
 
+    public newBuffer() {
+        let buffer = ace.createEditSession([""]);
+        this.editor.setSession(buffer);
+        this.activeFile = null;
+
+    }
+
 }

src/app/editor/editors.component.ts

@@ -64,6 +64,34 @@ export class EditorsComponent {
         ).subscribe((uuid: string) => {
             this.activeEditor = uuid;
         });
+
+        this.editorsService.loadTabToEditor$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((path: string) => {
+            let file            = this.files.get(path);
+            let editorComponent = this.getActiveEditorComponent();
+            let editor          = editorComponent.editor;
+
+            editorComponent.activeFile = file;
+            editor.setSession(file.session);
+        });
+
+        this.editorsService.closeTabRequested$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((path: string) => {
+            let file    = this.files.get(path);
+            let editors = [...this.editors.values()];
+
+            for (let i = 0; i < editors.length; i++) {
+                let editorComponent = editors[i].instance;
+                if (editorComponent.editor.session == file.session) {
+                    editorComponent.newBuffer();
+                }
+            }
+
+            file.session.destroy();
+            this.files.delete(path);
+        });
     }
 
     loadMainSubscribers() {
@@ -205,6 +233,7 @@ export class EditorsComponent {
         message.action  = "create-tab";
         message.message = file.fname;
         message.uuid    = file.hash;
+        message.data    = file.path;
 
         this.tabsService.setData(message);
     }

src/app/editor/tabs/tab/tab.component.css

@@ -5,18 +5,14 @@
 }
 
 
-/*
-.tab {
-    float: left;
-    clear: left;
-    display: flow;
-}
-*/
-
-
 .title {
     margin-left: 2em;
     margin-right: 2em;
+    font-size: 4em;
+}
+
+.title:hover {
+    cursor: pointer;
 }
 
 .close-button {
@@ -24,7 +20,6 @@
     border-style: solid;
     border-color: rgba(0, 0, 0, 0.64);
     border-width: 1px;
-    border-radius: 0em 1em 0em 0em;
 }
 
 .close-button:hover {

src/app/editor/tabs/tab/tab.component.html

@@ -1,4 +1,4 @@
-<span class="tab">
-    <span class="title">{{title}}</span>
-    <button class="close-button">X</button>
+<span class="tab" title="{{path}}">
+    <span class="title" (mouseup)="setTabToEditor()">{{title}}</span>
+    <button class="close-button" (mouseup)="closeTab()">X</button>
 </span>

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 
+import { EditorsService } from '../../../common/services/editor/editors.service';
+
 
 
 @Component({
@@ -10,21 +12,31 @@ import { Component } from '@angular/core';
     templateUrl: './tab.component.html',
     styleUrl: './tab.component.css',
     host: {
-        'class': 'col'
-//        'class': 'col tab'
+        'class': ''
     }
 })
 export class TabComponent {
 
     title: string;
+    path: string;
+    ref: any;
 
 
-    constructor() {
+    constructor(
+        private editorsService: EditorsService,
+    ) {
         this.title = "[NO TITLE]";
     }
 
     ngOnDestroy() {
     }
 
+    setTabToEditor() {
+        this.editorsService.setTabToEditor(this.path);
+    }
 
+    closeTab() {
+        this.editorsService.closeTab(this.path);
+        this.ref.destroy();
+    }
 }

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

@@ -37,7 +37,7 @@ export class TabsComponent {
             takeUntil(this.unsubscribe)
         ).subscribe((data: ServiceMessage) => {
             if (data.action === "create-tab")
-                this.createTab(data.message, data.uuid);
+                this.createTab(data.message, data.uuid, data.data);
         });
     }
 
@@ -46,9 +46,12 @@ export class TabsComponent {
         this.unsubscribe.complete();
     }
 
-    private createTab(title: string, uuid: string) {
+    private createTab(title: string, uuid: string, path: string) {
         const component = this.containerRef.createComponent(TabComponent);
         component.instance.title = title;
+        component.instance.path  = path;
+        component.instance.ref   = component;
+
         this.tabs.set(uuid, component)
 
         return component;

src/assets/css/styles.css

@@ -40,9 +40,8 @@ body {
     display: flex;
     overflow: auto;
     float: left;
-    margin-right: 0.5em;
-
-    border-radius: 1em 1em 0em 0em;
+    margin-right: 2em;
+    font-size: 0.2em;
 
     border-top-style: solid;
     border-top-color: #ffffff64;