问在JavaScript中初始化Blockly突变体
EN

Stack Overflow用户

提问于 2017-09-18 02:57:58

回答 2查看 2.6K关注 0票数 1

Hi，

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

带有JSON的：

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

然后必须定义Mutator_MIXIN，并使用Blockly.Extension.registerMutator('myMutatorName', Blockly.myMutator_MIXIN, null, null)将变形器添加到块中。

与JavaScript:

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

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

亲切的问候

一个新的

blockly

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 2

Stack Overflow用户

发布于 2019-03-06 07:58:49

我可能只是晚了一点，但无论如何，我会把答案留给那些需要更多具体例子的人。

在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编辑器UI，则必须定义decompose(workspace)和compose(containerBlock)函数，并调用this.setMutator(...)来设置在Mutator中使用的块，如下所示：

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
    }
}

希望这些简短的例子能帮助到某人:)

票数 3

Stack Overflow用户

发布于 2017-09-25 00:58:26

您必须声明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');
    }
}