detect infinite loop, disable play button
This commit is contained in:
Yining Shi
parent
c48c012160
commit
55b37866f6
5 changed files with 49 additions and 35 deletions
|
|
@ -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';
|
||||
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();
|
||||
|
||||
document.body.appendChild(iframe);
|
||||
win.protect = loopProtect;
|
||||
|
||||
const win = iframe.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>
|
||||
<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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue