🎉 Major Update: Add C1 support to C0VM.ts, Add tutorial page (#33)

* ✨ Change UI and parser to support C1

* ✨ Support void* in C1 standard

* 🐛 Fix tag_ptr display in struct under graph debug mode, Fix behavior of type inference on void* in struct

* ✨ Support Function Pointer, but have problem in distinguish struct type and function type

* ✨ Extract function types from typedef, Support function pointer in debuggers

* fix folder import

* ✨ Add Tutorials page

* 🔥 Put debug statements into DEBUG branch

Co-authored-by: chaosarium <[email protected]>

Author: MarkChenYutian

src/application.css

@@ -63,6 +63,10 @@ body {
     margin-bottom: 0 !important;
 }
 
+.ant-tabs-nav-more {
+    padding-bottom: 0 !important;
+}
+
 .io-area {
     flex-grow: 1;
     padding-left: .5rem;
@@ -156,10 +160,6 @@ i.editor-load-hint {
     flex-grow: 1;
 }
 
-.error-output {
-    color: #f27b7b;
-}
-
 /* Buttons */
 
 .base-btn {
@@ -271,14 +271,14 @@ code {
 }
 
 .dbg-evaluate-tabular-btn {
-    margin-top: 0.3rem;
+    /* margin-top: 0.3rem; */
     margin-bottom: 0.3rem;
     vertical-align: top;
     display: inline-block;
 }
 
 .dbg-evaluate-tabular-content {
-    margin-top: 0.3rem;
+    /* margin-top: 0.3rem; */
     margin-bottom: 0.3rem;
     vertical-align: top;
     display: inline-block;
@@ -292,7 +292,7 @@ p.dbg-error-information {
     color: #bbbbbb;
 }
 
-p.dbg-evaluate-field-name {
+.dbg-evaluate-field-name {
     color: #006cae;
 }
 
@@ -434,6 +434,14 @@ div.dbg-node-base:hover {
     background-color: #c0c0c00F;
 }
 
+.stdout-info {
+    color: #0287da;
+}
+
+.stdout-error {
+    color: #f27b7b;
+}
+
 .right-aligned {
     text-align: right;
 }

src/application.tsx

@@ -8,18 +8,26 @@ import CodeEditor from "./components/code-editor";
 import AppCrashFallbackPage from "./components/app_crash_fallback";
 import SettingPopup from "./components/settings";
 import { Row, Col } from "antd";
+import TutorialEditor from "./components/tutorial_editor";
 
 export default class C0VMApplication extends React.Component<
     C0VMApplicationProps,
     C0VMApplicationState
 > {
     constructor(props: C0VMApplicationProps) {
         super(props);
+
+        const hideTutorialPanel = localStorage.getItem("hideTutorial");
+        let showTutorial = false;
+        if (hideTutorialPanel === null) showTutorial = true;
+
         this.state = {
             crashed        : false,
             c0_only        : false,
             contentChanged : true,
             dbgFullScreen  : false,
+
+            tutorialOn     : showTutorial,
             settingMenuOn  : false,
 
             BC0SourceCode: "",
@@ -66,7 +74,8 @@ export default class C0VMApplication extends React.Component<
             />
         ) : null;
 
-        const SettingMenuComponent = <SettingPopup state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
+        const TutorialPanelComponent = <TutorialEditor state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
+        const SettingMenuComponent   = <SettingPopup state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
 
         if (this.state.dbgFullScreen) {
             return <div className="page-framework">
@@ -81,6 +90,7 @@ export default class C0VMApplication extends React.Component<
 
         return (
             <div className="page-framework">
+                {TutorialPanelComponent}
                 {SettingMenuComponent}
                 {MainControlBarComponent}
                 <Row className="main-ui-framework">

src/assets/Tab_Names.png

@@ -1,8 +1,8 @@
 import React from "react";
-import BC0Editor from "./bc0-editor";
-import C0EditorGroup from "./c0-editor-group";
+import BC0Editor from "./code_editor/bc0-editor";
+import C0EditorGroup from "./code_editor/c0-editor-group";
 
-import { Segmented, Tooltip, Upload } from "antd";
+import { Segmented, Space, Tooltip, Upload } from "antd";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCode, faLock } from "@fortawesome/free-solid-svg-icons";
 import { ConfigConsumer, ConfigConsumerProps } from "antd/es/config-provider";
@@ -20,6 +20,7 @@ export default class CodeEditor extends React.Component
             C0_nextKey : tabs.length === 0 ? 1 : Math.max(...tabs.map((tab) => tab.key)) + 1
         }
         this.handle_import_folder = this.handle_import_folder.bind(this);
+        if (DEBUG) console.debug("handle_import_folder in CodeEditor is", this.handle_import_folder)
     }
 
     push_populated_tab(tab: C0EditorTab) {
@@ -74,6 +75,8 @@ export default class CodeEditor extends React.Component
     // this function is called for every file in the uploaded directory, recursive.
     // the function is called by ant design component "Upload"
     handle_import_folder(F: RcFile, FList: RcFile[]) {
+        if (DEBUG) console.debug("received a folder upload, processing one of them")
+
         if (!(F.name.endsWith('.c0') || F.name.endsWith('.c1'))) {
             globalThis.MSG_EMITTER.warn(
                 "File is not Imported",
@@ -196,25 +199,23 @@ export default class CodeEditor extends React.Component
         }
 
         if (! this.props.app_state.c0_only){
-            selectorArr.push(
-                <Segmented
-                    key="language_selector"
-                    options={[
-                        { label: "C0", value: "c0" }, 
-                        { label: "BC0",value: "bc0"}
-                    ]}
-                    defaultValue={this.state.mode}
-                    onChange={(value) => {this.setState({mode: value as "c0" | "bc0"})}}
-                />
-            );
+            selectorArr.push(<Segmented
+                            key="language_selector"
+                            options={[
+                                { label: "Source", value: "c0" }, 
+                                { label: "ByteC",value: "bc0"}
+                            ]}
+                            defaultValue={this.state.mode}
+                            onChange={(value) => {this.setState({mode: value as "c0" | "bc0"})}}
+                        />);
         }
 
 
         let selector = undefined;
         if (selectorArr.length === 1){
             selector = selectorArr[0];
         } else if (selectorArr.length === 2) {
-            selector = <div>{selectorArr[0]} {selectorArr[1]}</div>
+            selector = <Space size="small">{selectorArr[0]} {selectorArr[1]}</Space>
         }
 
         if (this.props.app_state.c0_only) return this.render_c0(selector);

src/assets/tutorial_rename.gif

@@ -1,12 +1,11 @@
 import React from "react";
 import ReactCodeMirror, { basicSetup } from "@uiw/react-codemirror";
+import { language } from "@codemirror/language";
 
-import breakpointGutter from "./editor_extension/breakpoint_marker";
+import breakpointGutter    from "./editor_extension/breakpoint_marker";
 import execLineHighlighter from "./editor_extension/exec_position";
-import { BC0Language } from "./editor_extension/syntax/bc0";
-
-import { language } from "@codemirror/language";
-import BC0LightTheme from "./editor_extension/bc0editor_theme";
+import { BC0Language }     from "./editor_extension/syntax/bc0";
+import BC0LightTheme       from "./editor_extension/bc0editor_theme";
 
 
 export default class BC0Editor extends React.Component<BC0EditorProps>

src/assets/tutorial_setbp.gif

@@ -3,82 +3,14 @@ import { Tabs, TabsProps } from "antd";
 import C0Editor from "./c0-editor";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark, faAdd } from "@fortawesome/free-solid-svg-icons";
-import DraggableTabs from "./draggable_tabs";
-import type { RcFile } from 'antd/lib/upload';
 
+import DraggableTabs from "./draggable_tabs";
+import EditableTab from "./editable_tabs";
 
-import AutosizeInput from 'react-18-input-autosize';
+import type { RcFile } from 'antd/lib/upload';
 
 const { TabPane } = Tabs;
-const regex_valid_file_name = /^[0-9a-zA-Z_-]+\.c0$/;
-
-class EditableTab extends React.Component<EditableTabProps, EditableTabState> {
-
-    constructor(props: EditableTabProps) {
-        super(props);
-        this.state = {
-            title: props.title,
-            being_edited: false,
-            wip_title: "",
-        };
-        this.onChange = this.onChange.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.startEditing = this.startEditing.bind(this);
-        this.stopEditing = this.stopEditing.bind(this);    
-    }
-
-    componentDidUpdate(prevProps: EditableTabProps) {
-        if (this.props.title !== prevProps.title) {
-            this.setState({title: this.props.title})
-        }
-    }
-    
-    onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        e.preventDefault();
-        this.setState({wip_title: e.target.value});
-    }
-
-    onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-        if (e.key === 'Enter') {
-            this.stopEditing();
-        }
-    }
-
-    startEditing() {
-        this.setState({wip_title: this.state.title});
-        this.setState({being_edited: true});
-    }
-
-    async stopEditing() {
-        await this.props.updateName(this.props.editor_key, this.state.wip_title);
-        this.setState({
-            being_edited: false,
-            title: this.props.title,    // update display title
-            wip_title: this.state.title // resets title if updateName fails
-        });
-    }
-
-    render() {
-        if (!this.state.being_edited) {
-            return (
-                <span onDoubleClick={this.startEditing}>{this.state.title}</span>
-            );
-        } else {
-            return (
-                    <AutosizeInput 
-                        className="tab-name"
-                        type="text" 
-                        value={this.state.wip_title}
-                        onChange={this.onChange} 
-                        onKeyDown={this.onKeyDown}
-                        onBlur={this.stopEditing}
-                        autoFocus
-                    ></AutosizeInput>
-            );
-        }
-    }
-}
-
+const regex_valid_file_name = /^[0-9a-zA-Z_-]+\.c(0|1)$/;
 
 
 export default class C0EditorGroup extends React.Component <C0EditorGroupProps>
@@ -90,6 +22,7 @@ export default class C0EditorGroup extends React.Component <C0EditorGroupProps>
         this.on_change_key = this.on_change_key.bind(this);
         this.update_tab_order = this.update_tab_order.bind(this);
         this.set_brkpt_for_editor = this.set_brkpt_for_editor.bind(this);
+        if (DEBUG) console.debug("handle_import_folder prop in C0EditorGroup is", this.props.handle_import_folder);
     }
 
     set_tab_name(key: number, name: string){

src/assets/tutorial_sorttab.gif

@@ -1,13 +1,13 @@
 import React from "react";
 import ReactCodeMirror, { basicSetup } from "@uiw/react-codemirror";
+import { indentUnit } from "@codemirror/language";
 
 import { LoadDocumentPlugin } from "./editor_extension/blank_load";
-import { C0 } from "./editor_extension/syntax/c0";
-
-import { indentUnit } from "@codemirror/language";
+import { C0 }              from "./editor_extension/syntax/c0";
 import execLineHighlighter from "./editor_extension/exec_position";
-import breakpointGutter from "./editor_extension/breakpoint_marker";
-import C0LightTheme from "./editor_extension/c0editor_theme";
+import breakpointGutter    from "./editor_extension/breakpoint_marker";
+import C0LightTheme        from "./editor_extension/c0editor_theme";
+
 
 export default class C0Editor extends React.Component<C0EditorProps>
 {
@@ -42,7 +42,7 @@ export default class C0Editor extends React.Component<C0EditorProps>
                         value = {this.props.editorValue}
                         extensions={[
                             breakpoint_extension,
-                            LoadDocumentPlugin(".c0", this.props.updateName, this.props.handle_import_folder),
+                            LoadDocumentPlugin(".c0, .c1", this.props.updateName, this.props.handle_import_folder),
                             basicSetup(),
                             indentUnit.of("    "),
                             execLineHighlighter(this.props.execLine, "light"),