throttling postMessage to 250ms, fixes #80
This commit is contained in:
Lauren McCarthy
commit
e4e7f176b5
25 changed files with 460 additions and 202 deletions
|
|
@ -84,6 +84,12 @@ export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
|
|||
export const SET_THEME = 'SET_THEME';
|
||||
|
||||
export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
|
||||
export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';
|
||||
export const START_SKETCH_REFRESH = 'START_SKETCH_REFRESH';
|
||||
export const END_SKETCH_REFRESH = 'END_SKETCH_REFRESH';
|
||||
|
||||
export const DETECT_INFINITE_LOOPS = 'DETECT_INFINITE_LOOPS';
|
||||
export const RESET_INFINITE_LOOPS = 'RESET_INFINITE_LOOPS';
|
||||
|
||||
// eventually, handle errors more specifically and better
|
||||
export const ERROR = 'ERROR';
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
import * as ActionTypes from '../../../constants';
|
||||
|
||||
export function toggleSketch() {
|
||||
return {
|
||||
type: ActionTypes.TOGGLE_SKETCH
|
||||
};
|
||||
}
|
||||
|
||||
export function startSketch() {
|
||||
return {
|
||||
type: ActionTypes.START_SKETCH
|
||||
|
|
@ -18,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
|
||||
|
|
@ -170,3 +183,14 @@ export function setUnsavedChanges(value) {
|
|||
};
|
||||
}
|
||||
|
||||
export function detectInfiniteLoops() {
|
||||
return {
|
||||
type: ActionTypes.DETECT_INFINITE_LOOPS
|
||||
};
|
||||
}
|
||||
|
||||
export function resetInfiniteLoops() {
|
||||
return {
|
||||
type: ActionTypes.RESET_INFINITE_LOOPS
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -138,9 +138,46 @@ export function setTextOutput(value) {
|
|||
}
|
||||
|
||||
export function setTheme(value) {
|
||||
return {
|
||||
// return {
|
||||
// type: ActionTypes.SET_THEME,
|
||||
// value
|
||||
// };
|
||||
return (dispatch, getState) => {
|
||||
dispatch({
|
||||
type: ActionTypes.SET_THEME,
|
||||
value
|
||||
});
|
||||
const state = getState();
|
||||
if (state.user.authenticated) {
|
||||
const formParams = {
|
||||
preferences: {
|
||||
theme: value
|
||||
}
|
||||
};
|
||||
updatePreferences(formParams, dispatch);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function setAutorefresh(value) {
|
||||
// return {
|
||||
// type: ActionTypes.SET_AUTOREFRESH,
|
||||
// value
|
||||
// };
|
||||
return (dispatch, getState) => {
|
||||
dispatch({
|
||||
type: ActionTypes.SET_AUTOREFRESH,
|
||||
value
|
||||
});
|
||||
const state = getState();
|
||||
if (state.user.authenticated) {
|
||||
const formParams = {
|
||||
preferences: {
|
||||
autorefresh: value
|
||||
}
|
||||
};
|
||||
updatePreferences(formParams, dispatch);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,13 +4,17 @@ const exitUrl = require('../../../images/exit.svg');
|
|||
import { browserHistory } from 'react-router';
|
||||
|
||||
class About extends React.Component {
|
||||
componentDidMount() {
|
||||
this.refs.about.focus();
|
||||
}
|
||||
|
||||
closeAboutModal() {
|
||||
browserHistory.goBack();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="about">
|
||||
<section className="about" ref="about" tabIndex="0">
|
||||
<header className="about__header">
|
||||
<h2>About</h2>
|
||||
<button className="about__exit-button" onClick={this.closeAboutModal}>
|
||||
|
|
@ -33,7 +37,7 @@ class About extends React.Component {
|
|||
> report a bug.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import 'codemirror/addon/lint/html-lint';
|
|||
import 'codemirror/addon/comment/comment';
|
||||
import 'codemirror/keymap/sublime';
|
||||
import 'codemirror/addon/search/jump-to-line';
|
||||
|
||||
import { JSHINT } from 'jshint';
|
||||
window.JSHINT = JSHINT;
|
||||
import { CSSLint } from 'csslint';
|
||||
|
|
@ -27,15 +28,16 @@ const downArrowUrl = require('../../../images/down-arrow.svg');
|
|||
import classNames from 'classnames';
|
||||
|
||||
import { debounce } from 'throttle-debounce';
|
||||
import loopProtect from 'loop-protect';
|
||||
|
||||
class Editor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.tidyCode = this.tidyCode.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.beep = new Audio(beepUrl);
|
||||
this.widgets = [];
|
||||
this._cm = CodeMirror(this.refs.container, { // eslint-disable-line
|
||||
theme: `p5-${this.props.theme}`,
|
||||
value: this.props.file.content,
|
||||
|
|
@ -47,7 +49,8 @@ class Editor extends React.Component {
|
|||
gutters: ['CodeMirror-lint-markers'],
|
||||
keyMap: 'sublime',
|
||||
lint: {
|
||||
onUpdateLinting: debounce(2000, (annotations) => {
|
||||
onUpdateLinting: () => {
|
||||
debounce(2000, (annotations) => {
|
||||
this.props.clearLintMessage();
|
||||
annotations.forEach((x) => {
|
||||
if (x.from.line > -1) {
|
||||
|
|
@ -57,13 +60,19 @@ class Editor extends React.Component {
|
|||
if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
|
||||
this.beep.play();
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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((infiniteLoop, prevs) => {
|
||||
if (!infiniteLoop && prevs && this.props.autorefresh) {
|
||||
this.props.startRefreshSketch();
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
this._cm.on('keyup', () => {
|
||||
|
|
@ -132,6 +141,77 @@ class Editor extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
checkForInfiniteLoop(callback) {
|
||||
const prevIsplaying = this.props.isPlaying;
|
||||
let infiniteLoop = false;
|
||||
let prevLine;
|
||||
this.props.resetInfiniteLoops();
|
||||
let iframe;
|
||||
|
||||
for (let i = 0; i < this.widgets.length; ++i) {
|
||||
this._cm.removeLineWidget(this.widgets[i]);
|
||||
}
|
||||
this.widgets.length = 0;
|
||||
|
||||
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');
|
||||
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 }));
|
||||
prevLine = line;
|
||||
}
|
||||
};
|
||||
|
||||
const processed = loopProtect(this.props.file.content);
|
||||
|
||||
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(`<!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();
|
||||
|
||||
setTimeout(() => {
|
||||
if (!foundInfiniteLoop) {
|
||||
callback(infiniteLoop, prevIsplaying, prevLine);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
_cm: CodeMirror.Editor
|
||||
|
||||
render() {
|
||||
|
|
@ -148,6 +228,7 @@ class Editor extends React.Component {
|
|||
>
|
||||
<button
|
||||
className="editor__options-button"
|
||||
aria-label="editor options"
|
||||
tabIndex="0"
|
||||
onClick={(e) => {
|
||||
e.target.focus();
|
||||
|
|
@ -157,7 +238,7 @@ class Editor extends React.Component {
|
|||
>
|
||||
<InlineSVG src={downArrowUrl} />
|
||||
</button>
|
||||
<ul className="editor__options">
|
||||
<ul className="editor__options" title="editor options">
|
||||
<li>
|
||||
<a onClick={this.tidyCode}>Tidy</a>
|
||||
</li>
|
||||
|
|
@ -196,7 +277,14 @@ Editor.propTypes = {
|
|||
closeEditorOptions: PropTypes.func.isRequired,
|
||||
showKeyboardShortcutModal: PropTypes.func.isRequired,
|
||||
setUnsavedChanges: PropTypes.func.isRequired,
|
||||
infiniteLoop: PropTypes.bool.isRequired,
|
||||
detectInfiniteLoops: PropTypes.func.isRequired,
|
||||
resetInfiniteLoops: PropTypes.func.isRequired,
|
||||
startRefreshSketch: PropTypes.func.isRequired,
|
||||
autorefresh: PropTypes.bool.isRequired,
|
||||
isPlaying: PropTypes.bool.isRequired,
|
||||
theme: PropTypes.string.isRequired,
|
||||
stopSketch: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default Editor;
|
||||
|
|
|
|||
|
|
@ -28,17 +28,34 @@ class KeyboardShortcutModal extends React.Component {
|
|||
<span>Save</span>
|
||||
</li>
|
||||
<li className="keyboard-shortcut-item">
|
||||
<span className="keyboard-shortcut__command">Command + [</span>
|
||||
<span>Indent Code Right</span>
|
||||
</li>
|
||||
<li className="keyboard-shortcut-item">
|
||||
<span className="keyboard-shortcut__command">Command + ]</span>
|
||||
<span className="keyboard-shortcut__command">
|
||||
{this.isMac ? 'Command + [' : 'Control + ['}
|
||||
</span>
|
||||
<span>Indent Code Left</span>
|
||||
</li>
|
||||
<li className="keyboard-shortcut-item">
|
||||
<span className="keyboard-shortcut__command">Command + /</span>
|
||||
<span className="keyboard-shortcut__command">
|
||||
{this.isMac ? 'Command + ]' : 'Control + ]'}
|
||||
</span>
|
||||
<span>Indent Code Right</span>
|
||||
</li>
|
||||
<li className="keyboard-shortcut-item">
|
||||
<span className="keyboard-shortcut__command">
|
||||
{this.isMac ? 'Command + /' : 'Control + /'}
|
||||
</span>
|
||||
<span>Comment Line</span>
|
||||
</li>
|
||||
<li className="keyboard-shortcut-item">
|
||||
<span className="keyboard-shortcut__command">
|
||||
{this.isMac ? 'Command + Enter' : 'Control + Enter'}</span>
|
||||
<span>Start Sketch</span>
|
||||
</li>
|
||||
<li className="keyboard-shortcut-item">
|
||||
<span className="keyboard-shortcut__command">
|
||||
{this.isMac ? 'Command + Shift + Enter' : 'Control + Shift + Enter'}
|
||||
</span>
|
||||
<span>Stop Sketch</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,8 +40,29 @@ function hijackConsoleLogsScript() {
|
|||
'debug', 'clear', 'error', 'info', 'log', 'warn'
|
||||
];
|
||||
|
||||
|
||||
function throttle(fn, threshhold, scope) {
|
||||
var last, deferTimer;
|
||||
return function() {
|
||||
var context = scope || this;
|
||||
var now = +new Date,
|
||||
args = arguments;
|
||||
if (last && now < last + threshhold) {
|
||||
// hold on to it
|
||||
clearTimeout(deferTimer);
|
||||
deferTimer = setTimeout(function() {
|
||||
last = now;
|
||||
fn.apply(context, args);
|
||||
}, threshhold);
|
||||
} else {
|
||||
last = now;
|
||||
fn.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
methods.forEach( function(method) {
|
||||
iframeWindow.console[method] = function() {
|
||||
iframeWindow.console[method] = throttle(function() {
|
||||
originalConsole[method].apply(originalConsole, arguments);
|
||||
|
||||
var args = Array.from(arguments);
|
||||
|
|
@ -56,11 +77,12 @@ function hijackConsoleLogsScript() {
|
|||
arguments: args,
|
||||
source: 'sketch'
|
||||
}, '*');
|
||||
};
|
||||
}, 250);
|
||||
});
|
||||
</script>`;
|
||||
return s;
|
||||
}
|
||||
|
||||
function hijackConsoleErrorsScript(offs) {
|
||||
const s = `<script>
|
||||
function getScriptOff(line) {
|
||||
|
|
@ -117,18 +139,20 @@ class PreviewFrame extends React.Component {
|
|||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
// if sketch starts or stops playing, want to rerender
|
||||
if (this.props.isPlaying !== prevProps.isPlaying) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.isPlaying && this.props.content !== prevProps.content) {
|
||||
// if the user explicitly clicks on the play button
|
||||
if (this.props.isPlaying && this.props.previewIsRefreshing) {
|
||||
this.renderSketch();
|
||||
return;
|
||||
}
|
||||
|
||||
// I apologize for this, it is a hack. A simple way to check if the files have changed.
|
||||
if (this.props.isPlaying && 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() {
|
||||
|
|
@ -205,8 +229,9 @@ class PreviewFrame extends React.Component {
|
|||
|
||||
renderSketch() {
|
||||
const doc = ReactDOM.findDOMNode(this);
|
||||
if (this.props.isPlaying) {
|
||||
if (this.props.isPlaying && !this.props.infiniteLoop) {
|
||||
srcDoc.set(doc, this.injectLocalFiles());
|
||||
this.props.endSketchRefresh();
|
||||
} else {
|
||||
doc.srcdoc = '';
|
||||
srcDoc.set(doc, ' ');
|
||||
|
|
@ -250,7 +275,12 @@ PreviewFrame.propTypes = {
|
|||
cssFiles: PropTypes.array.isRequired,
|
||||
files: PropTypes.array.isRequired,
|
||||
dispatchConsoleEvent: PropTypes.func,
|
||||
children: PropTypes.element
|
||||
children: PropTypes.element,
|
||||
infiniteLoop: PropTypes.bool.isRequired,
|
||||
resetInfiniteLoops: PropTypes.func.isRequired,
|
||||
autorefresh: PropTypes.bool.isRequired,
|
||||
endSketchRefresh: PropTypes.func.isRequired,
|
||||
previewIsRefreshing: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default PreviewFrame;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,17 @@ import React, { PropTypes } from 'react';
|
|||
import InlineSVG from 'react-inlinesvg';
|
||||
const exitUrl = require('../../../images/exit.svg');
|
||||
|
||||
function ShareModal(props) {
|
||||
class ShareModal extends React.Component {
|
||||
componentDidMount() {
|
||||
this.refs.shareModal.focus();
|
||||
}
|
||||
render() {
|
||||
const hostname = window.location.origin;
|
||||
return (
|
||||
<section className="share-modal">
|
||||
<section className="share-modal" ref="shareModal" tabIndex="0">
|
||||
<header className="share-modal__header">
|
||||
<h2>Share Sketch</h2>
|
||||
<button className="about__exit-button" onClick={props.closeShareModal}>
|
||||
<button className="about__exit-button" onClick={this.props.closeShareModal}>
|
||||
<InlineSVG src={exitUrl} alt="Close Share Overlay" />
|
||||
</button>
|
||||
</header>
|
||||
|
|
@ -17,7 +21,7 @@ function ShareModal(props) {
|
|||
<input
|
||||
type="text"
|
||||
className="share-modal__input"
|
||||
value={`<iframe src="${hostname}/embed/${props.projectId}"></iframe>`}
|
||||
value={`<iframe src="${hostname}/embed/${this.props.projectId}"></iframe>`}
|
||||
/>
|
||||
</div>
|
||||
<div className="share-modal__section">
|
||||
|
|
@ -25,7 +29,7 @@ function ShareModal(props) {
|
|||
<input
|
||||
type="text"
|
||||
className="share-modal__input"
|
||||
value={`${hostname}/full/${props.projectId}`}
|
||||
value={`${hostname}/full/${this.props.projectId}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="share-modal__section">
|
||||
|
|
@ -33,12 +37,13 @@ function ShareModal(props) {
|
|||
<input
|
||||
type="text"
|
||||
className="share-modal__input"
|
||||
value={`${hostname}/projects/${props.projectId}`}
|
||||
value={`${hostname}/projects/${this.props.projectId}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ShareModal.propTypes = {
|
||||
projectId: PropTypes.string.isRequired,
|
||||
|
|
|
|||
|
|
@ -53,12 +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">
|
||||
<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
|
||||
|
|
@ -68,6 +72,19 @@ class Toolbar extends React.Component {
|
|||
>
|
||||
<InlineSVG src={stopUrl} alt="Stop Sketch" />
|
||||
</button>
|
||||
<div className="toolbar__autorefresh">
|
||||
<input
|
||||
id="autorefresh"
|
||||
type="checkbox"
|
||||
checked={this.props.autorefresh}
|
||||
onChange={(event) => {
|
||||
this.props.setAutorefresh(event.target.checked);
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="autorefresh" className="toolbar__autorefresh-label">
|
||||
Auto-refresh
|
||||
</label>
|
||||
</div>
|
||||
<div className={nameContainerClass}>
|
||||
<a
|
||||
className="toolbar__project-name"
|
||||
|
|
@ -128,7 +145,11 @@ Toolbar.propTypes = {
|
|||
isEditingName: PropTypes.bool
|
||||
}).isRequired,
|
||||
showEditProjectName: PropTypes.func.isRequired,
|
||||
hideEditProjectName: PropTypes.func.isRequired
|
||||
hideEditProjectName: PropTypes.func.isRequired,
|
||||
infiniteLoop: PropTypes.bool.isRequired,
|
||||
autorefresh: PropTypes.bool.isRequired,
|
||||
setAutorefresh: PropTypes.func.isRequired,
|
||||
startSketchAndRefresh: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default Toolbar;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -192,6 +192,10 @@ class IDEView extends React.Component {
|
|||
setTextOutput={this.props.setTextOutput}
|
||||
owner={this.props.project.owner}
|
||||
project={this.props.project}
|
||||
infiniteLoop={this.props.ide.infiniteLoop}
|
||||
autorefresh={this.props.preferences.autorefresh}
|
||||
setAutorefresh={this.props.setAutorefresh}
|
||||
startSketchAndRefresh={this.props.startSketchAndRefresh}
|
||||
/>
|
||||
<Preferences
|
||||
isVisible={this.props.ide.preferencesIsVisible}
|
||||
|
|
@ -273,7 +277,14 @@ class IDEView extends React.Component {
|
|||
closeEditorOptions={this.props.closeEditorOptions}
|
||||
showKeyboardShortcutModal={this.props.showKeyboardShortcutModal}
|
||||
setUnsavedChanges={this.props.setUnsavedChanges}
|
||||
infiniteLoop={this.props.ide.infiniteLoop}
|
||||
detectInfiniteLoops={this.props.detectInfiniteLoops}
|
||||
resetInfiniteLoops={this.props.resetInfiniteLoops}
|
||||
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}
|
||||
|
|
@ -309,6 +320,11 @@ class IDEView extends React.Component {
|
|||
isTextOutputPlaying={this.props.ide.isTextOutputPlaying}
|
||||
textOutput={this.props.preferences.textOutput}
|
||||
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
|
||||
infiniteLoop={this.props.ide.infiniteLoop}
|
||||
resetInfiniteLoops={this.props.resetInfiniteLoops}
|
||||
autorefresh={this.props.preferences.autorefresh}
|
||||
previewIsRefreshing={this.props.ide.previewIsRefreshing}
|
||||
endSketchRefresh={this.props.endSketchRefresh}
|
||||
/>
|
||||
</div>
|
||||
</SplitPane>
|
||||
|
|
@ -412,12 +428,16 @@ IDEView.propTypes = {
|
|||
shareModalVisible: PropTypes.bool.isRequired,
|
||||
editorOptionsVisible: PropTypes.bool.isRequired,
|
||||
keyboardShortcutVisible: PropTypes.bool.isRequired,
|
||||
unsavedChanges: PropTypes.bool.isRequired
|
||||
unsavedChanges: PropTypes.bool.isRequired,
|
||||
infiniteLoop: PropTypes.bool.isRequired,
|
||||
previewIsRefreshing: PropTypes.bool.isRequired
|
||||
}).isRequired,
|
||||
startSketch: PropTypes.func.isRequired,
|
||||
stopSketch: PropTypes.func.isRequired,
|
||||
startTextOutput: PropTypes.func.isRequired,
|
||||
stopTextOutput: PropTypes.func.isRequired,
|
||||
detectInfiniteLoops: PropTypes.func.isRequired,
|
||||
resetInfiniteLoops: PropTypes.func.isRequired,
|
||||
project: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string.isRequired,
|
||||
|
|
@ -442,7 +462,8 @@ IDEView.propTypes = {
|
|||
autosave: PropTypes.bool.isRequired,
|
||||
lintWarning: PropTypes.bool.isRequired,
|
||||
textOutput: PropTypes.bool.isRequired,
|
||||
theme: PropTypes.string.isRequired
|
||||
theme: PropTypes.string.isRequired,
|
||||
autorefresh: PropTypes.bool.isRequired
|
||||
}).isRequired,
|
||||
closePreferences: PropTypes.func.isRequired,
|
||||
setFontSize: PropTypes.func.isRequired,
|
||||
|
|
@ -504,6 +525,10 @@ IDEView.propTypes = {
|
|||
route: PropTypes.object.isRequired,
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ const initialState = {
|
|||
shareModalVisible: false,
|
||||
editorOptionsVisible: false,
|
||||
keyboardShortcutVisible: false,
|
||||
unsavedChanges: false
|
||||
unsavedChanges: false,
|
||||
infiniteLoop: false,
|
||||
previewIsRefreshing: false
|
||||
};
|
||||
|
||||
const ide = (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case ActionTypes.TOGGLE_SKETCH:
|
||||
return Object.assign({}, state, { isPlaying: !state.isPlaying });
|
||||
case ActionTypes.START_SKETCH:
|
||||
return Object.assign({}, state, { isPlaying: true });
|
||||
case ActionTypes.STOP_SKETCH:
|
||||
|
|
@ -73,6 +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 });
|
||||
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 });
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ const initialState = {
|
|||
autosave: true,
|
||||
lintWarning: false,
|
||||
textOutput: false,
|
||||
theme: 'light'
|
||||
theme: 'light',
|
||||
autorefresh: true
|
||||
};
|
||||
|
||||
const preferences = (state = initialState, action) => {
|
||||
|
|
@ -34,6 +35,8 @@ const preferences = (state = initialState, action) => {
|
|||
return action.preferences;
|
||||
case ActionTypes.SET_THEME:
|
||||
return Object.assign({}, state, { theme: action.value });
|
||||
case ActionTypes.SET_AUTOREFRESH:
|
||||
return Object.assign({}, state, { autorefresh: action.value });
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export function validateAndLoginUser(formProps, dispatch) {
|
|||
resolve();
|
||||
})
|
||||
.catch(response => {
|
||||
reject({ email: response.data.message, _error: 'Login failed!' });
|
||||
reject({ password: response.data.message, _error: 'Login failed!' });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
|
||||
function LoginForm(props) {
|
||||
const { fields: { email, password }, handleSubmit, submitting, invalid, pristine } = props;
|
||||
const { fields: { email, password }, handleSubmit, submitting, pristine } = props;
|
||||
return (
|
||||
<form className="login-form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this))}>
|
||||
<p className="login-form__field">
|
||||
|
|
@ -24,7 +24,7 @@ function LoginForm(props) {
|
|||
/>
|
||||
{password.touched && password.error && <span className="form-error">{password.error}</span>}
|
||||
</p>
|
||||
<input type="submit" disabled={submitting || invalid || pristine} value="Login" aria-label="login" />
|
||||
<input type="submit" disabled={submitting || pristine} value="Login" aria-label="login" />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,9 +28,12 @@ $themes: (
|
|||
shadow-color: rgba(0, 0, 0, 0.16),
|
||||
console-background-color: #eee,
|
||||
console-header-background-color: #d6d6d6,
|
||||
console-header-color: #b1b1b1,
|
||||
ide-border-color: #f4f4f4,
|
||||
editor-gutter-color: #f4f4f4,
|
||||
file-selected-color: #f4f4f4,
|
||||
input-text-color: #333,
|
||||
input-border-color: #979797,
|
||||
),
|
||||
dark: (
|
||||
primary-text-color: $white,
|
||||
|
|
@ -58,78 +61,14 @@ $themes: (
|
|||
ide-border-color: #949494,
|
||||
editor-gutter-color: #363636,
|
||||
file-selected-color: #404040,
|
||||
input-text-color: #333,
|
||||
input-border-color: #979797,
|
||||
)
|
||||
);
|
||||
|
||||
$primary-text-color: #333;
|
||||
$secondary-text-color: #6b6b6b;
|
||||
$inactive-text-color: #b5b5b5;
|
||||
$background-color: #fdfdfd;
|
||||
$button-background-color: #f4f4f4;
|
||||
$button-color: $black;
|
||||
$button-border-color: #979797;
|
||||
$toolbar-button-color: $p5js-pink;
|
||||
$button-background-hover-color: $p5js-pink;
|
||||
$button-background-active-color: #f10046;
|
||||
$button-hover-color: $white;
|
||||
$button-active-color: $white;
|
||||
$modal-background-color: #f4f4f4;
|
||||
$modal-button-background-color: #e6e6e6;
|
||||
$modal-border-color: #B9D0E1;
|
||||
$icon-color: #8b8b8b;
|
||||
$icon-hover-color: #333;
|
||||
$shadow-color: rgba(0, 0, 0, 0.16);
|
||||
$console-background-color: #eee;
|
||||
$console-header-background-color: #d6d6d6;
|
||||
$ide-border-color: #f4f4f4;
|
||||
|
||||
|
||||
// other variables i may or may not need later
|
||||
$ide-border-color: #f4f4f4;
|
||||
$editor-selected-line-color: #f3f3f3;
|
||||
$input-border-color: #979797;
|
||||
|
||||
$console-light-background-color: #eee;
|
||||
$console-header-background-color: #d6d6d6;
|
||||
$console-header-color: #b1b1b1;
|
||||
$console-warn-color: #ffbe05;
|
||||
$console-error-color: #ff5f52;
|
||||
|
||||
$toast-background-color: #979797;
|
||||
$toast-text-color: $white;
|
||||
|
||||
//light and dark colors
|
||||
|
||||
$light-primary-text-color: #333;
|
||||
$light-secondary-text-color: #6b6b6b;
|
||||
$light-inactive-text-color: #b5b5b5;
|
||||
$light-background-color: #fdfdfd;
|
||||
|
||||
$light-button-background-color: #f4f4f4;
|
||||
$light-button-color: $black;
|
||||
$light-button-border-color: #979797;
|
||||
$light-toolbar-button-color: $p5js-pink;
|
||||
$light-button-background-hover-color: $p5js-pink;
|
||||
$light-button-background-active-color: #f10046;
|
||||
$light-button-hover-color: $white;
|
||||
$light-button-active-color: $white;
|
||||
$light-modal-background-color: #f4f4f4;
|
||||
$light-modal-button-background-color: #e6e6e6;
|
||||
$light-modal-border-color: #B9D0E1;
|
||||
$light-icon-color: #8b8b8b;
|
||||
$light-icon-hover-color: $light-primary-text-color;
|
||||
$light-shadow-color: rgba(0, 0, 0, 0.16);
|
||||
|
||||
$dark-primary-text-color: $white;
|
||||
$dark-secondary-text-color: #c2c2c2;
|
||||
$dark-inactive-color: #7d7d7d;
|
||||
$dark-background-color: #333;
|
||||
|
||||
$dark-button-background-color: $white;
|
||||
$dark-button-color: $black;
|
||||
$dark-toolbar-button-color: $p5js-pink;
|
||||
$dark-button-background-hover-color: $p5js-pink;
|
||||
$dark-button-background-active-color: #f10046;
|
||||
$dark-button-hover-color: $white;
|
||||
$dark-button-active-color: $white;
|
||||
|
||||
|
|
|
|||
|
|
@ -36,11 +36,11 @@ input, button {
|
|||
|
||||
input {
|
||||
padding: #{5 / $base-font-size}rem;
|
||||
// border-radius: 2px;
|
||||
border: 1px solid $input-border-color;
|
||||
border: 1px solid;
|
||||
padding: #{10 / $base-font-size}rem;
|
||||
@include themify() {
|
||||
color: $primary-text-color;
|
||||
color: getThemifyVariable('input-text-color');
|
||||
border-color: getThemifyVariable('input-border-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@
|
|||
.preview-console__header {
|
||||
@include themify() {
|
||||
background-color: getThemifyVariable('console-header-background-color');
|
||||
color: getThemifyVariable('console-header-color');
|
||||
}
|
||||
color: $console-header-color;
|
||||
padding: #{5 / $base-font-size}rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -95,3 +95,11 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.lint-error {
|
||||
font-family: Inconsolata, monospace;
|
||||
font-size: 100%;
|
||||
background: rgba($console-error-color, 0.3);
|
||||
color: $console-error-color;
|
||||
padding: 2px 5px 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
.keyboard-shortcuts {
|
||||
@extend %modal;
|
||||
padding: #{20 / $base-font-size}rem;
|
||||
width: #{400 / $base-font-size}rem;
|
||||
width: #{450 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.keyboard-shortcuts__header {
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
}
|
||||
|
||||
.keyboard-shortcut__command {
|
||||
width: 40%;
|
||||
width: 50%;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
padding-right: #{10 / $base-font-size}rem;
|
||||
|
|
|
|||
|
|
@ -51,17 +51,19 @@
|
|||
}
|
||||
|
||||
.preference__subtitle {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
width: 100%;
|
||||
margin-bottom: #{10 / $base-font-size}rem;
|
||||
margin-top: 0;
|
||||
color: $light-inactive-text-color;
|
||||
}
|
||||
|
||||
.preference__value {
|
||||
@include themify() {
|
||||
border: 2px solid getThemifyVariable('button-border-color');
|
||||
background-color: getThemifyVariable('button-background-color');
|
||||
color: $light-primary-text-color;
|
||||
color: getThemifyVariable('input-text-color');
|
||||
}
|
||||
text-align: center;
|
||||
border-radius: 0%;
|
||||
|
|
@ -72,13 +74,15 @@
|
|||
}
|
||||
|
||||
.preference__label {
|
||||
@include themify() {
|
||||
color: getThemifyColor('inactive-text-color');
|
||||
&:hover {
|
||||
color: getThemifyColor('inactive-text-color');
|
||||
}
|
||||
}
|
||||
margin: 0;
|
||||
line-height: #{20 / $base-font-size}rem;
|
||||
color: $light-inactive-text-color;
|
||||
font-size: #{9 / $base-font-size}rem;
|
||||
&:hover {
|
||||
color: $light-inactive-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.preference__vertical-list {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,10 @@
|
|||
}
|
||||
|
||||
.sidebar__file-list {
|
||||
border-top: 1px solid $ide-border-color;
|
||||
@include themify() {
|
||||
border-color: getThemifyVariable('ide-border-color')
|
||||
}
|
||||
border-top: 1px solid;
|
||||
.sidebar--contracted & {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -18,6 +30,7 @@
|
|||
.toolbar__stop-button {
|
||||
@include themify() {
|
||||
@extend %toolbar-button;
|
||||
margin-right: #{15 / $base-font-size}rem;
|
||||
&--selected {
|
||||
@extend %toolbar-button--selected;
|
||||
}
|
||||
|
|
@ -48,6 +61,10 @@
|
|||
}
|
||||
|
||||
.toolbar__project-name-container {
|
||||
@include themify() {
|
||||
border-color: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
border-left: 2px dashed;
|
||||
margin-left: #{10 / $base-font-size}rem;
|
||||
padding-left: #{10 / $base-font-size}rem;
|
||||
height: 70%;
|
||||
|
|
@ -56,14 +73,13 @@
|
|||
}
|
||||
|
||||
.toolbar__project-name {
|
||||
color: $light-inactive-text-color;
|
||||
cursor: pointer;
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
&:hover {
|
||||
color: $light-primary-text-color;
|
||||
color: getThemifyVariable('primary-text-color');
|
||||
}
|
||||
&:focus {
|
||||
color: $light-inactive-text-color;
|
||||
}
|
||||
cursor: pointer;
|
||||
|
||||
.toolbar__project-name-container--editing & {
|
||||
display: none;
|
||||
|
|
@ -81,3 +97,11 @@
|
|||
.toolbar__project-owner {
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.toolbar__autorefresh-label {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('inactive-text-color');
|
||||
}
|
||||
margin-left: #{5 / $base-font-size}rem;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@
|
|||
"jshint": "^2.9.2",
|
||||
"jszip": "^3.0.0",
|
||||
"jszip-utils": "0.0.2",
|
||||
"loop-protect": "git+https://git@github.com/sagar-sm/loop-protect.git",
|
||||
"moment": "^2.14.1",
|
||||
"mongoose": "^4.4.16",
|
||||
"node-uuid": "^1.4.7",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ const userSchema = new Schema({
|
|||
autosave: { type: Boolean, default: true },
|
||||
lintWarning: { type: Boolean, default: false },
|
||||
textOutput: { type: Boolean, default: false },
|
||||
theme: { type: String, default: 'light' }
|
||||
theme: { type: String, default: 'light' },
|
||||
autorefresh: { type: Boolean, default: true }
|
||||
}
|
||||
}, { timestamps: true });
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ mongoose.connection.on('error', () => {
|
|||
});
|
||||
|
||||
import Project from '../models/project';
|
||||
import User from '../models/user';
|
||||
|
||||
// let projectsNotToUpdate;
|
||||
// Project.find({'files.name': 'root'})
|
||||
|
|
@ -83,35 +84,44 @@ import Project from '../models/project';
|
|||
// });
|
||||
// });
|
||||
|
||||
Project.find({})
|
||||
.exec((err, projects) => {
|
||||
projects.forEach((project, projectIndex) => {
|
||||
project.files.forEach((file) => {
|
||||
if (file.isSelected) {
|
||||
delete file.isSelected;
|
||||
}
|
||||
|
||||
if (file.name === 'sketch.js') {
|
||||
file.isSelectedFile = true;
|
||||
console.log(file.name, 'is now selected');
|
||||
// file.save((err, savedFile) => {
|
||||
// console.log('file saved');
|
||||
// });
|
||||
} else {
|
||||
file.isSelectedFile = false;
|
||||
}
|
||||
// console.log('project', projectIndex);
|
||||
// Project.find({})
|
||||
// .exec((err, projects) => {
|
||||
// projects.forEach((project, projectIndex) => {
|
||||
// project.files.forEach((file) => {
|
||||
// if (file.isSelected) {
|
||||
// console.log('is selected remains');
|
||||
// delete file.isSelected;
|
||||
// }
|
||||
|
||||
// if (file.isSelctedFile) {
|
||||
// console.log('changed to isSelected file');
|
||||
// if (file.name === 'sketch.js') {
|
||||
// file.isSelectedFile = true;
|
||||
// console.log(file.name, 'is now selected');
|
||||
// // file.save((err, savedFile) => {
|
||||
// // console.log('file saved');
|
||||
// // });
|
||||
// } else {
|
||||
// file.isSelectedFile = false;
|
||||
// }
|
||||
project.save((err, savedProject) => {
|
||||
console.log('project', projectIndex, 'is saved.');
|
||||
});
|
||||
// // console.log('project', projectIndex);
|
||||
// // if (file.isSelected) {
|
||||
// // console.log('is selected remains');
|
||||
// // }
|
||||
|
||||
});
|
||||
// // if (file.isSelctedFile) {
|
||||
// // console.log('changed to isSelected file');
|
||||
// // }
|
||||
// project.save((err, savedProject) => {
|
||||
// console.log('project', projectIndex, 'is saved.');
|
||||
// });
|
||||
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
|
||||
User.findOne({email: 'test@test.com'})
|
||||
.exec((err, user) => {
|
||||
console.log(user);
|
||||
user.password = '1234';
|
||||
user.save((err, savedUser) => {
|
||||
console.log('user saved');
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue