您好,
据我所知,Blockly中的自定义块可以用JSON或JavaScript定义,但是如何在JavaScript中初始化mutator呢?
使用JSON:
Blockly.defineBlocksWithJSONArray([
{....
"mutator": "myMutatorName"
});
然后必须定义Mutator_MIXIN并使用Blockly.Extension.registerMutator('myMutatorName', Blockly.myMutator_MIXIN, null, null)
将mutator添加到Block。
:
Blockly.Blocks['blockName'] = {
init: function() = {
....
??? this.setMutator(???)???
};
}
那么如何在JavaScript中完成呢?
亲切的问候
一个新的
答案 0 :(得分:3)
我在这里可能会晚一点,但是我还是把答案留给那些需要更多具体例子的人。
在JavaScript中,您实际上不需要将更改器绑定到块,只需要定义 mutationToDom() 和 domToMutation (xmlElement) 函数,如下所示:
Blockly.Blocks['my_custom_block'] = {
init() {
// Define your basic block stuff here
},
// Mutator functions
mutationToDom() {
let container = document.createElement('mutation');
// Bind some values to container e.g. container.setAttribute('foo', 3.14);
return container;
},
domToMutation(xmlElement) {
// Retreave all attributes from 'xmlElement' and reshape your block
// e.g. let foo = xmlElement.getAttribute('foo');
// this.reshape(foo);
},
// Aux functions
reshape(param){
// Reshape your block...
}
}
Blockly会自动处理其余部分,并允许您将其视为动力块。
如果需要使用Mutator编辑器UI,则必须定义 decompose(工作区) 和 compose(containerBlock) < / strong>函数,然后调用 this.setMutator(...) 来设置Mutator Editor UI中使用的块,如下所示:
Blockly.Blocks['my_custom_block'] = {
init() {
// Define your basic block stuff here
// Set all block that will be used in Mutator Editor UI, in this
// case only 'my_block_A' and
this.setMutator(new Blockly.Mutator(['my_block_A', 'my_block_B']));
},
// Mutator functions
mutationToDom() {
// Same as previous example
},
domToMutation(xmlElement) {
// Same as previous example
},
decompose(workspace) {
// Decomposeyour block here
},
compose(containerBlock) {
// Compose your block here
},
// Aux functions
reshape(param){
// Same as previous example
}
}
希望这些简短的示例对某人有所帮助:)
答案 1 :(得分:1)
您必须声明xml如何加载到dom,以及如何将其保存到xml并重新绘制。还要注意它是如何将一个mutator附加到一个块元素的,如果这是你需要引用一个已经存在的mutator的唯一部分。
init: initFunction (Like you have declared.)
mutationToDom: MutationToDom,
domToMutation: DomToMutation,
updateShape_: UpdateShape`
如果您只需要创建对mutator的引用,那么您需要的是这种元素,我们将以编程方式创建它:
<mutation mutator_name="true"></mutation>
以下片段是额外函数mutationToDom,DomtoMutation UpdateShape的示例,它有条件地附加额外输入。我有一个带有复选框的块,启用后会添加额外的输入。
function MutationToDom() {
var container = document.createElement('mutation');
var continueOnError = (this.getFieldValue('HasCONTINUE') == 'TRUE');
container.setAttribute('continueOnError', continueOnError);
return container;
}
function DomToMutation(xmlElement) {
var continueOnError = (xmlElement.getAttribute('continueOnError') == 'true');
this.updateShape_(continueOnError);
}
function UpdateShape(continueOnError) {
// Add or remove a Value Input.
if (continueOnError) {
this.appendValueInput("CONTINUE_ON_ERROR")
.setCheck('CONTINUE_ON_ERROR');
} else {
if (this.childBlocks_.length > 0) {
for (var i = 0; i < this.childBlocks_.length; i++) {
if (this.childBlocks_[i].type == 'continue_on_error') {
this.childBlocks_[i].unplug();
break;
}
}
}
this.removeInput('CONTINUE_ON_ERROR');
}
}