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

Runtime error line highlight dissappears on lint message update

Browse source
This commit is contained in:
Zach Rispoli 2017-07-26 14:46:59 -04:00
parent 0faccbbc04
commit 8c832d06fd
5 changed files with 65 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/constants.js
View file

@ -117,3 +117,6 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
export const SHOW_HELP_MODAL = 'SHOW_HELP_MODAL';
export const HIDE_HELP_MODAL = 'HIDE_HELP_MODAL';
export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';

12
client/modules/IDE/actions/ide.js
View file

@ -233,3 +233,15 @@ export function hideHelpModal() {
type: ActionTypes.HIDE_HELP_MODAL
};
}
export function hideRuntimeErrorWarning() {
return {
type: ActionTypes.HIDE_RUNTIME_ERROR_WARNING
};
}
export function showRuntimeErrorWarning() {
return {
type: ActionTypes.SHOW_RUNTIME_ERROR_WARNING
};
}

60
client/modules/IDE/components/Editor.jsx
View file

@ -38,6 +38,7 @@ class Editor extends React.Component {
constructor(props) {
super(props);
this.tidyCode = this.tidyCode.bind(this);
this.onUpdateLinting = this.onUpdateLinting.bind(this);
}
componentDidMount() {
this.beep = new Audio(beepUrl);
@ -52,17 +53,7 @@ class Editor extends React.Component {
gutters: ['CodeMirror-lint-markers'],
keyMap: 'sublime',
lint: {
onUpdateLinting: debounce((annotations) => {
this.props.clearLintMessage();
annotations.forEach((x) => {
if (x.from.line > -1) {
this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
}
});
if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
this.beep.play();
}
}, 2000),
onUpdateLinting: this.onUpdateLinting,
options: {
'asi': true,
'eqeqeq': false,
@ -140,26 +131,44 @@ class Editor extends React.Component {
if (this.props.theme !== prevProps.theme) {
this._cm.setOption('theme', `p5-${this.props.theme}`);
}
if (prevProps.consoleEvents !== this.props.consoleEvents) {
this.props.showRuntimeErrorWarning();
}
for (let i = 0; i < 1000; i += 1) {
this._cm.removeLineClass(i, 'background', 'line-runtime-error');
}
this.props.consoleEvents.forEach((consoleEvent) => {
if (consoleEvent.method === 'error') {
console.log(consoleEvent.arguments);
console.log(consoleEvent.source);
const n = consoleEvent.arguments.replace(')', '').split(' ');
const lineNumber = parseInt(n[n.length - 1], 10) - 1;
console.log(lineNumber);
this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error');
}
});
if (this.props.runtimeErrorWarningVisible) {
this.props.consoleEvents.forEach((consoleEvent) => {
if (consoleEvent.method === 'error') {
const n = consoleEvent.arguments.replace(')', '').split(' ');
const lineNumber = parseInt(n[n.length - 1], 10) - 1;
this._cm.addLineClass(lineNumber, 'background', 'line-runtime-error');
}
});
}
}
componentWillUnmount() {
this._cm = null;
}
onUpdateLinting() {
this.props.hideRuntimeErrorWarning();
debounce((annotations) => {
this.props.clearLintMessage();
annotations.forEach((x) => {
if (x.from.line > -1) {
this.props.updateLintMessage(x.severity, (x.from.line + 1), x.message);
}
});
if (this.props.lintMessages.length > 0 && this.props.lintWarning) {
this.beep.play();
}
}, 2000);
}
getFileMode(fileName) {
let mode;
if (fileName.match(/.+\.js$/i)) {
@ -325,12 +334,15 @@ Editor.propTypes = {
collapseSidebar: PropTypes.func.isRequired,
expandSidebar: PropTypes.func.isRequired,
isUserOwner: PropTypes.bool,
clearConsole: PropTypes.func.isRequired
clearConsole: PropTypes.func.isRequired,
showRuntimeErrorWarning: PropTypes.func.isRequired,
hideRuntimeErrorWarning: PropTypes.func.isRequired,
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
};
Editor.defaultProps = {
isUserOwner: false,
consoleEvents: []
consoleEvents: [],
};
export default Editor;

10
client/modules/IDE/pages/IDEView.jsx
View file

@ -330,6 +330,9 @@ class IDEView extends React.Component {
isUserOwner={this.isUserOwner()}
clearConsole={this.props.clearConsole}
consoleEvents={this.props.console}
showRuntimeErrorWarning={this.props.showRuntimeErrorWarning}
hideRuntimeErrorWarning={this.props.hideRuntimeErrorWarning}
runtimeErrorWarningVisible={this.props.ide.runtimeErrorWarningVisible}
/>
<Console
consoleEvents={this.props.console}
@ -514,7 +517,8 @@ IDEView.propTypes = {
previousPath: PropTypes.string.isRequired,
justOpenedProject: PropTypes.bool.isRequired,
errorType: PropTypes.string,
helpType: PropTypes.string
helpType: PropTypes.string,
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
}).isRequired,
stopSketch: PropTypes.func.isRequired,
startTextOutput: PropTypes.func.isRequired,
@ -628,7 +632,9 @@ IDEView.propTypes = {
clearPersistedState: PropTypes.func.isRequired,
persistState: PropTypes.func.isRequired,
showHelpModal: PropTypes.func.isRequired,
hideHelpModal: PropTypes.func.isRequired
hideHelpModal: PropTypes.func.isRequired,
showRuntimeErrorWarning: PropTypes.func.isRequired,
hideRuntimeErrorWarning: PropTypes.func.isRequired
};
function mapStateToProps(state) {

7
client/modules/IDE/reducers/ide.js
View file

@ -18,7 +18,8 @@ const initialState = {
infiniteLoopMessage: '',
justOpenedProject: false,
previousPath: '/',
errorType: undefined
errorType: undefined,
runtimeErrorWarningVisible: true,
};
const ide = (state = initialState, action) => {
@ -95,6 +96,10 @@ const ide = (state = initialState, action) => {
return Object.assign({}, state, { helpType: action.helpType });
case ActionTypes.HIDE_HELP_MODAL:
return Object.assign({}, state, { helpType: undefined });
case ActionTypes.HIDE_RUNTIME_ERROR_WARNING:
return Object.assign({}, state, { runtimeErrorWarningVisible: false });
case ActionTypes.SHOW_RUNTIME_ERROR_WARNING:
return Object.assign({}, state, { runtimeErrorWarningVisible: true });
default:
return state;
}