itdominator/Newton-Editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
itdominator 2025-06-28 21:10:15 -05:00
parent d1dbb7efcc
commit c99013df04
9 changed files with 179 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

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

4
src/app/app.component.ts
View File

@ -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',

34
src/app/common/services/editor/editors.service.ts
View File

@ -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);

16
src/app/editor/editor-resize/editor-resize.component.css Normal file
View File

@ -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);
}

28
src/app/editor/editor-resize/editor-resize.component.html Normal file
View File

@ -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>

84
src/app/editor/editor-resize/editor-resize.component.ts Normal file
View File

@ -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();
}
}

17
src/app/editor/editors.component.css
View File

@ -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);
}

32
src/app/editor/editors.component.html
View File

@ -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>

105
src/app/editor/editors.component.ts
View File

@ -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;
}
}