google/blockly

Dancing blocks with Zelos in 10.4

Closed this issue · 5 comments

Check for duplicates

  • I have searched for similar issues before opening a new one.

Description

With the new connection preview feature, inserting big blocks in Zelos can be very disturbing/hard :(

Reproduction steps

Tested in local playground

Stack trace

No response

Screenshots

dancing.blocks.mov

Browsers

Chrome desktop

Darn, I tested this before releasing but I didn't test this with taller blocks :/ I think the simplest solution here is to make sure connection locations are static (the magenta dots in the following recording). Right now they're always positioned at the middle of the connection, which changes when the insertion marker is attached.

Screen recording 2024-03-04 2 02 26 PM

Hi, setting the connection locations on top would sure fix the issue, but it is quite a drastic change in UX (users would have to align the top of the dragged block to the top of the parent block connection).

Currently, when an insertion marker appears (and is bigger than the former connection), the parent block grows but its top position is fixed.
Maybe we could let the parent block grow, but shift it to the top, so that the insertion marker stays "middle vertically aligned" with the former connection, and thus the dragged block?

Currently, when an insertion marker appears (and is bigger than the former connection), the parent block grows but its top position is fixed. Maybe we could let the parent block grow, but shift it to the top, so that the insertion marker stays "middle vertically aligned" with the former connection, and thus the dragged block?

Just to make sure I'm understanding, you mean move the parent block so that the connection stays in the same relative position?

If that's the case, I'm not sure that makes sense e.g. if you're inserting into a large stack of blocks, it would have to move the whole stack, which might throw your different stacks out of alignment.

Yes that was my idea, but I agree it's a complex UX problem and nothing seems to be ideal :(

When you insert into a stack of blocks, they are already moving to the bottom:

blocks.moved.mov

Maybe blocks above the parent block could move to the top and blocks below move to the bottom? (so that the insertion marker middle stays aligned with the connection middle)

Put up #7899 which fixes this issue by reverting back to the previous behavior, which just highlights inputs without adding the insertion markers.

I think the ideal solution would be to have the block dragger (or the IDraggable in the future) track how far away the connection is after the connection preview is created. If it is farther away, make it so that you have to move farther away than that (+ some extra padding) before the connection unpreviews.

Once that is implemented, we can turn insertion markers back on for zelos inputs.