GitHub/gf-core
1
0
Fork 1
mirror of https://github.com/GrammaticalFramework/gf-core.git synced 2026-04-23 11:42:49 -06:00
Code Issues Packages Projects Releases Wiki 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 be5a313372
commit b8e3fe7bc0
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: 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"> <link rel=stylesheet type="text/css" href="editor.css">
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body class="syntax-editor"> <body class="about">
# GF web-based syntax editor # GF web-based syntax editor
John J. Camilleri 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 ## 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 ## Available startup options
+---------------------+--------------------------------------------------+--------+ ### Grammar Manager
|Options |Description |Default |
+=====================+==================================================+========+ | 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.grammar |Initial grammar URL, | | | `initial.languages` | Initial linearisation languages, e.g. `["Eng","Swe","Mlt"]` | (all) |
| |e.g. `"http://localhost:41296/grammars/Foods.pgf"`| |
+---------------------+--------------------------------------------------+--------+
|initial.startcat |Initial startcat |(grammar| ### Editor
| | |default)|
+---------------------+--------------------------------------------------+--------+ | Options | Description | Default |
|initial.languages |Initial linearisation languages, |(all) | |----------------------+---------------------------------------------------------------------------------+----------|
| |e.g. `["Eng","Swe","Mlt"]` | | | `target` | | "editor" |
+---------------------+--------------------------------------------------+--------+ | `initial.abstr` | Initial abstract tree (as string), e.g. `"Pred (That Fish) Expensive"` | |
|initial.abstr |Initial abstract tree (as string), e.g. `"Pred | | | `lin_action` | Function called when clicking on the language button beside each linearisation. | |
| |(That Fish) Expensive"` | | | `lin_action_tooltip` | Tooltip for the button beside each linearisation. | |
+---------------------+--------------------------------------------------+--------+ | `show_grammar_menu` | Show grammar menu? | True |
|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_startcat_menu |Show startcat menu? |True | | `show_import` | Show import button/panel? | True |
| | | | | `show_export` | Show export button? | 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 ## Notes
@@ -72,7 +64,7 @@ See `editor.html` and `editor_online.js`.
- Usage of printnames - Usage of printnames
- Enter string/float/int literals - Enter string/float/int literals
- more prominence to Disamb-linearizations - more prominence to Disamb-linearizations
- show all resulting linearizations/variants - show all resulting linearization variants
- undo/redo (or back/forward) navigation - undo/redo (or back/forward) navigation
- structure fridge magnets more (eg newline before the magnet whose first letter is different) - 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> </title>
<link rel=stylesheet type="text/css" href="../minibar/minibar.css"> <link rel=stylesheet type="text/css" href="editor.css"> <meta charset="UTF-8"> <link rel=stylesheet type="text/css" href="../minibar/minibar.css"> <link rel=stylesheet type="text/css" href="editor.css"> <meta charset="UTF-8">
</head> </head>
<body class="syntax-editor"> <body class="about">
<h1 id="gf-web-based-syntax-editor">GF web-based syntax editor</h1> <h1 id="gf-web-based-syntax-editor">GF web-based syntax editor</h1>
<p>John J. Camilleri<br>December 2012</p> <p>John J. Camilleri<br />January 2013</p>
<p>An improved version of the <a href="http://www.grammaticalframework.org/~meza/restWiki/editor.html">old syntax editor</a>.</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> <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> <h2 id="available-startup-options">Available startup options</h2>
<h3 id="grammar-manager">Grammar Manager</h3>
<table> <table>
<col style="width: 26%" /><col style="width: 62%" /><col style="width: 10%" /><thead> <thead>
<tr class="header"> <tr class="header">
<th style="text-align: left;">Options</th> <th align="left">Options</th>
<th style="text-align: left;">Description</th> <th align="left">Description</th>
<th style="text-align: left;">Default</th> <th align="left">Default</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="odd"> <tr class="odd">
<td style="text-align: left;">target</td> <td align="left"><code>initial.grammar</code></td>
<td style="text-align: left;"> <td align="left">Initial grammar URL, e.g. <code>&quot;http://localhost:41296/grammars/Foods.pgf&quot;</code></td>
<td align="left"></td>
</td>
<td style="text-align: left;">&quot;editor&quot;</td>
</tr> </tr>
<tr class="even"> <tr class="even">
<td style="text-align: left;">initial.grammar</td> <td align="left"><code>initial.startcat</code></td>
<td style="text-align: left;">Initial grammar URL, e.g. <code>&quot;http://localhost:41296/grammars/Foods.pgf&quot;</code></td> <td align="left">Initial startcat</td>
<td style="text-align: left;"> <td align="left">(grammar default)</td>
</td>
</tr> </tr>
<tr class="odd"> <tr class="odd">
<td style="text-align: left;">initial.startcat</td> <td align="left"><code>initial.languages</code></td>
<td style="text-align: left;">Initial startcat</td> <td align="left">Initial linearisation languages, e.g. <code>[&quot;Eng&quot;,&quot;Swe&quot;,&quot;Mlt&quot;]</code></td>
<td style="text-align: left;">(grammar default)</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>
<tr class="even"> <tr class="even">
<td style="text-align: left;">initial.languages</td> <td align="left"><code>initial.abstr</code></td>
<td style="text-align: left;">Initial linearisation languages, e.g. <code>[&quot;Eng&quot;,&quot;Swe&quot;,&quot;Mlt&quot;]</code></td> <td align="left">Initial abstract tree (as string), e.g. <code>&quot;Pred (That Fish) Expensive&quot;</code></td>
<td style="text-align: left;">(all)</td> <td align="left"></td>
</tr> </tr>
<tr class="odd"> <tr class="odd">
<td style="text-align: left;">initial.abstr</td> <td align="left"><code>lin_action</code></td>
<td style="text-align: left;">Initial abstract tree (as string), e.g. <code>&quot;Pred (That Fish) Expensive&quot;</code></td> <td align="left">Function called when clicking on the language button beside each linearisation.</td>
<td style="text-align: left;"> <td align="left"></td>
</td>
</tr> </tr>
<tr class="even"> <tr class="even">
<td style="text-align: left;">show_grammar_menu</td> <td align="left"><code>lin_action_tooltip</code></td>
<td style="text-align: left;">Show grammar menu?</td> <td align="left">Tooltip for the button beside each linearisation.</td>
<td style="text-align: left;">True</td> <td align="left"></td>
</tr> </tr>
<tr class="odd"> <tr class="odd">
<td style="text-align: left;">show_startcat_menu</td> <td align="left"><code>show_grammar_menu</code></td>
<td style="text-align: left;">Show startcat menu?</td> <td align="left">Show grammar menu?</td>
<td style="text-align: left;">True</td> <td align="left">True</td>
</tr> </tr>
<tr class="even"> <tr class="even">
<td style="text-align: left;">show_to_menu</td> <td align="left"><code>show_startcat_menu</code></td>
<td style="text-align: left;">Show languages menu?</td> <td align="left">Show startcat menu?</td>
<td style="text-align: left;">True</td> <td align="left">True</td>
</tr> </tr>
<tr class="odd"> <tr class="odd">
<td style="text-align: left;">show_random_button</td> <td align="left"><code>show_to_menu</code></td>
<td style="text-align: left;">Show random button?</td> <td align="left">Show languages menu?</td>
<td style="text-align: left;">True</td> <td align="left">True</td>
</tr> </tr>
<tr class="even"> <tr class="even">
<td style="text-align: left;">show_import</td> <td align="left"><code>show_random_button</code></td>
<td style="text-align: left;">Show import button/panel?</td> <td align="left">Show random button?</td>
<td style="text-align: left;">True</td> <td align="left">True</td>
</tr> </tr>
<tr class="odd"> <tr class="odd">
<td style="text-align: left;">show_export</td> <td align="left"><code>show_import</code></td>
<td style="text-align: left;">Show export button?</td> <td align="left">Show import button/panel?</td>
<td style="text-align: left;">True</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> </tr>
</tbody> </tbody>
</table> </table>
@@ -98,7 +115,7 @@ About the syntax editor
<li>Usage of printnames</li> <li>Usage of printnames</li>
<li>Enter string/float/int literals</li> <li>Enter string/float/int literals</li>
<li>more prominence to Disamb-linearizations</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>undo/redo (or back/forward) navigation</li>
<li>structure fridge magnets more (eg newline before the magnet whose first letter is different)</li> <li>structure fridge magnets more (eg newline before the magnet whose first letter is different)</li>
</ul> </ul>

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

@@ -73,6 +73,7 @@ function AST(fun, cat) {
return new ASTNode({ return new ASTNode({
"fun": fun, "fun": fun,
"cat": cat, "cat": cat,
"string": "", // for String literals
"deps": {}, // dependent types "deps": {}, // dependent types
"children": [] "children": []
}); });
@@ -304,7 +305,10 @@ function AST(fun, cat) {
this.toString = function() { this.toString = function() {
var s = ""; var s = "";
function visit(node) { 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.hasChildren())
// if (node.children.length == 0) // if (node.children.length == 0)
return; 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"); background: #ccc url("../minibar/brushed-metal.png");
} }
@@ -124,3 +124,9 @@ body.syntax-editor {
padding: 1em; 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 ------------------------------------------- */ /* --- Creating UI components ------------------------------------------- */
this.container = document.getElementById(this.options.target); this.container = document.getElementById(this.options.target);
this.container.classList.add("editor"); this.container.classList.add("editor");
this.ui = { this.ui = {
menubar: div_class("menu"), menubar: div_class("menu"),
@@ -150,9 +151,13 @@ Editor.prototype.get_startcat=function() {
return this.gm.startcat; return this.gm.startcat;
} }
// Called from Minibar, for example
Editor.prototype.initialize_from=function(opts) { Editor.prototype.initialize_from=function(opts) {
if (opts.abstr) var t = this;
this.import_ast(opts.abstr); if (opts.abstr) {
t.ast = new AST(null, t.get_startcat());
t.import_ast(opts.abstr);
}
} }
// Called after changing grammar or startcat // Called after changing grammar or startcat
@@ -197,12 +202,37 @@ Editor.prototype.add_refinement=function(fun,opts) {
return opt; 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) // Show refinements for given cat (usually that of current node)
Editor.prototype.get_refinements=function(cat) { Editor.prototype.get_refinements=function(cat) {
var t = this; var t = this;
t.ui.refinements.innerHTML = "…"; t.ui.refinements.innerHTML = "…";
if (cat == undefined) if (cat == undefined) cat = t.ast.getCat();
cat = t.ast.getCat();
// Special case when cat is "String"
if (cat == "String") {
t.add_literal_refinement();
return;
}
var args = { var args = {
id: cat, id: cat,
format: "json" format: "json"
@@ -460,9 +490,18 @@ Editor.prototype.redraw_tree=function() {
var container2 = empty_class("div", "node"); var container2 = empty_class("div", "node");
if (id.get().length == 1) if (id.get().length == 1)
container2.classList.add("first"); container2.classList.add("first");
var label =
((node.fun) ? node.fun : "?") + " : " + // Special case for String literal
((node.cat) ? node.cat : "?"); 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 current = id.equals(t.ast.getCurrentID());
var element = elem("a", {class:(current?"current":"")}, [text(label)]); var element = elem("a", {class:(current?"current":"")}, [text(label)]);
element.onclick = function() { 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! // get us back to the editor!
abstract_action: function(tree) { abstract_action: function(tree) {
var editor_options = { var opts = {
target: "editor", abstr: tree
initial: {
grammar: editor.minibar.grammar_menu.value, // hmm
startcat: editor.minibar.input.startcat_menu.value, // hmm
abstr: tree
}
} }
editor.initialize_from(opts);
editor.minibar.hide(); editor.minibar.hide();
editor.show(); editor.show();
} }