aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--www/index.html12
-rw-r--r--www/index.js17
-rw-r--r--www/package-lock.json21
-rw-r--r--www/package.json1
4 files changed, 43 insertions, 8 deletions
diff --git a/www/index.html b/www/index.html
index 55127df..81da9d9 100644
--- a/www/index.html
+++ b/www/index.html
@@ -5,6 +5,9 @@
5 <title>CSTea</title> 5 <title>CSTea</title>
6 </head> 6 </head>
7 <style> 7 <style>
8html, body {
9 margin: 0;
10}
8.grid-container { 11.grid-container {
9 width: 100%; 12 width: 100%;
10 display: grid; 13 display: grid;
@@ -13,15 +16,17 @@
13.syntax-node { 16.syntax-node {
14 padding-left: 5px; 17 padding-left: 5px;
15 margin-left: 20px; 18 margin-left: 20px;
16 border-left: 2px solid white; 19 border-left: 2px solid #2c313a;
17} 20}
18.syntax-node:hover { 21.syntax-node:hover {
19 border-left: 2px solid #ccc; 22 border-left: 2px solid #545c69;
20} 23}
21.syntax-err { 24.syntax-err {
22 color: red; 25 color: #e06c75;
23} 26}
24#cst, #source-code { 27#cst, #source-code {
28 background-color: #2c313a;
29 color: #a3aab6;
25 height: 100vh; 30 height: 100vh;
26 overflow: scroll; 31 overflow: scroll;
27} 32}
@@ -38,6 +43,5 @@ pre {
38 <div id="cst"> 43 <div id="cst">
39 </div> 44 </div>
40 </div> 45 </div>
41 <!-- button id="gen-cst">Generate CST</button -->
42 </body> 46 </body>
43</html> 47</html>
diff --git a/www/index.js b/www/index.js
index f870e92..3e00b9e 100644
--- a/www/index.js
+++ b/www/index.js
@@ -3,6 +3,7 @@ import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
3import {Decoration, DecorationSet} from "@codemirror/view" 3import {Decoration, DecorationSet} from "@codemirror/view"
4import {StateField, StateEffect} from "@codemirror/state" 4import {StateField, StateEffect} from "@codemirror/state"
5import {rust} from "@codemirror/lang-rust" 5import {rust} from "@codemirror/lang-rust"
6import {oneDark, oneDarkTheme, oneDarkHighlightStyle} from "@codemirror/theme-one-dark"
6 7
7let cst = document.getElementById('cst'); 8let cst = document.getElementById('cst');
8let view = new EditorView({ 9let view = new EditorView({
@@ -14,10 +15,13 @@ let view = new EditorView({
14 if (v.docChanged) { 15 if (v.docChanged) {
15 doRender() 16 doRender()
16 } 17 }
17 }) 18 }),
19 oneDark,
20 oneDarkTheme,
21 oneDarkHighlightStyle.extension
18 ] 22 ]
19 }), 23 }),
20 parent: document.getElementById('source-code') 24 parent: document.getElementById('source-code'),
21}) 25})
22 26
23const doHighlight = StateEffect.define() 27const doHighlight = StateEffect.define()
@@ -60,6 +64,8 @@ function render_cst(synRoot) {
60 let synText = wrap(synRoot.kind() + " @ " + r.to_string() + " " +synRoot.text(), "pre"); 64 let synText = wrap(synRoot.kind() + " @ " + r.to_string() + " " +synRoot.text(), "pre");
61 synText.onmouseover = () => { 65 synText.onmouseover = () => {
62 highlightArea(view, r); 66 highlightArea(view, r);
67 let sourceFile = view.state.doc.toString();
68 view.scrollPosIntoView(r.start());
63 } 69 }
64 nodeDiv.appendChild(synText); 70 nodeDiv.appendChild(synText);
65 if (!synRoot.is_token()) { 71 if (!synRoot.is_token()) {
@@ -80,14 +86,17 @@ function render_err(errorList) {
80 let errDiv = document.createElement("div"); 86 let errDiv = document.createElement("div");
81 errDiv.className = "syntax-err"; 87 errDiv.className = "syntax-err";
82 errorList.forEach(err => { 88 errorList.forEach(err => {
83 errDiv.appendChild(wrap(err.to_string(), "pre")); 89 let sourceFile = view.state.doc.toString();
90 let line = err.range().line(sourceFile);
91 let col = err.range().col(sourceFile);
92 errDiv.appendChild(wrap(`line ${line}, col ${col}: ` + err.to_string(), "pre"));
84 // highlightArea(view, err.range()); 93 // highlightArea(view, err.range());
85 }); 94 });
86 return errDiv; 95 return errDiv;
87} 96}
88 97
89function doRender() { 98function doRender() {
90 let sourceFile = view.state.doc.toString();; 99 let sourceFile = view.state.doc.toString();
91 cst.innerHTML = ""; 100 cst.innerHTML = "";
92 try { 101 try {
93 let synRoot = SynNode.from_str(sourceFile); 102 let synRoot = SynNode.from_str(sourceFile);
diff --git a/www/package-lock.json b/www/package-lock.json
index 3f37204..5f59eda 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -11,6 +11,7 @@
11 "dependencies": { 11 "dependencies": {
12 "@codemirror/basic-setup": "^0.18.2", 12 "@codemirror/basic-setup": "^0.18.2",
13 "@codemirror/lang-rust": "^0.18.0", 13 "@codemirror/lang-rust": "^0.18.0",
14 "@codemirror/theme-one-dark": "^0.18.1",
14 "cstea": "file:../pkg" 15 "cstea": "file:../pkg"
15 }, 16 },
16 "bin": { 17 "bin": {
@@ -240,6 +241,16 @@
240 "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.18.0.tgz", 241 "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.18.0.tgz",
241 "integrity": "sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg==" 242 "integrity": "sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg=="
242 }, 243 },
244 "node_modules/@codemirror/theme-one-dark": {
245 "version": "0.18.1",
246 "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-0.18.1.tgz",
247 "integrity": "sha512-0XRfWYDfwUlPlN8yrO7bDB+EuHFqUNhTJwgp2iIixZWejuZQK0NxKmjuhkiGsEz25w7toM12uUsNJ5mo7iFQcA==",
248 "dependencies": {
249 "@codemirror/highlight": "^0.18.0",
250 "@codemirror/state": "^0.18.0",
251 "@codemirror/view": "^0.18.0"
252 }
253 },
243 "node_modules/@codemirror/tooltip": { 254 "node_modules/@codemirror/tooltip": {
244 "version": "0.18.4", 255 "version": "0.18.4",
245 "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.18.4.tgz", 256 "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.18.4.tgz",
@@ -7426,6 +7437,16 @@
7426 "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.18.0.tgz", 7437 "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.18.0.tgz",
7427 "integrity": "sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg==" 7438 "integrity": "sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg=="
7428 }, 7439 },
7440 "@codemirror/theme-one-dark": {
7441 "version": "0.18.1",
7442 "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-0.18.1.tgz",
7443 "integrity": "sha512-0XRfWYDfwUlPlN8yrO7bDB+EuHFqUNhTJwgp2iIixZWejuZQK0NxKmjuhkiGsEz25w7toM12uUsNJ5mo7iFQcA==",
7444 "requires": {
7445 "@codemirror/highlight": "^0.18.0",
7446 "@codemirror/state": "^0.18.0",
7447 "@codemirror/view": "^0.18.0"
7448 }
7449 },
7429 "@codemirror/tooltip": { 7450 "@codemirror/tooltip": {
7430 "version": "0.18.4", 7451 "version": "0.18.4",
7431 "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.18.4.tgz", 7452 "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.18.4.tgz",
diff --git a/www/package.json b/www/package.json
index 92bd1ff..a7013c4 100644
--- a/www/package.json
+++ b/www/package.json
@@ -29,6 +29,7 @@
29 "dependencies": { 29 "dependencies": {
30 "@codemirror/basic-setup": "^0.18.2", 30 "@codemirror/basic-setup": "^0.18.2",
31 "@codemirror/lang-rust": "^0.18.0", 31 "@codemirror/lang-rust": "^0.18.0",
32 "@codemirror/theme-one-dark": "^0.18.1",
32 "cstea": "file:../pkg" 33 "cstea": "file:../pkg"
33 }, 34 },
34 "devDependencies": { 35 "devDependencies": {