embarklabs/embark
2
0
Fork 0
mirror of https://github.com/embarklabs/embark.git synced 2025-02-09 12:26:18 +00:00
Code Issues Projects Releases Wiki Activity

Add debugger line highlight

Browse Source
This commit is contained in:
Anthony Laibe 2018-10-18 12:23:48 +01:00 committed by Pascal Precht
parent d5cd0b0ff7
commit 83a9fd4ed0
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
embark-ui/src/components/TextEditor.css Normal file
View File

@ -0,0 +1,4 @@
.text-editor__debuggerLine {
opacity: 0.4;
background-color: #20a8d8;
}

28
embark-ui/src/components/TextEditor.js
View File

@ -2,6 +2,8 @@ import React from 'react';
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './TextEditor.css';
const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json']; const SUPPORTED_LANGUAGES = ['css', 'sol', 'html', 'json'];
const DEFAULT_LANGUAGE = 'javascript'; const DEFAULT_LANGUAGE = 'javascript';
const EDITOR_ID = 'react-monaco-editor-container'; const EDITOR_ID = 'react-monaco-editor-container';
@ -83,8 +85,8 @@ class TextEditor extends React.Component {
} }
} }
updateBreakpoints() { updateDecorations() {
const decorations = editor.deltaDecorations(this.state.decorations, this.props.breakpoints.map(breakpoint => ( const newDecorations = this.props.breakpoints.map(breakpoint => (
{ {
range: new monaco.Range(breakpoint,1,breakpoint,1), range: new monaco.Range(breakpoint,1,breakpoint,1),
options: { options: {
@ -92,7 +94,18 @@ class TextEditor extends React.Component {
glyphMarginClassName: 'bg-primary rounded-circle' glyphMarginClassName: 'bg-primary rounded-circle'
} }
} }
))); ));
//TODO remove me when debuggerLine comes from the debugger API
let debuggerLine = this.props.debuggerLine || 11;
newDecorations.push({
range: new monaco.Range(debuggerLine,1,debuggerLine,1),
options: {
isWholeLine: true,
className: 'text-editor__debuggerLine'
}
})
const decorations = editor.deltaDecorations(this.state.decorations, newDecorations);
this.setState({decorations: decorations}); this.setState({decorations: decorations});
} }
@ -102,8 +115,10 @@ class TextEditor extends React.Component {
} }
this.updateMarkers(); this.updateMarkers();
if (this.props.breakpoints.length !== this.state.decorations.length) { // TODO replace with const expectedDecorationsLength = this.props.debuggerLine ? this.props.breakpoints.length + 1 : this.props.breakpoints.length
this.updateBreakpoints(); const expectedDecorationsLength = this.props.breakpoints.length + 1;
if (expectedDecorationsLength !== this.state.decorations.length) {
this.updateDecorations();
} }
this.updateLanguage(); this.updateLanguage();
} }
@ -122,7 +137,8 @@ TextEditor.propTypes = {
file: PropTypes.object, file: PropTypes.object,
contractCompile: PropTypes.object, contractCompile: PropTypes.object,
toggleBreakpoint: PropTypes.func, toggleBreakpoint: PropTypes.func,
breakpoints: PropTypes.array breakpoints: PropTypes.array,
debuggerLine: PropTypes.number
}; };
export default TextEditor; export default TextEditor;