initial push

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

@@ -0,0 +1,23 @@
+/*
+.editor { 
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.editor { 
+    height: 100vh;
+    width: auto;
+}
+*/
+
+
+.editor { 
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+

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

@@ -0,0 +1,2 @@
+<div class="editor" #editor >
+</div>

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

@@ -0,0 +1,108 @@
+import { Component, ElementRef, ViewChild, Input } from '@angular/core';
+
+import { AceLanguageClient, LanguageClientConfig } from 'ace-linters/build/ace-language-client';
+
+// Import Ace and its modes/themes so that `ace` global is defined
+import * as ace from 'ace-builds/src-noconflict/ace';
+import 'ace-builds/src-noconflict/theme-one_dark';
+import { LanguageProvider } from "ace-linters";
+
+import { EditorSettings } from "../../common/configs/editor.config";
+
+import { EditorsService } from '../../common/services/editor/editors.service';
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'ace-editor',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './ace-editor.component.html',
+    styleUrl: './ace-editor.component.css',
+    host: {
+        'class': 'col',
+        '(click)': 'onClick($event)'
+    }
+})
+export class AceEditorComponent {
+
+    @Input() editorSettings!: typeof EditorSettings;
+    @ViewChild('editor') editorElm!: ElementRef;
+    editor!: any;
+    uuid!: string;
+    lspConfigData!: {};
+
+
+    constructor(private editorsService: EditorsService) {
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.loadAce();
+        this.loadLanguageProviders();
+    }
+
+    public loadAce(): void {
+        ace.config.set('basePath', this.editorSettings.BASE_PATH);
+
+        this.editor = ace.edit( this.editorElm.nativeElement );
+        this.editor.setOptions( this.editorSettings.CONFIG );
+//        this.editor.commands.addCommands( this.editorSettings.KEYBINDINGS );
+    }
+
+    protected onClick(event: any) {
+        let message        = new ServiceMessage();
+        message.action     = "set-editor";
+        message.message    = this.uuid;
+        message.uuid       = this.uuid;
+
+        this.editorsService.setData(message);
+    }
+
+    public loadLanguageProviders(): void {
+        let languageProvider = this.getLanguageProviderWithClientServers();
+//        let languageProvider = this.getLanguageProviderWithWebWorker();
+        languageProvider.registerEditor(this.editor);
+
+    }
+
+
+
+    public getLanguageProviderWithClientServers() {
+        let _initializationOptions = {};
+
+        if (Object.keys(this.lspConfigData).length !== 0) {
+//            _initializationOptions = this.lspConfigData[ this.editor.session.getMode() ]["initialization-options"];
+            _initializationOptions = this.lspConfigData[ "python" ]["initialization-options"];
+//            _initializationOptions = this.lspConfigData[ "java" ]["initialization-options"];
+//            _initializationOptions = this.lspConfigData[ "cpp" ]["initialization-options"];
+            console.log(_initializationOptions.toString());
+        }
+
+        let servers: LanguageClientConfig[] = [
+            {
+                module: () => import("ace-linters/build/language-client"),
+                modes: "python",
+//                modes: "java",
+//                modes: "cpp",
+                type: "socket",
+                socket: new WebSocket("ws://127.0.0.1:9999/python"),
+//                socket: new WebSocket("ws://127.0.0.1:9999/?name=clangd"),
+//                socket: new WebSocket("ws://127.0.0.1:9999/?name=jdtls"),
+//                socket: new WebSocket("ws://127.0.0.1:9999/?name=pylsp"),
+//                initializationOptions: _initializationOptions
+            }
+        ];
+
+        return AceLanguageClient.for(servers);
+    }
+ 
+ 
+    public getLanguageProviderWithWebWorker() {
+        let worker = new Worker(new URL('./webworker.js', import.meta.url));
+        return LanguageProvider.create(worker);
+    }
+
+}

src/app/editor/ace/webworker.ts

@@ -0,0 +1,165 @@
+import { ServiceManager } from "ace-linters/build/service-manager";
+
+let manager = new ServiceManager(self);
+
+manager.registerService("html", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/html-service"),
+    className: "HtmlService",
+    modes: "html"
+});
+
+manager.registerService("css", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/css-service"),
+    className: "CssService",
+    modes: "css"
+});
+
+manager.registerService("less", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/css-service"),
+    className: "CssService",
+    modes: "less"
+});
+
+manager.registerService("scss", {
+    features: {signatureHelp: false},
+    module: () => import("ace-linters/build/css-service"),
+    className: "CssService",
+    modes: "scss"
+});
+
+manager.registerService("json", {
+    features: {signatureHelp: false, documentHighlight: false},
+    module: () => import("ace-linters/build/json-service"),
+    className: "JsonService",
+    modes: "json",
+});
+
+manager.registerService("json5", {
+    features: {signatureHelp: false, documentHighlight: false},
+    module: () => import("ace-linters/build/json-service"),
+    className: "JsonService",
+    modes: "json5",
+});
+
+manager.registerService("typescript", {
+    module: () => import("ace-linters/build/typescript-service"),
+    className: "TypescriptService",
+    modes: "typescript|tsx|javascript|jsx",
+});
+
+manager.registerService("yaml", {
+    features: {signatureHelp: false, documentHighlight: false},
+    module: () => import("ace-linters/build/yaml-service"),
+    className: "YamlService",
+    modes: "yaml",
+});
+
+manager.registerService("xml", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: false, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-linters/build/xml-service"),
+    className: "XmlService",
+    modes: "xml",
+});
+
+manager.registerService("php", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: false, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-linters/build/php-service"),
+    className: "PhpService",
+    modes: "php"
+});
+
+manager.registerService("javascript", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: false, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-linters/build/javascript-service"),
+    className: "JavascriptService",
+    modes: "javascript",
+});
+
+
+manager.registerServer("pythonls", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "python",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:9999/?name=pylsp")
+});
+
+
+
+/*
+
+
+manager.registerService("clang", {
+    module: () => import("ace-clang-linter/build/ace-clang-linter"),
+    className: "AceClangLinter",
+    modes: "c_cpp",
+});
+
+manager.registerService("lua", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: true, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-lua-linter/build/ace-lua-linter"),
+    className: "AceLuaLinter",
+    modes: "lua",
+});
+
+manager.registerService("mysql", {
+    module: () => import("ace-sql-linter/build/mysql-service"),
+    className: "MySQLService",
+    modes: "mysql",
+});
+
+manager.registerService("zig", {
+    module: () => import("ace-zig-linter/build/ace-zig-linter"),
+    className: "AceZigLinter",
+    modes: "zig",
+});
+
+manager.registerService("python", {
+    features: {completion: false, completionResolve: false, diagnostics: true, format: true, hover: false, documentHighlight: false, signatureHelp: false},
+    module: () => import("ace-python-ruff-linter/build/python-service"),
+    className: "PythonService",
+    modes: "python",
+});
+
+manager.registerServer("svelte", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "html",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:3030/svelte")
+});
+
+manager.registerServer("astro", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "astro",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:3030/astro"),
+    initializationOptions: {
+        typescript: {
+            tsdk: "node_modules/typescript/lib", //path to typescript server
+        }
+    }
+});
+
+manager.registerServer("go", {
+    module: () => import("ace-linters/build/language-client"),
+    modes: "golang",
+    type: "socket",
+    socket: new WebSocket("ws://127.0.0.1:3030/go")
+});
+
+manager.registerService("dart", {
+    module: () => import("ace-dart-linter/build/ace-dart-linter"),
+    className: "AceDartLinter",
+    modes: "dart",
+});
+
+manager.registerService("golang", {
+    module: () => import("ace-go-linter/build/ace-go-linter"),
+    className: "AceGoLinter",
+    modes: "go",
+});
+
+
+*/

src/app/editor/editors.component.css

@@ -0,0 +1,3 @@
+.dropzone {
+    height: 80vh;
+}

src/app/editor/editors.component.html

@@ -0,0 +1,6 @@
+<div class="col">
+    <div class="row dropzone" #dropzone dropzone (fileDropped)="onFileDropped($event)">
+        <ng-container #containerRef>
+        </ng-container>
+    </div>
+<div>

src/app/editor/editors.component.ts

@@ -0,0 +1,150 @@
+import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import * as uuid from 'uuid';
+
+import { EditSession } from 'ace-builds';
+import { getModeForPath } from 'ace-builds/src-noconflict/ext-modelist';
+
+import { AceEditorComponent } from "./ace/ace-editor.component";
+import { EditorsService } from '../common/services/editor/editors.service';
+import { TabsService } from '../common/services/editor/tabs/tabs.service';
+
+import { DndDirective } from '../common/directives/dnd.directive';
+import { NewtonFile } from '../common/types/file.type';
+import { ServiceMessage } from '../common/types/service-message.type';
+import { EditorSettings } from "../common/configs/editor.config";
+
+
+
+@Component({
+    selector: 'editors',
+    standalone: true,
+    imports: [
+        DndDirective
+    ],
+    templateUrl: './editors.component.html',
+    styleUrl: './editors.component.css',
+    host: {
+        'class': 'row'
+    }
+})
+export class EditorsComponent {
+    private unsubscribe = new Subject<void>();
+
+    @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
+    editors: Map<string, ComponentRef<AceEditorComponent>>;
+    editorSettings: typeof EditorSettings;
+    files: Map<string, NewtonFile>;
+    activeEditor!: string;
+    lspConfigData!: any;
+
+
+    constructor(
+        private editorsService: EditorsService,
+        private tabsService: TabsService
+    ) {
+        this.editorSettings = EditorSettings;
+        this.editors = new Map<string, ComponentRef<AceEditorComponent>>();
+        this.files   = new Map<string, NewtonFile>();
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.editorsService.getData$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((data: ServiceMessage) => {
+            if (data.action === "set-editor")
+                this.activeEditor = data.uuid;
+        });
+
+        this.getLspConfigData().then((lspConfigData: string) => {
+            this.lspConfigData = JSON.parse(lspConfigData);
+
+            if (this.lspConfigData["message"]) {
+                console.log(
+                    "Warning: LSP this.lspConfigData is a 'message'",
+                    this.lspConfigData
+                );
+                this.lspConfigData = {};
+            }
+
+            let editor = this.createEditor();
+            this.activeEditor = editor.instance.uuid;
+            this.createEditor();
+        })
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+
+    private getLspConfigData(): Promise<string> {
+        return window.fs.getLspConfigData();
+    }
+
+    private createEditor() {
+        const component = this.containerRef.createComponent(AceEditorComponent);
+        component.instance.editorSettings = this.editorSettings;
+        component.instance.uuid = uuid.v4();
+        component.instance.lspConfigData = this.lspConfigData;
+        this.editors.set(component.instance.uuid, component)
+
+        return component;
+    }
+
+    protected onFileDropped(event: any) {
+        this.loadFilesList(event).then((session: EditSession | undefined | null) => {
+	        if ( !session ) return;
+
+	        let editor = this.editors.get(this.activeEditor)?.instance.editor;
+	        editor?.setSession(session);
+        });
+    }
+
+    private async loadFilesList(files: Array<NewtonFile>): Promise<EditSession | undefined | null> {
+	    for (let i = 0; i < files.length; i++) {
+		    const file = files[i];
+		    const path = window.fs.getPathForFile(file);
+
+		    if (!file || !path) continue;
+		    if ( this.files.get(path) ) continue;
+		    
+		    await this.addFile(path, file);
+		    this.addTab(file);
+	    }
+
+	    return files[ files.length - 1 ].session;
+    }
+
+    private async addFile(path: string, file: NewtonFile) {
+	    try {
+	        let pathParts = path.split("/");
+	        file.fname    = pathParts[ pathParts.length - 1 ];
+	        file.path     = path;
+	        file.hash     = btoa(file.path);
+	        let data      = await window.fs.getFileContents(file.path);
+            file.session  = new EditSession(data);
+
+            file.session.setMode(
+                getModeForPath( file.path ).mode
+            );
+
+            this.files.set(file.path, file);
+	    } catch (error) {
+		    console.log(
+		        `----  Error  ----\nPath: ${path}\nMessage: ${error}`
+		    );
+	    }
+    }
+
+    private async addTab(file: NewtonFile) {
+        let message     = new ServiceMessage();
+        message.action  = "create-tab";
+        message.message = file.fname;
+        message.uuid    = file.hash;
+
+        this.tabsService.setData(message);
+    }
+
+}

src/app/editor/tabs/tab/tab.component.css

@@ -0,0 +1,32 @@
+.tab,
+.title,
+.close-button {
+    color: rgba(255, 255, 255, 0.64);
+}
+
+
+/*
+.tab {
+    float: left;
+    clear: left;
+    display: flow;
+}
+*/
+
+
+.title {
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+.close-button {
+    background: rgba(116, 0, 0, 0.64);
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.64);
+    border-width: 1px;
+    border-radius: 0em 1em 0em 0em;
+}
+
+.close-button:hover {
+    background: rgba(256, 0, 0, 0.64);
+}

src/app/editor/tabs/tab/tab.component.html

@@ -0,0 +1,4 @@
+<span class="tab">
+    <span class="title">{{title}}</span>
+    <button class="close-button">X</button>
+</span>

src/app/editor/tabs/tab/tab.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+
+
+@Component({
+    selector: 'tab',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './tab.component.html',
+    styleUrl: './tab.component.css',
+    host: {
+        'class': 'col'
+//        'class': 'col tab'
+    }
+})
+export class TabComponent {
+
+    title: string;
+
+
+    constructor() {
+        this.title = "[NO TITLE]";
+    }
+
+    ngOnDestroy() {
+    }
+
+
+}

src/app/editor/tabs/tabs.component.html

@@ -0,0 +1,2 @@
+<ng-container #containerRef>
+</ng-container>

src/app/editor/tabs/tabs.component.ts

@@ -0,0 +1,57 @@
+import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+
+import { TabComponent } from './tab/tab.component';
+import { TabsService } from '../../common/services/editor/tabs/tabs.service';
+
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'tabs',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './tabs.component.html',
+    styleUrl: './tabs.component.css',
+    host: {
+        'class': 'tabs scroller'
+    }
+})
+export class TabsComponent {
+    private unsubscribe = new Subject<void>();
+
+    @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
+    tabs: Map<string, ComponentRef<TabComponent>>;
+    activeTab!: string;
+
+
+    constructor(private tabsService: TabsService) {
+        this.tabs = new Map<string, ComponentRef<TabComponent>>();
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.tabsService.getData$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((data: ServiceMessage) => {
+            if (data.action === "create-tab")
+                this.createTab(data.message, data.uuid);
+        });
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+
+    private createTab(title: string, uuid: string) {
+        const component = this.containerRef.createComponent(TabComponent);
+        component.instance.title = title;
+        this.tabs.set(uuid, component)
+
+        return component;
+    }
+
+}