msyds/gf-core
1
0
Fork 0
forked from GitHub/gf-core
Code Pull Requests Activity

Syntax editor: initial support for string literals

Browse Source 
Also a bug fix when switching to editor, although this still messes up
when using the letters grammar.
Also updated readme with options, and some style improvements.
This commit is contained in:
john.j.camilleri
2013-01-11 15:33:17 +00:00
parent 5dfca98088
commit 776539803d
7 changed files with 161 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/www/syntax-editor/Makefile
View File

@@ -1,2 +1,2 @@
html:
pandoc --from=markdown --to=html5 --parse-raw --output=about.html README.md
pandoc --from=markdown+pipe_tables --to=html --output=about.html README.md

76
src/www/syntax-editor/README.md
View File

@@ -6,59 +6,51 @@
<link rel=stylesheet type="text/css" href="editor.css">
<meta charset="UTF-8">
</head>
<body class="syntax-editor">
<body class="about">
# GF web-based syntax editor
John J. Camilleri
December 2012
January 2013
An improved version of the [old syntax editor][1].
A tool for building and manipulating abstract syntax trees in GF.
This is meant as improved replacement of the [old syntax editor][old].
[1]:http://www.grammaticalframework.org/~meza/restWiki/editor.html
[old]:http://www.grammaticalframework.org/~meza/restWiki/editor.html
## Example usage
See `editor.html` and `editor_online.js`.
If you want to use the tool in your own application, everything you need in the source
files `editor.html` and `editor_online.js`. Contact the [GF developer mailing list][gf-dev]
if you have any problems.
[gf-dev]:http://groups.google.com/group/gf-dev
## Available startup options
+---------------------+--------------------------------------------------+--------+
|Options |Description |Default |
+=====================+==================================================+========+
|target | |"editor"|
| | | |
+---------------------+--------------------------------------------------+--------+
|initial.grammar |Initial grammar URL, | |
| |e.g. `"http://localhost:41296/grammars/Foods.pgf"`| |
+---------------------+--------------------------------------------------+--------+
|initial.startcat |Initial startcat |(grammar|
| | |default)|
+---------------------+--------------------------------------------------+--------+
|initial.languages |Initial linearisation languages, |(all) |
| |e.g. `["Eng","Swe","Mlt"]` | |
+---------------------+--------------------------------------------------+--------+
|initial.abstr |Initial abstract tree (as string), e.g. `"Pred | |
| |(That Fish) Expensive"` | |
+---------------------+--------------------------------------------------+--------+
|show_grammar_menu |Show grammar menu? |True |
| | | |
+---------------------+--------------------------------------------------+--------+
|show_startcat_menu |Show startcat menu? |True |
| | | |
+---------------------+--------------------------------------------------+--------+
|show_to_menu |Show languages menu? |True |
| | | |
+---------------------+--------------------------------------------------+--------+
|show_random_button |Show random button? |True |
| | | |
+---------------------+--------------------------------------------------+--------+
|show_import |Show import button/panel? |True |
| | | |
+---------------------+--------------------------------------------------+--------+
|show_export |Show export button? |True |
| | | |
+---------------------+--------------------------------------------------+--------+
### Grammar Manager
| Options | Description | Default |
|---------------------+-------------------------------------------------------------------------+-------------------|
| `initial.grammar` | Initial grammar URL, e.g. `"http://localhost:41296/grammars/Foods.pgf"` | |
| `initial.startcat` | Initial startcat | (grammar default) |
| `initial.languages` | Initial linearisation languages, e.g. `["Eng","Swe","Mlt"]` | (all) |
### Editor
| Options | Description | Default |
|----------------------+---------------------------------------------------------------------------------+----------|
| `target` | | "editor" |
| `initial.abstr` | Initial abstract tree (as string), e.g. `"Pred (That Fish) Expensive"` | |
| `lin_action` | Function called when clicking on the language button beside each linearisation. | |
| `lin_action_tooltip` | Tooltip for the button beside each linearisation. | |
| `show_grammar_menu` | Show grammar menu? | True |
| `show_startcat_menu` | Show startcat menu? | True |
| `show_to_menu` | Show languages menu? | True |
| `show_random_button` | Show random button? | True |
| `show_import` | Show import button/panel? | True |
| `show_export` | Show export button? | True |
## Notes
@@ -72,7 +64,7 @@ See `editor.html` and `editor_online.js`.
- Usage of printnames
- Enter string/float/int literals
- more prominence to Disamb-linearizations
- show all resulting linearizations/variants
- show all resulting linearization variants
- undo/redo (or back/forward) navigation
- structure fridge magnets more (eg newline before the magnet whose first letter is different)

113
src/www/syntax-editor/about.html
View File

@@ -6,83 +6,100 @@ About the syntax editor
</title>
<link rel=stylesheet type="text/css" href="../minibar/minibar.css"> <link rel=stylesheet type="text/css" href="editor.css"> <meta charset="UTF-8">
</head>
<body class="syntax-editor">
<body class="about">
<h1 id="gf-web-based-syntax-editor">GF web-based syntax editor</h1>
<p>John J. Camilleri<br>December 2012</p>
<p>An improved version of the <a href="http://www.grammaticalframework.org/~meza/restWiki/editor.html">old syntax editor</a>.</p>
<p>John J. Camilleri<br />January 2013</p>
<p>A tool for building and manipulating abstract syntax trees in GF. This is meant as improved replacement of the <a href="http://www.grammaticalframework.org/~meza/restWiki/editor.html">old syntax editor</a>.</p>
<h2 id="example-usage">Example usage</h2>
<p>See <code>editor.html</code> and <code>editor_online.js</code>.</p>
<p>If you want to use the tool in your own application, everything you need in the source files <code>editor.html</code> and <code>editor_online.js</code>. Contact the <a href="http://groups.google.com/group/gf-dev">GF developer mailing list</a> if you have any problems.</p>
<h2 id="available-startup-options">Available startup options</h2>
<h3 id="grammar-manager">Grammar Manager</h3>
<table>
<col style="width: 26%" /><col style="width: 62%" /><col style="width: 10%" /><thead>
<thead>
<tr class="header">
<th style="text-align: left;">Options</th>
<th style="text-align: left;">Description</th>
<th style="text-align: left;">Default</th>
<th align="left">Options</th>
<th align="left">Description</th>
<th align="left">Default</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">target</td>
<td style="text-align: left;">
</td>
<td style="text-align: left;">&quot;editor&quot;</td>
<td align="left"><code>initial.grammar</code></td>
<td align="left">Initial grammar URL, e.g. <code>&quot;http://localhost:41296/grammars/Foods.pgf&quot;</code></td>
<td align="left"></td>
</tr>
<tr class="even">
<td style="text-align: left;">initial.grammar</td>
<td style="text-align: left;">Initial grammar URL, e.g. <code>&quot;http://localhost:41296/grammars/Foods.pgf&quot;</code></td>
<td style="text-align: left;">
</td>
<td align="left"><code>initial.startcat</code></td>
<td align="left">Initial startcat</td>
<td align="left">(grammar default)</td>
</tr>
<tr class="odd">
<td style="text-align: left;">initial.startcat</td>
<td style="text-align: left;">Initial startcat</td>
<td style="text-align: left;">(grammar default)</td>
<td align="left"><code>initial.languages</code></td>
<td align="left">Initial linearisation languages, e.g. <code>[&quot;Eng&quot;,&quot;Swe&quot;,&quot;Mlt&quot;]</code></td>
<td align="left">(all)</td>
</tr>
</tbody>
</table>
<h3 id="editor">Editor</h3>
<table>
<thead>
<tr class="header">
<th align="left">Options</th>
<th align="left">Description</th>
<th align="left">Default</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left"><code>target</code></td>
<td align="left"></td>
<td align="left">&quot;editor&quot;</td>
</tr>
<tr class="even">
<td style="text-align: left;">initial.languages</td>
<td style="text-align: left;">Initial linearisation languages, e.g. <code>[&quot;Eng&quot;,&quot;Swe&quot;,&quot;Mlt&quot;]</code></td>
<td style="text-align: left;">(all)</td>
<td align="left"><code>initial.abstr</code></td>
<td align="left">Initial abstract tree (as string), e.g. <code>&quot;Pred (That Fish) Expensive&quot;</code></td>
<td align="left"></td>
</tr>
<tr class="odd">
<td style="text-align: left;">initial.abstr</td>
<td style="text-align: left;">Initial abstract tree (as string), e.g. <code>&quot;Pred (That Fish) Expensive&quot;</code></td>
<td style="text-align: left;">
</td>
<td align="left"><code>lin_action</code></td>
<td align="left">Function called when clicking on the language button beside each linearisation.</td>
<td align="left"></td>
</tr>
<tr class="even">
<td style="text-align: left;">show_grammar_menu</td>
<td style="text-align: left;">Show grammar menu?</td>
<td style="text-align: left;">True</td>
<td align="left"><code>lin_action_tooltip</code></td>
<td align="left">Tooltip for the button beside each linearisation.</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td style="text-align: left;">show_startcat_menu</td>
<td style="text-align: left;">Show startcat menu?</td>
<td style="text-align: left;">True</td>
<td align="left"><code>show_grammar_menu</code></td>
<td align="left">Show grammar menu?</td>
<td align="left">True</td>
</tr>
<tr class="even">
<td style="text-align: left;">show_to_menu</td>
<td style="text-align: left;">Show languages menu?</td>
<td style="text-align: left;">True</td>
<td align="left"><code>show_startcat_menu</code></td>
<td align="left">Show startcat menu?</td>
<td align="left">True</td>
</tr>
<tr class="odd">
<td style="text-align: left;">show_random_button</td>
<td style="text-align: left;">Show random button?</td>
<td style="text-align: left;">True</td>
<td align="left"><code>show_to_menu</code></td>
<td align="left">Show languages menu?</td>
<td align="left">True</td>
</tr>
<tr class="even">
<td style="text-align: left;">show_import</td>
<td style="text-align: left;">Show import button/panel?</td>
<td style="text-align: left;">True</td>
<td align="left"><code>show_random_button</code></td>
<td align="left">Show random button?</td>
<td align="left">True</td>
</tr>
<tr class="odd">
<td style="text-align: left;">show_export</td>
<td style="text-align: left;">Show export button?</td>
<td style="text-align: left;">True</td>
<td align="left"><code>show_import</code></td>
<td align="left">Show import button/panel?</td>
<td align="left">True</td>
</tr>
<tr class="even">
<td align="left"><code>show_export</code></td>
<td align="left">Show export button?</td>
<td align="left">True</td>
</tr>
</tbody>
</table>
@@ -98,7 +115,7 @@ About the syntax editor
<li>Usage of printnames</li>
<li>Enter string/float/int literals</li>
<li>more prominence to Disamb-linearizations</li>
<li>show all resulting linearizations/variants</li>
<li>show all resulting linearization variants</li>
<li>undo/redo (or back/forward) navigation</li>
<li>structure fridge magnets more (eg newline before the magnet whose first letter is different)</li>
</ul>

6
src/www/syntax-editor/ast.js
View File

@@ -73,6 +73,7 @@ function AST(fun, cat) {
return new ASTNode({
"fun": fun,
"cat": cat,
"string": "", // for String literals
"deps": {}, // dependent types
"children": []
});
@@ -304,7 +305,10 @@ function AST(fun, cat) {
this.toString = function() {
var s = "";
function visit(node) {
s += node.fun ? node.fun : "?" ;
if (node.cat == "String")
s += '"' + ((node.string) ? node.string : "") + '"';
else
s += node.fun ? node.fun : "?" ;
if (!node.hasChildren())
// if (node.children.length == 0)
return;

8
src/www/syntax-editor/editor.css
View File

@@ -1,4 +1,4 @@
body.syntax-editor {
body {
background: #ccc url("../minibar/brushed-metal.png");
}
@@ -124,3 +124,9 @@ body.syntax-editor {
padding: 1em;
}
/* From http://www.grammaticalframework.org/css/style.css */
.about table { border-collapse: collapse; }
.about th,
.about td { border: 1px solid #333; padding:0 5px; }
.about td { background: white; }
.about th { background: #9df; }

53
src/www/syntax-editor/editor.js
View File

@@ -27,6 +27,7 @@ function Editor(gm,opts) {
/* --- Creating UI components ------------------------------------------- */
this.container = document.getElementById(this.options.target);
this.container.classList.add("editor");
this.ui = {
menubar: div_class("menu"),
@@ -150,9 +151,13 @@ Editor.prototype.get_startcat=function() {
return this.gm.startcat;
}
// Called from Minibar, for example
Editor.prototype.initialize_from=function(opts) {
if (opts.abstr)
this.import_ast(opts.abstr);
var t = this;
if (opts.abstr) {
t.ast = new AST(null, t.get_startcat());
t.import_ast(opts.abstr);
}
}
// Called after changing grammar or startcat
@@ -197,12 +202,37 @@ Editor.prototype.add_refinement=function(fun,opts) {
return opt;
}
// Add a literal refinement to UI, e.g. String
Editor.prototype.add_literal_refinement=function() {
var t = this;
t.ui.refinements.innerHTML = "Enter string: ";
var nde = t.ast.getCurrentNode();
var val = (nde.string) ? nde.string : "";
var input = node("input",{
type:"text",
value: val
},[]);
// TODO: Perhaps we should have an update button instead
input.onkeyup = function() {
nde.string = input.value;
t.redraw_tree();
t.update_linearisation();
}
t.ui.refinements.appendChild(input);
}
// Show refinements for given cat (usually that of current node)
Editor.prototype.get_refinements=function(cat) {
var t = this;
t.ui.refinements.innerHTML = "…";
if (cat == undefined)
cat = t.ast.getCat();
if (cat == undefined) cat = t.ast.getCat();
// Special case when cat is "String"
if (cat == "String") {
t.add_literal_refinement();
return;
}
var args = {
id: cat,
format: "json"
@@ -460,9 +490,18 @@ Editor.prototype.redraw_tree=function() {
var container2 = empty_class("div", "node");
if (id.get().length == 1)
container2.classList.add("first");
var label =
((node.fun) ? node.fun : "?") + " : " +
((node.cat) ? node.cat : "?");
// Special case for String literal
if (node.cat == "String") {
var label =
'"' + ((node.string) ? node.string : "") + '"' +
" : String";
} else {
var label =
((node.fun) ? node.fun : "?") + " : " +
((node.cat) ? node.cat : "?");
}
var current = id.equals(t.ast.getCurrentID());
var element = elem("a", {class:(current?"current":"")}, [text(label)]);
element.onclick = function() {

10
src/www/syntax-editor/editor_online.js
View File

@@ -39,14 +39,10 @@ if(window.Minibar) // Minibar loaded?
},
// get us back to the editor!
abstract_action: function(tree) {
var editor_options = {
target: "editor",
initial: {
grammar: editor.minibar.grammar_menu.value, // hmm
startcat: editor.minibar.input.startcat_menu.value, // hmm
abstr: tree
}
var opts = {
abstr: tree
}
editor.initialize_from(opts);
editor.minibar.hide();
editor.show();
}