vue + blockly 自定义块、工具箱、主题

已于 2024-04-29 10:04:31 修改
阅读量3.7k 收藏 9
点赞数 1
分类专栏： vue + blockly vue 文章标签： vue javascript
于 2021-09-08 17:36:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42003614/article/details/120180636
版权

vue + blockly 自定义块、工具箱、主题

自定义块建议使用 Blockly Developer Tools 方便而且选择多样，随时生成块代码。

自定义块

  • 块由三个组件组成：
  1. 块定义对象：定义块的外观和行为，包括文本、颜色、字段和连接。
  2. 工具箱引用：对工具箱 XML 中块类型的引用，因此用户可以将其添加到工作区。
  3. 生成器函数：生成此块的代码字符串。它总是用 JavaScript 编写，即使目标语言不是 JavaScript。
<xml  style="height: 100%">
  <category name="自定义">
        <block type="custom_text_block"></block>
    </category>
</xml>

注意block type 为 custom_text_block

  • 初始化 custom_text_block 块
initCustomTectBlock () {
  Blockly.Blocks['custom_text_block'] = {
     init: function() {
       this.appendDummyInput()
           .appendField(new Blockly.FieldLabelSerializable("名称"), "TEXT_NAME")
           .appendField(new Blockly.FieldTextInput("张三丰"), "TEXT_INPUT");
       this.setOutput(true, null);
       this.setColour(105);
       this.setTooltip("");
       this.setHelpUrl("");
     }
   };
 }

代码直接复制开发工具中对应的javascript 代码即可
在这里插入图片描述

  • 效果如下
    在这里插入图片描述

  • 整体代码示例

<template>
  <div id="blocklyDiv" style="height: 800px; width: 100%;"></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="自定义">
                    <block type="custom_text_block"></block>
                </category>
            </xml>
         `
      }
    },
    mounted () {
      this.workspace = Blockly.inject('blocklyDiv', { toolbox:  this.toolboxXml});
      this.initCustomTectBlock();
    },
    methods: {
      initCustomTectBlock () {
        Blockly.Blocks['custom_text_block'] = {
          init: function() {
            this.appendDummyInput()
                .appendField(new Blockly.FieldLabelSerializable("名称"), "TEXT_NAME")
                .appendField(new Blockly.FieldTextInput("张三丰"), "TEXT_INPUT");
            this.setOutput(true, null);
            this.setColour(105);
            this.setTooltip("");
            this.setHelpUrl("");
          }
        };
      }
    }
  }
</script>

</script>

自定义主题

主题名称为 CUSTOM_THEME

  • 主题定义
customTheme () {
  Blockly.Themes.CUSTOM_THEME = Blockly.Theme.defineTheme('CUSTOM_THEME', {
    'base': Blockly.Themes.Classic,
    'categoryStyles': {
      'custom_category': {
        'colour': "#5ba5a5"                     // 工具箱颜色标识
      },
    },
    'blockStyles': {
      // 块样式目前由四个字段组成：colourPrimary、colourSecondary、colorTertiary 和 hat。
      'custom_text_blocks': {                   
        'colourPrimary': "#5ba5a5",             //块的背景色，可以用色调或十六进制值定义
        'colourSecondary':"#5ba5a5",            // 如果块是阴影块，则使用此颜色
        'colourTertiary':"#C5EAFF"              // 块的边框颜色
      }
    },
    'componentStyles': {
      'workspaceBackgroundColour': '#131313',   // 工作区背景色
      'toolboxBackgroundColour': '#2f2e2b',     // 工具箱背景色
      'toolboxForegroundColour': '#f5f5f5',     // 工具箱类别文字颜色
      'flyoutBackgroundColour': '#252526',      // 弹出背景颜色
      'flyoutForegroundColour': '#333',         // 弹出标签文本颜色
      'flyoutOpacity': 1,                       // 弹出不透明度
      'scrollbarColour': '#dcdcdc',             // 滚动条颜色
      'scrollbarOpacity': 0.4,                  // 滚动条不透明度
      'insertionMarkerColour': '#f5f5f5',       // 插入标记颜色（不接受颜色名称）
      'insertionMarkerOpacity': 0.3,            // 插入标记不透明度
      'cursorColour': '#f5f5f5',                // 键盘导航模式下显示的光标颜色
    }
  });
},

blockStyles样式定义完成需要在 Blockly.Blocks['custom_text_block']方法中加入this.setStyle("custom_text_blocks");即可显示该样式。

  • 主题引入
Blockly.inject('blocklyDiv', { toolbox:  this.toolboxXml, theme: Blockly.Themes.CUSTOM_THEME});
  • 效果如下
    根据需求定义
  • 代码示例
<template>
    <div id="blocklyDiv" style="height: 800px; width: 100%;"></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="自定义" categorystyle="custom_category">
                    <block type="custom_text_block"></block>
                </category>
            </xml>
         `
      }
    },
    mounted () {
      this.customTheme();
      this.workspace = Blockly.inject('blocklyDiv', { toolbox:  this.toolboxXml, theme: Blockly.Themes.CUSTOM_THEME});
      this.initCustomTectBlock();
    },
    methods: {
      initCustomTectBlock () {
        Blockly.Blocks['custom_text_block'] = {
          init: function() {
            this.appendDummyInput()
                .appendField(new Blockly.FieldLabelSerializable("名称"), "TEXT_NAME")
                .appendField(new Blockly.FieldTextInput("张三丰"), "TEXT_INPUT");
            this.setOutput(true, null);
            this.setTooltip("");
            this.setHelpUrl("");
            this.setStyle('custom_text_blocks')
          }
        };
      },
      customTheme () {
        Blockly.Themes.CUSTOM_THEME = Blockly.Theme.defineTheme('CUSTOM_THEME', {
          'base': Blockly.Themes.Classic,
          'categoryStyles': {
            'custom_category': {
              'colour': "#5ba5a5"                     // 工具箱颜色标识
            },
          },
          'blockStyles': {
          	// 块样式目前由四个字段组成：colourPrimary、colourSecondary、colorTertiary 和 hat。
            'custom_text_blocks': {                   
              'colourPrimary': "#5ba5a5",             //块的背景色，可以用色调或十六进制值定义
              'colourSecondary':"#5ba5a5",            // 如果块是阴影块，则使用此颜色
              'colourTertiary':"#C5EAFF"              // 块的边框颜色
            }
          },
          'componentStyles': {
            'workspaceBackgroundColour': '#131313',   // 工作区背景色
            'toolboxBackgroundColour': '#2f2e2b',     // 工具箱背景色
            'toolboxForegroundColour': '#f5f5f5',     // 工具箱类别文字颜色
            'flyoutBackgroundColour': '#252526',      // 弹出背景颜色
            'flyoutForegroundColour': '#333',         // 弹出标签文本颜色
            'flyoutOpacity': 1,                       // 弹出不透明度
            'scrollbarColour': '#dcdcdc',             // 滚动条颜色
            'scrollbarOpacity': 0.4,                  // 滚动条不透明度
            'insertionMarkerColour': '#f5f5f5',       // 插入标记颜色（不接受颜色名称）
            'insertionMarkerOpacity': 0.3,            // 插入标记不透明度
            'cursorColour': '#f5f5f5',                // 键盘导航模式下显示的光标颜色
          }
        });
      }
    }
  }
</script>

自定义工具箱

  • 定义工具箱
<xml  style="height: 100%">
 	<category name="创建" custom="CREATE_TYPED_VARIABLE"></category>
</xml>

注意 custom="CREATE_TYPED_VARIABLE"这是唯一标识，注册与给定键CREATE_TYPED_VARIABLE关联的回调函数，该回调函数中创建该工具箱内按钮。

  • 注册工具箱
registerToolboxCategory () {
	this.workspace.registerToolboxCategoryCallback( 'CREATE_TYPED_VARIABLE', this.createFlyout);
  	this.registerButton();
},
// 创建变量
createFlyout (workspace) {
	  let xmlList = [];
	  const button = document.createElement('button');
	  button.setAttribute('text', '添加变量块');
	  button.setAttribute('callbackKey', 'ADD_VAR_BLOCK');
	  xmlList.push(button);
	  const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
	  xmlList = blockList.concat(xmlList);
	  return xmlList;
},

注意 ADD_VAR_BLOCK"这是唯一标识，注册与给定键ADD_VAR_BLOCK关联的回调函数，该回调函数进一步处理需求。

  • 注册工具箱内按钮
registerButton () {
  this.workspace.registerButtonCallback( 'ADD_VAR_BLOCK', this.buttonClickCallbackEvent);
},
buttonClickCallbackEvent (e) {
  console.log(e);
},

  • 效果如下
    在这里插入图片描述

  • 示例演示

    样式请自行忽略

    通过点击工具箱内按钮并弹框且添加变量

    效果图1：
    点击左侧添加变量块显示弹框
    效果图2：输入123 点击添加生成左侧效果

  • 示例演示完整代码

<template>
  <div class="blockly-contant">
    <div id="blocklyDiv" style="height: 800px; width: 100%;"></div>
    <el-dialog
        title="添加块"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
      <el-form label-position="top" label-width="80px" :model="formLabelAlign">
        <el-form-item label="变量名">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBlockEvent">添 加</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
  import Blockly from 'blockly';
  import * as Ch from 'blockly/msg/zh-hans';
  Blockly.setLocale(Ch);
  export default {
    data () {
      return {
        workspace: null,
        dialogVisible: false,
        toolboxXml: `
          <xml  style="height: 100%">
             <category name="创建" custom="CREATE_TYPED_VARIABLE"></category>
          </xml>
         `,
        formLabelAlign: {
          name: ''
        }
      }
    },
    mounted () {
      this.workspace = Blockly.inject('blocklyDiv', { toolbox:  this.toolboxXml});
      this.registerToolboxCategory();

    },
    methods: {
      // 注册工具箱
      registerToolboxCategory () {
        this.workspace.registerToolboxCategoryCallback( 'CREATE_TYPED_VARIABLE', this.createFlyout);
        this.registerButton();
      },
      // 注册工具箱内按钮
      registerButton () {
        this.workspace.registerButtonCallback( 'ADD_VAR_BLOCK', this.buttonClickCallbackEvent);
      },
      // 工具箱内按钮生成
      createFlyout (workspace) {
        let xmlList = [];
        const button = document.createElement('button');
        button.setAttribute('text', '添加变量块');
        button.setAttribute('callbackKey', 'ADD_VAR_BLOCK');
        xmlList.push(button);
        const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
        xmlList = blockList.concat(xmlList);
        return xmlList;
      },
      // 按钮点击事件
      buttonClickCallbackEvent (e) {
        this.dialogVisible = true;
      },
      // 点击添加
      addBlockEvent () {
        let name = this.formLabelAlign.name;
        this.createVariable(name)
      },
      // 创建变量块
      createVariable (name) {
        let [text, type, msg] = [this.getValidInput(name), '', ''];
        if (text) {
          const existing = Blockly.Variables.nameUsedWithAnyType(text, this.workspace);
          if (existing) {
            if (existing.type === type) {
              msg = Blockly.Msg['VARIABLE_ALREADY_EXISTS'].replace( '%1', existing.name);
            } else {
              msg = Blockly.Msg['VARIABLE_ALREADY_EXISTS_FOR_ANOTHER_TYPE'];
              msg = msg.replace('%1', existing.name).replace('%2',  this.getDisplayName(existing.type));
            }
            this.$message({message: msg, type: 'warning'})
          } else {
            this.workspace.createVariable(text, type);
          }
        }
        if (!msg) {
          this.workspace.createVariable(text, type);
          this.dialogVisible = false;
        }
      },
      // 类型判断
      getDisplayName(type) {
        for (let i = 0; i < this.types_.length; i++) {
          const typeNames = this.types_[i];
          if (type === typeNames[1]) {
            return typeNames[0];
          }
        }
        return '';
      },
      // 获取名称
      getValidInput(newVar) {
        if (newVar) {
          newVar = newVar.replace(/[\s\xa0]+/g, ' ').trim();
          if (newVar === Blockly.Msg['RENAME_VARIABLE'] ||
              newVar === Blockly.Msg['NEW_VARIABLE']) {
            newVar = null;
          }
        }
        return newVar;
      },

    }
  }
</script>
<style>
  .blockly-contant /deep/ .el-dialog {
    text-align: left !important;
  }
</style>
半闲生
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue + blockly 示例
范百岁
09-08 2371
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">获取javascri
electron + vue3 + element-plus + blockly项目搭建与踩坑
qq_44402992的博客
04-19 1802
前端小白初次接触electron+blockly
Vue 插件 vue-blockui
最新发布
weixin_57761373的博客
06-13 307
Vue BlockUI 是一个用于 Vue.js 的插件，用于简化页面或元素的阻塞和加载状态管理。它允许开发者通过简单的方式在需要时阻止用户与页面进行交互，并显示加载状态或自定义内容。Vue BlockUI 提供了一种简单而有效的方式来管理页面或特定区域的加载状态和阻塞效果。通过它，开发者可以轻松地为用户提供更好的交互体验，并在需要时展示加载状态或自定义内容。
Blockly + Vue 之添加自定义块
weixin_41284657的博客
10-03 907
本篇文章则主要讲如何实现添加自定义块并对其进行分类显示，然后利用所学，编写一个简单的例子。
Blockly 的配置
xiatiancc的专栏
07-04 5533
本文基于Web Blockly，整理一下可视化编程工具-Blockly 的常用配置，包括：工作区配置、添加自定义块、配置工具箱、配置代码生成器等。固定尺寸工作区可调尺寸工作区添加自定义块（Block）工具箱（Toolbox）配置代码生成器网格（Grid）缩放（Zoom）事件云存储1. 固定尺寸工作区把 Blockly 放到网页上最简单的方法是将其注入到一个空div中。1.1 引入 Blockly ...
vue中集成blockly的踩坑之旅
zsr0526的博客
03-30 3216
blockly源码下载地址：https://gitee.com/mirrors/blockly?_from=gitee_search blockly的文档参考网址： https://itbilu.com/other/relate/Ek5ePdjdX.html#configure-fixed-size https://www.npmjs.com/package/blockly 请结合以上文档来看这篇博客 初步搭建blockly： npm install blockly 如果安装失败，请删除n
Vue实现图形化积木式编程Vue前端源码
08-31
少儿编程前端，基于Vue+Vuetify+Blockly+Babylon.js的个人开源项目
050Vue3+Blockly搭积木式可视化编程二次开发环境搭建
阿赛
12-27 1968
Blockly是一个将可视代码编辑器添加到Web和移动应用程序的库。 Blockly 编辑器使用互锁的图形块来表示代码概念，如变量，逻辑表达式，循环等。它使得用户可以不必关注语法细节就能直接按照编程原则进行编程。您可以通过调用 Blockly.inject（location，options） 来注入一个 Blockly 工作区。 第一个参数告诉 Blockly 将工作空间注入 DOM 的位置。 第二个参数是用于配置的名称-值对字典。 注入代码将选项字典解析为 Blockly.Options 的实例。您还可以
少儿图形化编程工具（vue3+blockly）
weixin_53880111的博客
05-08 260
https://pan.baidu.com/s/1410IRntBV5qtpFHUJkXOhQ 提取码：o054
blockly - 自定义块
wolf
01-09 2016
添加自定义块 虽然Blockly定义了许多标准块，但是大多数应用程序需要定义和实现至少几个与域相关的块。 块由三个组件组成： 块定义对象：定义块的外观和行为，包括文本，颜色，字段和连接。 工具箱引用：对工具箱XML中块类型的引用，因此用户可以将其添加到工作区中。 生成器功能：生成此块的代码字符串。即使目标语言不是JavaScript，甚至对于Blockly for Android，它始...
Vue+blockly 制作与自定义美化
一千世界
02-24 855
blockly研究（一）自定义菜单栏_听闻青春丶-CSDN博客 (2条消息) blockly研究（二）自定义svg图形块_听闻青春丶-CSDN博客 (2条消息) blockly研究（三）自定义生成代码_听闻青春丶-CSDN博客 (2条消息) vue + blockly 示例_范百岁-CSDN博客 (2条消息) vue中集成blockly的踩坑之旅_zsr0526的博客-CSDN博客 (3条消息) Vue实现图形化积木式编程（一）_温温温B的博客-CSDN博客_vue 积木 ...
Vue+Openlayers自定义轨迹动画
01-18
本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码，供大家参考，具体内容如下 <a>OpenlayersTrack <div class=bar :s
vue+element自定义表单生成.rar
04-15
在“vue+element自定义表单生成.rar”这个压缩包中，我们主要探讨的是如何利用Vue.js和Element UI来实现自定义表单的生成。表单在Web应用中占据重要地位，用于收集用户输入的数据。Vue.js的响应式数据绑定和计算属性...
diypage:基于vue + element-ui自定义拖拽页面
03-11
动画效果如果直接用数据驱动，动画比较僵硬，建议使用一些弹性动画效果如果拖拽函数使用html5，拖动函数，不好用，而且拖起来有个很难看的一块，不方便自定义；建议自己改用onmouesemove / start / end来原生书写...
SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程
10-15
主要介绍了SpringBoot + Vue + Electron 开发 QQ 版聊天工具的教程，本文通过截图实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
【Blockly开发教程】04 vue3 blockly项目
Bright的博客
05-17 1164
通过阅读本文，你将了解如何在Vue3项目中引入Blockly模块、初始化、自定义积木块、自定义转代码。
Blockly + Vue 之初始化
weixin_41284657的博客
10-03 954
由于公司最近有需求，要实现拖拽积木块生成代码，所以临时学了些 Blockly，再加上技术栈是 Vue，所以关于两者结合使用还是有些收获的。当时实现部分功能也是花了些时间的，所以想要记录下来，方便之后查阅。
Vue3的编译优化：Block树和PatchFlags
军火库
06-21 1498
注：本文只是介绍实现原理，并非常规源码解读众所周知，Vue中的tamplate会被编译为渲染函数，渲染函数执行生成DOM子树，然后根据组件实例的状态执行mount或patch，如果patch，diff算法会对比两颗子树并进行更新。观察这段模板： 这段模板对应的虚拟DOM如下： 传统diff算法对比DOM树更新流程： 可以看到diff算法做了很多没啥意义的对比，这段代码其实只有text绑定了渲染上下文中的内容，其余内容都是静态内容，所以虚拟DOM只需要对比p标签的文本节点就可以完成内容更新，从而提升性能。但是
blockly--主题
wolf
01-14 1094
主题 主题是一种定制Blockly外观和感觉的方法。目前我们支持在块和类别上自定义某些样式。我们创建主题的主要目标是授权开发人员创建更容易访问的块体验。 然而，伴随着强大的力量而来的是巨大的责任。如果不需要控制块的所有三种样式值（块颜色、边框颜色和阴影块颜色），我们强烈建议用户坚持使用块颜色。很难找到协调一致的颜色，所以最简单的方法仍然是使用色调定义颜色，并允许Blockly计算边框和阴影块的...
vue+typescript自定义组件
08-28
Vue中使用TypeScript定义自定义组件的步骤如下： 1. 创建一个Vue组件的TypeScript文件，例如`CustomComponent.ts`。 2. 在文件中导入Vue和定义组件所需的类型。 ```typescript import Vue, { ComponentOptions } from 'vue'; // 定义组件props的类型 interface Props { // props属性 } // 定义组件实例的类型 interface CustomComponent extends Vue { // 组件内部数据和方法 } ``` 3. 定义组件的选项，并将其赋给`componentOptions`变量。 ```typescript const componentOptions: ComponentOptions<CustomComponent> = { // 组件选项 props: ['prop1', 'prop2'], data() { return { // 组件内部数据 }; }, methods: { // 组件内部方法 }, template: ` <div> <!-- 组件模板 --> </div> `, }; ``` 4. 创建Vue组件并导出。 ```typescript const CustomComponent = Vue.extend(componentOptions); export default CustomComponent; ``` 5. 在其他Vue文件中导入自定义组件并使用。 ```typescript <template> <CustomComponent :prop1="value1" :prop2="value2" /> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import CustomComponent from './CustomComponent'; @Component({ components: { CustomComponent, }, }) export default class MyComponent extends Vue { // 组件逻辑 } </script> ``` 这样，你就可以在Vue项目中使用TypeScript定义自己的组件了。记得在项目中安装相应的依赖，例如`vue`、`vue-property-decorator`等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值