Skip to content

Commit 995b730

Browse files
MarkChenYutianMarkChenYutian
authored
Merge pull request #44 from MarkChenYutian/import-122-hw
Finally, we can merge this large PR into the main branch right before the start of semester.
2 parents 71a1e4c + 862f62f commit 995b730

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+2124
-668
lines changed

‎package-lock.json‎

Lines changed: 939 additions & 99 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"react-dom": "^18.2.0",
6565
"react-refresh": "^0.11.0",
6666
"react-scripts": "^5.0.0",
67+
"reactflow": "^11.8.1",
6768
"resolve": "^1.20.0",
6869
"resolve-url-loader": "^4.0.0",
6970
"sass-loader": "^12.3.0",
@@ -82,7 +83,7 @@
8283
},
8384
"scripts": {
8485
"start": "react-scripts start",
85-
"build": "cross-env GENERATE_SOURCEMAP=true BUILD_PATH='./build' react-scripts build",
86+
"build": "cross-env GENERATE_SOURCEMAP=false BUILD_PATH='./build' react-scripts build",
8687
"test": "react-scripts test",
8788
"predeploy": "npm run build",
8889
"deploy": "gh-pages -d build"
@@ -160,10 +161,9 @@
160161
]
161162
},
162163
"devDependencies": {
164+
"@babel/plugin-proposal-private-property-in-object": "^7.0.0",
163165
"@types/he": "^1.1.2",
164166
"cross-env": "^7.0.3",
165-
"javascript-obfuscator": "^4.0.0",
166-
"react-flow-renderer": "^10.3.8",
167-
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
167+
"javascript-obfuscator": "^4.0.0"
168168
}
169169
}

‎src/application.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -501,3 +501,11 @@ div.settings-grid > p {
501501
border: none;
502502
color: rgb(230, 107, 0);
503503
}
504+
505+
506+
/* Project Importer */
507+
508+
.app-project-import-progress-grid {
509+
display: grid;
510+
grid-template-columns: 6fr 4fr;
511+
}

‎src/application.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,16 @@ export default class C0VMApplication extends React.Component<
4848
if (this.state.crashed) {
4949
return (
5050
<AppCrashFallbackPage
51-
state={this.state}
52-
setState={(ns) => this.setState(ns)}
51+
app_state={this.state}
52+
set_app_state={(ns) => this.setState(ns)}
5353
/>
5454
);
5555
}
5656

5757
const MainControlBarComponent = (
5858
<MainControlBar
59-
application_state ={this.state}
60-
set_app_state ={(s) => this.setState(s)}
59+
app_state ={this.state}
60+
set_app_state ={(s) => this.setState(s)}
6161
/>
6262
);
6363

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

77-
const TutorialPanelComponent = <TutorialEditor state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
78-
const SettingMenuComponent = <SettingPopup state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
77+
const TutorialPanelComponent = <TutorialEditor app_state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
78+
const SettingMenuComponent = <SettingPopup app_state={this.state} set_app_state={(ns) => this.setState(ns)}/>;
7979

8080
if (this.state.dbgFullScreen) {
8181
return <div className="page-framework">
@@ -97,7 +97,7 @@ export default class C0VMApplication extends React.Component<
9797
<Col xs={24} sm={12} lg={12} xxl={11}>
9898
<CodeEditor
9999
app_state={this.state}
100-
set_app_state={(ns: any) => this.setState(ns)}
100+
set_app_state={(ns, cb) => this.setState(ns, cb)}
101101
/>
102102
</Col>
103103
<Col xs={24} sm={12} lg={12} xxl={13} className="io-area">

‎src/components/app_crash_fallback.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ export default class AppCrashFallbackPage extends React.Component<ApplicationCra
2222
size="large"
2323
type="primary"
2424
onClick={() => {
25-
this.props.setState({
25+
this.props.set_app_state({
2626
crashed: false,
2727
C0Runtime: undefined,
28-
ActiveEditor: this.props.state.C0Editors[0].key
28+
ActiveEditor: this.props.app_state.C0Editors[0].key
2929
});
3030
}}
3131
>
@@ -44,7 +44,7 @@ export default class AppCrashFallbackPage extends React.Component<ApplicationCra
4444
JSON.stringify(
4545
{
4646
Version: globalThis.C0VM_VERSION,
47-
SourceCode: this.props.state.C0Editors,
47+
SourceCode: this.props.app_state.C0Editors,
4848
ReactContext: this.context,
4949
GlobalState: {
5050
configuration: {
@@ -77,7 +77,7 @@ export default class AppCrashFallbackPage extends React.Component<ApplicationCra
7777
size="large"
7878
type="primary"
7979
onClick={() => {
80-
this.props.setState({crashed: false, dbgFullScreen: false, settingMenuOn: false, C0Runtime: undefined, PrintoutValue: ""});
80+
this.props.set_app_state({crashed: false, dbgFullScreen: false, settingMenuOn: false, C0Runtime: undefined, PrintoutValue: ""});
8181
}}
8282
>
8383
Reload Application

‎src/components/code-editor.tsx‎

Lines changed: 11 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import React from "react";
22
import BC0Editor from "./code_editor/bc0-editor";
33
import C0EditorGroup from "./code_editor/c0-editor-group";
44

5-
import { Segmented, Space, Tooltip, Upload } from "antd";
5+
import { Segmented, Space, Tooltip } from "antd";
66
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
77
import { faCode, faLock } from "@fortawesome/free-solid-svg-icons";
88
import { ConfigConsumer, ConfigConsumerProps } from "antd/es/config-provider";
99

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

1211
export default class CodeEditor extends React.Component
1312
<CodeEditorProps, CodeEditorState>
@@ -19,45 +18,6 @@ export default class CodeEditor extends React.Component
1918
mode: "c0",
2019
C0_nextKey : tabs.length === 0 ? 1 : Math.max(...tabs.map((tab) => tab.key)) + 1
2120
}
22-
this.handle_import_folder = this.handle_import_folder.bind(this);
23-
if (DEBUG) console.debug("handle_import_folder in CodeEditor is", this.handle_import_folder)
24-
}
25-
26-
push_populated_tab(tab: C0EditorTab) {
27-
// check if there's already file with this name and append _num if exists
28-
let try_suffix = 1;
29-
let is_conflict = false;
30-
const all_titles = this.props.app_state.C0Editors.map((tab) => tab.title);
31-
const extension = tab.title.slice(tab.title.lastIndexOf("."));
32-
const file_name = tab.title.slice(0, tab.title.lastIndexOf("."));
33-
const new_key = Math.max(...this.props.app_state.C0Editors.map((tab) => tab.key)) + 1;
34-
35-
tab.key = new_key;
36-
37-
while (all_titles.includes(tab.title)) {
38-
if (!all_titles.includes(file_name + '_' + try_suffix + extension)) {
39-
tab.title = file_name + '_' + try_suffix + extension;
40-
is_conflict = true;
41-
break;
42-
}
43-
try_suffix++
44-
}
45-
46-
if (is_conflict) {
47-
globalThis.MSG_EMITTER.warn(
48-
"Duplicated File Name",
49-
`${file_name + extension} already exists. It is renamed to ${tab.title} to ensure all tabs have unique name.`
50-
);
51-
}
52-
53-
this.props.set_app_state((S) => {
54-
const new_tabs = [...S.C0Editors, tab]
55-
for (let i = 0; i < new_tabs.length; i ++) {
56-
new_tabs[i].key = i;
57-
}
58-
return {C0Editors: new_tabs, ActiveEditor: new_tabs[0].key};
59-
});
60-
this.setState((S) => {return {C0_nextKey: S.C0_nextKey + 1}});
6121
}
6222

6323
create_panel() {
@@ -69,50 +29,13 @@ export default class CodeEditor extends React.Component
6929
breakpoints: [],
7030
});
7131
this.props.set_app_state({C0Editors: new_editors, ActiveEditor: this.state.C0_nextKey});
72-
this.setState({C0_nextKey: this.state.C0_nextKey + 1});
73-
}
74-
75-
// this function is called for every file in the uploaded directory, recursive.
76-
// the function is called by ant design component "Upload"
77-
handle_import_folder(F: RcFile, FList: RcFile[]) {
78-
if (DEBUG) console.debug("received a folder upload, processing one of them")
79-
80-
if (!(F.name.endsWith('.c0') || F.name.endsWith('.c1') || F.name.toLowerCase() === "readme.txt")) {
81-
globalThis.MSG_EMITTER.warn(
82-
"File is not Imported",
83-
`${F.name} is not a c0/c1 file and is thus ignored.`
84-
);
85-
return Upload.LIST_IGNORE;
86-
}
87-
88-
const reader = new FileReader();
89-
90-
reader.onload = e => {
91-
if (reader.result === null) {
92-
console.error("Failed to read input file")
93-
return Upload.LIST_IGNORE;
94-
}
95-
96-
const res = reader.result.toString();
97-
98-
this.push_populated_tab({
99-
title: F.name,
100-
key: -1,
101-
content: res,
102-
breakpoints: [],
103-
})
104-
};
105-
reader.readAsText(F, "utf-8");
106-
107-
// Prevent upload traffic
108-
return false;
32+
this.setState({C0_nextKey: this.state.C0_nextKey + 1})
10933
}
11034

111-
remove_panel(key: string) {
112-
const key_tbr = parseInt(key);
35+
remove_panel(key: number) {
11336
let new_editors: C0EditorTab[] = [...this.props.app_state.C0Editors];
114-
new_editors = new_editors.filter((value) => value.key !== key_tbr);
115-
const new_activeTab = this.props.app_state.ActiveEditor === key_tbr ? new_editors[0].key : this.props.app_state.ActiveEditor;
37+
new_editors = new_editors.filter((value) => value.key !== key);
38+
const new_activeTab = this.props.app_state.ActiveEditor === key ? new_editors[0].key : this.props.app_state.ActiveEditor;
11639
this.props.set_app_state({C0Editors: new_editors, ActiveEditor: new_activeTab});
11740
}
11841

@@ -128,15 +51,13 @@ export default class CodeEditor extends React.Component
12851
return (
12952
<div className="code-editor" data-lang={this.state.mode}>
13053
<C0EditorGroup
131-
currLine = {this.props.app_state.C0Runtime?.state.CurrC0RefLine}
132-
appState = {this.props.app_state}
54+
app_state = {this.props.app_state}
55+
set_app_state = {(ns, cb) => this.props.set_app_state(ns, cb)}
13356
selector = {selector}
134-
set_app_state = {(ns) => this.props.set_app_state(ns)}
13557
set_group_state = {(mode) => this.setState({mode: mode})}
13658
newPanel = {() => this.create_panel()}
13759
removePanel = {(key) => this.remove_panel(key)}
138-
updateContent = {(key, s) => this.update_content(key, s)}
139-
handle_import_folder = {(F: RcFile, FList: RcFile[]) => this.handle_import_folder(F, FList)}
60+
set_content = {(key, s) => this.update_content(key, s)}
14061
/>
14162
</div>);
14263
}
@@ -145,15 +66,13 @@ export default class CodeEditor extends React.Component
14566
let content = undefined;
14667
if (this.state.mode === "c0") {
14768
content = <C0EditorGroup
148-
currLine = {this.props.app_state.C0Runtime?.state.CurrC0RefLine}
149-
appState = {this.props.app_state}
69+
app_state = {this.props.app_state}
70+
set_app_state = {(ns, cb) => this.props.set_app_state(ns, cb)}
15071
selector = {selector}
151-
set_app_state = {(ns) => this.props.set_app_state(ns)}
15272
set_group_state = {(mode) => this.setState({mode: mode})}
15373
newPanel = {() => this.create_panel()}
15474
removePanel = {(key) => this.remove_panel(key)}
155-
updateContent = {(key, s) => this.update_content(key, s)}
156-
handle_import_folder={(F: RcFile, FList: RcFile[]) => this.handle_import_folder(F, FList)}
75+
set_content = {(key, s) => this.update_content(key, s)}
15776
/>;
15877
} else {
15978
const vm = this.props.app_state.C0Runtime;
@@ -163,7 +82,6 @@ export default class CodeEditor extends React.Component
16382
{selector}
16483
</div>
16584
<BC0Editor
166-
updateContent={s => this.props.set_app_state({BC0SourceCode: s})}
16785
editorValue ={this.props.app_state.BC0SourceCode}
16886
execLine ={vm === undefined ? 0 : vm.state.CurrLineNumber}
16987
breakpointVal={this.props.app_state.BC0BreakPoints}

‎src/components/code_editor/bc0-editor.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,6 @@ export default class BC0Editor extends React.Component<BC0EditorProps>
2525
return <ReactCodeMirror
2626
theme={BC0LightTheme}
2727
basicSetup={false}
28-
onUpdate={(v) =>
29-
{
30-
if (v.docChanged) {
31-
this.props.updateContent(v.state.doc.toString());
32-
}
33-
}
34-
}
3528
value = {this.props.editorValue}
3629
extensions={[
3730
breakpoint_extension,

0 commit comments

Comments
 (0)