Commit 38b94d36 authored by Matej Genci's avatar Matej Genci

WIP highlight code on hover over ast node

parent 9ab5ddde
...@@ -37,7 +37,12 @@ body { ...@@ -37,7 +37,12 @@ body {
width: auto; width: auto;
} }
.warning { .warning-highlight {
background: rgba(255, 50, 50, 0.1); background: rgba(255, 50, 50, 0.1);
position: absolute; position: absolute;
}
.ast-node-highlight {
background: rgba(50, 197, 255, 0.3);
position: absolute;
} }
\ No newline at end of file
...@@ -57,12 +57,44 @@ class App extends React.Component { ...@@ -57,12 +57,44 @@ class App extends React.Component {
this.setState({ this.setState({
wacc: { wacc: {
code: newCode, code: newCode,
markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text'}] markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning-highlight', type: 'text'}]
}, },
graphData: [{}] graphData: [{}]
}) })
} }
onNodeOver = (nodeData, evt) => {
let hl = nodeData.highlighting;
this.setState((state, props) => {
let armMarkers = state.arm.markers;
hl.arm.array.forEach(element => armMarkers.append(element))
return {
wacc: {markers: state.wacc.markers.append(hl.wacc)},
js: {markers: state.js.markers.append(hl.js)},
arm: {markers: armMarkers}
}
})
}
onNodeOut = (nodeData, evt) => {
let hl = nodeData.highlighting;
this.setState((state, props) => {
let waccMarkerIdx = state.wacc.markers.indexOf(hl.wacc);
let jsMarkerIdx = state.js.markers.indexOf(hl.js)
let armMarkers = [];
return {
wacc: {markers: state.wacc.markers.splice(waccMarkerIdx, 1)},
js: {markers: state.js.markers.splice(jsMarkerIdx, 1)},
arm: {markers: armMarkers}
}
})
}
readInputCallBack = (codeToEval) => { readInputCallBack = (codeToEval) => {
console.log(test); console.log(test);
// if (!window.EMULATOR_IS_INPUT) { // if (!window.EMULATOR_IS_INPUT) {
...@@ -151,7 +183,10 @@ class App extends React.Component { ...@@ -151,7 +183,10 @@ class App extends React.Component {
<CardBody> <CardBody>
<div style={{height: '50em'}}> <div style={{height: '50em'}}>
<Tree <Tree
collapsible={false}
data={this.state.graphData} data={this.state.graphData}
onMouseOver={this.onNodeOver}
onMouseOut={this.onNodeOut}
orientation="vertical"/> orientation="vertical"/>
</div> </div>
</CardBody> </CardBody>
......
...@@ -20,6 +20,17 @@ export function astMetaToGraphData(astMeta) { ...@@ -20,6 +20,17 @@ export function astMetaToGraphData(astMeta) {
return graphData return graphData
} }
function generateMarkerObject(start, end) {
return {
startRow: start.lineNum,
startCol: start.charNum,
endRow: end.lineNum,
endCol: end.charNum,
className: "ast-node-highlight",
type: "text"
}
}
function createGraphNode(node, astMeta){ function createGraphNode(node, astMeta){
let name = node.name; let name = node.name;
let value = node.value; let value = node.value;
...@@ -33,10 +44,15 @@ function createGraphNode(node, astMeta){ ...@@ -33,10 +44,15 @@ function createGraphNode(node, astMeta){
children.push(createGraphNode(child, astMeta)) children.push(createGraphNode(child, astMeta))
} }
} }
// console.log(JSON.stringify(retObj)) //console.log(JSON.stringify(retObj))
return { return {
name: name, name: name,
attributes: {value: value}, attributes: {value: value},
highlighting: {
wacc: generateMarkerObject(node.waccStart, node.waccEnd),
js: typeof node.jsStart === "undefined" ? {} : generateMarkerObject(node.jsStart, node.jsEnd),
arm: []
},
children: children children: children
} }
......
...@@ -11,8 +11,6 @@ class ButtonStrip extends React.Component { ...@@ -11,8 +11,6 @@ class ButtonStrip extends React.Component {
<div> <div>
<Button onClick={this.props.onCompileClick}></Button> <Button onClick={this.props.onCompileClick}></Button>
<Button onClick={this.props.onStepJsClick}>STEP JS LINE</Button> <Button onClick={this.props.onStepJsClick}>STEP JS LINE</Button>
<Button onClick={this.props.onStepIntoAstClick}>STEP INTO AST NODE</Button>
<Button onClick={this.props.onStepOverAstClick}>STEP OVER AST NODE</Button>
</div> </div>
) )
} }
......
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