自定义语言生成器到Blockly

Question

我知道我可以用

Blockly.JavaScript['my_code'] = function() {  ... }

但是如何添加像JSON这样的语言支持呢？我试过..。

Blockly.Json['my_code'] = function() {  ... }

当我试图恢复时，它失败了。

Blockly.Json.workspaceToCode(this.workspace)

workspaceToCode不是一个函数。

我需要向Blockly添加一种新的语言

我不会显示这种新的语言(JSON)，它只用于向机器人发送指令。

我试着

Blockly.Json = new Blockly.Generator('Json');
Blockly.Json['my_code'] = function() {  ... }

但是，错误发生在

Blockly.Json.workspaceToCode(this.workspace)

错误..。

Uncaught TypeError: this.init is not a function
    at js.ou3v.module.exports.Blockly.Generator.workspaceToCode

Answer 1

为Blockly创建一个新的语言生成器是一项相当大的任务，考虑到这一点，文档在创建一个语言生成器方面似乎没有提供太多帮助。

根据我的经验，构建生成器的最佳方法是查看发电机/中现有的生成器，我已经将JavaScript生成器用作我希望生成C++代码的项目的模板。

还值得注意的是，块状工厂生成JSON供其他Blockly应用程序使用，但是当我查看代码时，没有为其定义实际生成器。

我认为您所得到的错误是由于Blockly.Json没有init函数而引起的。这是在现有生成器文件中定义的内容，例如，来自JavaScript生成器：

/**
* Initialise the database of variable names.
* @param {!Blockly.Workspace} workspace Workspace to generate code from.
*/
Blockly.JavaScript.init = function(workspace) {
  ....
};

考虑到这一点，您的功能如下所示：

/**
* Initialise the database of variable names.
* @param {!Blockly.Workspace} workspace Workspace to generate code from.
*/
Blockly.Json.init = function(workspace) {
 .....
};

生成器文件还包含其他函数，但是查看现有代码并根据您的需要对其进行调整将有助于您完成任务。

Answer 2

下面是我想出的最小可行的例子：

我定义了一个小的自定义块print

Blockly.defineBlocksWithJsonArray([
  {
    type: 'print',
    message0: 'print %1',
    args0: [
      { type: 'field_input', name: 'EMOJI_CODE' }
    ]
  }
]);

然后我用这个新块初始化Blockly编辑器：

const ws = Blockly.inject('ide', {
  toolbox: {
    kind: 'flyoutToolbox',
    contents: [
      { kind: 'block', type: 'print' }
    ]
  }
});

然后，我需要定义块将生成什么。

在本例中，我们将字符串转换为emojis，例如:-)变得。我定义了一种新的语言，以及print块应该做什么：

const emojiLang = new Blockly.Generator('EmojiLang');

emojiLang['print'] = function (block) {
  const code = block.getFieldValue('EMOJI_CODE');
  if (!code) return 'waiting…';
  if (code == ':-)') return '';
  if (code == ':-(') return '';
  if (code == ':-/') return '';
  return '(unknown)';
};

最后，我将听取编辑器中将块转换为表情符号的更改：

ws.addChangeListener(function () {
  document.getElementById('out').innerHTML =
    emojiLang.workspaceToCode(ws);
});

全工作实例

​

const emojiLang = new Blockly.Generator('EmojiLang');

emojiLang['print'] = function (block) {
  const code = block.getFieldValue('EMOJI_CODE');
  if (!code) return 'waiting…';
  if (code == ':-)') return '';
  if (code == ':-(') return '';
  if (code == ':-/') return '';
  return '(unknown)';
};

Blockly.defineBlocksWithJsonArray([
  {
    type: 'print',
    message0: 'print %1',
    args0: [
      { type: 'field_input', name: 'EMOJI_CODE' }
    ]
  }
]);

const ws = Blockly.inject('ide', {
  toolbox: {
    kind: 'flyoutToolbox',
    contents: [
      { kind: 'block', type: 'print' }
    ]
  }
});

ws.addChangeListener(function () {
  document.getElementById('out').innerHTML =
    emojiLang.workspaceToCode(ws);
});

<script src="https://unpkg.com/blockly/blockly.min.js"></script>

Emoji: <span id="out"></span>
<div id="ide" style="height:200px;width:400px;"></div>

​