How to customize block with inner new line.

[tasasei]

Hi

I want to make a block with a hole inside the block.

(As you know, a common block which has "input" breaks new line at "input". The "input" hole is outside. I want to break new line manually and set the hole inside.)

I referenced this

https://groups.google.com/g/blockly/c/eRFrGahCpxA/m/vtZwfTIOAQAJ

and succeed somehow. 

https://jsfiddle.net/Lpvjma32/10

But this block has odd step. I want to remove the step.

I guess "geras" renderer function behave such as.

But I can't understand how to fix it.

Please help me.

[Abby Schmiedt]

Hello!

So AFAIK the problem is happening in the alignRowElements_ method.

I'm not sure how far you have dug into rendering, but there are these things called InRowSpacers. They decide how much room is added between the elements in a row. An element is something like a corner, a field, an input, etc. The top row(the row causing us the problem here) is made up of a RoundCorner, an InRowSpacer and a SquareCorner. The InRowSpacer is the incorrect width in this situation which is causing the top row to be the incorrect size.

alignRowElements_ is in charge of adding any missing space to the InRowSpacers so that each row is the correct width. I think this line should be changed to nextRightEdge = Math.max(row.width, row.nextRightEdge); What was happening was the topRow.nextRightEdge was getting set to the previous rows width(lets say 100px). However, that previous row had a wider nextRightEdge (let's say 150px). So when we went farther down in the method to calculate the desiredWidth of the block, the previous row would get a width of 150px(the correct size) because that was its nextRightEdge. However, the topRow would only get set to its own nextRightEdge which was 100px(the outdated width of the previous block).

I'm not sure if that made any sense, so please feel free to ask any questions! Also, I find the best way to debug rendering problems is using the debug section of the advanced playground. It draws boxes of all the different elements that make up a block which makes visualizing what is happening so much easier! Also happy to help you set that up if that is interesting to you. 

Cheers, 

Abby

[tasasei]

Thanks!

I tried it and it works. Your advanced knowledge helps me.

In addition, I didn't know the playground.

I really appreciate your kindness.

2021年9月3日金曜日 6:29:08 UTC+9 Abby Schmiedt: