Skip to content

Commit

Permalink
🎉 Major Update: Add C1 support to C0VM.ts, Add tutorial page (#33)
Browse files Browse the repository at this point in the history
* ✨ 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]>
  • Loading branch information
MarkChenYutian and chaosarium authored Jan 17, 2023
1 parent 47c00ec commit fc6eb51
Show file tree
Hide file tree
Showing 80 changed files with 1,762 additions and 1,632 deletions.
22 changes: 15 additions & 7 deletions src/application.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -156,10 +160,6 @@ i.editor-load-hint {
flex-grow: 1;
}

.error-output {
color: #f27b7b;
}

/* Buttons */

.base-btn {
Expand Down Expand Up @@ -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;
Expand All @@ -292,7 +292,7 @@ p.dbg-error-information {
color: #bbbbbb;
}

p.dbg-evaluate-field-name {
.dbg-evaluate-field-name {
color: #006cae;
}

Expand Down Expand Up @@ -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;
}
Expand Down
12 changes: 11 additions & 1 deletion src/application.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: "",
Expand Down Expand Up @@ -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">
Expand All @@ -81,6 +90,7 @@ export default class C0VMApplication extends React.Component<

return (
<div className="page-framework">
{TutorialPanelComponent}
{SettingMenuComponent}
{MainControlBarComponent}
<Row className="main-ui-framework">
Expand Down
Binary file added src/assets/Tab_Names.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/tutorial_rename.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/tutorial_setbp.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/tutorial_sorttab.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 16 additions & 15 deletions src/components/code-editor.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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) {
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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){
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
{
Expand Down Expand Up @@ -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"),
Expand Down
File renamed without changes.
69 changes: 69 additions & 0 deletions src/components/code_editor/editable_tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React from "react";
import AutosizeInput from 'react-18-input-autosize';

export default 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>
);
}
}
}
Loading

0 comments on commit fc6eb51

Please sign in to comment.