add lots of changes to make autorefresh work with infinite loop checking

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({
+  return {
     type: ActionTypes.START_SKETCH
-    });
-    dispatch(startSketchRefresh());
   };
 }
 
@@ -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

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,14 +174,16 @@ 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();
@@ -200,9 +204,13 @@ class Editor extends React.Component {
       </html>`);
     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;

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();

client/modules/IDE/components/Toolbar.js

@@ -53,13 +53,16 @@ class Toolbar extends React.Component {
         <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
         <button
           className="toolbar__play-sketch-button"
-          onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
+          onClick={() => {
+            this.props.startTextOutput();
+            this.props.startSketchAndRefresh();
+          }}
           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" disabled={this.props.infiniteLoop} >
+        <button className={playButtonClass} onClick={this.props.startSketchAndRefresh} aria-label="play only visual sketch" disabled={this.props.infiniteLoop} >
           <InlineSVG src={playUrl} alt="Play only visual Sketch" />
         </button>
         <button
@@ -145,7 +148,8 @@ Toolbar.propTypes = {
   hideEditProjectName: PropTypes.func.isRequired,
   infiniteLoop: PropTypes.bool.isRequired,
   autorefresh: PropTypes.bool.isRequired,
-  setAutorefresh: PropTypes.func.isRequired
+  setAutorefresh: PropTypes.func.isRequired,
+  startSketchAndRefresh: PropTypes.func.isRequired
 };
 
 export default Toolbar;

client/modules/IDE/pages/IDEView.js

@@ -146,7 +146,7 @@ class IDEView extends React.Component {
     } else if (e.key === 'Enter' && ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))) {
       e.preventDefault();
       e.stopPropagation();
-      this.props.startSketch();
+      this.props.startSketchAndRefresh();
     }
   }
 
@@ -195,6 +195,7 @@ class IDEView extends React.Component {
           infiniteLoop={this.props.ide.infiniteLoop}
           autorefresh={this.props.preferences.autorefresh}
           setAutorefresh={this.props.setAutorefresh}
+          startSketchAndRefresh={this.props.startSketchAndRefresh}
         />
         <Preferences
           isVisible={this.props.ide.preferencesIsVisible}
@@ -279,10 +280,11 @@ class IDEView extends React.Component {
                   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}
                   theme={this.props.preferences.theme}
+                  startRefreshSketch={this.props.startRefreshSketch}
+                  stopSketch={this.props.stopSketch}
+                  autorefresh={this.props.preferences.autorefresh}
                 />
                 <Console
                   consoleEvent={this.props.ide.consoleEvent}
@@ -318,17 +320,11 @@ class IDEView extends React.Component {
                   isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
                   textOutput={this.props.preferences.textOutput}
                   dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-<<<<<<< HEAD
                   infiniteLoop={this.props.ide.infiniteLoop}
                   resetInfiniteLoops={this.props.resetInfiniteLoops}
-=======
                   autorefresh={this.props.preferences.autorefresh}
-<<<<<<< HEAD
->>>>>>> did stuff
-=======
                   previewIsRefreshing={this.props.ide.previewIsRefreshing}
                   endSketchRefresh={this.props.endSketchRefresh}
->>>>>>> add previewIsRefreshing to redux state
                 />
               </div>
             </SplitPane>
@@ -433,11 +429,8 @@ IDEView.propTypes = {
     editorOptionsVisible: PropTypes.bool.isRequired,
     keyboardShortcutVisible: PropTypes.bool.isRequired,
     unsavedChanges: PropTypes.bool.isRequired,
-<<<<<<< HEAD
     infiniteLoop: PropTypes.bool.isRequired,
-=======
     previewIsRefreshing: PropTypes.bool.isRequired
->>>>>>> add previewIsRefreshing to redux state
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -533,7 +526,9 @@ IDEView.propTypes = {
   setUnsavedChanges: PropTypes.func.isRequired,
   setTheme: PropTypes.func.isRequired,
   setAutorefresh: PropTypes.func.isRequired,
+  startSketchAndRefresh: PropTypes.func.isRequired,
   endSketchRefresh: PropTypes.func.isRequired,
+  startRefreshSketch: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -73,17 +73,14 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { keyboardShortcutVisible: false });
     case ActionTypes.SET_UNSAVED_CHANGES:
       return Object.assign({}, state, { unsavedChanges: action.value });
-<<<<<<< HEAD
     case ActionTypes.DETECT_INFINITE_LOOPS:
       return Object.assign({}, state, { infiniteLoop: true });
     case ActionTypes.RESET_INFINITE_LOOPS:
       return Object.assign({}, state, { infiniteLoop: false });
-=======
     case ActionTypes.START_SKETCH_REFRESH:
       return Object.assign({}, state, { previewIsRefreshing: true });
     case ActionTypes.END_SKETCH_REFRESH:
       return Object.assign({}, state, { previewIsRefreshing: false });
->>>>>>> add previewIsRefreshing to redux state
     default:
       return state;
   }