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

detect infinite loop, disable play button

Browse source
This commit is contained in:
Yining Shi 2016-09-24 00:46:06 -04:00
parent c48c012160
commit 55b37866f6
5 changed files with 49 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
client/modules/IDE/components/Editor.js
View file

@ -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.setUnsavedChanges(true);
this.props.updateFileContent(this.props.file.name, this._cm.getValue()); this.props.updateFileContent(this.props.file.name, this._cm.getValue());
this.checkForInfiniteLoop(debounce(200, (infiniteLoop, prevs) => { this.checkForInfiniteLoop((infiniteLoop, prevs) => {
if (!infiniteLoop && prevs) { if (!infiniteLoop && prevs) {
this.props.startSketch(); this.props.startSketch();
} }
})); });
})); }));
this._cm.on('keyup', () => { this._cm.on('keyup', () => {
@ -147,15 +147,12 @@ class Editor extends React.Component {
let prevLine; let prevLine;
this.props.stopSketch(); this.props.stopSketch();
this.props.resetInfiniteLoops(); this.props.resetInfiniteLoops();
let iframe;
for (let i = 0; i < this.widgets.length; ++i) { for (let i = 0; i < this.widgets.length; ++i) {
this._cm.removeLineWidget(this.widgets[i]); this._cm.removeLineWidget(this.widgets[i]);
} }
this.widgets.length = 0; this.widgets.length = 0;
const OriginalIframe = document.getElementById('OriginalIframe');
if (OriginalIframe !== null) {
document.body.removeChild(OriginalIframe);
}
loopProtect.alias = 'protect'; loopProtect.alias = 'protect';
@ -165,7 +162,7 @@ class Editor extends React.Component {
infiniteLoop = true; infiniteLoop = true;
callback(infiniteLoop, prevIsplaying); callback(infiniteLoop, prevIsplaying);
const msg = document.createElement('div'); 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.appendChild(document.createTextNode(loopError));
msg.className = 'lint-error'; msg.className = 'lint-error';
this.widgets.push(this._cm.addLineWidget(line - 1, msg, { coverGutter: false, noHScroll: true })); 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 processed = loopProtect(this.props.file.content);
const iframe = document.createElement('iframe'); const iframeForLoop = document.getElementById('iframeForLoop');
iframe.id = 'OriginalIframe'; if (iframeForLoop === null) {
iframe.style.display = 'none'; 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();
document.body.appendChild(iframe); win.protect = loopProtect;
const win = iframe.contentWindow; doc.write(`<!DOCTYPE html>
const doc = win.document; <html>
doc.open(); <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script>
win.protect = loopProtect; <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script>
</head>
doc.write(`<!DOCTYPE html> <body>
<html> <script>
<head> ${processed}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.min.js"></script> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.min.js"></script> </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.min.js"></script> </html>`);
</head> win.onerror = () => true;
<body> doc.close();
<script> }
${processed}
</script>
</body>
</html>`);
doc.close();
callback(infiniteLoop, prevIsplaying, prevLine); callback(infiniteLoop, prevIsplaying, prevLine);
} }

1
client/modules/IDE/components/PreviewFrame.js
View file

@ -206,7 +206,6 @@ class PreviewFrame extends React.Component {
renderSketch() { renderSketch() {
const doc = ReactDOM.findDOMNode(this); const doc = ReactDOM.findDOMNode(this);
if (this.props.infiniteLoop) { if (this.props.infiniteLoop) {
window.alert('There is an infinite loop in the code, please remove it before running the sketch.');
this.props.resetInfiniteLoops(); this.props.resetInfiniteLoops();
doc.srcdoc = ''; doc.srcdoc = '';
srcDoc.set(doc, ' '); srcDoc.set(doc, ' ');

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

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

1
client/modules/IDE/pages/IDEView.js
View file

@ -192,6 +192,7 @@ class IDEView extends React.Component {
setTextOutput={this.props.setTextOutput} setTextOutput={this.props.setTextOutput}
owner={this.props.project.owner} owner={this.props.project.owner}
project={this.props.project} project={this.props.project}
infiniteLoop={this.props.ide.infiniteLoop}
/> />
<Preferences <Preferences
isVisible={this.props.ide.preferencesIsVisible} isVisible={this.props.ide.preferencesIsVisible}

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

@ -4,6 +4,18 @@
&--selected { &--selected {
@extend %toolbar-button--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; margin-right: #{15 / $base-font-size}rem;
& span { & span {