diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js
index 8116c304..19cb940a 100644
--- a/client/modules/IDE/actions/ide.js
+++ b/client/modules/IDE/actions/ide.js
@@ -1,23 +1,8 @@
import * as ActionTypes from '../../../constants';
-export function startSketchRefresh() {
- return {
- type: ActionTypes.START_SKETCH_REFRESH
- };
-}
-
-export function endSketchRefresh() {
- return {
- type: ActionTypes.END_SKETCH_REFRESH
- };
-}
-
export function startSketch() {
- return (dispatch) => {
- dispatch({
- type: ActionTypes.START_SKETCH
- });
- dispatch(startSketchRefresh());
+ return {
+ type: ActionTypes.START_SKETCH
};
}
@@ -27,6 +12,25 @@ export function stopSketch() {
};
}
+export function startRefreshSketch() {
+ return {
+ type: ActionTypes.START_SKETCH_REFRESH
+ };
+}
+
+export function startSketchAndRefresh() {
+ return (dispatch) => {
+ dispatch(startSketch());
+ dispatch(startRefreshSketch());
+ };
+}
+
+export function endSketchRefresh() {
+ return {
+ type: ActionTypes.END_SKETCH_REFRESH
+ };
+}
+
export function startTextOutput() {
return {
type: ActionTypes.START_TEXT_OUTPUT
diff --git a/client/modules/IDE/components/Editor.js b/client/modules/IDE/components/Editor.js
index a52c3751..f62cb4a4 100644
--- a/client/modules/IDE/components/Editor.js
+++ b/client/modules/IDE/components/Editor.js
@@ -69,8 +69,8 @@ class Editor extends React.Component {
this.props.setUnsavedChanges(true);
this.props.updateFileContent(this.props.file.name, this._cm.getValue());
this.checkForInfiniteLoop((infiniteLoop, prevs) => {
- if (!infiniteLoop && prevs) {
- this.props.startSketch();
+ if (!infiniteLoop && prevs && this.props.autorefresh) {
+ this.props.startRefreshSketch();
}
});
}));
@@ -145,7 +145,6 @@ class Editor extends React.Component {
const prevIsplaying = this.props.isPlaying;
let infiniteLoop = false;
let prevLine;
- this.props.stopSketch();
this.props.resetInfiniteLoops();
let iframe;
@@ -156,9 +155,12 @@ class Editor extends React.Component {
loopProtect.alias = 'protect';
+ let foundInfiniteLoop = false;
loopProtect.hit = (line) => {
+ foundInfiniteLoop = true;
if (line !== prevLine) {
this.props.detectInfiniteLoops();
+ this.props.stopSketch();
infiniteLoop = true;
callback(infiniteLoop, prevIsplaying);
const msg = document.createElement('div');
@@ -172,36 +174,42 @@ class Editor extends React.Component {
const processed = loopProtect(this.props.file.content);
- const iframeForLoop = document.getElementById('iframeForLoop');
+ let iframeForLoop = document.getElementById('iframeForLoop');
if (iframeForLoop === null) {
iframe = document.createElement('iframe');
iframe.id = 'iframeForLoop';
iframe.style.display = 'none';
document.body.appendChild(iframe);
+ iframeForLoop = iframe;
} else {
iframeForLoop.srcdoc = '';
- const win = iframeForLoop.contentWindow;
- const doc = win.document;
- doc.open();
-
- win.protect = loopProtect;
-
- doc.write(`
-
-
-
-
-
-
-
-
- `);
- win.onerror = () => true;
- doc.close();
}
- callback(infiniteLoop, prevIsplaying, prevLine);
+ const win = iframeForLoop.contentWindow;
+ const doc = win.document;
+ doc.open();
+
+ win.protect = loopProtect;
+
+ doc.write(`
+
+
+
+
+
+
+
+
+ `);
+ win.onerror = () => true;
+ doc.close();
+
+ setTimeout(() => {
+ if (!foundInfiniteLoop) {
+ callback(infiniteLoop, prevIsplaying, prevLine);
+ }
+ }, 200);
}
_cm: CodeMirror.Editor
@@ -272,10 +280,11 @@ Editor.propTypes = {
infiniteLoop: PropTypes.bool.isRequired,
detectInfiniteLoops: PropTypes.func.isRequired,
resetInfiniteLoops: PropTypes.func.isRequired,
- stopSketch: PropTypes.func.isRequired,
- startSketch: PropTypes.func.isRequired,
+ startRefreshSketch: PropTypes.func.isRequired,
+ autorefresh: PropTypes.bool.isRequired,
isPlaying: PropTypes.bool.isRequired,
- theme: PropTypes.string.isRequired
+ theme: PropTypes.string.isRequired,
+ stopSketch: PropTypes.func.isRequired
};
export default Editor;
diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 10c1f520..a45821b0 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -117,9 +117,7 @@ class PreviewFrame extends React.Component {
}
componentDidUpdate(prevProps) {
- // if previously the sketch was not playing, render sketch
- // if playing, and autorun is on
- // if content has changed or files have changed
+ // if sketch starts or stops playing, want to rerender
if (this.props.isPlaying !== prevProps.isPlaying) {
this.renderSketch();
return;
@@ -131,14 +129,8 @@ class PreviewFrame extends React.Component {
return;
}
- if (this.props.isPlaying && this.props.autorefresh) {
- // if the content of the file changes
- // or the set of files changes
- if (this.props.content !== prevProps.content
- || this.props.files[0].id !== prevProps.files[0].id) {
- this.renderSketch();
- }
- }
+ // small bug - if autorefresh is on, and the usr changes files
+ // in the sketch, preview will reload
}
componentWillUnmount() {
@@ -215,11 +207,6 @@ class PreviewFrame extends React.Component {
renderSketch() {
const doc = ReactDOM.findDOMNode(this);
- if (this.props.infiniteLoop) {
- this.props.resetInfiniteLoops();
- doc.srcdoc = '';
- srcDoc.set(doc, ' ');
- }
if (this.props.isPlaying && !this.props.infiniteLoop) {
srcDoc.set(doc, this.injectLocalFiles());
this.props.endSketchRefresh();
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index e2c952e2..831edb34 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -53,13 +53,16 @@ class Toolbar extends React.Component {
-