如何用Javascript创建块块的实例?

I have done the following block with Blockly in a customBlocks.js file:

我在一个customBlocks中使用Blockly完成了以下模块。js文件:

Blockly.Blocks['move_right'] = {
  init: function() {
    this.appendValueInput("PIXELS")
        .setCheck("Number")
        .appendField("move to right");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(290);
    this.setTooltip('');
    this.setHelpUrl('http://www.example.com/');
  }
};

Blockly.JavaScript['move_right'] = function(block) {
  var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
  // TODO: Assemble JavaScript into code variable.
  var codeMoveRight = "$(\"#moveDiv\").animate({\n " + 
                        "left: \"+=" + value_pixels + "px\"\n" +
                      "},1000);\n";  
  return codeMoveRight;
};

that moves a div to the right depending of how much pixels you set on it. You will have to put a math_number block inside move_right block to put the amount of pixels you want to move it.

根据设置的像素大小，将div向右移动。您将不得不在move_right块中放置math_number块，以放置要移动它的像素量。

I have on my html file a workspace variable that injects the Blockly workspace:

在我的html文件中有一个工作空间变量，它可以注入块工作空间:

var workspace = Blockly.inject('blocklyDiv',
              {toolbox: document.getElementById('toolbox')});

What I want to do

我想做什么

It is to retrieve from JavaScript this amount of pixels one time the block have been displayed on the workspace of Blockly, not before.

它是在块的工作区中，而不是在块之前，从JavaScript中获取这个像素。

What I have tried

我已经尝试

• I directly tried to access to the workspace variable from the console of my broser (Google Chrome) and could get the "child blocks" but not the value of them. As follows:

  我直接尝试从我的broser(谷歌Chrome)控制台访问workspace变量，可以获得“子块”，但不能获得它们的值。如下:

  console.log(workspace.topBlocks_[0].childBlocks_);
  

• I also tried to translate the workspace to dom and then to text:

  我还尝试将工作区转换为dom，然后转换为文本:

  var xml = Blockly.Xml.workspaceToDom(workspace);
  var xml_text = Blockly.Xml.domToText(xml); 
  console.log(xml_text);
  

  and here I can see that the value of the "child Block", I mean, the math_number block, it is stored on the text but I do not know how can I get it.

  这里我可以看到"子块"的值，我的意思是，math_number块，它存储在文本中，但我不知道如何得到它。

Why I want to achieve that?

为什么我要实现这个目标?

Because what I want it is to check if the user has moved 300 pixels to the right. If so, then I will show a message in which I will put "You get it!".

因为我想要的是检查用户是否向右移动了300像素。如果是的话，那么我会显示一条信息，在其中我写上“你明白了!”

My question

我的问题

Is there a posibility to make an instance of that Block that I have put on the workspace and then get access to its pixels value with that instance?

是否有可能创建我放在工作区上的块的实例，然后使用该实例访问其像素值?

EDIT:

编辑:

I also could get the left value as @Oriol said doing:

我还可以得到@Oriol所说的左值:

$('#moveDiv').css('left');

but I did not put it here because it is using a property of Jquery (It does not matter at all, because it is a good option too, but not as intended). My intention it is to get an instance of a Block after put it on the Blockly workspace to operate later with it at any time.

但我没有把它放在这里，因为它使用的是Jquery属性(这一点都不重要，因为它也是一个不错的选择，但并不是预期的那样)。我的目的是在块工作区内放置一个块的实例，以便以后随时使用它进行操作。

Thanks in advance!

提前谢谢!

2 个解决方案

#1

There is a method setWarningText to show this kind of warnings. You could modify yor generator as follows:

有一个方法setWarningText来显示这种警告。你可以修改你的发电机如下:

Blockly.JavaScript['move_right'] = function(block) {
    var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
    // TODO: Assemble JavaScript into code variable.
    var codeMoveRight = "$(\"#moveDiv\").animate({\n " + 
                    "left: \"+=" + value_pixels + "px\"\n" +
                  "},1000);\n";

    // You can show a blockly warning
    if( value_pixels >= 300 ) block.setWarningText("You get it!");

    // Or you can store its value elsewere...
    // myExternalVar = value_pixels;

    return codeMoveRight;
};

This will appear as a warning icon in the block itselfs.

这将作为一个警告图标出现在它自己的块中。

In any case, if you want to "remember" this value_pixels variable, I believe the more easy way is to do it in the generator, as shown above. You can always store it in an external var accessible from your custom functions.

无论如何，如果您想“记住”这个value_pixels变量，我认为更简单的方法是在生成器中执行，如上面所示。您总是可以将它存储在可从自定义函数访问的外部var中。

EDIT:

编辑:

If you need to traverse the block structure for some other purpose, you may use:

如果您需要遍历块结构以达到其他目的，您可以使用:

• Blockly.mainWorkspace.getTopBlocks(true); // To get the top-level blocks
• Blockly.mainWorkspace.getTopBlocks(真正的);//获得*块
• An iteration over the top-level block list
• 对*块列表的迭代
• block = block.nextConnection && block.nextConnection.targetBlock(); // To "descend" into the sub-blocks of a block, then iterate over them
• 块=块。nextConnection & & block.nextConnection.targetBlock();//“下降”到一个块的子块中，然后遍历它们
• if(block.type=="move_right") ... // To check for a particular block type
• 如果(block.type = =“move_right”)……//检查特定的块类型

I hope this will give a start point, but the best way to learn about these "tricks" is reading the Blockly source code. Even as the code is generally well commented, AFAIK there is no way to autogenerate a document, and it is not available on the web neither.

我希望这能提供一个起点，但是了解这些“技巧”的最好方法是阅读块源代码。即使代码得到了很好的注释，AFAIK也没有自动生成文档的方法，而且在web上也没有。

#2

I know this question is somewhat old, but if you still desire more granular access, you should work with blocks IDs (each block has a unique ID).

我知道这个问题有点过时，但是如果您仍然希望更细粒度的访问，那么您应该使用块ID(每个块都有惟一的ID)。

And, to get block elements, don't forget to define its inputs and fields names so you can refere to them:

要获得块元素，请不要忘记定义它的输入和字段名，以便您可以对它们进行修改:

example block:

示例块:

Blockly.Blocks['my_block_unique_name'] = {
    init: function() {
    this.appendDummyInput("this_input_unique_name_for_this_block")
        .appendField("this block do:")
        .appendField(new Blockly.SomeField(...), "this_field_unique_name_for_this_block");
        this.setColour(60);
        this.setTooltip('this block do something');
    }
    //an crude example, be aware that blocks on fyout list will trigger it, if you did not use the block this block is disposed.
    console.log(this.id); 
};

You can use an event to get its ID, store the IDs with some useful info on another place, etc... And so you can do things like:

您可以使用事件获取它的ID，在其他地方存储一些有用信息的ID，等等……你可以这样做:

mainworkspace = Blockly.mainWorkspace
block = mainworkspace.getBlockById(id);
input = block.getInput("imageInput");
// You can use `setField(newValue,name)` too in a more clean way.
input.removeField("FieldImageButton");
input.appendField(new Blockly.SomeField(...), "this_field_unique_name_for_this_block")

And so you can analise the block isInFlyout to see if it is or not used (if it is a block from the openned category or a block dragged out of it, in use), I hope it help you and others.

因此，您可以对block isInFlyout进行分析，看看它是否被使用(如果它是一个来自openned类别的块，或者在使用中从其中拖出的块)，我希望它能帮助您和其他人。