所有的Block都被分类归纳在ToolBox中。Blockly为工具箱定义的默认的风格,如下所示:
这里我们试着来改改这个风格,让他变个样子。
定义和注册自定义的类别
我把自定义的风格编写在“my_simple_category.js”文件中并在HTML文件中引入。
<script type="text/javascript" src="./js/my_simple_category.js"></script>
Blockly中,所有的自定义的类别都需要继承自Blockly.ToolboxCategory
类。因此,在my_simple_category.js文件中添加这样的代码:
class MyCategory extends Blockly.ToolboxCategory {
/**
* @override
*/
constructor(categoryDef, toolbox, opt_parent) {
super(categoryDef, toolbox, opt_parent);
}
}
然后,把MyCategory通过Blockly.registry.register
注册到Blockly体系中,所以,在定义后调用这个方法:
class MyCategory extends Blockly.ToolboxCategory {
/**
* @override
*/
constructor(categoryDef, toolbox, opt_parent) {
super(categoryDef, toolbox, opt_parent);
}
}
Blockly.registry.register(
Blockly.registry.Type.TOOLBOX_ITEM,
Blockly.ToolboxCategory.registrationName,
MyCategory, true);
这样做的结果是,用MyCategory
覆盖掉Blockly默认的类别。至此,我们就搭建好了一个框架,但是目前ToolBox仍然没有任何改变,只是把Blockly默认的类别替换成我们自定义的类别
注意:是最后一个参数,这里设置为true。如果设置为false,Blockly.registry.register
方法将会抛出错误,因为你覆盖了一个已知的类。
修改类别项的外观
修改类别项的背景色
在ToolboxCategory
类中,可以通过覆盖addColourBorder_
方法来为整个类别项添加颜色。这样写:
class MyCategory extends Blockly.ToolboxCategory {
/**
* @override
*/
constructor(categoryDef, toolbox, opt_parent) {
super(categoryDef, toolbox, opt_parent);
}
/** @override */
addColourBorder_(colour){
console.log("add_color::name= " + this.toolboxItemDef_.name +