From 776539803d3e616f56ea074f0907082059d5486a Mon Sep 17 00:00:00 2001 From: "john.j.camilleri" Date: Fri, 11 Jan 2013 15:33:17 +0000 Subject: [PATCH] Syntax editor: initial support for string literals 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. --- src/www/syntax-editor/Makefile | 2 +- src/www/syntax-editor/README.md | 76 ++++++++--------- src/www/syntax-editor/about.html | 113 ++++++++++++++----------- src/www/syntax-editor/ast.js | 6 +- src/www/syntax-editor/editor.css | 8 +- src/www/syntax-editor/editor.js | 53 ++++++++++-- src/www/syntax-editor/editor_online.js | 10 +-- 7 files changed, 161 insertions(+), 107 deletions(-) diff --git a/src/www/syntax-editor/Makefile b/src/www/syntax-editor/Makefile index 6f2ccc26b..af10826f4 100644 --- a/src/www/syntax-editor/Makefile +++ b/src/www/syntax-editor/Makefile @@ -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 diff --git a/src/www/syntax-editor/README.md b/src/www/syntax-editor/README.md index 1a029f9b5..6b03caddb 100644 --- a/src/www/syntax-editor/README.md +++ b/src/www/syntax-editor/README.md @@ -6,59 +6,51 @@ - + # 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) diff --git a/src/www/syntax-editor/about.html b/src/www/syntax-editor/about.html index a05d1dd20..8f9e561f1 100644 --- a/src/www/syntax-editor/about.html +++ b/src/www/syntax-editor/about.html @@ -6,83 +6,100 @@ About the syntax editor - +

GF web-based syntax editor

-

John J. Camilleri
December 2012

-

An improved version of the old syntax editor.

+

John J. Camilleri
January 2013

+

A tool for building and manipulating abstract syntax trees in GF. This is meant as improved replacement of the old syntax editor.

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 if you have any problems.

Available startup options

+

Grammar Manager

- + - - - + + + - - - + + + - - - + + + - - - + + + + + +
OptionsDescriptionDefaultOptionsDescriptionDefault
target - -"editor"initial.grammarInitial grammar URL, e.g. "http://localhost:41296/grammars/Foods.pgf"
initial.grammarInitial grammar URL, e.g. "http://localhost:41296/grammars/Foods.pgf" - -initial.startcatInitial startcat(grammar default)
initial.startcatInitial startcat(grammar default)initial.languagesInitial linearisation languages, e.g. ["Eng","Swe","Mlt"](all)
+

Editor

+ + + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + + + + + +
OptionsDescriptionDefault
target"editor"
initial.languagesInitial linearisation languages, e.g. ["Eng","Swe","Mlt"](all)initial.abstrInitial abstract tree (as string), e.g. "Pred (That Fish) Expensive"
initial.abstrInitial abstract tree (as string), e.g. "Pred (That Fish) Expensive" - -lin_actionFunction called when clicking on the language button beside each linearisation.
show_grammar_menuShow grammar menu?Truelin_action_tooltipTooltip for the button beside each linearisation.
show_startcat_menuShow startcat menu?Trueshow_grammar_menuShow grammar menu?True
show_to_menuShow languages menu?Trueshow_startcat_menuShow startcat menu?True
show_random_buttonShow random button?Trueshow_to_menuShow languages menu?True
show_importShow import button/panel?Trueshow_random_buttonShow random button?True
show_exportShow export button?Trueshow_importShow import button/panel?True
show_exportShow export button?True
@@ -98,7 +115,7 @@ About the syntax editor
  • 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)
    • diff --git a/src/www/syntax-editor/ast.js b/src/www/syntax-editor/ast.js index 50c417e96..698272228 100644 --- a/src/www/syntax-editor/ast.js +++ b/src/www/syntax-editor/ast.js @@ -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; diff --git a/src/www/syntax-editor/editor.css b/src/www/syntax-editor/editor.css index 6a23c5bd4..263665bab 100644 --- a/src/www/syntax-editor/editor.css +++ b/src/www/syntax-editor/editor.css @@ -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; } diff --git a/src/www/syntax-editor/editor.js b/src/www/syntax-editor/editor.js index 0f4ab4d4d..c7622a058 100644 --- a/src/www/syntax-editor/editor.js +++ b/src/www/syntax-editor/editor.js @@ -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() { diff --git a/src/www/syntax-editor/editor_online.js b/src/www/syntax-editor/editor_online.js index 3067346b7..913bec05a 100644 --- a/src/www/syntax-editor/editor_online.js +++ b/src/www/syntax-editor/editor_online.js @@ -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(); }