blockly 学习----2.代码生成、网格、缩放、事件、存储

blockly 学习

1.代码生成器

第一步是包含相关语言的生成器。Blockly包括以下生成器：

• javascript_compressed.js
• python_compressed.js
• php_compressed.js
• lua_compressed.js
• dart_compressed.js

应该包含生成器类blockly_compressed.js。

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>

通过此调用，用户的块可以随时从您的应用程序导出到代码：
var code = Blockly.JavaScript.workspaceToCode(workspace);

实时生成
生成代码是一种非常快速的操作-可以实时生成

function myUpdateFunction(event) {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);

2.网格–用于对齐

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     grid:
         {spacing: 20,
          length: 3,
          colour: '#ccc',
          snap: true},
     trashcan: true});

• spacing 网格间距 默认为0
• length 长度
  该length属性是一个定义网格点形状的数字。
  长度为0会产生不可见的网格（但仍然可以对齐），
  长度为1（默认值）会产生点，较长的长度会导致交叉，长度等于或大于间距结果在方格纸。
• colour 颜色 “#f00” “#ff0000” "rgb(255, 0, 0) " 字符串都可以
• snap 该snap属性是一个布尔值，用于设置块放置在工作区时是否应捕捉到最近的网格点。默认值为false。类似吸附

3.放大

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     zoom:
         {controls: true,
          wheel: true,
          startScale: 1.0,
          maxScale: 3,
          minScale: 0.3,
          scaleSpeed: 1.2},
     trashcan: true});

• controls 控制 设置为true显示缩放中心，放大和缩小按钮。默认为false。
• wheel 设置为true允许鼠标滚轮缩放。默认为false。
• startScale 初始放大系数。默认为1.0。
• maxScale 最大倍增系数。默认为3。
• minScale 最小倍增系数。默认为0.3。
• scaleSpeed 缩放速度。比例分别乘以或除以比例速度 默认1.2

4.事件

工作区具有可用于侦听事件流的方法addChangeListener和removeChangeListener方法。
以下示例检测用户何时创建第一个注释，发出警报，然后停止侦听，以便不再触发警报。

function onFirstComment(event) {
  if (event.type == Blockly.Events.CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

事件类型

• type 只能是 Blockly.Events.CREATE, Blockly.Events.DELETE, Blockly.Events.CHANGE, Blockly.Events.MOVE, Blockly.Events.UI.
• workspaceId UUID Blockly.Workspace.getById(event.workspaceId)
• blockId UUID workspace.getBlockById(event.blockId)
• group UUID

Blockly.Events.BLOCK_CREATE
块创建事件有两个附加属性。
xml object 定义新块和任何连接子块的XML树。
ids array 一个数组，包含新块的UUID和任何连接的子块。

Blockly.Events.BLOCK_DELETE
oldXml object 定义已删除块和任何已连接子块的XML树。
ids array 包含已删除块的UUID和任何已连接子块的数组。

Blockly.Events.BLOCK_CHANGE
element string ‘field’，‘comment’，‘collapsed’，‘disabled’，‘inline’，'mutate’之一
name string 字段的名称，如果这是对字段的更改。
oldValue value 原始价值。
newValue value 改变了价值。

Blockly.Events.BLOCK_MOVE
oldParentId string 旧父块的UUID。如果它是顶级块，则未定义。
oldInputName string 旧父母的输入名称。如果它是顶级块或父级的下一个块，则为未定义。
oldCoordinate object X和Y坐标，如果它是顶级块。如果有父母，则未定义。
newParentId string 新父块的UUID。如果它是顶级块，则为未定义。
newInputName string 新父母的输入名称。如果它是顶级块或父级的下一个块，则为未定义。
newCoordinate object X和Y坐标，如果它是顶级块。如果它有父项，则为未定义。

Blockly.Events.VAR_CREATE
varType string 变量的类型，如’int’或’string’。不需要是唯一的。这将默认为“”，这是一种特定类型。
varName string 变量的名称。这在变量和过程中是唯一的。
varId string 变量的唯一ID。

Blockly.Events.VAR_DELETE
varType string 变量的类型，如’int’或’string’。不需要是唯一的。这将默认为“”，这是一种特定类型。
varName string 变量的名称。这在变量和过程中是唯一的。
varId string 变量的唯一ID。

Blockly.Events.VAR_RENAME
oldName string 变量的当前名称。这在变量和过程中是唯一的。
newName string 变量的新名称。这在变量和过程中是唯一的。
varId string 变量的唯一ID。

Blockly.Events.UI
element string ‘selected’，‘category’，‘click’，‘commentOpen’，‘mutatorOpen’，‘warningOpen’，'theme’之一
oldValue value 原始价值。
newValue value 改变了价值。

5.本地存储

要从本地存储中恢复块
window.setTimeout(BlocklyStorage.restoreBlocks, 0);
用户离开页面时自动将块备份到本地存储中BlocklyStorage.backupOnUnload();
例子：https://blockly-demo.appspot.com/static/demos/storage/index.html