statement blocks with both horizontal and vertical connections

711 views
Skip to first unread message

jl05140

unread,
Feb 2, 2018, 5:17:04 AM2/2/18
to Blockly
Hi,

I am designing custom blocks where all value blocks are inlined.
The statement blocks connect vertically to mimic newline

statement 1
statement 2
statement 3
...

but one line statements should also connect horizontally to mimic
statement lists 

statement 1; statement 2; statement 3; ...

These one line statement blocks should have both a previous block connection on top and left edges
and also a next block connection on both right and bottom edges.

That makes 2 previous connections and 2 next connections for this kind of blocks.

This is certainly feasible but what would be a reasonable starting point ?
As I am not really mastering the Blockly backstage, I would really appreciate some advice...

Thanks

Andrew n marshall

unread,
Feb 2, 2018, 8:40:17 AM2/2/18
to blo...@googlegroups.com
Hi Jerome,

What you are describing is not supported by Blockly. Blockly assumes top and bottom connections are connections to the previous and next statements, while horizontal connections pass values (the left connection of a block being somewhat equivalent to a return statement, connecting it to it's calling block). As such, no block is allow both a top and a left connection.

At least at the same time. It is possible with a significant amount of custom code to transform a block's connections to mimic this behavior by switching between vertical or horizontal connections. However, this is outside of the scope of things we can support. I should also warn you may find additional challenges when attempting to write consistent code generators for such blocks since the above assumptions are baked into generator function call ordering.

I would re-evaluate the importance of having multiple statements on a single line, and what benefit it presents your users.

You may also want to explore Scratch Blocks, based on Web Blockly. They have implemented a second rendering mode for Scratch Jr that does horizontal connection of statements for a small subset of block types. If set of block definition type names is defined for both horizontal and vertical modes, a save file for one can be opened in the other, allowing this sort of switching. See the vertical and horizontal playgrounds for a look at their rendering styles.

--
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+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

jl05140

unread,
Feb 8, 2018, 3:21:09 PM2/8/18
to Blockly
Despite Blockly was not originally designed to support both horizontal and vertical statement block tiling,
this seems not very difficult to achieve (assuming once again that all the value blocks are inlined and LTR mode)
Actually, the vertical tiling of statement blocks just comes from the layout of the various connections in a block.
In order to have blocks displayed horizontally, it suffices to place connections at the right edge instead of the bottom.

The basic principles are

1) each statement block that can tile horizontally have a statement input dedicated to horizontal connections with some horizontal mode flag set

2) if one of the nextConnection or horizontal mode connections above is connected, the other one is not and hidden

3) if the previous connection of a block is connected to a connection which is in horizontal mode, then the block's next connection is not connected and hidden, only the block's horizontal mode connection is available.

4) horizontal mode connections are at the right end of the block

Step 1 is achieved at block creation time.
Step 2 and 3 are achieved by overriding connect and disconnect methods in rendered connection.
Step 4 is managed when laying out the connections in the block.

The connection highlighting and block rendering may be adapted but it is details.

NB, in my own situation I already have customised Blockly such that this is rather simple to implement.

Ezequiel

unread,
May 27, 2020, 3:22:40 PM5/27/20
to Blockly
Hello Dear,
I believe we are working with the same plan.
I got to made some change at blockly, now i'm having trouble with statement blocks,
if you have some tip to help, I appreciate
Thanks.
Reply all
Reply to author
Forward
0 new messages