Improvements and fixes to Error Tab

src/App.vue

@@ -20,7 +20,7 @@ import {useFileSystems} from "./Components/FileTree/Store/FileSystemsStore";
 import {CurrentGoldenLayout} from "./Components/GoldenLayout/GoldenLayoutUI";
 import WelcomeModal from "./Components/Modals/WelcomeModal/WelcomeModal.vue";
 import TextInputModal from "./Components/Modals/TextInputModal/TextInputModal.vue";
-import ErrorPanel from "./Components/GoldenLayout/ErrorPanel.vue";
+import ErrorPanel from "./Components/ErrorPanel/ErrorPanel.vue";
 
 const store = useAppStore();
 const fileSystemsStore = useFileSystems();

src/Components/ErrorPanel/ErrorPanel.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import "./ErrorPanelStyle.css";
+import {useErrorStore} from "./Store/ErrorStore";
+import {CurrentGoldenLayout} from "../GoldenLayout/GoldenLayoutUI";
+
+const errorStore = useErrorStore();
+
+const formatErrorMessage = (error: any) => {
+  const isCompileError = "getMessage__T" in error && error.toString().startsWith("io.kaitai.struct");
+  if (isCompileError) {
+    return error.getMessage__T();
+  }
+  const isCustomError = error.toString !== Object.prototype.toString && error.toString !== Error.prototype.toString;
+  if (isCustomError) {
+    return error.toString();
+  }
+
+  return "Parse error" + (error.name ? ` (${error.name})` : "") + `${error.message ? ": " + error.message : ""}\nCall stack: ${error.stack}`;
+};
+
+errorStore.$onAction(async ({name, store, args}) => {
+  switch (name) {
+    case "setError": {
+      const errMsg = formatErrorMessage(args[0]);
+      CurrentGoldenLayout.handleErrorMessage(errMsg);
+      break;
+    }
+    case "clearErrors": {
+      CurrentGoldenLayout.handleErrorMessage();
+      break;
+    }
+  }
+});
+
+</script>
+
+<template>
+</template>
+
+<style scoped>
+
+</style>

src/Stores/ErrorStore.ts → src/Components/ErrorPanel/Store/ErrorStore.ts

@@ -3,15 +3,20 @@ import {defineStore} from "pinia";
 
 export interface AppStore {
     error: any;
+    size: number;
 }
 
 export const useErrorStore = defineStore("ErrorStore", {
     state: (): AppStore => {
         return {
             error: undefined,
+            size: 100,
         };
     },
     actions: {
+        setErrorTabSize(newSize: number) {
+            this.size = newSize;
+        },
         setError(error: any) {
             this.error = error;
         },

src/Components/FileTree/ContextMenu/Actions/FileTreeCtxActionGenerateParser.ts

@@ -51,10 +51,11 @@ export const FileTreeCtxActionGenerateParser = (item: TreeNodeDisplay): MenuItem
     const generateParserForLanguage = async (language: SupportedLanguage) => {
         const yamlInfo = await mapFileTreeDisplayNodeToYaml(item);
         const compiled = await CompilerService.compileSingleTarget(yamlInfo, language.kaitaiLangCode, language.isDebug);
+        if(compiled.status === "FAILURE") return;
         const ideSettings = useIdeSettingsStore();
         ideSettings.generateOnlyMainFile
-            ? createOnlyMainFileTab(compiled, language)
-            : createTabsForAllGeneratedFiles(compiled, language);
+            ? createOnlyMainFileTab(compiled.result as CompilationTarget, language)
+            : createTabsForAllGeneratedFiles(compiled.result as CompilationTarget, language);
     };
 
     const generateParsersSubmenu: MenuChildren = KaitaiSupportedLanguages.map(language => ({

src/Components/GoldenLayout/ErrorPanelManager.ts

@@ -0,0 +1,60 @@
+import GoldenLayout from "golden-layout";
+import {GoldenLayoutUI} from "./GoldenLayoutUI";
+import {GL_ERRORS_TAB_ID, GL_MAIN_VIEW_ID} from "./GoldenLayoutUIConfig";
+import {useErrorStore} from "../ErrorPanel/Store/ErrorStore";
+
+export class ErrorPanelManager {
+    private errorTabContainer: GoldenLayout.Container;
+
+    constructor(private layout: GoldenLayoutUI) {
+        const self = this;
+        this.layout.goldenLayout.registerComponent(GL_ERRORS_TAB_ID, function (container: GoldenLayout.Container, componentState: any) {
+            self.errorTabContainer = container;
+        });
+    }
+
+    setMessage(errorMessage: string) {
+        if (!this.errorTabContainer) {
+            this.initErrorTabContainer();
+        }
+        this.prepareAndAssignMessageToErrorTab(errorMessage);
+    }
+
+    close() {
+        if (this.errorTabContainer) {
+            this.errorTabContainer.close();
+        }
+    }
+
+    private prepareAndAssignMessageToErrorTab(errorMessage: string) {
+        const errorMessageHtml = $("<div/>")
+            .text(errorMessage)
+            .html()
+            .replace(/\n|\\n/g, "<br>");
+        this.errorTabContainer.getElement()
+            .empty()
+            .append($("<div class='error-panel'>").html(errorMessageHtml));
+    }
+
+
+    private initErrorTabContainer() {
+        const errorComponentConfig = {type: "component", componentName: GL_ERRORS_TAB_ID, title: "Errors", isClosable: true};
+        this.layout.getLayoutNodeById(GL_MAIN_VIEW_ID).addChild(errorComponentConfig);
+        this.initContainerProps();
+    }
+
+
+    private initContainerProps() {
+        const store = useErrorStore();
+        this.errorTabContainer.setSize(0, store.size);
+        this.errorTabContainer.on("destroy", () => {
+            this.errorTabContainer = null;
+        });
+        this.errorTabContainer.on("resize", () => {
+            store.setErrorTabSize(this.errorTabContainer.getElement().outerHeight());
+        });
+        this.errorTabContainer.on("close", () => {
+            this.errorTabContainer = null;
+        });
+    }
+}

src/Components/GoldenLayout/GoldenLayoutUI.ts

@@ -15,8 +15,9 @@ import {
 import GoldenLayout from "golden-layout";
 import {MonacoEditorComponent, MonacoEditorOptions} from "./MonacoEditorComponent";
 import {editor} from "monaco-editor";
-import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
 import {MonacoEditorComponentKsyEditor} from "../KsyEditor/MonacoEditorComponentKsyEditor";
+import {ErrorPanelManager} from "./ErrorPanelManager";
+import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
 
 export class GoldenLayoutUI {
     dynCompId = 1;
@@ -27,7 +28,7 @@ export class GoldenLayoutUI {
 
     genCodeViewer: IStandaloneCodeEditor;
     genCodeDebugViewer: IStandaloneCodeEditor;
-    errorPanel: GoldenLayout.Container;
+    errorPanelManager: ErrorPanelManager;
 
     public init() {
         this.goldenLayout = new GoldenLayout(GoldenLayoutUIConfig);
@@ -41,6 +42,7 @@ export class GoldenLayoutUI {
         this.addExistingDiv(GL_FILE_TREE_ID);
         this.addExistingDiv(GL_CONVERTER_PANEL_ID);
         this.addExistingDiv(GL_INFO_PANEL_ID);
+        this.errorPanelManager = new ErrorPanelManager(this);
 
         this.goldenLayout.init();
     }
@@ -49,18 +51,6 @@ export class GoldenLayoutUI {
         return (<any>this.goldenLayout)._getAllContentItems().filter((x: any) => x.config.id === id || x.componentName === id)[0];
     }
 
-    addPanel() {
-        let componentName = `dynComp${this.dynCompId++}`;
-        return {
-            componentName,
-            donePromise: <Promise<GoldenLayout.Container>>new Promise((resolve, reject) => {
-                this.goldenLayout.registerComponent(componentName, function (container: GoldenLayout.Container, componentState: any) {
-                    resolve(container);
-                });
-            })
-        };
-    }
-
     addExistingDiv(name: string) {
         this.goldenLayout.registerComponent(name, function (container: GoldenLayout.Container, componentState: any) {
             const cont = $(`#${name}`).appendTo(container.getElement());
@@ -102,6 +92,14 @@ export class GoldenLayoutUI {
         this.genCodeDebugViewer.setValue(debugCode);
     }
 
+    handleErrorMessage(errorMessage?: string) {
+        if (!errorMessage) {
+            this.errorPanelManager.close();
+            return;
+        }
+        this.errorPanelManager.setMessage(errorMessage);
+    }
+
     addDynamicCodeTab(title: string, content: string, lang: string) {
         const options: MonacoEditorOptions = {
             lang: lang,

src/Components/GoldenLayout/GoldenLayoutUIConfig.ts

@@ -11,6 +11,7 @@ export const GL_HEX_VIEWER_ID = "hex-viewer";
 export const GL_FILE_TREE_ID = "file-tree";
 export const GL_INFO_PANEL_ID = "info-panel";
 export const GL_CONVERTER_PANEL_ID = "converter-panel";
+export const GL_ERRORS_TAB_ID = "errors-tab";
 
 
 export const GoldenLayoutUIConfig: GoldenLayout.Config = {

src/Components/KsyEditor/KsyEditorActions.ts

@@ -15,13 +15,15 @@ export const mainEditorOnChange = async (changedEvent: editor.IModelContentChang
     switchStoreIfChangeAppearedInKaitaiStore(yamlInfo);
 
     await useFileSystems().addFile(FILE_SYSTEM_TYPE_LOCAL, yamlInfo.filePath, editorContent);
-    await compileInternalDebugAndRelease(yamlInfo);
+    const compilationSuccess = await compileInternalDebugAndRelease(yamlInfo);
+    if (!compilationSuccess) return;
     parseAction();
 };
 
 export const mainEditorRecompile = async (editorr: editor.IStandaloneCodeEditor) => {
     const yamlInfo = yamlInfoWithCurrentStoreStateAndNewContent(editorr.getValue());
-    await compileInternalDebugAndRelease(yamlInfo);
+    const compilationSuccess = await compileInternalDebugAndRelease(yamlInfo);
+    if (!compilationSuccess) return;
     parseAction();
 };
 

src/Components/KsyEditor/MonacoEditorComponentKsyEditor.ts

@@ -16,7 +16,7 @@ export const MonacoEditorComponentKsyEditor = (container: GoldenLayout.Container
 
     newEditor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, (args) => {
         mainEditorRecompile(newEditor);
-    }, "compile");
+    });
 
     return newEditor;
 };