diff --git a/client/constants.js b/client/constants.js index a4235717..b3772398 100644 --- a/client/constants.js +++ b/client/constants.js @@ -84,5 +84,8 @@ export const SET_TOAST_TEXT = 'SET_TOAST_TEXT'; 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'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 05725fca..a2915232 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -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 + }; +} diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js index d035a104..6b814067 100644 --- a/client/modules/IDE/components/Editor.js +++ b/client/modules/IDE/components/Editor.js @@ -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-widget', 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.props.setUnsavedChanges(true); this.props.updateFileContent(this.props.file.name, this._cm.getValue()); + this.checkForInfiniteLoop(debounce(200, (infiniteLoop, prevs) => { + if (!infiniteLoop && prevs) { + this.props.startSketch(); + } + })); })); this._cm.on('keyup', () => { @@ -128,6 +137,65 @@ class Editor extends React.Component { } } + checkForInfiniteLoop(callback) { + const prevIsplaying = this.props.isPlaying; + let infiniteLoop = false; + this.props.stopSketch(); + this.props.resetInfiniteLoops(); + + for (let i = 0; i < this.widgets.length; ++i) { + this._cm.removeLineWidget(this.widgets[i]); + } + this.widgets.length = 0; + const OriginalIframe = document.getElementById('OriginalIframe'); + if (OriginalIframe !== null) { + document.body.removeChild(OriginalIframe); + } + + loopProtect.alias = 'protect'; + + loopProtect.hit = (line) => { + 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.`; + msg.appendChild(document.createTextNode(loopError)); + msg.className = 'lint-error'; + this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true })); + }; + + const processed = loopProtect(this.props.file.content); + + const iframe = document.createElement('iframe'); + iframe.id = 'OriginalIframe'; + iframe.style.display = 'none'; + + document.body.appendChild(iframe); + + const win = iframe.contentWindow; + const doc = win.document; + doc.open(); + + win.protect = loopProtect; + + doc.write(` + +
+ + + + + + + + `); + doc.close(); + callback(infiniteLoop, prevIsplaying); + } + _cm: CodeMirror.Editor render() { @@ -191,7 +259,13 @@ Editor.propTypes = { showEditorOptions: PropTypes.func.isRequired, closeEditorOptions: PropTypes.func.isRequired, showKeyboardShortcutModal: PropTypes.func.isRequired, - setUnsavedChanges: PropTypes.func.isRequired + setUnsavedChanges: PropTypes.func.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 }; export default Editor; diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index 16545376..9fe1f6f1 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -205,7 +205,13 @@ class PreviewFrame extends React.Component { renderSketch() { const doc = ReactDOM.findDOMNode(this); - if (this.props.isPlaying) { + if (this.props.infiniteLoop) { + window.alert('There is an infinite loop in the code, please remove it before running the sketch.'); + 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 +256,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; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index a95249fd..430273e7 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/client/modules/IDE/pages/IDEView.js @@ -265,6 +265,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} />