1

你好，

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

使用 JSON：

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

然后必须定义 Mutator_MIXINBlockly.Extension.registerMutator('myMutatorName', Blockly.myMutator_MIXIN, null, null)并将 mutator 添加到块中。

使用 JavaScript：

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

那么如何在 JavaScript 中做到这一点呢？

亲切的问候

一个新的

4

2 回答 2

3

我在这里可能有点晚了，但无论如何我都会为那些需要更具体例子的人留下答案。

在 JavaScript 中，您实际上不需要将 mutator 绑定到您的块，您只需要定义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) {
    // Retrieve 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 Editor UI，您必须定义函数decompose(workspace)并compose(containerBlock)调用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
    }
}

希望这些简短的例子对某人有所帮助:)

于 2019-03-06T15:58:49.243 回答
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');
    }
}
于 2017-09-25T08:58:26.760 回答