zhaouv / antlr-blockly

Generate visual programming editor from BNF grammar

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的代码的网页(放在此目录下)