Custom blocks

[lingareddy kotanka]

Hi Team,

I was creating custom blocks and styling them. here im facing some challenges 

1) I was able to set width for custom block like below:

class CustomRenderer extends Blockly.blockRendering.Renderer{

  constructor(name){

    super(name);

    this.makeConstants_ = () => {

      return new CustomConstantsProvider();

    }

    this.makeRenderInfo_ = (block: Blockly.BlockSvg) => {

      return new RenderInformation(this, block);

    }

  }

}

class RenderInformation extends Blockly.blockRendering.RenderInfo {

  constructor(renderer: Blockly.blockRendering.Renderer, block: Blockly.BlockSvg){

    super(renderer, block);

    this.width = 300;

  }

}

-> the width for the block is applied initially but, when i enter some text in value input/input field inside the block, the width of the block is increasing again

1) Is there any way we can set fixed width for a block?

2) How can we add some styling(height, width, bg color) to the input field or value input inside a block?

Could you please help me if there is any way to achieve this?

Thank you :)

[Beka Westberg]

Hello!

With regard to your first question, by default the block's width is calculated based on the widths of each of its rows, whose widths are calculated based on the widths of their fields. If you don't do this, you are almost certainly going to end up with blocks whose fields aren't within the bounds of the blocks.

But if you still want to do this, you're going to need to override the computeBounds_ method. This is what calculates the width of the block based on the widths of each of its rows. Instead of doing that, you'll have it set `width` to a fixed number, like `this.width = 300`. You may also need to subclass some individual measurables for the rows/inputs to get the final block to draw correctly. But I'm not 100% sure.

With regard to your second question, you can do that! But that code will need to live inside of a custom PathObject and a custom Drawer. You can add an extra `setConnectionPaths` method to your PathObject that your Drawer can call. Your PathObject can then create extra SVGs for the connection paths, which can be styled in whatever way you like =)

You may also be interested in our custom renderer codelab, which walks through drawing different shapes for different connection types!

I hope that gives you some places to start!

--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/4027ac59-7994-4284-9ef3-47194ec52842n%40googlegroups.com.

[lingareddy kotanka]

Hello Beka,

Thanks for your answers.

You can add an extra `setConnectionPaths` method to your PathObject that your Drawer can call. -> Can you explain this again, i did not get it 

I think this setConnectionPaths is obsolete.

Can you please explain where this setConnectionPaths exists?

Thank you!

[Beka Westberg]

Hello again =)

So the built-in PathObject doesn't have a `setConnectionPaths` method, because it doesn't need to draw separate SVGs for the connections. Coloring connections is a new behavior you want to add, so you need to add a new `setConnectionPaths` method to  your custom PathObject to support it.

So you need to subclass the PathObject class, and add the new `setConnectionPaths` method.

I hope that helps! If you have any further questions I am more than happy to chat about this more =)

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/e04d1c5e-7315-451e-9496-fad113ee5603n%40googlegroups.com.