Skip to content

Commit

Permalink
Merge pull request #44 from MarkChenYutian/import-122-hw
Browse files Browse the repository at this point in the history 
Finally, we can merge this large PR into the main branch right before the start of semester.
  • Loading branch information
@MarkChenYutian
MarkChenYutian authored Aug 27, 2023
2 parents 71a1e4c + 862f62f commit 995b730
Show file tree
Hide file tree
Showing 54 changed files with 2,124 additions and 668 deletions.
1,038 changes: 939 additions & 99 deletions package-lock.json
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"react-dom": "^18.2.0",
"react-refresh": "^0.11.0",
"react-scripts": "^5.0.0",
"reactflow": "^11.8.1",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
Expand All @@ -82,7 +83,7 @@
},
"scripts": {
"start": "react-scripts start",
"build": "cross-env GENERATE_SOURCEMAP=true BUILD_PATH='./build' react-scripts build",
"build": "cross-env GENERATE_SOURCEMAP=false BUILD_PATH='./build' react-scripts build",
"test": "react-scripts test",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Expand Down Expand Up @@ -160,10 +161,9 @@
]
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.0.0",
"@types/he": "^1.1.2",
"cross-env": "^7.0.3",
"javascript-obfuscator": "^4.0.0",
"react-flow-renderer": "^10.3.8",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
"javascript-obfuscator": "^4.0.0"
}
}
8 changes: 8 additions & 0 deletions src/application.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -501,3 +501,11 @@ div.settings-grid > p {
border: none;
color: rgb(230, 107, 0);
}


/* Project Importer */

.app-project-import-progress-grid {
display: grid;
grid-template-columns: 6fr 4fr;
}
14 changes: 7 additions & 7 deletions src/application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,16 @@ export default class C0VMApplication extends React.Component<
if (this.state.crashed) {
return (
<AppCrashFallbackPage
state={this.state}
setState={(ns) => this.setState(ns)}
app_state={this.state}
set_app_state={(ns) => this.setState(ns)}
/>
);
}

const MainControlBarComponent = (
<MainControlBar
application_state ={this.state}
set_app_state ={(s) => this.setState(s)}
app_state ={this.state}
set_app_state ={(s) => this.setState(s)}
/>
);

Expand All @@ -74,8 +74,8 @@ export default class C0VMApplication extends React.Component<
/>
) : null;

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)}/>;
const TutorialPanelComponent = <TutorialEditor app_state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
const SettingMenuComponent = <SettingPopup app_state={this.state} set_app_state={(ns) => this.setState(ns)}/>;

if (this.state.dbgFullScreen) {
return <div className="page-framework">
Expand All @@ -97,7 +97,7 @@ export default class C0VMApplication extends React.Component<
<Col xs={24} sm={12} lg={12} xxl={11}>
<CodeEditor
app_state={this.state}
set_app_state={(ns: any) => this.setState(ns)}
set_app_state={(ns, cb) => this.setState(ns, cb)}
/>
</Col>
<Col xs={24} sm={12} lg={12} xxl={13} className="io-area">
Expand Down
8 changes: 4 additions & 4 deletions src/components/app_crash_fallback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export default class AppCrashFallbackPage extends React.Component<ApplicationCra
size="large"
type="primary"
onClick={() => {
this.props.setState({
this.props.set_app_state({
crashed: false,
C0Runtime: undefined,
ActiveEditor: this.props.state.C0Editors[0].key
ActiveEditor: this.props.app_state.C0Editors[0].key
});
}}
>
Expand All @@ -44,7 +44,7 @@ export default class AppCrashFallbackPage extends React.Component<ApplicationCra
JSON.stringify(
{
Version: globalThis.C0VM_VERSION,
SourceCode: this.props.state.C0Editors,
SourceCode: this.props.app_state.C0Editors,
ReactContext: this.context,
GlobalState: {
configuration: {
Expand Down Expand Up @@ -77,7 +77,7 @@ export default class AppCrashFallbackPage extends React.Component<ApplicationCra
size="large"
type="primary"
onClick={() => {
this.props.setState({crashed: false, dbgFullScreen: false, settingMenuOn: false, C0Runtime: undefined, PrintoutValue: ""});
this.props.set_app_state({crashed: false, dbgFullScreen: false, settingMenuOn: false, C0Runtime: undefined, PrintoutValue: ""});
}}
>
Reload Application
Expand Down
104 changes: 11 additions & 93 deletions src/components/code-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@ import React from "react";
import BC0Editor from "./code_editor/bc0-editor";
import C0EditorGroup from "./code_editor/c0-editor-group";

import { Segmented, Space, Tooltip, Upload } from "antd";
import { Segmented, Space, Tooltip } 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";

import type { RcFile } from 'antd/lib/upload';

export default class CodeEditor extends React.Component
<CodeEditorProps, CodeEditorState>
Expand All @@ -19,45 +18,6 @@ export default class CodeEditor extends React.Component
mode: "c0",
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) {
// check if there's already file with this name and append _num if exists
let try_suffix = 1;
let is_conflict = false;
const all_titles = this.props.app_state.C0Editors.map((tab) => tab.title);
const extension = tab.title.slice(tab.title.lastIndexOf("."));
const file_name = tab.title.slice(0, tab.title.lastIndexOf("."));
const new_key = Math.max(...this.props.app_state.C0Editors.map((tab) => tab.key)) + 1;

tab.key = new_key;

while (all_titles.includes(tab.title)) {
if (!all_titles.includes(file_name + '_' + try_suffix + extension)) {
tab.title = file_name + '_' + try_suffix + extension;
is_conflict = true;
break;
}
try_suffix++
}

if (is_conflict) {
globalThis.MSG_EMITTER.warn(
"Duplicated File Name",
`${file_name + extension} already exists. It is renamed to ${tab.title} to ensure all tabs have unique name.`
);
}

this.props.set_app_state((S) => {
const new_tabs = [...S.C0Editors, tab]
for (let i = 0; i < new_tabs.length; i ++) {
new_tabs[i].key = i;
}
return {C0Editors: new_tabs, ActiveEditor: new_tabs[0].key};
});
this.setState((S) => {return {C0_nextKey: S.C0_nextKey + 1}});
}

create_panel() {
Expand All @@ -69,50 +29,13 @@ export default class CodeEditor extends React.Component
breakpoints: [],
});
this.props.set_app_state({C0Editors: new_editors, ActiveEditor: this.state.C0_nextKey});
this.setState({C0_nextKey: this.state.C0_nextKey + 1});
}

// 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') || F.name.toLowerCase() === "readme.txt")) {
globalThis.MSG_EMITTER.warn(
"File is not Imported",
`${F.name} is not a c0/c1 file and is thus ignored.`
);
return Upload.LIST_IGNORE;
}

const reader = new FileReader();

reader.onload = e => {
if (reader.result === null) {
console.error("Failed to read input file")
return Upload.LIST_IGNORE;
}

const res = reader.result.toString();

this.push_populated_tab({
title: F.name,
key: -1,
content: res,
breakpoints: [],
})
};
reader.readAsText(F, "utf-8");

// Prevent upload traffic
return false;
this.setState({C0_nextKey: this.state.C0_nextKey + 1})
}

remove_panel(key: string) {
const key_tbr = parseInt(key);
remove_panel(key: number) {
let new_editors: C0EditorTab[] = [...this.props.app_state.C0Editors];
new_editors = new_editors.filter((value) => value.key !== key_tbr);
const new_activeTab = this.props.app_state.ActiveEditor === key_tbr ? new_editors[0].key : this.props.app_state.ActiveEditor;
new_editors = new_editors.filter((value) => value.key !== key);
const new_activeTab = this.props.app_state.ActiveEditor === key ? new_editors[0].key : this.props.app_state.ActiveEditor;
this.props.set_app_state({C0Editors: new_editors, ActiveEditor: new_activeTab});
}

Expand All @@ -128,15 +51,13 @@ export default class CodeEditor extends React.Component
return (
<div className="code-editor" data-lang={this.state.mode}>
<C0EditorGroup
currLine = {this.props.app_state.C0Runtime?.state.CurrC0RefLine}
appState = {this.props.app_state}
app_state = {this.props.app_state}
set_app_state = {(ns, cb) => this.props.set_app_state(ns, cb)}
selector = {selector}
set_app_state = {(ns) => this.props.set_app_state(ns)}
set_group_state = {(mode) => this.setState({mode: mode})}
newPanel = {() => this.create_panel()}
removePanel = {(key) => this.remove_panel(key)}
updateContent = {(key, s) => this.update_content(key, s)}
handle_import_folder = {(F: RcFile, FList: RcFile[]) => this.handle_import_folder(F, FList)}
set_content = {(key, s) => this.update_content(key, s)}
/>
</div>);
}
Expand All @@ -145,15 +66,13 @@ export default class CodeEditor extends React.Component
let content = undefined;
if (this.state.mode === "c0") {
content = <C0EditorGroup
currLine = {this.props.app_state.C0Runtime?.state.CurrC0RefLine}
appState = {this.props.app_state}
app_state = {this.props.app_state}
set_app_state = {(ns, cb) => this.props.set_app_state(ns, cb)}
selector = {selector}
set_app_state = {(ns) => this.props.set_app_state(ns)}
set_group_state = {(mode) => this.setState({mode: mode})}
newPanel = {() => this.create_panel()}
removePanel = {(key) => this.remove_panel(key)}
updateContent = {(key, s) => this.update_content(key, s)}
handle_import_folder={(F: RcFile, FList: RcFile[]) => this.handle_import_folder(F, FList)}
set_content = {(key, s) => this.update_content(key, s)}
/>;
} else {
const vm = this.props.app_state.C0Runtime;
Expand All @@ -163,7 +82,6 @@ export default class CodeEditor extends React.Component
{selector}
</div>
<BC0Editor
updateContent={s => this.props.set_app_state({BC0SourceCode: s})}
editorValue ={this.props.app_state.BC0SourceCode}
execLine ={vm === undefined ? 0 : vm.state.CurrLineNumber}
breakpointVal={this.props.app_state.BC0BreakPoints}
Expand Down
7 changes: 0 additions & 7 deletions src/components/code_editor/bc0-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,6 @@ export default class BC0Editor extends React.Component<BC0EditorProps>
return <ReactCodeMirror
theme={BC0LightTheme}
basicSetup={false}
onUpdate={(v) =>
{
if (v.docChanged) {
this.props.updateContent(v.state.doc.toString());
}
}
}
value = {this.props.editorValue}
extensions={[
breakpoint_extension,
Expand Down
Loading

0 comments on commit 995b730

Please sign in to comment.