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

Browse source 
detect infinite loop
This commit is contained in:
Cassie Tarakajian 2016-09-28 16:16:21 -04:00 committed by GitHub
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",