How do I join / disconnect two blocks together from JavaScript?

[phil cleaver]

Hi,

I need to manipulate my Blockly blocks programmatically.  So far I have been deconstructing to XML then reformatting it and regenerating the workspace from the XML.  It works, but it's painful and I've been trying instead to manipulate the workspace directly.

I see that it's easy to set a field value using block_ref.setFieldValue(name, value). Selecting, duplicating and deleting blocks is just as easy, but I cannot see how to join blocks together or disconnect them (I was looking for block.setValue or setValueValue??).

It looks like it has something to do with setParent and connections, but it's turning out to be a bit harder than I first thought.  

Many Thanks

Phil

[Martyn Eggleton]

Hi. There may be a way to do what you are suggesting but I don't know it. But there have just been commits about importing and exporting in json rather than XML. That may give you a work around.

phil cleaver wrote:

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Sent Using Firefox OS

[Mark Friedman]

I believe that Block.unplug() is what you want.  If you have a block in a variable named blk then 'blk.unplug(true, true)' should disconnect the block from its parent and move the block a little ways away.

-Mark

--

[phil cleaver]

thanks Mark, that works great, is it just as easy to join them together again?

Phil

[Mark Friedman]

It's not quite as easy connect them, since you have to know which input connection (i.e. socket) you want to join them at.  If you know the input Connection object (as cnxn) and the block that you want to plug into that connection (as blk) then you can do 'cnxn.connect(blk.outputConnection)'.  There are a number of ways to get the connection.  One way is by referencing the input by name.  If you look at the various block definitions in the .../blocks directory you'll see that each input for a particular type of block has a string name, which is usually specified in a call to appendValueInput, appendField or interpolateMsg.  Once you have the name of the input that you want to plug into you can get its Input object using 'blk.getInput(name)' and then the corresponding Connection object via 'inpt.connection'.

As a concrete example, if you have an arithmetic operation (e.g. '+') block (as aBlk) and a number block (nBlk) you could plug the number block into the first input socket via 'aBlk.getInput('A').connection.connect(nBlk.outputConnection)'.  Similarly, if you have a string length block (as lBlk) and a text string block (as tBlk) you can connect them using 'lBlk.getInput('VALUE').connection.connect(tBlk.outputConnection)'.

Hope this helps.

-Mark

[phil cleaver]

Thanks Mark,

That really helps, I wasn't really aware how the connectors worked, but that explains it for me. I'll give it a try.

The last little bit of the jigsaw missing is the ability to make a block object from a list of values.  I imagine the Block definition file is used somehow, but I'm not sure how.  : /

Phil

[Mark Friedman]

Phil,

  What exactly do you mean by "make a block object from a list of values"?  Could you give an example?

-Mark

[phil cleaver]

Hi Mark,

I'll try to explain what I mean.  Let's assume I just have one block of type text_print on the workspace, lets call this text_print_block.  

workspace XML : <block type="text_print">

I want to generate a text block and attach it to the 'text' value of the print block using Javascript.

the xml of the not-yet created block would look like this:  <block type="text"><field name="TEXT"></field></block>

      

This second block doesn't exist yet so, I'd like to do something like

// make the new block

var new_block = new Block({   

    type = 'text'

});

// populate the new block with data

new_block.setField('text','the text I want to print');

the xml of the new block should now look like this:  <block type="text"><field name="TEXT">the text I want to print</field></block>

// attach the new block to the value of the print block

text_print_block.setValue('TEXT', new_block);

workspace xml should now be :

<block type="text_print" id="2218" inline="false" x="-733" y="-156">

    <value name="TEXT">

      <block type="text" id="2205">

        <field name="TEXT">the text I want to print</field>

      </block>

    </value>

  </block>

I realise that I need to do what you explained yesterday to make the connection, this is pseudo-code to make it easier to grasp.

I hope this makes myself a little bit clearer.

Thanks Mark

Phil

[Neil Fraser]

Open the console and type:

var parentBlock = Blockly.Block.obtain(Blockly.getMainWorkspace(), 'text_print');
parentBlock.initSvg();
parentBlock.render();

var childBlock = Blockly.Block.obtain(Blockly.getMainWorkspace(), 'text');
childBlock.setFieldValue('Hello', 'TEXT');
childBlock.initSvg();
childBlock.render();

var parentConnection = parentBlock.getInput('TEXT').connection;
var childConnection = childBlock.outputConnection;
parentConnection.connect(childConnection);

That last line could equally well be childConnection.connect(parentConnection), order doesn't matter.

Neil Fraser
https://neil.fraser.name

[phil cleaver]

You're a rockstar neil - thanks!!

Phil

[phil cleaver]

Got it working and connecting blocks from JS which is awesome, but am now having difficulty getting a block to tell me it's type,

i.e. parentBlock below should tell me that it's a 'text_print'.  

parentBlock.type returns true.

What am I missing here?

Thanks

Phil

On Thursday, 20 November 2014 13:53:55 UTC+7, Neil Fraser wrote:

[Neil Fraser]

I don't know what's wrong.  It works for me:

var parentBlock = Blockly.Block.obtain(Blockly.getMainWorkspace(), 'text_print');
parentBlock.initSvg();
parentBlock.render();

alert(parentBlock.type);

-> alerts "text_print"

On 22 November 2014 at 02:42, phil cleaver <phil_c...@hotmail.com> wrote:

Got it working and connecting blocks from JS which is awesome, but am now having difficulty getting a block to tell me it's type,

i.e. parentBlock below should tell me that it's a 'text_print'.  

parentBlock.type returns true.

What am I missing here?

Thanks

Phil

[phil cleaver]

Sorry to waste your time there Neil, you're totally right, I guess I'd had a really long day.

Soz

Phil

[phil cleaver]

If anyone is looking at this post for reference, here is how I added an entry to a mutator.

// make the mutator

var mutator = Blockly.Block.obtain(Blockly.getMainWorkspace(), 'text_join'); mutator.initSvg(); mutator.render();

// add a new item

var new_input = mutator.appendInput_(1,'ADD' + mutator.inputList.length);

mutator.itemCount_ = mutator.inputList.length;

this new_input can be used to create a connection to this new mutator item.

Happy mutating

Phil

[Sujil V.S]

If there are no input i.e.:

Blockly.Blocks['node_head'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("Node Head");

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(50);

    this.setTooltip('');

    this.setHelpUrl('http://www.example.com/');

  }

};

How we can connect them together?

PFA,

[Julian F.]

Hey, did you solve the problem because I have the same problem!

[Beka Westberg]

Hello,

I replied to a question related to this a few days ago (don't worry the thread title was unrelated so you wouldn't have seen it) Here's what I wrote:

Connecting is handled by the Blockly.Connection object, using the connect function. The basic form is `connectionA.connect(connectionB)`.

Accessing connections is done in lots of ways. Blocks can have connections directly attached to them. Eg outputConnection, previousConnection, and nextConnection. Inputs can also have connections, which you can access via the connection property. To get at the input itself you can use block.getInput (and some others).

So basically once you figure out how you want to access your connections, you're golden =)

And just so you know, usually it's better to start a new thread, rather than resurrecting an old one. People are more likely to reply to something fresh!

I hope that helps =)

--Beka 

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/a55e85a0-c823-46fa-b5a3-8287a7cd127cn%40googlegroups.com.

[Julian F.]

Thank you!

Could you make an example on how to connect to print_text-Blocks?

I tried

var parentBlock = demoWorkspace.newBlock('text_print');

    parentBlock.initSvg();

    parentBlock.render();

    var childBlock = demoWorkspace.newBlock('text_print');

    childBlock.initSvg();

    childBlock.render();

    parentBlock.outputConnection.connect(childBlock.previousConnection);

but get this error:

TypeError: null is not an object (evaluating 'parentBlock.outputConnection.connect')

Can you help me?

Julian

[Beka Westberg]

Oh yeah that's a common issue! Stack blocks - like the print blocks - have "previous connections" and "next connections" (aka top and bottom connections) because they're meant to emulate statements which are run sequentially. This is opposed to row blocks - like the arithmetic blocks - which have "out connections" and "input connections" because they're meant to emulate expressions which evaluate to values.

So instead of using .outputConnection you'll want to use .nextConnection:

parentBlock.nextConnection.connect(childBlock.previousConnection);

I hope that helps!

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/85d63501-b1ae-4df3-b87c-3cfd00ef5737n%40googlegroups.com.

[Julian F.]

Thanks Beka!!

You saved my day! :)

[Beka Westberg]

Hello!

Could you post this in a new forum thread? Generally it's considered bad practice to respond to old posts (this one is almost 10 years old). Asking new questions in a separate thread makes it easier for people to follow the discussion!

Best,

--Beka

On Tue, Sep 12, 2023 at 12:45 PM aakarsh hajela <aakars...@gmail.com> wrote:

var parentBlock = Blockly.Block.obtain(Blockly.getMainWorkspace(), 'text_print');
parentBlock.initSvg();
parentBlock.render();

In the above code, I am getting "Property 'obtain' does not exist on type 'typeof Block' "

I am trying to connect blocks programmatically one after the other by  using their previousConnection and nextConnection functions. 

I tried the below code:

var parentBlock = Blockly.getMainWorkspace().newBlock(block_name1);

parentBlock.initModel();

var childBlock = Blockly.getMainWorkspace().newBlock(block_name2);
childBlock.initModel();

var parentConnection = parentBlock.getInput(input_name).connection;

var childConnection = childBlock.previousConnection;
parentConnection.connect(childConnection);

This loads all the blocks I need but without the connections.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/10f23102-60a2-44e9-839f-4f69573edfe7n%40googlegroups.com.