在JavaScript中初始化一个Blockly Mutator

时间:2017-09-18 10:57:58

标签: blockly

您好,

据我所知,Blockly中的自定义块可以用JSON或JavaScript定义,但是如何在JavaScript中初始化mutator呢?

使用JSON:

Blockly.defineBlocksWithJSONArray([
{....
"mutator": "myMutatorName"
});

然后必须定义Mutator_MIXIN并使用Blockly.Extension.registerMutator('myMutatorName', Blockly.myMutator_MIXIN, null, null)将mutator添加到Block。

使用JavaScript

Blockly.Blocks['blockName'] = {
 init: function() = {
   ....
   ??? this.setMutator(???)???
   };
}

那么如何在JavaScript中完成呢?

亲切的问候

一个新的

2 个答案:

答案 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');
    }
}