Commit 6b4dddce authored by Matej Genci's avatar Matej Genci
Browse files

POC highlighting

parent 7f93faef
...@@ -3174,6 +3174,11 @@ ...@@ -3174,6 +3174,11 @@
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
"integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
}, },
"chain-function": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
"integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
},
"chalk": { "chalk": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
...@@ -3362,6 +3367,11 @@ ...@@ -3362,6 +3367,11 @@
} }
} }
}, },
"clone": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
},
"clone-deep": { "clone-deep": {
"version": "0.2.4", "version": "0.2.4",
"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
...@@ -3997,6 +4007,11 @@ ...@@ -3997,6 +4007,11 @@
"type": "^1.0.1" "type": "^1.0.1"
} }
}, },
"d3": {
"version": "3.5.17",
"resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
"integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
},
"damerau-levenshtein": { "damerau-levenshtein": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
...@@ -4302,6 +4317,14 @@ ...@@ -4302,6 +4317,14 @@
"utila": "~0.4" "utila": "~0.4"
} }
}, },
"dom-helpers": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
"requires": {
"@babel/runtime": "^7.1.2"
}
},
"dom-serializer": { "dom-serializer": {
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
...@@ -10616,6 +10639,20 @@ ...@@ -10616,6 +10639,20 @@
"whatwg-fetch": "^3.0.0" "whatwg-fetch": "^3.0.0"
} }
}, },
"react-d3-tree": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/react-d3-tree/-/react-d3-tree-1.16.1.tgz",
"integrity": "sha512-LybzIZM4f4A+/ao6U5OEAZVQbQ08w0wmMYA7TZvPRYQ0QZnSImK9PFTiGR0PW8hVWQqOVJtSZyXlYyJ+M+Uh+A==",
"requires": {
"clone": "^2.1.1",
"d3": "3.5.17",
"deep-equal": "^1.0.1",
"prop-types": "^15.5.10",
"react-lifecycles-compat": "^3.0.4",
"react-transition-group": "^1.1.3",
"uuid": "^3.0.1"
}
},
"react-dev-utils": { "react-dev-utils": {
"version": "10.2.0", "version": "10.2.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz",
...@@ -10824,6 +10861,11 @@ ...@@ -10824,6 +10861,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz",
"integrity": "sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==" "integrity": "sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA=="
}, },
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-scripts": { "react-scripts": {
"version": "3.4.0", "version": "3.4.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.0.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.0.tgz",
...@@ -10884,6 +10926,18 @@ ...@@ -10884,6 +10926,18 @@
"workbox-webpack-plugin": "4.3.1" "workbox-webpack-plugin": "4.3.1"
} }
}, },
"react-transition-group": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
"integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
"requires": {
"chain-function": "^1.0.0",
"dom-helpers": "^3.2.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.5.6",
"warning": "^3.0.0"
}
},
"read-pkg": { "read-pkg": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
...@@ -13028,6 +13082,14 @@ ...@@ -13028,6 +13082,14 @@
"makeerror": "1.0.x" "makeerror": "1.0.x"
} }
}, },
"warning": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
"requires": {
"loose-envify": "^1.0.0"
}
},
"watchpack": { "watchpack": {
"version": "1.6.0", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
.App { .App {
background-color: #282c34; background-color: #282c34;
color: white; color: white;
justify-content: center;
} }
.App-code-editors {
display: flex;
}
.warning
{
background: rgba(255, 50, 50, 0.1);
position: absolute;
}
\ No newline at end of file
import React from 'react'; import React from 'react';
import Tree from 'react-d3-tree';
// Custom components
import ButtonStrip from './view/ButonStrip' import ButtonStrip from './view/ButonStrip'
import CodeEditor from './view/CodeEditor' import CodeEditor from './view/CodeEditor'
import UserIO from './view/UserIO' import UserIO from './view/UserIO'
...@@ -28,10 +31,20 @@ class App extends React.Component { ...@@ -28,10 +31,20 @@ class App extends React.Component {
name='arm_edit'/> name='arm_edit'/>
</div> </div>
<div id="treeWrapper" style={{width: '50em', height: '20em', background: 'white'}}>
<Tree
data={testGraphData}
orientation="vertical" />
</div>
<UserIO /> <UserIO />
</div> </div>
) )
} }
} }
const testGraphData=[{name:"WACC Program",children:[{name:"BinOP",attributes:{operation:"Add"},
children:[{name:"Const",attributes:{value:"1"}},{name:"VarIdent",attributes:{ident:"x"}}]}]}];
export default App; export default App;
...@@ -5,14 +5,23 @@ import "ace-builds/src-noconflict/mode-java"; ...@@ -5,14 +5,23 @@ import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
class CodeEditor extends React.Component { class CodeEditor extends React.Component {
constructor(props) {
super(props)
this.state = {value: "", markers: []}
}
heading() { heading() {
if (this.props.heading !== undefined) { if (this.props.heading !== undefined) {
return <h1>{this.props.heading}</h1> return <h1>{this.props.heading}</h1>
} }
} }
onChange(newValue) { onChange = (newValue) => {
console.log("change", newValue); console.log("change", newValue);
this.setState({
value: newValue,
markers: [{ startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text' }]
})
} }
// Render editor // Render editor
...@@ -20,15 +29,15 @@ class CodeEditor extends React.Component { ...@@ -20,15 +29,15 @@ class CodeEditor extends React.Component {
return ( return (
<div> <div>
{this.heading()} {this.heading()}
<AceEditor <AceEditor
mode="java" mode="java"
theme="github" theme="github"
value={this.state.value}
onChange={this.onChange} onChange={this.onChange}
name={this.props.name} name={this.props.name}
className="aceeditor" className="aceeditor"
editorProps={{ $blockScrolling: true }} markers={this.state.markers}
/> editorProps={{ $blockScrolling: true }} />
</div> </div>
) )
}; };
......
...@@ -2,7 +2,16 @@ import React from 'react' ...@@ -2,7 +2,16 @@ import React from 'react'
class UserIO extends React.Component { class UserIO extends React.Component {
render() { render() {
return <code>User IO. Will do something</code> return (
<div className="userIO">
<textarea id="programOutput"></textarea>
<div className="userIO-input">
<input id="programInput"></input>
<button type="submit">submit</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