From c99013df041dc795f61b8228e06beca298daa943 Mon Sep 17 00:00:00 2001 From: itdominator <1itdominator@gmail.com> Date: Sat, 28 Jun 2025 21:10:15 -0500 Subject: [PATCH] Moving files modal tag; moving editor logic to service; pulling out resize logic --- src/app/app.component.html | 2 + src/app/app.component.ts | 4 +- .../common/services/editor/editors.service.ts | 34 ++++++ .../editor-resize/editor-resize.component.css | 16 +++ .../editor-resize.component.html | 28 +++++ .../editor-resize/editor-resize.component.ts | 84 ++++++++++++++ src/app/editor/editors.component.css | 17 --- src/app/editor/editors.component.html | 32 +----- src/app/editor/editors.component.ts | 105 ++---------------- 9 files changed, 179 insertions(+), 143 deletions(-) create mode 100644 src/app/editor/editor-resize/editor-resize.component.css create mode 100644 src/app/editor/editor-resize/editor-resize.component.html create mode 100644 src/app/editor/editor-resize/editor-resize.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 5e8b57a..b513172 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,4 +2,6 @@ + + \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index be2eaf1..8fa9bf9 100644 --- a/src/app/app.component.ts +++ b/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', diff --git a/src/app/common/services/editor/editors.service.ts b/src/app/common/services/editor/editors.service.ts index 579d408..ac6baa1 100644 --- a/src/app/common/services/editor/editors.service.ts +++ b/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>; 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); diff --git a/src/app/editor/editor-resize/editor-resize.component.css b/src/app/editor/editor-resize/editor-resize.component.css new file mode 100644 index 0000000..c682ff9 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/app/editor/editor-resize/editor-resize.component.html b/src/app/editor/editor-resize/editor-resize.component.html new file mode 100644 index 0000000..11fd385 --- /dev/null +++ b/src/app/editor/editor-resize/editor-resize.component.html @@ -0,0 +1,28 @@ +
+
+ 100% +
+
+ 75% +
+
+ 50% +
+
+ 25% +
+
+
+
+ 100% +
+
+ 75% +
+
+ 50% +
+
+ 25% +
+
diff --git a/src/app/editor/editor-resize/editor-resize.component.ts b/src/app/editor/editor-resize/editor-resize.component.ts new file mode 100644 index 0000000..aee3769 --- /dev/null +++ b/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(); + } + +} \ No newline at end of file diff --git a/src/app/editor/editors.component.css b/src/app/editor/editors.component.css index a35173e..7b00dfa 100644 --- a/src/app/editor/editors.component.css +++ b/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); -} diff --git a/src/app/editor/editors.component.html b/src/app/editor/editors.component.html index 5af5104..1ae7612 100644 --- a/src/app/editor/editors.component.html +++ b/src/app/editor/editors.component.html @@ -4,37 +4,7 @@ -
-
-
- 100% -
-
- 75% -
-
- 50% -
-
- 25% -
-
-
-
- 100% -
-
- 75% -
-
- 50% -
-
- 25% -
-
-
- +
\ No newline at end of file diff --git a/src/app/editor/editors.component.ts b/src/app/editor/editors.component.ts index ebd0f9e..309a1c3 100644 --- a/src/app/editor/editors.component.ts +++ b/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.activeEditor = message.editorUUID; - this.editorsService.get(this.activeEditor).addActiveStyling(); + this.editorsService.getActiveEditorComponent().removeActiveStyling(); + this.editorsService.setActiveEditor(message.editorUUID); + 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; - } - } \ No newline at end of file