/antlr-blockly

Generate visual programming editor from BNF grammar

Primary LanguageJavaScriptApache License 2.0Apache-2.0

antlr-blockly

Generate visual programming editor from BNF grammar.

The purely Javascript implementation of generating blockly visual editor from antlr grammar file.

Typical applications: DSL editor and JSON editor. Additional design is made for JSON editing. As an editor that generates JSON, it can also automatically complete reverse parsing.

The benefits of using a visual editor: low learning costs, the generated JSON/DSL must be a legal-format input.

Document

基于BNF文法生成可视化编辑器.

纯Javascript实现的antlr语法文件生成blockly可视化编辑器.

典型应用: DSL编辑器 和 JSON编辑器. 针对JSON编辑做了额外的设计, 作为生成JSON的编辑器的同时, 也能够自动完成反向的解析.

使用可视化编辑器的好处: 低学习成本, 产生的JSON/DSL一定是形式合法的输入.

文档

作为示例MotaAction.g4给项目 mota-js 提供事件编辑器子模块

LICENSE

Apache License 2.0

NOTICE

CHANGELOG

Todo

  • 新的主页, ?作为新仓库, 把doc index playground demos移过去

  • ?playground能多次点run

  • 发布到npm
    ?更改类Converter的名字
    提供把blockly runtime以及bundle复制到目标位置的脚本

  • ?精确区分undefined和null

  • 文档

    • xmlText函数attribute
    • defaultCode_JSON
    • # id
    • abc=Bool
    • defaultMap
    • ... v0.1.2
    • Insert_BeforeCallIniter,Call_AfterAllContent

  • 文档:api说明

  • 多语言的支持

  • 注释,每处做了什么的说明

  • 更多demo,提供一个包含function的例子

v 0.1.2 (Beta)

  • 生成的文件前打上生成标注

  • json作为defaultCode时, 更多基于类型的处理

    • 域
    • 图块

  • 注入的函数改名字
    Function_0 -> Call_BeforeType
    Function_1 -> Call_BeforeBlock
    Function_2 -> 移除
    Functions -> Insert_FunctionStart
    新增 Call_AfterAllContent
    新增 Insert_BeforeCallIniter

  • 注入中使用color和colour均可以

  • 引入jszip, 网页端的下载不再是一整个html

    • 提供一个blockly.3.20200402.1.zip以供下载
    • node环境下先暂时需要新写一个脚本来执行, 之后在考虑commander.js之类的

  • 通过注入给一般域加默认值

  • 支持map作为输入的xmlText

  • 单语句的支持: json中不再是数组, 放入多个语句时报错

  • 默认值提供defaultMap, 优先级大于default数组

  • name也可以用event : '覆盖触发器' abc=Bool '启用' def=Bool ;来进行, 算数规则可以用# id来命名

  • 更可控的配置, 提供一个option对象作为接口, 分为保留g4和不保留两类部署方案, blockly可以选择文件或者cdn等等, 目前的主页作为playground

    • defaultGenerating
    • blocklyRuntime
    • blocklyDiv
    • toolbox
    • codeArea
    • target
    • 目前的主页作为playground, 并用 iframe 引入 option

  • 语句集合和表达式集合内允许定义一般方块, 通过 # id规则来命名方块, 或者使用xxx_arithmetic_ii的默认名称

  • 表达式集合支持expression之外的集合, 选择一种方案支持

    • 只有expression允许直接的左递归
    • 所有都允许左递归, 只有expression允许直接的左递归且不命名方块
    • 所有都允许左递归, 放弃expression的特殊地位, 不兼容旧的.g4
    • 所有都允许左递归, 放弃expression的特殊地位, 所有的列表都用xxx_arithmetic_ii给默认名称

v 0.1.1 (Beta)

  • package化

  • xmlText函数加入attribute, 以及把next单独作为输入参数

  • json生成版本的defaultCode_JSON, 以及相应的默认json到方块的Parser

  • 文本生成版的defaultCode_TEXT不再需要在数组中加'\n'

  • 多行文本的文档

  • 多行文本 google/blockly#2663
    xxxx_Multi

  • 动态下拉菜单的文档

  • 动态下拉菜单
    生成后的代码把options从二维数组改成function(block){return [['text','value']]}的样子就行
    格式约定 'dynamic'|'<默认值>'(一定要有两个使之识别为list), 在注入中放function

  • 下拉菜单的默认值不起效(虽然本质是blockly的机制options无法把非第一项注册成默认值)

  • 方块的配置:menu和name 的文档

  • 域也放在blocks中以供引用 方块的配置:menu和name

  • field_colour field_angle field_image

  • 支持嵌入的方式直接修改下拉菜单的对应值

  • 修改下拉菜单在default中的行为,使之更自然(与之前的.g4不兼容)

  • 形如xxx ??,xxx +?,xxx *?的支持 (更像是fix bug)
    strings 中要支持??,parserRule中要支持非贪婪匹配的形式

  • lexerRuleAtom的命名不合理,应改成lexerRuleExpr
    grammarDecl中不应包含ParserIdentifier

  • 支持colour,tooltip,helpUrl
    默认值default的设置
    generFunc的代码
    嵌入到.g4里

  • override,嵌入override : true则用嵌入的函数整个覆盖generFunc,不保留原有的变量获取部分的代码,
    可以用来改变valueToCode的优先级recieveOrder或者遍历

  • 文档
    如何使用这个工具
    需要对antlr和blockly了解到什么程度
    目标是只看antlr-blockly就能高效的搭一个的blockly

  • 文档:blockly在网页上如何配置,如何设置侧边栏

  • 主页支持search参数直接加载和运行demos中的.g4文件

  • 优化一些默认值,缺省之类的细节

  • 不使用反引号的字符串模板以提高兼容性,借助Function.prototype.toString()实现多行字符串

v 0.1.0 (Alpha)

  • 主页点Run就可以运行生成的blockly
  • 主页点Download后产生一个能运行生成的blockly的代码的网页(放在此目录下)