Moving files modal tag; moving editor logic to service; pulling out resize logic

src/app/app.component.html

@@ -2,4 +2,6 @@
     <info-bar></info-bar>
     <tabs></tabs>
     <editors></editors>
+
+    <files-modal></files-modal>
 </div>

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { InfoBarComponent } from './editor/info-bar/info-bar.component';
 import { TabsComponent } from './editor/tabs/tabs.component';
 import { EditorsComponent } from './editor/editors.component';
+import { FilesModalComponent } from "./editor/modals/files-modal.component";
 
 
 
@@ -11,7 +12,8 @@ import { EditorsComponent } from './editor/editors.component';
     imports: [
         InfoBarComponent,
         TabsComponent,
-        EditorsComponent
+        EditorsComponent,
+        FilesModalComponent
     ],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css',

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

@@ -6,6 +6,8 @@ import { NewtonEditorComponent } from "../../../editor/newton-editor/newton-edit
 import { ServiceMessage } from '../../types/service-message.type';
 import { EditorSettings } from "../../configs/editor.config";
 
+import { NewtonFile } from '../../types/file.type';
+
 
 
 @Injectable({
@@ -17,6 +19,8 @@ export class EditorsService {
     editors: Map<string, ComponentRef<NewtonEditorComponent>>;
     editorSettings: typeof EditorSettings;
 
+    activeEditor!: string;
+
 
     constructor() {
         this.editorSettings = EditorSettings;
@@ -36,6 +40,36 @@ export class EditorsService {
         this.editors.set(uuid, component);
     }
 
+    public async setSession(file: NewtonFile | undefined | null) {
+        if ( !file ) return;
+        let editorComponent        = this.getActiveEditorComponent();
+        let editor                 = editorComponent.editor;
+
+        editorComponent.activeFile = file;
+        editor.setSession(file.session);
+    }
+
+    public getSession() {
+        let editorComponent = this.get(this.activeEditor);
+        let editor          = editorComponent.editor;
+
+        return editor.getSession();
+    }
+
+    public setActiveEditor(activeEditor: string) {
+        this.activeEditor = activeEditor;
+    }
+
+    public getActiveEditorComponent(): any {
+        return this.get(this.activeEditor);
+    }
+
+    protected getActiveEditor(): any {
+        let editorComponent = this.get(this.activeEditor);
+        let editor          = editorComponent.editor;
+        return editor;
+    }
+
 
     public sendMessage(data: ServiceMessage): void {
         this.messageSubject.next(data);

src/app/editor/editor-resize/editor-resize.component.css

@@ -0,0 +1,16 @@
+.editor-size-button {
+    text-align: center;
+    width: 4em;
+    color: rgba(225, 225, 225, 0.64);
+    border-style: solid;
+    border-width: thin;
+    border-color: rgba(124, 124, 124, 0.64);
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+    float: left;
+}
+
+.editor-size-button:hover {
+    cursor: pointer;
+    border-color: rgba(0, 124, 0, 0.64);
+}

src/app/editor/editor-resize/editor-resize.component.html

@@ -0,0 +1,28 @@
+<div class="col editor-left-size" (click)="setEditorSize($event)">
+    <div class="editor-size-button size-12">
+        100%
+    </div>
+    <div class="editor-size-button size-8">
+        75%
+    </div>
+    <div class="editor-size-button size-6">
+        50%
+    </div>
+    <div class="editor-size-button size-2">
+        25%
+    </div>
+</div>
+<div class="col editor-right-size" (click)="setEditorSize($event)">
+    <div class="editor-size-button size-12">
+        100%
+    </div>
+    <div class="editor-size-button size-8">
+        75%
+    </div>
+    <div class="editor-size-button size-6">
+        50%
+    </div>
+    <div class="editor-size-button size-2">
+        25%
+    </div>
+</div>

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

@@ -0,0 +1,84 @@
+import { Component, inject } from '@angular/core';
+
+import { EditorsService } from '../../common/services/editor/editors.service';
+
+
+
+@Component({
+    selector: 'editor-resize',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './editor-resize.component.html',
+    styleUrl: './editor-resize.component.css',
+    host: {
+        'class': 'row'
+    }
+})
+export class EditorResizeComponent {
+
+    private editorsService: EditorsService = inject(EditorsService);
+
+
+    constructor() {
+    }
+
+
+    // Note: Only really works with 2 editors and very brittle logic.
+    protected setEditorSize(event: any) {
+        let lEditorComponent = null;
+        let rEditorComponent = null;
+        let lSize = 6;
+        let rSize = 6;
+
+        if (
+            event.target.parentElement.classList.contains("editor-left-size")
+        ) {
+            lSize   = parseInt(
+                event.target.classList[1].split("-")[1]
+            );
+            rSize   = 12 - lSize;
+
+            lEditorComponent = this.editorsService.getActiveEditorComponent();
+            if (lEditorComponent.leftSiblingUUID) {
+                rEditorComponent = lEditorComponent;
+                lEditorComponent = this.editorsService.get(lEditorComponent.leftSiblingUUID);
+            } else {
+                rEditorComponent = this.editorsService.get(lEditorComponent.rightSiblingUUID);
+            }
+        } else {
+            rSize   = parseInt(
+                event.target.classList[1].split("-")[1]
+            );
+            lSize   = 12 - rSize;
+            rEditorComponent = this.editorsService.getActiveEditorComponent();
+            if (rEditorComponent.rightSiblingUUID) {
+                lEditorComponent = rEditorComponent;
+                rEditorComponent = this.editorsService.get(rEditorComponent.rightSiblingUUID);
+            } else {
+                lEditorComponent = this.editorsService.get(rEditorComponent.leftSiblingUUID);
+            }
+        }
+
+        this.resizeAndFocus(lEditorComponent, lSize, rEditorComponent, rSize);
+    }
+
+    private resizeAndFocus(lEditorComponent: any, lSize: number, rEditorComponent: any, rSize: number) {
+        let lElm = lEditorComponent.editorElm.nativeElement.parentElement;
+        let rElm = rEditorComponent.editorElm.nativeElement.parentElement;
+
+        lElm.setAttribute(
+            'class',
+            (lSize == 0) ? "hidden" : `col col-${lSize}`
+        );
+
+        rElm.setAttribute(
+            'class',
+            (rSize == 0) ? "hidden" : `col col-${rSize}`
+        );
+
+        if (lSize == 0) rEditorComponent.editor.focus();
+        if (rSize == 0) lEditorComponent.editor.focus();
+    }
+
+}

src/app/editor/editors.component.css

@@ -1,20 +1,3 @@
 .dropzone {
     height: 90vh;
 }
-
-.editor-size-button {
-    text-align: center;
-    width: 4em;
-    color: rgba(225, 225, 225, 0.64);
-    border-style: solid;
-    border-width: thin;
-    border-color: rgba(124, 124, 124, 0.64);
-    margin-left: 0.2em;
-    margin-right: 0.2em;
-    float: left;
-}
-
-.editor-size-button:hover {
-    cursor: pointer;
-    border-color: rgba(0, 124, 0, 0.64);
-}

src/app/editor/editors.component.html

@@ -4,37 +4,7 @@
         <ng-container #containerRef>
         </ng-container>
     </div>
-    <div class="row">
-        <div class="col editor-left-size" (click)="setEditorSize($event)">
-            <div class="editor-size-button size-12">
-                100%
-            </div>
-            <div class="editor-size-button size-8">
-                75%
-            </div>
-            <div class="editor-size-button size-6">
-                50%
-            </div>
-            <div class="editor-size-button size-2">
-                25%
-            </div>
-        </div>
-        <div class="col editor-right-size" (click)="setEditorSize($event)">
-            <div class="editor-size-button size-12">
-                100%
-            </div>
-            <div class="editor-size-button size-8">
-                75%
-            </div>
-            <div class="editor-size-button size-6">
-                50%
-            </div>
-            <div class="editor-size-button size-2">
-                25%
-            </div>
-        </div>
-    </div>
 
-    <files-modal></files-modal>
+    <editor-resize></editor-resize>
 
 <div>

src/app/editor/editors.component.ts

@@ -2,7 +2,8 @@ import { Component, ViewChild, ViewContainerRef, inject } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 
 import { NewtonEditorComponent } from "./newton-editor/newton-editor.component";
-import { FilesModalComponent } from "./modals/files-modal.component";
+import { EditorResizeComponent } from "./editor-resize/editor-resize.component";
+
 import { EditorsService } from '../common/services/editor/editors.service';
 import { TabsService } from '../common/services/editor/tabs/tabs.service';
 import { FilesService } from '../common/services/editor/files.service';
@@ -18,7 +19,7 @@ import { ServiceMessage } from '../common/types/service-message.type';
     standalone: true,
     imports: [
         DndDirective,
-        FilesModalComponent
+        EditorResizeComponent
     ],
     templateUrl: './editors.component.html',
     styleUrl: './editors.component.css',
@@ -34,7 +35,6 @@ export class EditorsComponent {
     private filesService: FilesService     = inject(FilesService);
 
     @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
-    activeEditor!: string;
 
 
     constructor() {
@@ -48,7 +48,7 @@ export class EditorsComponent {
         let leftEditor                       = this.createEditor();
         let rightEditor                      = this.createEditor();
 
-        this.activeEditor                    = leftEditor.instance.uuid;
+        this.editorsService.setActiveEditor(leftEditor.instance.uuid);
         leftEditor.instance.isDefault        = true;
         leftEditor.instance.rightSiblingUUID = rightEditor.instance.uuid;
         rightEditor.instance.leftSiblingUUID = leftEditor.instance.uuid;
@@ -105,12 +105,12 @@ export class EditorsComponent {
                 editorComponent.newSession();
                 siblingComponent.editor.focus()
             } else if (message.action === "set-active-editor") {
-                this.editorsService.get(this.activeEditor).removeActiveStyling();
+                this.editorsService.getActiveEditorComponent().removeActiveStyling();
-                this.activeEditor = message.editorUUID;
+                this.editorsService.setActiveEditor(message.editorUUID);
-                this.editorsService.get(this.activeEditor).addActiveStyling();
+                this.editorsService.getActiveEditorComponent().addActiveStyling();
             } else if (message.action === "set-tab-to-editor") {
                 let file            = this.filesService.get(message.filePath);
-                let editorComponent = this.getActiveEditorComponent();
+                let editorComponent = this.editorsService.getActiveEditorComponent();
                 let editor          = editorComponent.editor;
 
                 editorComponent.activeFile = file;
@@ -146,7 +146,7 @@ export class EditorsComponent {
 
             let path = paths[ paths.length - 1 ];
             let file = this.filesService.get(path);
-            this.setSession(file);
+            this.editorsService.setSession(file);
         });
 
         window.fs.onChangedFile(async (path: string, data: string) => {
@@ -185,7 +185,7 @@ export class EditorsComponent {
         });
 
         window.main.onMenuActions(async (action: string) => {
-            let editorComponent = this.getActiveEditorComponent();
+            let editorComponent = this.editorsService.getActiveEditorComponent();
             let editor          = editorComponent.editor;
 
             switch ( action ) {
@@ -225,63 +225,6 @@ export class EditorsComponent {
         });
     }
 
-    // Note: Only really works with 2 editors and very brittle logic.
-    protected setEditorSize(event: any) {
-        let lEditorComponent = null;
-        let rEditorComponent = null;
-        let lSize = 6;
-        let rSize = 6;
-
-        if (
-            event.target.parentElement.classList.contains("editor-left-size")
-        ) {
-            lSize   = parseInt(
-                event.target.classList[1].split("-")[1]
-            );
-            rSize   = 12 - lSize;
-
-            lEditorComponent = this.editorsService.get(this.activeEditor);
-            if (lEditorComponent.leftSiblingUUID) {
-                rEditorComponent = lEditorComponent;
-                lEditorComponent = this.editorsService.get(lEditorComponent.leftSiblingUUID);
-            } else {
-                rEditorComponent = this.editorsService.get(lEditorComponent.rightSiblingUUID);
-            }
-        } else {
-            rSize   = parseInt(
-                event.target.classList[1].split("-")[1]
-            );
-            lSize   = 12 - rSize;
-            rEditorComponent = this.editorsService.get(this.activeEditor);
-            if (rEditorComponent.rightSiblingUUID) {
-                lEditorComponent = rEditorComponent;
-                rEditorComponent = this.editorsService.get(rEditorComponent.rightSiblingUUID);
-            } else {
-                lEditorComponent = this.editorsService.get(rEditorComponent.leftSiblingUUID);
-            }
-        }
-
-        this.resizeAndFocus(lEditorComponent, lSize, rEditorComponent, rSize);
-    }
-
-    private resizeAndFocus(lEditorComponent: any, lSize: number, rEditorComponent: any, rSize: number) {
-        let lElm = lEditorComponent.editorElm.nativeElement.parentElement;
-        let rElm = rEditorComponent.editorElm.nativeElement.parentElement;
-
-        lElm.setAttribute(
-            'class',
-            (lSize == 0) ? "hidden" : `col col-${lSize}`
-        );
-
-        rElm.setAttribute(
-            'class',
-            (rSize == 0) ? "hidden" : `col col-${rSize}`
-        );
-
-        if (lSize == 0) rEditorComponent.editor.focus();
-        if (rSize == 0) lEditorComponent.editor.focus();
-    }
-
     private createEditor() {
         const component = this.containerRef.createComponent(NewtonEditorComponent);
         component.instance.editorSettings = this.editorsService.editorSettings;
@@ -292,34 +235,8 @@ export class EditorsComponent {
 
     protected onFileDropped(files: any) {
         this.filesService.loadFilesList(files).then((file: NewtonFile | undefined | null) => {
-            this.setSession(file);
+            this.editorsService.setSession(file);
         });
     }
 
-    private async setSession(file: NewtonFile | undefined | null) {
-        if ( !file ) return;
-        let editorComponent        = this.getActiveEditorComponent();
-        let editor                 = editorComponent.editor;
-
-        editorComponent.activeFile = file;
-        editor.setSession(file.session);
-    }
-
-    private getSession() {
-        let editorComponent = this.editorsService.get(this.activeEditor);
-        let editor          = editorComponent.editor;
-
-        return editor.getSession();
-    }
-
-    private getActiveEditorComponent(): any {
-        return this.editorsService.get(this.activeEditor);
-    }
-
-    private getActiveEditor(): any {
-        let editorComponent = this.editorsService.get(this.activeEditor);
-        let editor          = editorComponent.editor;
-        return editor;
-    }
-
 }