fix ngx monaco editor, add monaco config, control of events in router…

…, add file manager click, fix layout body class, fix monaco editor styles, new version,

angular.json

@@ -26,17 +26,7 @@
               {
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor",
-                "output": "assets/monaco-editor"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/monaco-editor/min-maps",
-                "output": "assets/min-maps"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/ngx-monaco-editor/assets/monaco",
-                "output": "assets/monaco/"
+                "output": "assets/monaco-editor/"
               }
             ],
             "styles": [
@@ -56,8 +46,6 @@
               "node_modules/admin-lte/dist/js/demo.js",
               "node_modules/admin-lte/plugins/jquery-mousewheel/jquery.mousewheel.js",
               "node_modules/admin-lte/plugins/raphael/raphael.js",
-              "node_modules/admin-lte/plugins/jquery-mapael/jquery.mapael.js",
-              "node_modules/admin-lte/plugins/jquery-mapael/maps/usa_states.min.js",
               "node_modules/admin-lte/plugins/chart.js/Chart.js"
             ],
             "customWebpackConfig": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "thumder",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "TFG - THUMDER (THe UltiMate Dlx EmulatoR): emulador multiplataforma DLX con fines didácticos",
   "homepage": "https://github.com/nonodev96/THUMDER",
   "author": {
@@ -98,6 +98,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.15.3",
+    "@materia-ui/ngx-monaco-editor": "5.1.0",
     "@popperjs/core": "2.9.1",
     "@tailwindcss/forms": "0.2.1",
     "admin-lte": "3.0.5",
@@ -107,7 +108,6 @@
     "devextreme-angular": "21.1.4",
     "jquery": "3.6.0",
     "monaco-editor": "0.25.2",
-    "ngx-monaco-editor": "9.0.0",
     "pixi.js": "6.0.4",
     "rxjs": "6.6.6",
     "string-to-argv": "1.0.0",

src/app/_layouts/admin/admin.component.ts

@@ -1,11 +1,15 @@
-import { Component, OnInit } from "@angular/core";
+import {Component, Inject, OnInit} from "@angular/core";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: "app-admin",
   templateUrl: "./admin.component.html",
 })
 export class AdminComponent implements OnInit {
-  constructor() {}
+  constructor(@Inject(DOCUMENT) private document: Document) {
+  }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.document.body.className = "dx-viewport";
+  }
 }

src/app/_layouts/auth/auth.component.ts

@@ -1,13 +1,15 @@
-import { Component, OnInit } from "@angular/core";
+import {Component, Inject, OnInit} from "@angular/core";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: "app-auth",
   templateUrl: "./auth.component.html",
 })
 export class AuthComponent implements OnInit {
-  constructor() {
+  constructor(@Inject(DOCUMENT) private document: Document) {
   }
 
   ngOnInit(): void {
+    this.document.body.className = "dx-viewport";
   }
 }

src/app/app.component.ts

@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
-import { ElectronService } from './__core/services';
-import { TranslateService } from '@ngx-translate/core';
-import { AppConfig } from '../environments/environment';
+import {Component, Inject} from '@angular/core';
+import {ElectronService} from './__core/services';
+import {TranslateService} from '@ngx-translate/core';
+import {AppConfig} from '../environments/environment';
+import {NavigationEnd, Router} from "@angular/router";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'app-root',
@@ -10,21 +12,30 @@ import { AppConfig } from '../environments/environment';
 })
 export class AppComponent {
   constructor(
+    @Inject(DOCUMENT) private document: Document,
     private electronService: ElectronService,
-    private translate: TranslateService
+    private translate: TranslateService,
+    private router: Router
   ) {
     this.translate.setDefaultLang('sp');
-    console.log('AppConfig', AppConfig);
-    console.log('this.translate', this.translate);
 
     if (electronService.isElectron) {
       console.log(process.env);
+      // window.$ = require('jquery');
       console.log('Run in electron');
       console.log('Electron ipcRenderer', this.electronService.ipcRenderer);
       console.log('NodeJS childProcess', this.electronService.childProcess);
     } else {
       console.log('Run in browser');
     }
+    // clean the route class when you travel and end de navigation
+    router.events.subscribe((route) => {
+      if (route instanceof NavigationEnd) {
+
+        this.document.body.className = ""
+
+      }
+    });
   }
 
   change(lang: string): void {

src/app/app.module.ts

@@ -17,8 +17,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AppComponent } from './app.component';
 import { UtilityService } from "./__core/utility.service";
 
-
-import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 
 
 // _layouts
@@ -57,192 +56,13 @@ import { AsideLeftComponent } from './components/aside/aside-left/aside-left.com
 import { AsideRightComponent } from './components/aside/aside-right/aside-right.component';
 
 import { DxFileManagerModule, DxListModule, DxPopupModule, DxToolbarModule } from "devextreme-angular";
+import MonacoConfig from "../monaco-config";
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
-export function myMonacoLoad() {
-
-  // Register a new language
-  (window as any).monaco.languages.register({id: 'thumderLanguage'});
-
-  // Register a tokens provider for the language
-  (window as any).monaco.languages.setMonarchTokensProvider('thumderLanguage', {
-    tokenizer: {
-      root: [
-        [/(r[0-9]{1,2}|R[0-9]{1,2})/, "custom-register.integer"],
-        [/(f[0-9]{1,2}|F[0-9]{1,2})/, "custom-register.float"],
-        [/(d0|d2|d4|d6|d8|d10|d12|d14|d16|d18|d20|d22|d24|d26|d28|d30|D0|D2|D4|D6|D8|D10|D12|D14|D16|D18|D20|D22|D24|D26|D28|D30)/, "custom-register.decimal"],
-        [/(pc|imar|ir|a|ahi|b|bhi|bta|alu|aluhi|fpsr|dmar|sdr|sdrhi|ldr|ldrhi|PC|IMAR|IR|A|AHI|B|BHI|BTA|ALU|ALUHI|FPSR|DMAR|SDR|SDRHI|LDR|LDRHI)/, "custom-register.words"],
-        [/\.(data|text|word|space)/, "custom-words"],
-        [/#[0-9]+/, "custom-numbers"],
-        [/^\S+:$/, "custom-function"],
-        [/(;|(^|\s)#\s).*$/, "custom-comment.line"],
-        [/\(.*\)/, "custom-iterator"],
-      ]
-    }
-  });
-
-// Define a new theme that contains only rules that match this language
-  (window as any).monaco.editor.defineTheme('thumderTheme', {
-    colors: undefined,
-    encodedTokensColors: [],
-    base: 'vs',
-    inherit: false,
-    rules: [
-      {foreground: 'a08000', token: 'custom-register.integer'},
-      {foreground: 'a08400', token: 'custom-register.float'},
-      {foreground: 'a08800', token: 'custom-register.decimal'},
-      // {foreground: '008800', token: 'custom-register.words' },
-      {foreground: '008800', token: 'custom-comment.line'},
-      {foreground: '990000', token: 'custom-function'},
-      {foreground: '686868', token: 'custom-numbers'},
-      {foreground: 'ffa500', token: 'custom-iterator'},
-      {foreground: 'ffa500', token: 'custom-words'},
-    ]
-  });
-
-  // Register a completion item provider for the new language
-  (window as any).monaco.languages.registerCompletionItemProvider('thumderLanguage', {
-    provideCompletionItems: (model, position, context, token) => {
-
-      const completionListItem: any[] = [
-        {
-          label: 'add',
-          kind: (window as any).monaco.languages.CompletionItemKind.Text,
-          insertText: 'add R0, R1, R2',
-          insertTextRules: (window as any).monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-          documentation: 'Suma R1 y R2 y lo guarda en R0'
-        },
-        {
-          label: 'function',
-          kind: (window as any).monaco.languages.CompletionItemKind.Function,
-          insertText: '${1:pattern}:',
-          insertTextRules: (window as any).monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-          documentation: ''
-        },
-        {
-          label: 'jump',
-          kind: (window as any).monaco.languages.CompletionItemKind.Keyword,
-          insertText: 'j ${1:condition}',
-          insertTextRules: (window as any).monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-        },
-        {
-          label: 'ifelse',
-          kind: (window as any).monaco.languages.CompletionItemKind.Snippet,
-          insertText: [
-            'if (${1:condition}) {',
-            '\t$0',
-            '} else {',
-            '\t',
-            '}'
-          ].join('\n'),
-          insertTextRules: (window as any).monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-          documentation: 'If-Else Statement'
-        }
-      ];
-
-      return {
-        suggestions: completionListItem
-      };
-    }
-  });
-
-  const legend = {
-    tokenTypes: [
-      'ADD',
-    ],
-    tokenModifiers: []
-  };
-
-  /** @type {(type: string)=>number} */
-  function getType(type) {
-    return legend.tokenTypes.indexOf(type);
-  }
-
-  /** @type {(modifier: string[]|string|null)=>number} */
-  function getModifier(modifiers) {
-    if (typeof modifiers === 'string') {
-      modifiers = [modifiers];
-    }
-    if (Array.isArray(modifiers)) {
-      let nModifiers = 0;
-      let nModifier = 0;
-      for (let modifier of modifiers) {
-        nModifier = legend.tokenModifiers.indexOf(modifier);
-        if (nModifier > -1) {
-          nModifiers |= (1 << nModifier) >>> 0;
-        }
-      }
-      return nModifiers;
-    } else {
-      return 0;
-    }
-  }
-
-  const tokenPattern = new RegExp('([a-zA-Z]+)((?:\\.[a-zA-Z]+)*)', 'g');
-
-  (window as any).monaco.languages.registerDocumentSemanticTokensProvider('plaintext', {
-    getLegend: () => {
-      return legend;
-    },
-    provideDocumentSemanticTokens: (model, lastResultId, token) => {
-      const lines = model.getLinesContent();
-
-      /** @type {number[]} */
-      const data = [];
-
-      let prevLine = 0;
-      let prevChar = 0;
-
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-
-        for (let match = null; match = tokenPattern.exec(line);) {
-          // translate token and modifiers to number representations
-          let type = getType(match[1]);
-          if (type === -1) {
-            continue;
-          }
-          let modifier = match[2].length
-            ? getModifier(match[2].split('.').slice(1))
-            : 0;
-
-          data.push(
-            // translate line to deltaLine
-            i - prevLine,
-            // for the same line, translate start to deltaStart
-            prevLine === i ? match.index - prevChar : match.index,
-            match[0].length,
-            type,
-            modifier
-          );
-
-          prevLine = i;
-          prevChar = match.index;
-        }
-      }
-      return {
-        data: new Uint32Array(data),
-        resultId: null
-      };
-    },
-    releaseDocumentSemanticTokens: (resultId) => {
-    }
-  });
-}
-
-const monacoConfig: NgxMonacoEditorConfig = {
-  defaultOptions: {
-    automaticLayout: true,
-    scrollBeyondLastLine: false,
-    glyphMargin: true
-  },
-  onMonacoLoad: myMonacoLoad
-};
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -286,7 +106,7 @@ const monacoConfig: NgxMonacoEditorConfig = {
         deps: [HttpClient]
       }
     }),
-    MonacoEditorModule.forRoot(monacoConfig),
+    MonacoEditorModule,
 
 
     DxToolbarModule,
@@ -295,7 +115,10 @@ const monacoConfig: NgxMonacoEditorConfig = {
     DxPopupModule,
     // use forRoot() in main app module only.
   ],
-  providers: [AppComponent, UtilityService],
+  providers: [
+    AppComponent,
+    UtilityService,
+  ],
   exports: [],
   bootstrap: [AppComponent]
 })

src/app/components/monaco-editor/monaco-editor.component.html

@@ -1,4 +1,4 @@
 <ngx-monaco-editor class="monaco-editor"
                    [options]="editorOptions_thumder"
                    [(ngModel)]="code_asm"
-                   (onInit)="onInitEditor($event)"></ngx-monaco-editor>
+                   (init)="onInitEditor($event)"></ngx-monaco-editor>