How to customize block connection shape.

[Paing Htet Aung]

 I want to customize the connection shape of blocks based on individual block types. This is what I want => https://studio.code.org/s/coursee-2021/lessons/6/levels/4

Example Photo

[Beka Westberg]

Hello!

Have you checked out the custom renderers codelab? It walks you through how to customize connection shapes =)

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

[Paing Htet Aung]

thanks for your reply I've already checked that before. But all I need to do is like, to customize each block, not for whole blocks in the toolbox.Is there any way to do that.

[Beka Westberg]

I believe so! On page five under the "Override shapeFor" section it references the shapeFor function:

```

CustomConstantsProvider.prototype.shapeFor = function(
    connection) {
  switch (connection.type) {
    case Blockly.INPUT_VALUE:
    case Blockly.OUTPUT_VALUE:
      return this.RECT_INPUT_OUTPUT;
    case Blockly.PREVIOUS_STATEMENT:
    case Blockly.NEXT_STATEMENT:
      return this.RECT_PREV_NEXT;
    default:
      throw Error('Unknown connection type');
  }
};

```

This function takes in a connection, and returns a shape based on that. If you want, this function could look at the block the connection is associated with, before returning a shape based on that block.

To access the block you would do connection.getSourceBlock();

I hope that helps! If you have any further questions please reply!
--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/41291c6c-f78e-4e16-8ec4-914bf2bc0568n%40googlegroups.com.