✨ Deploy AutoStep Feature

MarkChenYutian · MarkChenYutian · commit 47c00ec3a8ed · 2023-01-15T23:55:16.000-05:00
diff --git a/src/application.tsx b/src/application.tsx
@@ -84,13 +84,13 @@ export default class C0VMApplication extends React.Component<
                 {SettingMenuComponent}
                 {MainControlBarComponent}
                 <Row className="main-ui-framework">
-                    <Col xs={24} sm={24} lg={12} xxl={11}>
+                    <Col xs={24} sm={12} lg={12} xxl={11}>
                         <CodeEditor
                             app_state={this.state}
                             set_app_state={(ns: any) => this.setState(ns)}
                         />
                     </Col>
-                    <Col xs={24} sm={24} lg={12} xxl={13} className="io-area">
+                    <Col xs={24} sm={12} lg={12} xxl={13} className="io-area">
                         {StandardOutputComponent}
                         {DebugConsoleComponent}
                     </Col>
diff --git a/src/components/code-editor.tsx b/src/components/code-editor.tsx
@@ -204,6 +204,7 @@ export default class CodeEditor extends React.Component
                         { label: "BC0",value: "bc0"}
                     ]}
                     defaultValue={this.state.mode}
+                    onChange={(value) => {this.setState({mode: value as "c0" | "bc0"})}}
                 />
             );
         }
diff --git a/src/components/debug_console/graphical_component/stack_node.tsx b/src/components/debug_console/graphical_component/stack_node.tsx
@@ -26,7 +26,6 @@ export default class C0StackFrameNode extends React.Component<NodeProps<C0StackF
         for (let i = 0; i < data.frame.V.length; i ++) {
             const to_be_rendered = data.frame.V[i];
             if (to_be_rendered !== undefined && data.frame.P.varName[i] !== undefined) {
-                console.log(to_be_rendered.type, data.typedef);
                 contents.push(<p key={"s-val-name-" + i} className="right-aligned"><code>{Type2String(to_be_rendered.type, data.typedef)} {data.frame.P.varName[i]}</code></p>);
                 let render_content = undefined;
                 if (TypeUtil.isValueType(to_be_rendered)) {
diff --git a/src/components/main-control-bar.tsx b/src/components/main-control-bar.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
-import { Button, Space, Tooltip } from "antd";
+import { Button, Dropdown, MenuProps, Space, Tooltip } from "antd";
 
-import { faBoltLightning, faPlay, faScrewdriverWrench, faStepForward, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faBoltLightning, faClockRotateLeft, faPlay, faScrewdriverWrench, faStepForward, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import * as VM from "../vm_core/vm_interface";
@@ -30,11 +30,23 @@ function RequiresRecompile(){
     );
 }
 
+function convertC0Bpts(C0Editors: C0EditorTab[]): Set<string>{
+    const c0BreakPoint = new Set<string>();
+    for (let i = 0; i < C0Editors.length; i ++){
+    for (const currentEditor of C0Editors)
+        for (const bpts of currentEditor.breakpoints){
+            c0BreakPoint.add(`${currentEditor.title}@${bpts.line}`);
+        }
+    }
+    return c0BreakPoint;
+}
+
 function MainControlBarFC(props: MainControlProps & ContextValue) {
     const appState = props.application_state;
     const is_bc0_valid = props.application_state.BC0SourceCode.toUpperCase().startsWith("C0 C0 FF EE");
 
     const [abortSignal, abort, reset] = AbortRef();
+    const [execMode, setExecMode] = useState<"Run"|"AutoStep">("Run");
 
     const print_update = (str: string) => props.set_app_state((s) => {return {PrintoutValue: s.PrintoutValue + str}})
     const clear_print  = () => props.set_app_state({PrintoutValue: ""})
@@ -62,6 +74,42 @@ function MainControlBarFC(props: MainControlProps & ContextValue) {
         else props.set_app_state({C0Runtime: new_runtime});
     }
 
+    const autoStep_c0runtime = async() =>{
+        if (appState.contentChanged) {
+            RequiresRecompile();
+            return;
+        }
+        let init_state: undefined | C0VM_RT = undefined;
+        //let new_runtime, can_continue = undefined;
+
+        if (appState.C0Runtime === undefined) {
+            init_state = await VM.initialize(appState.BC0SourceCode, clear_print, appState.C0Editors, print_update, MEM_POOL_SIZE);
+            if (init_state === undefined) return;
+        } else {
+            init_state = appState.C0Runtime;
+        }
+
+        const c0BreakPoint = convertC0Bpts(appState.C0Editors);
+        const bc0BreakPointArr = Array.from(appState.BC0BreakPoints).map(bp => bp.line);
+        const bc0BreakPoints = new Set(bc0BreakPointArr);
+
+        if (init_state===undefined) return;
+
+        const autoStepFn = VM.autoStep(
+            init_state as C0VM_RT,
+            bc0BreakPoints,
+            c0BreakPoint,
+            abortSignal,
+            props.application_state.c0_only,
+            reset,
+            print_update,
+            s => props.set_app_state({C0Runtime: s}),
+            () => props.set_app_state({C0Running: false})
+        )
+
+        props.set_app_state({C0Running: true}, ()=>autoStepFn);
+    }
+
     const run_c0runtime = async () => {
         if (appState.contentChanged) {
             RequiresRecompile();
@@ -136,10 +184,33 @@ function MainControlBarFC(props: MainControlProps & ContextValue) {
             print_update,
         );
     };
-   
+
     const compilebtn_disabled = appState.C0Running || appState.C0Editors[0].content === "";
     const stepbtn_disabled    = (!is_bc0_valid) || appState.C0Running || appState.contentChanged;
     const runbtn_disabled     = (!is_bc0_valid) || appState.C0Running || appState.contentChanged;
+    const autostepbtn_disabled = (!is_bc0_valid) || appState.C0Running || appState.contentChanged;
+    const execbtn_disabled    = execMode === "Run" ? runbtn_disabled : autostepbtn_disabled;
+
+    function onKeyPressWrapper(e: KeyboardEvent): void{
+        const is_action_key = e.key==="a" || e.key ==='r' || e.key==="s";
+        if (autostepbtn_disabled && is_action_key && e.ctrlKey) {
+            if (!is_bc0_valid) globalThis.MSG_EMITTER.warn("Action Unavailable","Invalid BC0 code.");
+            else if(appState.C0Running) globalThis.MSG_EMITTER.warn("Action Unavailable","The program is currently running.");
+            else if(appState.contentChanged) RequiresRecompile();
+        }
+        else if (e.ctrlKey) onKeyPress(e.key);
+    }
+    
+    function onKeyPress(key: string): void{
+        if(key==='a') autoStep_c0runtime();
+        else if(key==='r') run_c0runtime();
+        else if(key==='s') step_c0runtime();
+    }
+   
+    useEffect(() =>{
+        document.addEventListener('keydown', onKeyPressWrapper)
+        return () => document.removeEventListener('keydown',onKeyPressWrapper);
+    })
 
     const CompileButton = 
         <Button
@@ -162,16 +233,15 @@ function MainControlBarFC(props: MainControlProps & ContextValue) {
             &nbsp;Step
         </Button>;
     
+    const AutoStepButton =
+        <div style={{fontSize: "1rem", color: "white"}}>
+            <FontAwesomeIcon icon={faClockRotateLeft}/>&nbsp;AutoStep
+        </div>;
+    
     const RunButton = 
-        <Button
-            icon={<FontAwesomeIcon icon={faPlay}/>}
-            size = "large"
-            type = "primary"
-            disabled={runbtn_disabled}
-            onClick={run_c0runtime}
-        >
-            &nbsp;Run
-        </Button>;
+        <div style={{fontSize: "1rem", color: "white"}}>
+            <FontAwesomeIcon icon={faPlay}/>&nbsp;Run
+        </div>;
     
     const AbortButton = 
         <Button
@@ -193,17 +263,66 @@ function MainControlBarFC(props: MainControlProps & ContextValue) {
             &nbsp;Restart
         </Button>;
     
+    const ExecBtnIcon = execMode === "Run" ? 
+        <FontAwesomeIcon icon={faPlay}/> : 
+        <FontAwesomeIcon icon={faClockRotateLeft}/>;
+
+    const ExecBtnFn = execMode === "Run" ? run_c0runtime : autoStep_c0runtime;
+    
+    const menuItems_ExecBtn: MenuProps["items"] = [
+        {
+            label: execMode === "Run" ? AutoStepButton : RunButton,
+            key: execMode === "Run" ? "AutoStep" : "Run"
+        }
+    ];
+
+    const menuItems_ChangeModeFn: MenuProps["onClick"] = (info) => {
+        if (info.key === "Run" || info.key === "AutoStep") {
+            setExecMode(info.key);
+        }
+    };
+
+    const MenuProp: MenuProps = {
+        style: {backgroundColor: props.themeColor},
+        items: menuItems_ExecBtn,
+        onClick: menuItems_ChangeModeFn
+    };
+
+    const ExecBtn = 
+        <Dropdown.Button
+            disabled={execbtn_disabled}
+            type="primary"
+            size="large"
+            icon={<FontAwesomeIcon icon={faAngleDown}/>}
+            onClick={ExecBtnFn}
+            menu={MenuProp}
+        >
+            {ExecBtnIcon}&nbsp;{execMode}
+        </Dropdown.Button>;
+    
     const display_CompileBtn = compilebtn_disabled ?
         <Tooltip placement="bottomRight" color={props.themeColor} title="Write code in editor to Compile">{CompileButton}</Tooltip>
          : CompileButton;
     
     const display_StepBtn = stepbtn_disabled ?
-        <Tooltip placement="bottomRight" color={props.themeColor} title="Compile the code before Step">{StepButton}</Tooltip>
+        <Tooltip
+            placement="bottomRight"
+            color={props.themeColor}
+            title="Compile the code / Abort the program before Step"
+        >
+            {StepButton}
+        </Tooltip>
          : StepButton;
-    
-    const display_RunBtn  = runbtn_disabled ?
-        <Tooltip placement="bottomRight" color={props.themeColor} title="Compile the code before Run">{RunButton}</Tooltip>
-         : RunButton;
+
+    const display_ExecBtn = execbtn_disabled ? 
+        <Tooltip
+            placement="bottomRight"
+            color={props.themeColor}
+            title={"Compile the code / Abort the program before " + execMode}
+        >
+            {ExecBtn}
+        </Tooltip>
+        : ExecBtn;
 
     return (
         <div className="main-control">
@@ -213,7 +332,7 @@ function MainControlBarFC(props: MainControlProps & ContextValue) {
             <Space size="middle">
                 {display_CompileBtn}
                 {display_StepBtn}
-                {display_RunBtn}
+                {display_ExecBtn}
                 {appState.C0Running ? AbortButton : RestartButton}
             </Space>
         </div>
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -1,6 +1,6 @@
 import { faAngleDown, faAngleRight, faGear } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Switch, Modal, Button } from "antd";
+import { Switch, Modal, Button, Select } from "antd";
 import React from "react";
 
 export default class SettingPopup extends React.Component<SettingMenuProps> {
@@ -19,14 +19,37 @@ export default class SettingPopup extends React.Component<SettingMenuProps> {
                 style={{maxHeight: "80vh", overflowY: "auto"}}
                 >
             <div className="settings-grid">
-                <p>Contract Check (<code>-d</code> Flag)</p> <Switch size="small" style={{justifySelf: "right"}} defaultChecked={this.props.state.CompilerFlags['d']} onChange={() => {
+                <p>Contract Check (<code>-d</code> Flag)</p>
+                <Switch
+                    size="small"
+                    style={{justifySelf: "right"}} 
+                    defaultChecked={this.props.state.CompilerFlags['d']}
+                    onChange={() => {
                     this.props.set_app_state((state) => {
                         return {CompilerFlags: {...state.CompilerFlags,
                                                 d: !state.CompilerFlags["d"]}
                                 }
                     });
                 }}/>
-                <p>Expose Bytecode</p> <Switch size="small" style={{justifySelf: "right"}} defaultChecked={!this.props.state.c0_only} onChange={() => {this.props.set_app_state((state) => {return {c0_only: !state.c0_only}})}}/>
+
+                <p>Expose Bytecode</p>
+                <Switch size="small" style={{justifySelf: "right"}} defaultChecked={!this.props.state.c0_only} onChange={() => {this.props.set_app_state((state) => {return {c0_only: !state.c0_only}})}}/>
+
+                <p>AutoStep Speed</p>
+                <Select
+                    size="small"
+                    defaultValue={globalThis.AUTOSTEP_INTERVAL}
+                    options={[
+                        {value: "Fast", label: "Fast (0.5 s)"},
+                        {value: "Slow", label: "Slow (1.5 s)"}
+                    ]}
+                    onChange={
+                        (value: string) => {
+                            if (value === "Fast" || value === "Slow") globalThis.AUTOSTEP_INTERVAL = value;
+                        }
+                    }
+                />
+
                 <AdvancedSetting {...this.props}/>
             </div>
         </Modal>
diff --git a/src/index.tsx b/src/index.tsx
@@ -11,7 +11,7 @@ import C0VMApplication from './application';
 import AntdEmitter from './utility/antd_emitter';
 
 // Global Variables
-global.C0VM_VERSION = "0.3.2-Beta";
+global.C0VM_VERSION = "0.3.3-Beta";
 
 globalThis.DEBUG = true;
 globalThis.DEBUG_DUMP_MEM = false;
@@ -35,6 +35,7 @@ globalThis.COMPILER_BACKEND_URL = "https://cs122.andrew.cmu.edu/visualc0/compile
 globalThis.C0_MAX_RECURSION = 999;
 globalThis.C0_TIME_SLICE = 500;
 globalThis.C0_ASYNC_INTERVAL = 1;
+globalThis.AUTOSTEP_INTERVAL = "Slow";
 
 if (globalThis.MSG_EMITTER === undefined) {
   globalThis.MSG_EMITTER = new AntdEmitter();
diff --git a/src/types/global-var.d.ts b/src/types/global-var.d.ts
@@ -21,6 +21,7 @@ declare global {
     var C0_TIME_SLICE: number;              // Number of steps the C0VM can go in a continuous time slice
     // (after this #step, the control flow will be handled back to UI/main event loop to keep page responsive)
     var C0_ASYNC_INTERVAL: number;          // Interval between each time slice will be at least these much ms
+    var AUTOSTEP_INTERVAL: "Fast" | "Slow"; // Interval between each step during AUTOSTEP, in ms
 
     // MS Clarity client API
     var clarity: undefined | ((s: "set", key: "VM Error", 
diff --git a/src/types/react-interface.d.ts b/src/types/react-interface.d.ts
@@ -32,23 +32,23 @@ interface C0VMApplicationProps {
 }
 
 interface C0VMApplicationState {
-    crashed        : boolean,         /* C0VM Application top-level error boundary */
-    c0_only        : boolean,         /* C0 only mode or not */
-    contentChanged : boolean,         /* If content has changed or not (requires re-compile) */
-    dbgFullScreen  : boolean,         /* If it is in full screen mode currently */
-    settingMenuOn  : boolean,         /* See if the setting menu is on or not */
+    crashed        : boolean,               /* C0VM Application top-level error boundary */
+    c0_only        : boolean,               /* C0 only mode or not */
+    contentChanged : boolean,               /* If content has changed or not (requires re-compile) */
+    dbgFullScreen  : boolean,               /* If it is in full screen mode currently */
+    settingMenuOn  : boolean,               /* See if the setting menu is on or not */
 
-    BC0SourceCode  : string,          /* The content of BC0 code editor */
-    BC0BreakPoints : Set<BreakPoint>, /* Breakpoints activated in BC0 code editor */
+    BC0SourceCode  : string,                /* The content of BC0 code editor */
+    BC0BreakPoints : Set<BreakPoint>,       /* Breakpoints activated in BC0 code editor */
 
-    C0Editors      : C0EditorTab[],   /* Code editor tab titles */
-    ActiveEditor   : number,          /* Currently activated tab index of C0Editor */
+    C0Editors      : C0EditorTab[],         /* Code editor tab titles */
+    ActiveEditor   : number,                /* Currently activated tab index of C0Editor */
 
-    PrintoutValue  : string,          /* The string to show in the stdout console */
+    PrintoutValue  : string,                /* The string to show in the stdout console */
 
-    C0Running      : boolean,         /* If the C0VM is running currently */
+    C0Running      : boolean,               /* If the C0VM is running currently */
     C0Runtime      : C0VM_RT | undefined,   /* Runtime of C0VM */
-    CompilerFlags  : Record<string, boolean>          /* Compiler Flags (-d) */
+    CompilerFlags  : Record<string, boolean>    /* Compiler Flags (-d) */
 };
 
 
diff --git a/src/vm_core/vm_interface.ts b/src/vm_core/vm_interface.ts

Original file line number	Diff line number	Diff line change
`@@ -204,6 +204,7 @@ export default class CodeEditor extends React.Component`
`204`	`204`	`{ label: "BC0",value: "bc0"}`
`205`	`205`	`]}`
`206`	`206`	`defaultValue={this.state.mode}`
	`207`	`+ onChange={(value) => {this.setState({mode: value as "c0" \| "bc0"})}}`
`207`	`208`	`/>`
`208`	`209`	`);`
`209`	`210`	`}`