Need help for Collapse/Expand Block

[Naresh Chaudhari]

Hi All, When we "right-click" on any block context menu is displaying and there if we want to Minimize the block we will click on Collapse Block and wise versa. SO, I want to implement "Collapse Block" and "Expand Block" facilities on the Block where I have added + and - Button. So I want if I click on the + button Block should get the collapse and again if I click on - Button Block should expand. 

Please help me to share any idea/Example/code. 

Thanks in advance!

[Joseph Mohan]

Take a look at custom context menus: https://blocklycodelabs.dev/codelabs/context-menu-option/index.html#3

And: https://developers.google.com/blockly/guides/create-custom-blocks/define-blocks#context_menus

Blocks have a setCollapsed() method: https://developers.google.com/blockly/reference/js/Blockly.Block#setCollapsed

Joe

[Beka Westberg]

Joe is definitely right wrt to their recommendations about setCollapsed :D I just wanted to add that for the +/- button part you might want to check out the image field and its click handler. This is how the +/- mutator blocks handle them =)

This sounds like a cool project! If you get it working please share an update :D I'd love to know how you implement it.

Best of luck!

--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/fdcffdec-0213-4629-8112-5dd562e51f3bn%40googlegroups.com.

[Naresh Chaudhari]

Thanks, Joe and Beka for the Great recommendations replay. I went through the documentation. But I'm not clear about how to call and where to add the "setCollapsed()". I need some implementation examples/source code or steps to implementation flow for a better understanding.

My doubt is: 
1. Where(in which file) to add setOnClickHandler  event? and write following code?
   function() {
        this.getSourceBlock().setCollapsed(true);
    }

One more idea I have like... Instead of Adding image field or +/- buttons Do we have facilities like when we double click on the block, Block will get the collapse and again will double click it will get expand. So the double click on the block will be user-friendly to collapse and expand the block. Please share the recommendations/Course code/examples/steps to implement the same

[Beka Westberg]

Hello,

> Where(in which file) to add setOnClickHandler  event? and write following code?

I don't think that code sample from the docs is fully featured hehe. You'll probably also want to add support for uncollapsing the block (unless you want to put that on a separate image) :D But it's definitely on the right track!

As the docs say here you can assign the click handler using the image field constructor, or using the setOnClickHandler function. Both of these would go in your block's init function, or an extension if you're using JSON.

> Do we have facilities like when we double click on the block, Block will get the collapse and again will double click it will get expand.

Not as far as I know (at least not without forking Blockly) :/ Blockly doesn't provide any double click event in the UI events (only single click). But you could always submit a feature request for something like that :D 

> Please share the recommendations/Course code/examples/steps to implement the same

For general example code related to blocks, the best thing to check out is the blocks directory in the core repository. =)

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/a6b8d8ae-bc00-4173-9c74-8558a4e9764fn%40googlegroups.com.