vue + blockly 示例

vue + blockly 示例

blockly

👉 官方api
👉 官方例子

安装

npm install --save blockly

引入

import Blockly from 'blockly';
import * as Ch from 'blockly/msg/zh-hans';   // 中文

示例代码

<template>
  <div>
    <button @click="getJavascriptCode">获取javascript code</button>
    <button @click="getWorkspaceXml">获取当前工作区xml</button>
    <div id="blocklyDiv" style="height: 800px; width: 100%;"></div>
  </div>
</template>

<script>
  import Blockly from 'blockly';
  import * as Ch from 'blockly/msg/zh-hans';
  Blockly.setLocale(Ch);
  export default {
    data () {
      return {
        workspace: null,
        toolboxXml: `
          <xml  style="height: 100%">
               <category name="Logic" categorystyle="logic_category">
                    <block type="controls_if"></block>
                    <block type="logic_compare"></block>
                    <block type="logic_operation"></block>
                    <block type="logic_negate"></block>
                    <block type="logic_boolean"></block>
                    <block type="logic_null" disabled="true"></block>
                    <block type="logic_ternary"></block>
                    <block type="text_print"></block>
                </category>
                <category name="Math" categorystyle="math_category">
                      <block type="math_number" gap="32"></block>
                </category>
            </xml>
         `
      }
    },
    mounted () {
      this.workspace = Blockly.inject('blocklyDiv', { toolbox:  this.toolboxXml});
      if (localStorage.getItem('workspaceXml')) {
        this.getLocalStorageXml();
      }
    },
    methods: {
      getJavascriptCode () {
        let  code = Blockly.JavaScript.workspaceToCode(this.workspace);
        console.log('--------Javascript code-------');
        console.log(code)
      },
      getWorkspaceXml () {
        var xml = Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(this.workspace))
        localStorage.setItem('workspaceXml', xml)
        console.log('--------workspace xml-------');
        console.log(xml);
        console.log('当前工作区 xml 已保存到 localStorage 中...');
      },
      getLocalStorageXml () {
        let xml = localStorage.getItem('workspaceXml');
        Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), this.workspace)
      }
    }
  }
</script>

效果图如下：

xml 文件

• <category name="Logic" categorystyle="logic_category">

  每个category 相当于一个工具箱。

  name 工具箱名称。

  categorystyle 工具箱样式（自定义工具箱样式跟主题相关，自定义请看另一篇文章）。

• <block type="controls_if"></block>

  每个block 是相当于一个工具。

  type 定义工具类型（自定义需要自己进行关联配置，自定义请看另一篇文章）。

上面 xml 测试内容是官方的，所以无需配置相关逻辑文件即可使用。
自定义xml文件需要配置相关逻辑，否则无法使用。

生成 Javascript 代码

Blockly.JavaScript.workspaceToCode(this.workspace);

自定义xml 生成代码需要配置相关的Javascript逻辑 自定义请看另一篇文章

获取当前工作区xml

Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(this.workspace))

在这里插入图片描述

通过xml 生成工作区

Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), this.workspace)