From 682dd7e2fc04fd9f80677fa7585f2ca747e26d06 Mon Sep 17 00:00:00 2001 From: Zach Rispoli Date: Wed, 26 Jul 2017 14:46:59 -0400 Subject: [PATCH] Runtime error line highlight dissappears on lint message update --- client/constants.js | 3 ++ client/modules/IDE/actions/ide.js | 12 +++++ client/modules/IDE/components/Editor.jsx | 60 ++++++++++++++---------- client/modules/IDE/pages/IDEView.jsx | 10 +++- client/modules/IDE/reducers/ide.js | 7 ++- 5 files changed, 65 insertions(+), 27 deletions(-) diff --git a/client/constants.js b/client/constants.js index 81548d52..9eb0dfea 100644 --- a/client/constants.js +++ b/client/constants.js @@ -127,3 +127,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 SET_ASSETS = 'SET_ASSETS'; + +export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING'; +export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index 0e8fa3ae..66146f00 100644 --- a/client/modules/IDE/actions/ide.js +++ b/client/modules/IDE/actions/ide.js @@ -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 + }; +} diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index 3091158b..d93fc2d8 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -49,6 +49,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); @@ -64,17 +65,7 @@ class Editor extends React.Component { keyMap: 'sublime', highlightSelectionMatches: true, // highlight current search match 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, @@ -153,26 +144,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)) { @@ -337,12 +346,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; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 62ec3269..92cd06d5 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -342,6 +342,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} /> { @@ -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; }