dynamic changing shadow blocks

[Roi]

Hello! Im trying to change the shadow blocks that serve as inputs to my dynamic main block. The Inputs of the main block change depending on the dropdown like :

Blockly.Blocks["dynamic_block"] = {

validate: function(newValue) {

    this.getSourceBlock().updateConnections(newValue);

    return newValue;

  },

  init: function() {

    var options = [

     ["1","Option1"],

     ["2","Option2"],

     ["3","Option3"],

    ];

        this.appendDummyInput()

    

            .appendField(new Blockly.FieldDropdown(options, this.validate), 'MODE');

this.setPreviousStatement(true, null);

        this.setNextStatement(true, null);

        this.setColour(210);

},

      

updateConnections: function(newValue) {

    this.removeInput("Input1", /* no error */ true);

    this.removeInput(" Input2 ", /* no error */ true);

    this.removeInput(" Input3 ", /* no error */ true);

    this.removeInput(" Input4 ", /* no error */ true);

    this.removeInput(' Input5 ', /* no error */ true);

    if (newValue == 'Option1') {

      this.appendValueInput(" Input1  ")

            .setCheck("String")

            .appendField("  Input1  ")

      this.appendValueInput(" Input2 ")

            .setCheck("Number")

            .appendField(" Input2 ");

     

    } else if (newValue == 'Option2') {

      this.appendValueInput(" Input13 ")

         .setCheck("Number")

         .appendField("Input3");

     

    } else if (newValue == 'Option3') {

      this.appendValueInput(" Input4 ")

          .setCheck("Number")

          .appendField(" Input4 ")

      this.appendValueInput(" Input5 ")

          .setCheck("Number")

          .appendField(" Input5 ");

   

            

    }

  },

};

How do I add dynamic changing shadow blocks using the JavaSprict Code ? Thanks

[Sam El-Husseini]

You're on the right track there. 

You can have the block listen to changes to the workspace using onchange, such that when a field dropdown's value is changed the block is notified to run a check. 

In the block's onchange, you can check if the type has changed, and if so, update the shadow of the block.

Shadow blocks are just blocks that are connected to a specific input but have setShadow(true), so you'll have to dispose and disconnect the previously connected shadow block, and create a new one and connect it in it's place.

There are a few spots where we disconnect and reconnect connected blocks in Blockly's built-in blocks, but nothing that's exactly what you're looking for, take a look around and let us know how you go.

Cheers,

Sam

[Beka Westberg]

Hello,

Sam is definitely right about the change listener! But instead of disconnecting and reconnecting a new block with setShadow(true) you might want to call setShadowDom(shadowBlockXml) on the connection you want to have the shadow block. If you just change the block, when the connection goes to "respawn" the shadow after a "real" child block has been disconnected, it will respawn the old kind of shadow block.

However it's important to note that setShadowDom is only guaranteed to work on the latest minor release (3.20200924.+) So if you're working with an older version of Blockly you'll have to consider the tradeoffs of upgrading.

Best wishes,

Beka

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/bcad1fa7-59fb-4219-9216-94bfefd59823n%40googlegroups.com.

[Roi]

Hello ! Thanks for the answers! 

Im very new with blockly and Im having difficulties to connect two blocks using the java script. 
What I mean is creating a block which is acctually made of 2 blocks. I intened to use  setShadow(true)  on the child block after that.

It would be great if someone has any tipps. 

Roi :)

[Beka Westberg]

Hello,

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 =)

I hope that helps! If you have any further questions please reply!

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/39977ad8-5beb-4190-87e6-f38c09c4a37dn%40googlegroups.com.

[Roi]

It worked !  That was very helpfull thanks a lot ! :)