Skip to content

Commit de8cd96

Browse files
64json64json
committed
Fold visualization codes by default
1 parent 2b0bea9 commit de8cd96

File tree

8 files changed

+92
-53
lines changed

8 files changed

+92
-53
lines changed

‎package-lock.json

+10-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"query-string": "^6.2.0",
7676
"raw-loader": "^0.5.1",
7777
"react": "^16.3.1",
78-
"react-ace": "^6.1.4",
78+
"react-ace": "^6.3.2",
7979
"react-chartjs-2": "^2.7.0",
8080
"react-dom": "^16.3.1",
8181
"react-helmet": "^5.2.0",

‎src/frontend/components/CodeEditor/index.jsx

+4-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
11
import React from 'react';
2-
import AceEditor from 'react-ace';
3-
import 'brace/mode/plain_text';
4-
import 'brace/mode/markdown';
5-
import 'brace/mode/json';
6-
import 'brace/mode/javascript';
7-
import 'brace/mode/c_cpp';
8-
import 'brace/mode/java';
9-
import 'brace/theme/tomorrow_night_eighties';
10-
import 'brace/ext/searchbox';
112
import faTrashAlt from '@fortawesome/fontawesome-free-solid/faTrashAlt';
123
import faUser from '@fortawesome/fontawesome-free-solid/faUser';
134
import { classes, extension } from '/common/util';
145
import { actions } from '/reducers';
156
import { connect } from 'react-redux';
167
import { languages } from '/common/config';
17-
import { Button, Ellipsis } from '/components';
8+
import { Button, Ellipsis, FoldableAceEditor } from '/components';
189
import styles from './stylesheet.scss';
1910

2011
@connect(({ env, player }) => ({ env, player }), actions, null, { withRef: true })
@@ -38,7 +29,7 @@ class CodeEditor extends React.Component {
3829
render() {
3930
const { className, file, onClickDelete } = this.props;
4031
const { user } = this.props.env;
41-
const { lineIndicator } = this.props.player;
32+
const { lineIndicator, buildAt } = this.props.player;
4233

4334
if (!file) return null;
4435

@@ -51,7 +42,7 @@ class CodeEditor extends React.Component {
5142

5243
return (
5344
<div className={classes(styles.code_editor, className)}>
54-
<AceEditor
45+
<FoldableAceEditor
5546
className={styles.ace_editor}
5647
ref={this.aceEditorRef}
5748
mode={mode}
@@ -69,6 +60,7 @@ class CodeEditor extends React.Component {
6960
inFront: true,
7061
_key: lineIndicator.cursor,
7162
}] : []}
63+
foldAt={buildAt}
7264
value={file.content} />
7365
<div className={classes(styles.contributors_viewer, className)}>
7466
<span className={classes(styles.contributor, styles.label)}>Contributed by</span>

‎src/frontend/components/FoldableAceEditor/index.jsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import AceEditor from 'react-ace';
3+
import 'brace/mode/plain_text';
4+
import 'brace/mode/markdown';
5+
import 'brace/mode/json';
6+
import 'brace/mode/javascript';
7+
import 'brace/mode/c_cpp';
8+
import 'brace/mode/java';
9+
import 'brace/theme/tomorrow_night_eighties';
10+
import 'brace/ext/searchbox';
11+
12+
class FoldableAceEditor extends AceEditor {
13+
componentDidMount() {
14+
super.componentDidMount();
15+
16+
this.foldTracers();
17+
}
18+
19+
componentDidUpdate(prevProps, prevState, snapshot) {
20+
super.componentDidUpdate(prevProps, prevState, snapshot);
21+
22+
if (prevProps.foldAt !== this.props.foldAt) {
23+
this.foldTracers();
24+
}
25+
}
26+
27+
foldTracers() {
28+
const session = this.editor.getSession();
29+
for (let row = 0; row < session.getLength(); row++) {
30+
if (!/^\s*\/\/.+{\s*$/.test(session.getLine(row))) continue;
31+
const range = session.getFoldWidgetRange(row);
32+
if (range) {
33+
session.addFold('...', range);
34+
row = range.end.row;
35+
}
36+
}
37+
}
38+
}
39+
40+
export default FoldableAceEditor;

‎src/frontend/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export { default as CodeEditor } from './CodeEditor';
55
export { default as Divider } from './Divider';
66
export { default as Ellipsis } from './Ellipsis';
77
export { default as ExpandableListItem } from './ExpandableListItem';
8+
export { default as FoldableAceEditor } from './FoldableAceEditor';
89
export { default as Header } from './Header';
910
export { default as ListItem } from './ListItem';
1011
export { default as Navigator } from './Navigator';

‎src/frontend/files/skeletons/code.cpp

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
// import visualization libraries
1+
// import visualization libraries {
22
#include "algorithm-visualizer/Array2DTracer.h"
33
#include "algorithm-visualizer/LogTracer.h"
4+
// }
45

56
#include <vector>
67
#include <string>
78

8-
// define tracer variables
9+
// define tracer variables {
910
Array2DTracer array2dTracer = Array2DTracer("Grid");
1011
LogTracer logTracer = LogTracer("Console");
12+
// }
1113

1214
// define input variables
1315
std::vector<std::string> messages{
@@ -22,18 +24,18 @@ std::vector<std::string> messages{
2224
void highlight(int line) {
2325
if (line >= messages.size()) return;
2426
std::string message = messages[line];
25-
{
26-
logTracer.print(message);
27-
array2dTracer.selectRow(line, 0, message.size() - 1).delay();
28-
array2dTracer.deselectRow(line, 0, message.size() - 1);
29-
}
27+
// visualize {
28+
logTracer.print(message);
29+
array2dTracer.selectRow(line, 0, message.size() - 1).delay();
30+
array2dTracer.deselectRow(line, 0, message.size() - 1);
31+
// }
3032
highlight(line + 1);
3133
}
3234

3335
int main() {
34-
{
35-
array2dTracer.set(messages).delay();
36-
}
36+
// visualize {
37+
array2dTracer.set(messages).delay();
38+
// }
3739
highlight(0);
3840
return 0;
3941
}

‎src/frontend/files/skeletons/code.java

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
// import visualization libraries
1+
// import visualization libraries {
22
import org.algorithm_visualizer.*;
3+
// }
34

45
class Main {
5-
// define tracer variables
6+
// define tracer variables {
67
Array2DTracer array2dTracer = new Array2DTracer("Grid");
78
LogTracer logTracer = new LogTracer("Console");
9+
// }
810

911
// define input variables
1012
String[] messages = {
@@ -19,18 +21,18 @@ class Main {
1921
void highlight(int line) {
2022
if (line >= messages.length) return;
2123
String message = messages[line];
22-
{
23-
logTracer.print(message);
24-
array2dTracer.selectRow(line, 0, message.length() - 1).delay();
25-
array2dTracer.deselectRow(line, 0, message.length() - 1);
26-
}
24+
// visualize {
25+
logTracer.print(message);
26+
array2dTracer.selectRow(line, 0, message.length() - 1).delay();
27+
array2dTracer.deselectRow(line, 0, message.length() - 1);
28+
// }
2729
highlight(line + 1);
2830
}
2931

3032
Main() {
31-
{
32-
array2dTracer.set(messages).delay();
33-
}
33+
// visualize {
34+
array2dTracer.set(messages).delay();
35+
// }
3436
highlight(0);
3537
}
3638

‎src/frontend/files/skeletons/code.js

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
// import visualization libraries
1+
// import visualization libraries {
22
import { Array2DTracer, LogTracer } from 'algorithm-visualizer';
3+
// }
34

4-
// define tracer variables
5+
// define tracer variables {
56
const array2dTracer = new Array2DTracer('Grid');
67
const logTracer = new LogTracer('Console');
8+
// }
79

810
// define input variables
911
const messages = [
@@ -18,17 +20,17 @@ const messages = [
1820
function highlight(line) {
1921
if (line >= messages.length) return;
2022
const message = messages[line];
21-
{
22-
logTracer.print(message);
23-
array2dTracer.selectRow(line, 0, message.length - 1).delay();
24-
array2dTracer.deselectRow(line, 0, message.length - 1);
25-
}
23+
// visualize {
24+
logTracer.print(message);
25+
array2dTracer.selectRow(line, 0, message.length - 1).delay();
26+
array2dTracer.deselectRow(line, 0, message.length - 1);
27+
// }
2628
highlight(line + 1);
2729
}
2830

2931
(function main() {
30-
{
31-
array2dTracer.set(messages).delay();
32-
}
32+
// visualize {
33+
array2dTracer.set(messages).delay();
34+
// }
3335
highlight(0);
3436
})();

0 commit comments

Comments
 (0)