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

Replacing resizor with pane directive; replacing container-ref with tags

Browse Source
This commit is contained in:
itdominator
2025-06-30 00:50:32 -05:00
parent c99013df04
commit de2bb27b6d
12 changed files with 145 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +0,0 @@
.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
View File

@@ -1,28 +0,0 @@
<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
View File

@@ -1,84 +0,0 @@
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();
}
}

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

@@ -1,3 +1,3 @@
.dropzone {
height: 90vh;
}
height: 92vh;
}

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

@@ -1,10 +1,9 @@
<div class="col">
<div class="row dropzone" #dropzone dropzone (fileDropped)="onFileDropped($event)">
<ng-container #containerRef>
</ng-container>
<newton-editor [isDefault]="true"></newton-editor>
<hr class="col vr-pane-handle" pane-handle />
<newton-editor></newton-editor>
</div>
<editor-resize></editor-resize>
<div>

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

@@ -1,14 +1,14 @@
import { Component, ViewChild, ViewContainerRef, inject } from '@angular/core';
import { Component, inject } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { NewtonEditorComponent } from "./newton-editor/newton-editor.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';
import { NewtonEditorComponent } from "./newton-editor/newton-editor.component";
import { DndDirective } from '../common/directives/dnd.directive';
import { PaneHandleDirective } from '../common/directives/pane-handle.directive';
import { NewtonFile } from '../common/types/file.type';
import { ServiceMessage } from '../common/types/service-message.type';
@@ -19,7 +19,8 @@ import { ServiceMessage } from '../common/types/service-message.type';
standalone: true,
imports: [
DndDirective,
EditorResizeComponent
PaneHandleDirective,
NewtonEditorComponent
],
templateUrl: './editors.component.html',
styleUrl: './editors.component.css',
@@ -34,8 +35,6 @@ export class EditorsComponent {
private tabsService: TabsService = inject(TabsService);
private filesService: FilesService = inject(FilesService);
@ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
constructor() {
}
@@ -44,14 +43,6 @@ export class EditorsComponent {
private ngAfterViewInit(): void {
this.loadSubscribers();
this.loadMainSubscribers();
let leftEditor = this.createEditor();
let rightEditor = this.createEditor();
this.editorsService.setActiveEditor(leftEditor.instance.uuid);
leftEditor.instance.isDefault = true;
leftEditor.instance.rightSiblingUUID = rightEditor.instance.uuid;
rightEditor.instance.leftSiblingUUID = leftEditor.instance.uuid;
}
private ngOnDestroy() {
@@ -120,7 +111,7 @@ export class EditorsComponent {
let editors = this.editorsService.getEditorsAsArray();
for (let i = 0; i < editors.length; i++) {
let editorComponent = editors[i].instance;
let editorComponent = editors[i];
if (editorComponent.editor.session == file.session) {
editorComponent.newSession();
}
@@ -225,14 +216,6 @@ export class EditorsComponent {
});
}
private createEditor() {
const component = this.containerRef.createComponent(NewtonEditorComponent);
component.instance.editorSettings = this.editorsService.editorSettings;
this.editorsService.set(component.instance.uuid, component)
return component;
}
protected onFileDropped(files: any) {
this.filesService.loadFilesList(files).then((file: NewtonFile | undefined | null) => {
this.editorsService.setSession(file);

4
src/app/editor/newton-editor/newton-editor.base.ts
View File

@@ -16,8 +16,8 @@ import { ServiceMessage } from '../../common/types/service-message.type';
@Directive()
export class NewtonEditorBase {
public uuid: string = uuid.v4();;
public isDefault: boolean = false;
public uuid: string = uuid.v4();
@Input() public isDefault: boolean = false;
public leftSiblingUUID!: string;
public rightSiblingUUID!: string;

7
src/app/editor/newton-editor/newton-editor.component.ts
View File

@@ -26,7 +26,7 @@ import { ServiceMessage } from '../../common/types/service-message.type';
templateUrl: './newton-editor.component.html',
styleUrl: './newton-editor.component.css',
host: {
'class': 'col col-6'
'class': 'col'
}
})
export class NewtonEditorComponent extends NewtonEditorBase {
@@ -34,11 +34,14 @@ export class NewtonEditorComponent extends NewtonEditorBase {
constructor() {
super();
this.editorsService.set(this.uuid, this);
}
private ngAfterViewInit(): void {
if (this.isDefault) {
this.editorsService.setActiveEditor(this.uuid);
this.addActiveStyling();
}
@@ -52,6 +55,8 @@ export class NewtonEditorComponent extends NewtonEditorBase {
}
private configAceAndBindToElement(): void {
this.editorSettings = this.editorsService.editorSettings;
ace.config.set('basePath', this.editorSettings.BASE_PATH);
this.editor = ace.edit( this.editorElm.nativeElement );