Trigger dropdowndiv opening on Block creation

[Santiago Hitta]

Hello everyone, can someone please enlighten me on how can I do to trigger the opening of the dropdowndiv of my custom block when the user creates a new block.

When the user selects a block and the block appears on the workspace I want it to appear with the dropdowndiv already visible so the user can start to configure the block without the need to click it first.

Thanks in advance!!

[Beka Westberg]

Hello, thanks for your question :D

Honestly I'm not sure if that's possible :/ I can think of two options for doing this, but I'm not sure if either of them is workable:

1) Trigger the dropdown div to open as soon as you receive a block create event.

     There are several problems with this option:

      - The dropdown div will not automatically follow the field when you move the block. So you will have to programmatically move it somehow.

      - Create events can be caused by lots of different things (including undo/redo) not just dragging from the toolbox.

2) Trigger the dropdown div to open when you receive the final move event after a block create event.

     There are also problems with this solution:

      - Detecting when a move happens after a create event will be tricky. There could be multiple block drag events in between. There could also be two move events if you have grid snapping enabled.

      - There is still the problem of create events being caused by different things.

But if you can figure out when you actually want to trigger the dropdown div to show, the function for doing so is called showEditor_ (if you're using the dropdown field). Note that this is protected, so technically it's only supposed to be called by subclasses :/ If this is an important feature for you you might want to file a feature request for adding a public API.

Sorry I don't have an exact solution for ya' but hopefully that gives you someplace to start!

Best of luck on your project!

--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/88688fef-0b31-4d06-8244-1278a730c756n%40googlegroups.com.

[Santiago Hitta]

Hello Beka!

Thanks a lot for the fast and complete answer!
I've been experimenting with the possibilities you mentioned and yes, it is tricky... If only I could have the uuid of the block when the MOVE event gets triggered that would be much easier. The thing is we don't have that and it is just too complicated or even impossible to accomplish what I want if we can't know which block triggered the MOVE event. I also need to cover both possibilities, one is when the user just clicks a block and the other is when the user drags it, and it's not easy to distinguish among those two scenarios because the BLOCK_CREATE gets triggered as soon as the user selects the block, when this happens I need to know if the block is being dragged or if it was just clicked.

I will try a little bit more, I think I have an idea that involves javascript "mousedown" event as well... If it works I'll be back to share.

Thanks!!
Santiago.

[Beka Westberg]

HI again Santiago,

Just wanted to let you know that move events do include the block ID (sorry, the docs are a bit confusing). I'm not sure if that solves the entire problem, but hopefully it helps =)

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/eee2d94b-63f4-42e8-899a-41fe4d56b401n%40googlegroups.com.

[Santiago Hitta]

Thanks a lot Beka!!

I could manage to do it :D

There are 2 ways to create a block:

1)Click on the block without dragging, this fires event BLOCK_CREATE.

2)Click and drag the block, then leave it somewhere on the workspace, this fires BLOCK_CREATE, instantly afterwards BLOCK_DRAG, then when you release the block BLOCK_MOVE.

Solution:

1)On BLOCK_CREATE, BLOCK_MOVE and BLOCK_DRAG events store the id of the block in a variable (we have 3 variables, one for each event).
2)On BLOCK_CREATE after storing the id you need to fire an async javascript function that waits 10 milliseconds and then checks the draggedBlockId, if it's 0 it means that we are on scenario 1 where the user just clicked the block, so we have to fire the showEditor method, if it's not 0 then it means that the user is dragging the block so we just wait until BLOCK_MOVE and when that happens we fire the showEditor method. In both cases after firing the method clean all 3 variables.

In my case I am using custom fields, and my fields redefine the showEditor method like in the demo for custom fields, so it's not protected. So I just get the block by id, then I get the Field by name and then fire showEditor_ method.

The potential problem with this solution could be if BLOCK_CREATE is fired in other scenarios as you mentioned, in my case I don't have undo/redo options so it is working fine for now. A solution for this potential problem for other users could be to manage an array of block ids that have been already created, if the id is already in the array you just ignore the event, otherwise you fire showEditor and then add the id to the array, this is just an idea, there might be better solutions...

Thanks again for the tips!
Santiago.

[Santiago Hitta]

I didn't explain myself very well in step 2) of the solution, here it goes again:

2)On BLOCK_CREATE after storing the id you need to fire an async javascript function that waits 10 milliseconds and then checks the draggedBlockId, if it's different to the createdBlockId it means that we are on scenario 1 where the user just clicked the block, so we have to fire the showEditor method, if it's equal to the createdBlockId then it means that the user is dragging the block so we just wait until BLOCK_MOVE and when that happens we fire the showEditor method (only if movedBlockId == draggedBlockId == createdBlockId != 0). In both cases after firing the method clean all 3 variables.