Wiring in majority of source-view

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

@@ -20,6 +20,7 @@ export class EditorsService {
     editorSettings: typeof EditorSettings;
 
     activeEditor!: string;
+    srcView!: CodeViewComponent;
 
 
     constructor() {
@@ -37,6 +38,11 @@ export class EditorsService {
     }
 
     public set(uuid: string, component: CodeViewComponent) {
+        if (component.isSrcView) {
+            this.srcView = component;
+            return;
+        }
+
         this.editors.set(uuid, component);
 
         if (Object.keys(this.editors).length < 1) return;
@@ -64,7 +70,10 @@ export class EditorsService {
         let editor                 = editorComponent.editor;
 
         editorComponent.activeFile = file;
+        this.srcView.activeFile    = file;
+
         editor.setSession(file.session);
+        this.srcView.editor.setSession(file.session);
     }
 
     public getSession() {
@@ -75,13 +84,22 @@ export class EditorsService {
     }
 
     public setActiveEditor(activeEditor: string) {
-        this.activeEditor = activeEditor;
+        this.activeEditor       = activeEditor;
+        let editorComponent     = this.getActiveEditorComponent();
+        this.srcView.activeFile = editorComponent.editor.activeFile;
+
+        this.srcView.editor.setSession(editorComponent.editor.getSession());
     }
 
     public getActiveEditorComponent(): any {
         return this.get(this.activeEditor);
     }
 
+    public clearSrcView() {
+        this.srcView.newSession();
+        this.srcView.activeFile = null;
+    }
+
     protected getActiveEditor(): any {
         let editorComponent = this.get(this.activeEditor);
         let editor          = editorComponent.editor;

src/app/editor/code-view/view.base.ts

@@ -18,6 +18,7 @@ import { ServiceMessage } from '../../common/types/service-message.type';
 export class CodeViewBase {
     public uuid: string                            = uuid.v4();
     @Input() public isDefault: boolean             = false;
+    @Input() public isSrcView: boolean             = false;
     public leftSiblingUUID!: string;
     public rightSiblingUUID!: string;
 
@@ -150,16 +151,30 @@ export class CodeViewBase {
         window.main.toggleFullScreen();
     }
 
+    public setAsSrcView() {
+        this.editor.showLineNumbers = false;
+        this.editor.showGutter      = false;
+
+        this.editor.setReadOnly(true);
+        this.editor.setFontSize(2);
+        this.editor.setHighlightActiveLine(false);
+        this.editor.setHighlightGutterLine(false);
+        this.editor.setShowFoldWidgets(false);
+        this.editor.setShowPrintMargin(false);
+        this.editorElm.nativeElement.parentElement.classList.add("col-1");
+        this.editorElm.nativeElement.parentElement.classList.add("zero-margin-padding");
+    }
+
     public zoomIn() {
         this.editor.setFontSize(
             parseInt(this.editor.getFontSize()) + 1
-        )
+        );
     }
 
     public zoomOut() {
         this.editor.setFontSize(
             parseInt(this.editor.getFontSize()) - 1
-        )
+        );
     }
 
     public movelinesUp() {

src/app/editor/code-view/view.component.ts

@@ -26,7 +26,7 @@ import { ServiceMessage } from '../../common/types/service-message.type';
     templateUrl: './view.component.html',
     styleUrl: './view.component.css',
     host: {
-        'class': 'col'
+        'class': 'col zero-margin-padding'
     }
 })
 export class CodeViewComponent extends CodeViewBase {
@@ -34,24 +34,28 @@ export class CodeViewComponent extends CodeViewBase {
 
     constructor() {
         super();
-
-        this.editorsService.set(this.uuid, this);
     }
 
 
     private ngAfterViewInit(): void {
+        this.loadAce();
+    }
+
+    private loadAce(): void {
+        this.editorsService.set(this.uuid, this);
+
+        this.configAceAndBindToElement()
+        this.loadAceKeyBindings();
+        this.loadAceEventBindings();
+
         if (this.isDefault) {
             this.editorsService.setActiveEditor(this.uuid);
             this.addActiveStyling();
         }
 
-        this.loadAce();
-    }
-
-    private loadAce(): void {
-        this.configAceAndBindToElement()
-        this.loadAceKeyBindings();
-        this.loadAceEventBindings();
+        if (this.isSrcView) {
+            this.setAsSrcView();
+        }
     }
 
     private configAceAndBindToElement(): void {

src/app/editor/editors.component.html

@@ -4,6 +4,7 @@
         <code-view [isDefault]="true"></code-view>
         <hr class="col vr-pane-handle" pane-handle />
         <code-view></code-view>
+        <code-view [isSrcView]="true"></code-view>
     </div>
 
 <div>

src/app/editor/editors.component.ts

@@ -106,6 +106,8 @@ export class EditorsComponent {
 
                 editorComponent.activeFile = file;
                 editor.setSession(file.session);
+                this.editorsService.srcView.editor.setSession(file.session);
+                this.editorsService.srcView.activeFile = file;
             } else if (message.action === "close-tab") {
                 let file    = this.filesService.get(message.filePath);
                 let editors = this.editorsService.getEditorsAsArray();
@@ -114,6 +116,10 @@ export class EditorsComponent {
                     let editorComponent = editors[i];
                     if (editorComponent.editor.session == file.session) {
                         editorComponent.newSession();
+                        this.editorsService.srcView.editor.setSession(
+                            editorComponent.editor.getSession()
+                        );
+                        this.editorsService.srcView.activeFile = null;
                     }
                 }
 

src/assets/css/styles.css

@@ -57,6 +57,10 @@ body {
 
 
 
+.zero-margin-padding {
+    margin: 0px;
+    padding: 0px;
+}
 
 .hidden {
     display: none;