Commit fdc4bb11 authored by Matej Genci's avatar Matej Genci

Highlighting code works

parent 523483a6
...@@ -38,7 +38,7 @@ body { ...@@ -38,7 +38,7 @@ body {
} }
.warning-highlight { .warning-highlight {
background: rgba(255, 50, 50, 0.1); background: rgba(255, 50, 50, 1);
position: absolute; position: absolute;
} }
......
...@@ -56,10 +56,9 @@ class App extends React.Component { ...@@ -56,10 +56,9 @@ class App extends React.Component {
onWaccCodeChange = (newCode) => { onWaccCodeChange = (newCode) => {
this.setState({ this.setState({
wacc: { wacc: {code: newCode, markers: []},
code: newCode, js: {code: "", markers: []},
markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning-highlight', type: 'text'}] arm: {code: "", markers: []},
},
graphData: [{}], graphData: [{}],
}) })
} }
...@@ -68,11 +67,11 @@ class App extends React.Component { ...@@ -68,11 +67,11 @@ class App extends React.Component {
let hl = nodeData.highlighting; let hl = nodeData.highlighting;
this.setState((state, props) => { this.setState((state, props) => {
return { state.wacc.markers = hl.wacc;
wacc: {code: state.wacc.code, markers: hl.wacc}, state.js.markers = hl.js;
js: {code: state.js.code, markers: hl.js}, state.arm.markers = hl.arm;
arm: {code: state.arm.code, markers: hl.arm}
} return state
}) })
} }
...@@ -174,6 +173,7 @@ class App extends React.Component { ...@@ -174,6 +173,7 @@ class App extends React.Component {
data={this.state.graphData} data={this.state.graphData}
onMouseOver={this.onNodeOver} onMouseOver={this.onNodeOver}
onMouseOut={this.onNodeOut} onMouseOut={this.onNodeOut}
onClick={(n,e) => console.log(n)}
orientation="vertical"/> orientation="vertical"/>
</div> </div>
</CardBody> </CardBody>
......
...@@ -25,12 +25,16 @@ function generateMarkerObject(start, end) { ...@@ -25,12 +25,16 @@ function generateMarkerObject(start, end) {
startRow: start.lineNum - 1, startRow: start.lineNum - 1,
startCol: start.charNum, startCol: start.charNum,
endRow: end.lineNum - 1, endRow: end.lineNum - 1,
endCol: end.charNum - 1, endCol: end.charNum,
className: "ast-node-highlight", className: "ast-node-highlight",
type: "text" type: "text"
} }
} }
function generateArmMarkers(lineNums) {
return lineNums.map(ln => ({startRow: ln - 1, className: "ast-node-highlight", type: "background"}))
}
function createGraphNode(node, astMeta){ function createGraphNode(node, astMeta){
let name = node.name; let name = node.name;
let value = node.value; let value = node.value;
...@@ -44,14 +48,14 @@ function createGraphNode(node, astMeta){ ...@@ -44,14 +48,14 @@ function createGraphNode(node, astMeta){
children.push(createGraphNode(child, astMeta)) children.push(createGraphNode(child, astMeta))
} }
} }
//console.log(JSON.stringify(retObj)) console.log(node)
return { return {
name: name, name: name,
attributes: {value: value}, attributes: {value: value},
highlighting: { highlighting: {
wacc: [generateMarkerObject(node.waccStart, node.waccEnd)], wacc: [generateMarkerObject(node.waccStart, node.waccEnd)],
js: typeof node.jsStart === "undefined" ? [{}] : [generateMarkerObject(node.jsStart, node.jsEnd)], js: typeof node.jsStart === "undefined" ? [{}] : [generateMarkerObject(node.jsStart, node.jsEnd)],
arm: [] arm: generateArmMarkers(node.armLineNums)
}, },
children: children children: children
} }
......
...@@ -20,9 +20,6 @@ class CodeEditor extends React.Component { ...@@ -20,9 +20,6 @@ class CodeEditor extends React.Component {
return ( return (
<div className="ace-editor"> <div className="ace-editor">
{this.heading()} {this.heading()}
<p>
Highlighting {JSON.stringify(this.props.markers)}
</p>
<AceEditor <AceEditor
mode="java" mode="java"
theme="github" theme="github"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment