r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

Merge pull request #94 from yining1023/livecoding 

detect infinite loop
This commit is contained in:
Cassie Tarakajian 2016-09-28 16:16:21 -04:00 committed by GitHub
parent 5037e6c27f 55b37866f6
commit 274614cc60
10 changed files with 158 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/constants.js
View File

@ -85,5 +85,8 @@ export const SET_THEME = 'SET_THEME';
export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
export const DETECT_INFINITE_LOOPS = 'DETECT_INFINITE_LOOPS';
export const RESET_INFINITE_LOOPS = 'RESET_INFINITE_LOOPS';
// eventually, handle errors more specifically and better
export const ERROR = 'ERROR';

11
client/modules/IDE/actions/ide.js
View File

@ -170,3 +170,14 @@ export function setUnsavedChanges(value) {
};
}
export function detectInfiniteLoops() {
return {
type: ActionTypes.DETECT_INFINITE_LOOPS
};
}
export function resetInfiniteLoops() {
return {
type: ActionTypes.RESET_INFINITE_LOOPS
};
}

102
client/modules/IDE/components/Editor.js
View File

@ -15,6 +15,7 @@ import 'codemirror/addon/lint/html-lint';
import 'codemirror/addon/comment/comment';
import 'codemirror/keymap/sublime';
import 'codemirror/addon/search/jump-to-line';
import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;
import { CSSLint } from 'csslint';
@ -27,15 +28,16 @@ const downArrowUrl = require('../../../images/down-arrow.svg');
import classNames from 'classnames';
import { debounce } from 'throttle-debounce';
import loopProtect from 'loop-protect';
class Editor extends React.Component {
constructor(props) {
super(props);
this.tidyCode = this.tidyCode.bind(this);
}
componentDidMount() {
this.beep = new Audio(beepUrl);
this.widgets = [];
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
theme: `p5-${this.props.theme}`,
value: this.props.file.content,
@ -47,23 +49,30 @@ class Editor extends React.Component {
gutters: ['CodeMirror-lint-markers'],
keyMap: 'sublime',
lint: {
onUpdateLinting: debounce(2000, (annotations) => {
this.props.clearLintMessage();
annotations.forEach((x) => {
if (x.from.line > -1) {
this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
onUpdateLinting: () => {
debounce(2000, (annotations) => {
this.props.clearLintMessage();
annotations.forEach((x) => {
if (x.from.line > -1) {
this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
}
});
if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
this.beep.play();
}
});
if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
this.beep.play();
}
})
}
}
});
this._cm.on('change', debounce(200, () => {
this._cm.on('change', debounce(1000, () => {
this.props.setUnsavedChanges(true);
this.props.updateFileContent(this.props.file.name, this._cm.getValue());
this.checkForInfiniteLoop((infiniteLoop, prevs) => {
if (!infiniteLoop && prevs) {
this.props.startSketch();
}
});
}));
this._cm.on('keyup', () => {
@ -132,6 +141,69 @@ class Editor extends React.Component {
}
}
checkForInfiniteLoop(callback) {
const prevIsplaying = this.props.isPlaying;
let infiniteLoop = false;
let prevLine;
this.props.stopSketch();
this.props.resetInfiniteLoops();
let iframe;
for (let i = 0; i < this.widgets.length; ++i) {
this._cm.removeLineWidget(this.widgets[i]);
}
this.widgets.length = 0;
loopProtect.alias = 'protect';
loopProtect.hit = (line) => {
if (line !== prevLine) {
this.props.detectInfiniteLoops();
infiniteLoop = true;
callback(infiniteLoop, prevIsplaying);
const msg = document.createElement('div');
const loopError = `line ${line}: This loop is taking too long to run. This might be an infinite loop.`;
msg.appendChild(document.createTextNode(loopError));
msg.className = 'lint-error';
this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true }));
prevLine = line;
}
};
const processed = loopProtect(this.props.file.content);
const iframeForLoop = document.getElementById('iframeForLoop');
if (iframeForLoop === null) {
iframe = document.createElement('iframe');
iframe.id = 'iframeForLoop';
iframe.style.display = 'none';
document.body.appendChild(iframe);
} else {
iframeForLoop.srcdoc = '';
const win = iframeForLoop.contentWindow;
const doc = win.document;
doc.open();
win.protect = loopProtect;
doc.write(`<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>
</head>
<body>
<script>
${processed}
</script>
</body>
</html>`);
win.onerror = () => true;
doc.close();
}
callback(infiniteLoop, prevIsplaying, prevLine);
}
_cm: CodeMirror.Editor
render() {
@ -197,7 +269,13 @@ Editor.propTypes = {
closeEditorOptions: PropTypes.func.isRequired,
showKeyboardShortcutModal: PropTypes.func.isRequired,
setUnsavedChanges: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired,
infiniteLoop: PropTypes.bool.isRequired,
detectInfiniteLoops: PropTypes.func.isRequired,
resetInfiniteLoops: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
startSketch: PropTypes.func.isRequired,
isPlaying: PropTypes.bool.isRequired,
theme: PropTypes.string.isRequired
};
export default Editor;

11
client/modules/IDE/components/PreviewFrame.js
View File

@ -205,7 +205,12 @@ class PreviewFrame extends React.Component {
renderSketch() {
const doc = ReactDOM.findDOMNode(this);
if (this.props.isPlaying) {
if (this.props.infiniteLoop) {
this.props.resetInfiniteLoops();
doc.srcdoc = '';
srcDoc.set(doc, ' ');
}
if (this.props.isPlaying && !this.props.infiniteLoop) {
srcDoc.set(doc, this.injectLocalFiles());
} else {
doc.srcdoc = '';
@ -250,7 +255,9 @@ PreviewFrame.propTypes = {
cssFiles: PropTypes.array.isRequired,
files: PropTypes.array.isRequired,
dispatchConsoleEvent: PropTypes.func,
children: PropTypes.element
children: PropTypes.element,
infiniteLoop: PropTypes.bool.isRequired,
resetInfiniteLoops: PropTypes.func.isRequired
};
export default PreviewFrame;

6
client/modules/IDE/components/Toolbar.js
View File

@ -55,10 +55,11 @@ class Toolbar extends React.Component {
className="toolbar__play-sketch-button"
onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
aria-label="play sketch"
disabled={this.props.infiniteLoop}
>
<InlineSVG src={playUrl} alt="Play Sketch" />
</button>
<button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch">
<button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch" disabled={this.props.infiniteLoop} >
<InlineSVG src={playUrl} alt="Play only visual Sketch" />
</button>
<button
@ -128,7 +129,8 @@ Toolbar.propTypes = {
isEditingName: PropTypes.bool
}).isRequired,
showEditProjectName: PropTypes.func.isRequired,
hideEditProjectName: PropTypes.func.isRequired
hideEditProjectName: PropTypes.func.isRequired,
infiniteLoop: PropTypes.bool.isRequired
};
export default Toolbar;

14
client/modules/IDE/pages/IDEView.js
View File

@ -192,6 +192,7 @@ class IDEView extends React.Component {
setTextOutput={this.props.setTextOutput}
owner={this.props.project.owner}
project={this.props.project}
infiniteLoop={this.props.ide.infiniteLoop}
/>
<Preferences
isVisible={this.props.ide.preferencesIsVisible}
@ -273,6 +274,12 @@ class IDEView extends React.Component {
closeEditorOptions={this.props.closeEditorOptions}
showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
setUnsavedChanges={this.props.setUnsavedChanges}
infiniteLoop={this.props.ide.infiniteLoop}
detectInfiniteLoops={this.props.detectInfiniteLoops}
resetInfiniteLoops={this.props.resetInfiniteLoops}
stopSketch={this.props.stopSketch}
startSketch={this.props.startSketch}
isPlaying={this.props.ide.isPlaying}
theme={this.props.preferences.theme}
/>
<Console
@ -309,6 +316,8 @@ class IDEView extends React.Component {
isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
textOutput={this.props.preferences.textOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
infiniteLoop={this.props.ide.infiniteLoop}
resetInfiniteLoops={this.props.resetInfiniteLoops}
/>
</div>
</SplitPane>
@ -412,12 +421,15 @@ IDEView.propTypes = {
shareModalVisible: PropTypes.bool.isRequired,
editorOptionsVisible: PropTypes.bool.isRequired,
keyboardShortcutVisible: PropTypes.bool.isRequired,
unsavedChanges: PropTypes.bool.isRequired
unsavedChanges: PropTypes.bool.isRequired,
infiniteLoop: PropTypes.bool.isRequired,
}).isRequired,
startSketch: PropTypes.func.isRequired,
stopSketch: PropTypes.func.isRequired,
startTextOutput: PropTypes.func.isRequired,
stopTextOutput: PropTypes.func.isRequired,
detectInfiniteLoops: PropTypes.func.isRequired,
resetInfiniteLoops: PropTypes.func.isRequired,
project: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string.isRequired,

7
client/modules/IDE/reducers/ide.js
View File

@ -16,7 +16,8 @@ const initialState = {
shareModalVisible: false,
editorOptionsVisible: false,
keyboardShortcutVisible: false,
unsavedChanges: false
unsavedChanges: false,
infiniteLoop: false
};
const ide = (state = initialState, action) => {
@ -73,6 +74,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { keyboardShortcutVisible: false });
case ActionTypes.SET_UNSAVED_CHANGES:
return Object.assign({}, state, { unsavedChanges: action.value });
case ActionTypes.DETECT_INFINITE_LOOPS:
return Object.assign({}, state, { infiniteLoop: true });
case ActionTypes.RESET_INFINITE_LOOPS:
return Object.assign({}, state, { infiniteLoop: false });
default:
return state;
}

10
client/styles/components/_editor.scss
View File

@ -94,4 +94,12 @@
.editor--options & {
display: block;
}
}
}
.lint-error {
font-family: Inconsolata, monospace;
font-size: 100%;
background: rgba($console-error-color, 0.3);
color: $console-error-color;
padding: 2px 5px 3px;
}

12
client/styles/components/_toolbar.scss
View File

@ -4,6 +4,18 @@
&--selected {
@extend %toolbar-button--selected;
}
&:disabled {
cursor: auto;
& g {
fill: getThemifyVariable('button-border-color');
}
&:hover {
background-color: getThemifyVariable('toolbar-button-background-color');
& g {
fill: getThemifyVariable('button-border-color');
}
}
}
}
margin-right: #{15 / $base-font-size}rem;
& span {

1
package.json
View File

@ -83,6 +83,7 @@
"jshint": "^2.9.2",
"jszip": "^3.0.0",
"jszip-utils": "0.0.2",
"loop-protect": "git+https://git@github.com/sagar-sm/loop-protect.git",
"moment": "^2.14.1",
"mongoose": "^4.4.16",
"node-uuid": "^1.4.7",