Fold visualization codes by default

Author: 64json

package-lock.json

@@ -75,7 +75,7 @@
     "query-string": "^6.2.0",
     "raw-loader": "^0.5.1",
     "react": "^16.3.1",
-    "react-ace": "^6.1.4",
+    "react-ace": "^6.3.2",
     "react-chartjs-2": "^2.7.0",
     "react-dom": "^16.3.1",
     "react-helmet": "^5.2.0",

package.json

@@ -1,20 +1,11 @@
 import React from 'react';
-import AceEditor from 'react-ace';
-import 'brace/mode/plain_text';
-import 'brace/mode/markdown';
-import 'brace/mode/json';
-import 'brace/mode/javascript';
-import 'brace/mode/c_cpp';
-import 'brace/mode/java';
-import 'brace/theme/tomorrow_night_eighties';
-import 'brace/ext/searchbox';
 import faTrashAlt from '@fortawesome/fontawesome-free-solid/faTrashAlt';
 import faUser from '@fortawesome/fontawesome-free-solid/faUser';
 import { classes, extension } from '/common/util';
 import { actions } from '/reducers';
 import { connect } from 'react-redux';
 import { languages } from '/common/config';
-import { Button, Ellipsis } from '/components';
+import { Button, Ellipsis, FoldableAceEditor } from '/components';
 import styles from './stylesheet.scss';
 
 @connect(({ env, player }) => ({ env, player }), actions, null, { withRef: true })
@@ -38,7 +29,7 @@ class CodeEditor extends React.Component {
   render() {
     const { className, file, onClickDelete } = this.props;
     const { user } = this.props.env;
-    const { lineIndicator } = this.props.player;
+    const { lineIndicator, buildAt } = this.props.player;
 
     if (!file) return null;
 
@@ -51,7 +42,7 @@ class CodeEditor extends React.Component {
 
     return (
       <div className={classes(styles.code_editor, className)}>
-        <AceEditor
+        <FoldableAceEditor
           className={styles.ace_editor}
           ref={this.aceEditorRef}
           mode={mode}
@@ -69,6 +60,7 @@ class CodeEditor extends React.Component {
             inFront: true,
             _key: lineIndicator.cursor,
           }] : []}
+          foldAt={buildAt}
           value={file.content} />
         <div className={classes(styles.contributors_viewer, className)}>
           <span className={classes(styles.contributor, styles.label)}>Contributed by</span>

src/frontend/components/CodeEditor/index.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import AceEditor from 'react-ace';
+import 'brace/mode/plain_text';
+import 'brace/mode/markdown';
+import 'brace/mode/json';
+import 'brace/mode/javascript';
+import 'brace/mode/c_cpp';
+import 'brace/mode/java';
+import 'brace/theme/tomorrow_night_eighties';
+import 'brace/ext/searchbox';
+
+class FoldableAceEditor extends AceEditor {
+  componentDidMount() {
+    super.componentDidMount();
+
+    this.foldTracers();
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    super.componentDidUpdate(prevProps, prevState, snapshot);
+
+    if (prevProps.foldAt !== this.props.foldAt) {
+      this.foldTracers();
+    }
+  }
+
+  foldTracers() {
+    const session = this.editor.getSession();
+    for (let row = 0; row < session.getLength(); row++) {
+      if (!/^\s*\/\/.+{\s*$/.test(session.getLine(row))) continue;
+      const range = session.getFoldWidgetRange(row);
+      if (range) {
+        session.addFold('...', range);
+        row = range.end.row;
+      }
+    }
+  }
+}
+
+export default FoldableAceEditor;

src/frontend/components/FoldableAceEditor/index.jsx

@@ -5,6 +5,7 @@ export { default as CodeEditor } from './CodeEditor';
 export { default as Divider } from './Divider';
 export { default as Ellipsis } from './Ellipsis';
 export { default as ExpandableListItem } from './ExpandableListItem';
+export { default as FoldableAceEditor } from './FoldableAceEditor';
 export { default as Header } from './Header';
 export { default as ListItem } from './ListItem';
 export { default as Navigator } from './Navigator';

src/frontend/components/index.js

@@ -1,13 +1,15 @@
-// import visualization libraries
+// import visualization libraries {
 #include "algorithm-visualizer/Array2DTracer.h"
 #include "algorithm-visualizer/LogTracer.h"
+// }
 
 #include <vector>
 #include <string>
 
-// define tracer variables
+// define tracer variables {
 Array2DTracer array2dTracer = Array2DTracer("Grid");
 LogTracer logTracer = LogTracer("Console");
+// }
 
 // define input variables
 std::vector<std::string> messages{
@@ -22,18 +24,18 @@ std::vector<std::string> messages{
 void highlight(int line) {
     if (line >= messages.size()) return;
     std::string message = messages[line];
-    {
-        logTracer.print(message);
-        array2dTracer.selectRow(line, 0, message.size() - 1).delay();
-        array2dTracer.deselectRow(line, 0, message.size() - 1);
-    }
+    // visualize {
+    logTracer.print(message);
+    array2dTracer.selectRow(line, 0, message.size() - 1).delay();
+    array2dTracer.deselectRow(line, 0, message.size() - 1);
+    // }
     highlight(line + 1);
 }
 
 int main() {
-    {
-        array2dTracer.set(messages).delay();
-    }
+    // visualize {
+    array2dTracer.set(messages).delay();
+    // }
     highlight(0);
     return 0;
 }

src/frontend/files/skeletons/code.cpp

@@ -1,10 +1,12 @@
-// import visualization libraries
+// import visualization libraries {
 import org.algorithm_visualizer.*;
+// }
 
 class Main {
-    // define tracer variables
+    // define tracer variables {
     Array2DTracer array2dTracer = new Array2DTracer("Grid");
     LogTracer logTracer = new LogTracer("Console");
+    // }
 
     // define input variables
     String[] messages = {
@@ -19,18 +21,18 @@ class Main {
     void highlight(int line) {
         if (line >= messages.length) return;
         String message = messages[line];
-        {
-            logTracer.print(message);
-            array2dTracer.selectRow(line, 0, message.length() - 1).delay();
-            array2dTracer.deselectRow(line, 0, message.length() - 1);
-        }
+        // visualize {
+        logTracer.print(message);
+        array2dTracer.selectRow(line, 0, message.length() - 1).delay();
+        array2dTracer.deselectRow(line, 0, message.length() - 1);
+        // }
         highlight(line + 1);
     }
 
     Main() {
-        {
-            array2dTracer.set(messages).delay();
-        }
+        // visualize {
+        array2dTracer.set(messages).delay();
+        // }
         highlight(0);
     }
 

src/frontend/files/skeletons/code.java

@@ -1,9 +1,11 @@
-// import visualization libraries
+// import visualization libraries {
 import { Array2DTracer, LogTracer } from 'algorithm-visualizer';
+// }
 
-// define tracer variables
+// define tracer variables {
 const array2dTracer = new Array2DTracer('Grid');
 const logTracer = new LogTracer('Console');
+// }
 
 // define input variables
 const messages = [
@@ -18,17 +20,17 @@ const messages = [
 function highlight(line) {
   if (line >= messages.length) return;
   const message = messages[line];
-  {
-    logTracer.print(message);
-    array2dTracer.selectRow(line, 0, message.length - 1).delay();
-    array2dTracer.deselectRow(line, 0, message.length - 1);
-  }
+  // visualize {
+  logTracer.print(message);
+  array2dTracer.selectRow(line, 0, message.length - 1).delay();
+  array2dTracer.deselectRow(line, 0, message.length - 1);
+  // }
   highlight(line + 1);
 }
 
 (function main() {
-  {
-    array2dTracer.set(messages).delay();
-  }
+  // visualize {
+  array2dTracer.set(messages).delay();
+  // }
   highlight(0);
 })();