diff options
author | Kristóf Marussy <marussy@mit.bme.hu> | 2021-06-30 11:42:41 +0200 |
---|---|---|
committer | Kristóf Marussy <marussy@mit.bme.hu> | 2021-06-30 11:45:25 +0200 |
commit | a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea (patch) | |
tree | cf96b878b0d91ca7a806224960d3bd1d65f0aec8 /language-web/src | |
parent | Fix enum literal scopes (diff) | |
download | refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.tar.gz refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.tar.zst refinery-a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea.zip |
Convert to React app
Diffstat (limited to 'language-web/src')
-rw-r--r-- | language-web/src/main/html/index.html | 45 | ||||
-rw-r--r-- | language-web/src/main/js/components/XtextCodeMirror.jsx | 32 | ||||
-rw-r--r-- | language-web/src/main/js/index.js | 12 | ||||
-rw-r--r-- | language-web/src/main/js/index.jsx | 43 |
4 files changed, 81 insertions, 51 deletions
diff --git a/language-web/src/main/html/index.html b/language-web/src/main/html/index.html index 915234d3..01b4e536 100644 --- a/language-web/src/main/html/index.html +++ b/language-web/src/main/html/index.html | |||
@@ -5,44 +5,11 @@ | |||
5 | <title>Example Web Editor</title> | 5 | <title>Example Web Editor</title> |
6 | </head> | 6 | </head> |
7 | <body> | 7 | <body> |
8 | <div class="container"> | 8 | <noscript> |
9 | <div class="header"> | 9 | <p> |
10 | <h1>Example Problem Web Editor</h1> | 10 | This application requires JavaScript to run. |
11 | </div> | 11 | </p> |
12 | <div class="content"> | 12 | </noscript> |
13 | <div class="xtext-editor"><pre>class Family { | 13 | <div id="app"></div> |
14 | contains Person[] members | ||
15 | } | ||
16 | |||
17 | class Person { | ||
18 | Person[] children opposite parent | ||
19 | Person[0..1] parent opposite children | ||
20 | int age | ||
21 | TaxStatus taxStatus | ||
22 | } | ||
23 | |||
24 | enum TaxStatus { | ||
25 | child, student, adult, retired | ||
26 | } | ||
27 | |||
28 | % A child cannot have any dependents. | ||
29 | error invalidTaxStatus(Person p) :- | ||
30 | taxStatus(p, child), children(p, _q). | ||
31 | |||
32 | Family('family'). | ||
33 | members('family', anne). | ||
34 | members('family', bob). | ||
35 | members('family', ciri). | ||
36 | children(anne, ciri). | ||
37 | ?children(bob, ciri). | ||
38 | taxStatus(anne, adult). | ||
39 | age(anne, 35). | ||
40 | bobAge: 27. | ||
41 | age(bob, bobAge). | ||
42 | !age(ciri, bobAge). | ||
43 | |||
44 | scope Family = 1, Person += 5..10.</pre></div> | ||
45 | </div> | ||
46 | </div> | ||
47 | </body> | 14 | </body> |
48 | </html> | 15 | </html> |
diff --git a/language-web/src/main/js/components/XtextCodeMirror.jsx b/language-web/src/main/js/components/XtextCodeMirror.jsx new file mode 100644 index 00000000..75a20daa --- /dev/null +++ b/language-web/src/main/js/components/XtextCodeMirror.jsx | |||
@@ -0,0 +1,32 @@ | |||
1 | import React, { useCallback, useState } from 'react'; | ||
2 | import { Controlled as CodeMirror } from 'react-codemirror2'; | ||
3 | import 'mode-problem'; | ||
4 | import { createServices, removeServices } from 'xtext/xtext-codemirror'; | ||
5 | |||
6 | export default function XtextCodeMirror({ initialValue }) { | ||
7 | const [value, setValue] = useState(initialValue); | ||
8 | |||
9 | const codeMirrorOptions = { | ||
10 | mode: 'xtext/problem', | ||
11 | indentUnit: 2, | ||
12 | }; | ||
13 | |||
14 | const xtextOptions = { | ||
15 | xtextLang: 'problem', | ||
16 | enableFormattingAction: true, | ||
17 | }; | ||
18 | |||
19 | const onBeforeChange = useCallback((_editor, _data, newValue) => { | ||
20 | setValue(newValue); | ||
21 | }, [setValue]); | ||
22 | |||
23 | return ( | ||
24 | <CodeMirror | ||
25 | value={value} | ||
26 | options={codeMirrorOptions} | ||
27 | editorDidMount={editor => createServices(editor, xtextOptions)} | ||
28 | editorWillUnmount={removeServices} | ||
29 | onBeforeChange={onBeforeChange} | ||
30 | /> | ||
31 | ); | ||
32 | }; | ||
diff --git a/language-web/src/main/js/index.js b/language-web/src/main/js/index.js deleted file mode 100644 index b4cd450e..00000000 --- a/language-web/src/main/js/index.js +++ /dev/null | |||
@@ -1,12 +0,0 @@ | |||
1 | import xtext from 'xtext/xtext-codemirror'; | ||
2 | import 'mode-problem'; | ||
3 | |||
4 | import '../css/index.scss'; | ||
5 | |||
6 | xtext.createEditor({ | ||
7 | baseUrl: '/', | ||
8 | xtextLang: 'problem', | ||
9 | enableFormattingAction: true, | ||
10 | sendFullText: false, | ||
11 | indentUnit: 2, | ||
12 | }); | ||
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx new file mode 100644 index 00000000..48c0baeb --- /dev/null +++ b/language-web/src/main/js/index.jsx | |||
@@ -0,0 +1,43 @@ | |||
1 | import React from 'react'; | ||
2 | import { render } from 'react-dom'; | ||
3 | |||
4 | import XtextCodeMirror from "./components/XtextCodeMirror"; | ||
5 | |||
6 | import '../css/index.scss'; | ||
7 | |||
8 | const initialValue = `class Family { | ||
9 | contains Person[] members | ||
10 | } | ||
11 | |||
12 | class Person { | ||
13 | Person[] children opposite parent | ||
14 | Person[0..1] parent opposite children | ||
15 | int age | ||
16 | TaxStatus taxStatus | ||
17 | } | ||
18 | |||
19 | enum TaxStatus { | ||
20 | child, student, adult, retired | ||
21 | } | ||
22 | |||
23 | % A child cannot have any dependents. | ||
24 | error invalidTaxStatus(Person p) :- | ||
25 | taxStatus(p, child), children(p, _q). | ||
26 | |||
27 | Family('family'). | ||
28 | members('family', anne). | ||
29 | members('family', bob). | ||
30 | members('family', ciri). | ||
31 | children(anne, ciri). | ||
32 | ?children(bob, ciri). | ||
33 | taxStatus(anne, adult). | ||
34 | age(anne, 35). | ||
35 | bobAge: 27. | ||
36 | age(bob, bobAge). | ||
37 | !age(ciri, bobAge). | ||
38 | |||
39 | scope Family = 1, Person += 5..10. | ||
40 | `; | ||
41 | const app = <XtextCodeMirror initialValue={initialValue}/>; | ||
42 | |||
43 | render(app, document.getElementById('app')); | ||