From de8cd9685e37197bc855ab4a1ac301b2eedc913a Mon Sep 17 00:00:00 2001 From: Jason Park Date: Wed, 23 Jan 2019 11:29:37 -0500 Subject: [PATCH] Fold visualization codes by default --- package-lock.json | 20 +++++----- package.json | 2 +- src/frontend/components/CodeEditor/index.jsx | 16 ++------ .../components/FoldableAceEditor/index.jsx | 40 +++++++++++++++++++ src/frontend/components/index.js | 1 + src/frontend/files/skeletons/code.cpp | 22 +++++----- src/frontend/files/skeletons/code.java | 22 +++++----- src/frontend/files/skeletons/code.js | 22 +++++----- 8 files changed, 92 insertions(+), 53 deletions(-) create mode 100644 src/frontend/components/FoldableAceEditor/index.jsx diff --git a/package-lock.json b/package-lock.json index c0f1da6..6b4caf9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3533,9 +3533,9 @@ } }, "diff-match-patch": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.1.tgz", - "integrity": "sha512-A0QEhr4PxGUMEtKxd6X+JLnOTFd3BfIPSDpsc4dMvj+CbSaErDwTpoTo/nFJDMSrjxLW4BiNq+FbNisAAHhWeQ==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz", + "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg==", "dev": true }, "diffie-hellman": { @@ -10265,16 +10265,16 @@ } }, "react-ace": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-6.1.4.tgz", - "integrity": "sha512-a8/lAsy2bfi7Ho+3Kaj8hBPR+PEiCTG9xFG9LIjCJrv5WQFYFpeFTiPWA96M3t+LgIDFFltwfVTwD2pmdAVOxQ==", + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-6.3.2.tgz", + "integrity": "sha512-eSk0fWvrBe2oqYIYX0njLddLG5H0hemWv5VVoQi5yDSPTjGlSSnzFwdgPyfuwRe8mSARZuRdprPQa5p61hKirw==", "dev": true, "requires": { - "brace": "^0.11.0", - "diff-match-patch": "^1.0.0", + "brace": "^0.11.1", + "diff-match-patch": "^1.0.4", "lodash.get": "^4.4.2", - "lodash.isequal": "^4.1.1", - "prop-types": "^15.5.8" + "lodash.isequal": "^4.5.0", + "prop-types": "^15.6.2" } }, "react-chartjs-2": { diff --git a/package.json b/package.json index f8b4a9d..1f25092 100644 --- a/package.json +++ b/package.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", diff --git a/src/frontend/components/CodeEditor/index.jsx b/src/frontend/components/CodeEditor/index.jsx index 260b338..c354fd2 100644 --- a/src/frontend/components/CodeEditor/index.jsx +++ b/src/frontend/components/CodeEditor/index.jsx @@ -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 (
-
Contributed by diff --git a/src/frontend/components/FoldableAceEditor/index.jsx b/src/frontend/components/FoldableAceEditor/index.jsx new file mode 100644 index 0000000..e2d4145 --- /dev/null +++ b/src/frontend/components/FoldableAceEditor/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; diff --git a/src/frontend/components/index.js b/src/frontend/components/index.js index 18f899a..fa71134 100644 --- a/src/frontend/components/index.js +++ b/src/frontend/components/index.js @@ -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'; diff --git a/src/frontend/files/skeletons/code.cpp b/src/frontend/files/skeletons/code.cpp index 510fb6c..cb0963b 100644 --- a/src/frontend/files/skeletons/code.cpp +++ b/src/frontend/files/skeletons/code.cpp @@ -1,13 +1,15 @@ -// import visualization libraries +// import visualization libraries { #include "algorithm-visualizer/Array2DTracer.h" #include "algorithm-visualizer/LogTracer.h" +// } #include #include -// define tracer variables +// define tracer variables { Array2DTracer array2dTracer = Array2DTracer("Grid"); LogTracer logTracer = LogTracer("Console"); +// } // define input variables std::vector messages{ @@ -22,18 +24,18 @@ std::vector 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; } diff --git a/src/frontend/files/skeletons/code.java b/src/frontend/files/skeletons/code.java index 4461c79..6970f4b 100644 --- a/src/frontend/files/skeletons/code.java +++ b/src/frontend/files/skeletons/code.java @@ -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); } diff --git a/src/frontend/files/skeletons/code.js b/src/frontend/files/skeletons/code.js index 6f61133..3e374b4 100644 --- a/src/frontend/files/skeletons/code.js +++ b/src/frontend/files/skeletons/code.js @@ -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); })();