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 {
width: auto;
}
.warning {
.warning-highlight {
background: rgba(255, 50, 50, 0.1);
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 {
this.setState({
wacc: {
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: [{}]
})
}
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) => {
console.log(test);
// if (!window.EMULATOR_IS_INPUT) {
......@@ -151,7 +183,10 @@ class App extends React.Component {
<CardBody>
<div style={{height: '50em'}}>
<Tree
collapsible={false}
data={this.state.graphData}
onMouseOver={this.onNodeOver}
onMouseOut={this.onNodeOut}
orientation="vertical"/>
</div>
</CardBody>
......
......@@ -20,6 +20,17 @@ export function astMetaToGraphData(astMeta) {
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){
let name = node.name;
let value = node.value;
......@@ -33,10 +44,15 @@ function createGraphNode(node, astMeta){
children.push(createGraphNode(child, astMeta))
}
}
// console.log(JSON.stringify(retObj))
//console.log(JSON.stringify(retObj))
return {
name: name,
attributes: {value: value},
highlighting: {
wacc: generateMarkerObject(node.waccStart, node.waccEnd),
js: typeof node.jsStart === "undefined" ? {} : generateMarkerObject(node.jsStart, node.jsEnd),
arm: []
},
children: children
}
......
......@@ -11,8 +11,6 @@ class ButtonStrip extends React.Component {
<div>
<Button onClick={this.props.onCompileClick}></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>
)
}
......
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