Permalink
Browse files

detect infinite loop, disable play button

  • Loading branch information...
yining1023 committed Sep 24, 2016
1 parent c48c012 commit 55b37866f62259cba725a9eb7639c0544c0067b5
@@ -65,14 +65,14 @@ class Editor extends React.Component {
}
});
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(debounce(200, (infiniteLoop, prevs) => {
this.checkForInfiniteLoop((infiniteLoop, prevs) => {
if (!infiniteLoop && prevs) {
this.props.startSketch();
}
}));
});
}));
this._cm.on('keyup', () => {
@@ -147,15 +147,12 @@ class Editor extends React.Component {
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;
const OriginalIframe = document.getElementById('OriginalIframe');
if (OriginalIframe !== null) {
document.body.removeChild(OriginalIframe);
}
loopProtect.alias = 'protect';
@@ -165,7 +162,7 @@ class Editor extends React.Component {
infiniteLoop = true;
callback(infiniteLoop, prevIsplaying);
const msg = document.createElement('div');
const loopError = `line ${line}: This loop is taking too long to run.`;
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 }));
@@ -175,32 +172,35 @@ class Editor extends React.Component {
const processed = loopProtect(this.props.file.content);
const iframe = document.createElement('iframe');
iframe.id = 'OriginalIframe';
iframe.style.display = 'none';
document.body.appendChild(iframe);
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();
const win = iframe.contentWindow;
const doc = win.document;
doc.open();
win.protect = loopProtect;
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.min.js"></script>
</head>
<body>
<script>
${processed}
</script>
</body>
</html>`);
doc.close();
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);
}
@@ -206,7 +206,6 @@ class PreviewFrame extends React.Component {
renderSketch() {
const doc = ReactDOM.findDOMNode(this);
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, ' ');
@@ -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;
@@ -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}
@@ -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 {

0 comments on commit 55b3786

Please sign in to comment.