|
|
@ -89,13 +89,13 @@ body { |
|
|
|
<li><span id="grammar-validation" class="editor-validation">Valid</span></li> |
|
|
|
<li><span id="grammar-validation" class="editor-validation">Valid</span></li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<pre id="grammar-editor" class="editor-area"> |
|
|
|
<pre id="grammar-editor" class="editor-area"> |
|
|
|
EXPRESSION <- _ TERM (TERM_OPERATOR TERM)* |
|
|
|
EXPRESSION <- TERM (TERM_OPERATOR TERM)* |
|
|
|
TERM <- FACTOR (FACTOR_OPERATOR FACTOR)* |
|
|
|
TERM <- FACTOR (FACTOR_OPERATOR FACTOR)* |
|
|
|
FACTOR <- NUMBER / '(' _ EXPRESSION ')' _ |
|
|
|
FACTOR <- NUMBER / '(' EXPRESSION ')' |
|
|
|
TERM_OPERATOR <- < [-+] > _ |
|
|
|
TERM_OPERATOR <- [-+] |
|
|
|
FACTOR_OPERATOR <- < [/*] > _ |
|
|
|
FACTOR_OPERATOR <- [/*] |
|
|
|
NUMBER <- < [0-9]+ > _ |
|
|
|
NUMBER <- [0-9]+ |
|
|
|
~_ <- [ \t\r\n]*</pre> |
|
|
|
%whitespace <- [ \t\r\n]*</pre> |
|
|
|
<div id="grammar-info" class="editor-info"></div> |
|
|
|
<div id="grammar-info" class="editor-info"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="editor-container"> |
|
|
|
<div class="editor-container"> |
|
|
@ -104,6 +104,8 @@ NUMBER <- < [0-9]+ > _ |
|
|
|
<li><span id="code-validation" class="editor-validation">Valid</span></li> |
|
|
|
<li><span id="code-validation" class="editor-validation">Valid</span></li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<pre id="code-editor" class="editor-area">2 * (3 + 4)</pre> |
|
|
|
<pre id="code-editor" class="editor-area">2 * (3 + 4)</pre> |
|
|
|
|
|
|
|
<pre id="code-ast" class="editor-area"></pre> |
|
|
|
|
|
|
|
<pre id="code-ast-optimized" class="editor-area"></pre> |
|
|
|
<div id="code-info" class="editor-info"></div> |
|
|
|
<div id="code-info" class="editor-info"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -118,6 +120,24 @@ NUMBER <- < [0-9]+ > _ |
|
|
|
var code = ace.edit("code-editor"); |
|
|
|
var code = ace.edit("code-editor"); |
|
|
|
code.setShowPrintMargin(false); |
|
|
|
code.setShowPrintMargin(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var codeAst = ace.edit("code-ast"); |
|
|
|
|
|
|
|
codeAst.setShowPrintMargin(false); |
|
|
|
|
|
|
|
codeAst.setOptions({ |
|
|
|
|
|
|
|
readOnly: true, |
|
|
|
|
|
|
|
highlightActiveLine: false, |
|
|
|
|
|
|
|
highlightGutterLine: false |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
codeAst.renderer.$cursorLayer.element.style.opacity=0; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var codeAstOptimized = ace.edit("code-ast-optimized"); |
|
|
|
|
|
|
|
codeAstOptimized.setShowPrintMargin(false); |
|
|
|
|
|
|
|
codeAstOptimized.setOptions({ |
|
|
|
|
|
|
|
readOnly: true, |
|
|
|
|
|
|
|
highlightActiveLine: false, |
|
|
|
|
|
|
|
highlightGutterLine: false |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
codeAstOptimized.renderer.$cursorLayer.element.style.opacity=0; |
|
|
|
|
|
|
|
|
|
|
|
var generateErrorListHTML = function (errors) { |
|
|
|
var generateErrorListHTML = function (errors) { |
|
|
|
var html = '<ul>'; |
|
|
|
var html = '<ul>'; |
|
|
|
|
|
|
|
|
|
|
@ -148,10 +168,15 @@ NUMBER <- < [0-9]+ > _ |
|
|
|
$grammarInfo.html(''); |
|
|
|
$grammarInfo.html(''); |
|
|
|
$grammarValidation.removeClass('editor-validation-invalid').text('Valid'); |
|
|
|
$grammarValidation.removeClass('editor-validation-invalid').text('Valid'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
codeAst.setValue(''); |
|
|
|
|
|
|
|
codeAstOptimized.setValue(''); |
|
|
|
|
|
|
|
|
|
|
|
var isValid = data.code.length === 0; |
|
|
|
var isValid = data.code.length === 0; |
|
|
|
if (isValid) { |
|
|
|
if (isValid) { |
|
|
|
$codeInfo.html(''); |
|
|
|
$codeInfo.html(''); |
|
|
|
$codeValidation.removeClass('editor-validation-invalid').text('Valid'); |
|
|
|
$codeValidation.removeClass('editor-validation-invalid').text('Valid'); |
|
|
|
|
|
|
|
codeAst.insert(data.ast); |
|
|
|
|
|
|
|
codeAstOptimized.insert(data.astOptimized); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
var html = generateErrorListHTML(data.code); |
|
|
|
var html = generateErrorListHTML(data.code); |
|
|
|
$codeInfo.html(html); |
|
|
|
$codeInfo.html(html); |
|
|
|