1 概述

本文重点讲解如何定制Blockly toolbox上，主要包含如下几点目标：

• 如何为toolbox不同类别添加背景色
• 如何改变选中的类别的外观
• 如何为toolbox类别添加定制化的css
• 如何改变类别的html结构
• 如何添加定制的toolbox项

完成后的效果图如下：

学习本文的前提条件：

1. 需要具备基本的HTML、css和JavaScript基础。
2. 对Blockly及toolbox有基本的认识。

Blockly API官方文档：
https://developers.google.cn/blockly/reference/overview

2 设置

从以下仓库克隆示例代码

git clone https://github.com/google/blockly-samples.git

相关的代码在
examples/custom-toolbox-codelab目录下，其中包含两个目录

• starter-code/: 为初始代码，后面的练习在此代码基础上进行实践
• complete-code/: 为完成后的代码，如果练习中遇到任何问题可以参考完整的代码查找原因

使用浏览器打开starter-code/index.html，初始页面样式如下

创建custom_category.js并在index.html中引入，代码内容如下，主要是创建了自定义类别并在Blockly进行了注册。

// 1. 为了创建自定义类别，先创建自定义类别，继承自Blockly.ToolboxCategory
class CustomCategory extends Blockly.ToolboxCategory {
    // 自定义类别创造函数
    // categoryDef: 类别定义的信息
    // toolbox: 表示类别的父级toolbox
    // opt_parent: 可选参数，表示其父类别
    constructor(categoryDef, toolbox, opt_parent) {
        super(categoryDef, toolbox, opt_parent);
    }
}

// 2. 自定义类别需要向Blockly注册，告知自定义类别的存在，不然会无法识别新建的类
Blockly.registry.register(
    Blockly.registry.Type.TOOLBOX_ITEM,
    Blockly.ToolboxCategory.registrationName,
    CustomCategory, true);

此时刷新浏览器页面还不会有任何变化，但是在congsole中执行如下代码会发现使用的已经是自定义的类CustomCategory了

var toolbox = Blockly.getMainWorkspace().getToolbox(); 
toolbox.getToolboxItems()[0];  -- 获取第一个类别

3 改变toolbox类别的样式

ToolboxCategory类中默认的方法addColourBorder_会在类别的左侧添加一个颜色条，就像下图这样，现在我们在定制类CustomCategory中覆盖此方法，将其改为设置背景色

    // 覆盖原方法
    addColourBorder_(colour){
        this.rowDiv_.style.backgroundColor = colour;
    }

此时刷新浏览器，toolbox效果变化如下

让我们引入一些css使其更加美观一些，创建一个toolbox_style.css并在index.html中引入

<link rel="stylesheet" href="toolbox_style.css">

toolbox_style.css样式文件的内容如下

/* Makes our label white. */
.blocklyTreeLabel {
  color: white;
}
/* Adds padding around the group of categories and separators. */
.blocklyToolboxContents {
  padding: .5em;
}
/* Adds space between the categories, rounds the corners and adds space around the label. */
.blocklyTreeRow {
  padding: 3px;
  margin-bottom: .5em;
  border-radius: 4px;
}

再次刷新浏览器，toolbox效果更新如下

4 改变选中类别的样式

如果两次点击某个类别，会发现背景色消失了，为了解决这个问题，我们重写setSelected这个方法，custom_category.js中增加如下代码

    // 覆盖原方法
    setSelected(isSelected){
        // 使用getElementsByClassName选中类别对应的span元素
        var labelDom = this.rowDiv_.getElementsByClassName('blocklyTreeLabel')[0];
        if (isSelected) {
        // 选中的类别背景色设置为白色
        this.rowDiv_.style.backgroundColor = 'white';
        // 选中的类别文本设置为原背景色
        labelDom.style.color = this.colour_;
        } else {
        // 未选中的类别背景色设置
        this.rowDiv_.style.backgroundColor = this.colour_;
        // 未选中的类别文本设置为白色
        labelDom.style.color = 'white';
        }
        // This is used for accessibility purposes.
        Blockly.utils.aria.setState(/** @type {!Element} */ (this.htmlDiv_),
            Blockly.utils.aria.State.SELECTED, isSelected);
    }

再次刷新浏览器，选中的类别效果如下

5 为toolbox类别添加icon图标

我们先在index.html引入一个icon图标库

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">

接着在toolbox中category html元素中增加css-icon属性，示例如下

<category css-icon="customIcon fa fa-cog" name="Logic" categorystyle="logic_category">

在toolbox_style.css中为icon增加css样式

/* Changes color of the icon to white. */
.customIcon {
    color: white;
}
/* Stacks the icon on top of the label. */
.blocklyTreeRowContentContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.blocklyTreeRow {
    height: initial;
}

改造后的效果如下

但是可见选中的类别icon图标和背景色一样了导致像消失了一样，还需要更新下上部分添加的setSelected方法

    // 覆盖原方法
    setSelected(isSelected){
        // 使用getElementsByClassName选中类别对应的span元素
        var labelDom = this.rowDiv_.getElementsByClassName('blocklyTreeLabel')[0];
        if (isSelected) {
            // 选中的类别背景色设置为白色
            this.rowDiv_.style.backgroundColor = 'white';
            // 选中的类别文本设置为原背景色
            labelDom.style.color = this.colour_;
            // 设置icon的颜色和文本颜色相同
            this.iconDom_.style.color = this.colour_;     // ====本次新增代码====
        } else {
            // 未选中的类别背景色设置
            this.rowDiv_.style.backgroundColor = this.colour_;
            // 未选中的类别文本设置为白色
            labelDom.style.color = 'white';
            // 设置icon的颜色和文本颜色相同
            this.iconDom_.style.color = 'white';      // ====本次新增代码====
        }
        // This is used for accessibility purposes.
        Blockly.utils.aria.setState(/** @type {!Element} */ (this.htmlDiv_),
            Blockly.utils.aria.State.SELECTED, isSelected);
    }

刷新浏览器，选中状态的类别效果如下

6 改变toolbox类别的html

如果想将icon图标改成image，就需要改变类别的html结构，可以重写createIconDom_方法，custom_category.js中增加如下代码

    // 覆盖原方法
    createIconDom_() {
        const img = document.createElement('img');
        img.src = './logo_only.svg';     //  初始代码已包含此svg文件
        img.alt = 'Lamp';
        img.width='25';
        img.height='25';
        return img;
    }

刷新浏览器，toolbox效果如下，html结构可见增加img元素

7 为toolbox添加标签

该部分介绍如何为toolbox添加标签，再创建一个名为toolbox_label.js的文件并在index.html中引入

<script src="toolbox_label.js"></script>

使用类似CustomCategory的创建方法，创建继承自ToolboxItem的类ToolboxLabel并在Blockly进行注册，toolbox_label.js添加如下代码

class ToolboxLabel extends Blockly.ToolboxItem {
  constructor(toolboxItemDef, parentToolbox) {
    super(toolboxItemDef, parentToolbox);
  }
}

Blockly.registry.register(
    Blockly.registry.Type.TOOLBOX_ITEM,
    'toolboxlabel',      // 这样就可以使用toolboxlabel创建toolbox标签了
    ToolboxLabel);

然后在index.html中toolbox的定义位置添加toolbox标签，其中name为显示的标签名称，css-label为转为class属性，colour属性为转换为style属性

<toolboxlabel name="自定义toolbox" colour="darkslategrey" css-label="customLabel"></toolboxlabel>

ToolboxLabel类中覆盖如下init、getDiv方法，进行toolbox标签的初始化和返回设置

    // 覆盖原方法
    init() {
        // 创建label元素
        this.label = document.createElement('label');
        // 设置label元素的文本内容
        this.label.textContent = this.toolboxItemDef_['name'];
        // 设置style 颜色属性
        this.label.style.color = this.toolboxItemDef_['colour'];
        // 任何css- 开头的属性都会添加到cssconfig对象.
        const cssConfig = this.toolboxItemDef_['cssconfig'];
        // 添加class属性
        if (cssConfig) {
            this.label.classList.add(cssConfig['label']);
        }
    }

    // 覆盖原方法
    getDiv() {
        return this.label;
    }

在toolbox_style.css中添加如下样式

.customLabel {
    font-weight: bold;
}

刷新浏览器，最终toolbox显示效果及实际生成标签元素结构如下