Close flyout by x in top right corner

[Jonty Small]

Hi All,

Been experimenting with flyouts and backpacks a bit. One thing that I thought would be useful (especially for backpacks and wide blocks) would be a little x in the top right of the flyout that closes the flyout.

The benefits of this would be mostly looking at very wide blocks where the user may click the backpack but not want to bring out a new block. Due to the width of the block it may be difficult to select the outside of the flyout to close it and therefore a small button in a logical place that closes it would be super useful.

I saw that flyout buttons are a thing but I'm struggling to understand how they actually work and am thinking that may be one option?

Best,

Jonty

[Beka Westberg]

Hiya Jonty!

So toolboxes are very extensible since their recent refactor, but flyouts are still not extensible :/ You could use a flyout button for this, but there's no way to make it look like an "x", or be rendered in the proper corner, etc.

Honestly I'm not even sure that this is possible if you were to fork and hack Blockly :/

But I also love this idea, so if you want to file a feature request that'd be awesome!

Sorry I don't have a more helpful answer for you :/ If you have any other questions always feel free to ask!
--Beka

[fu6...@gmail.com]

Hi,

You can try to double click the flyout to close.

document.addEventListener('DOMContentLoaded', function() {

        //etc...

        var blocklyWorkspace = document.getElementsByClassName("blocklyFlyout");
        for (var f=0;f<blocklyWorkspace.length;f++) {
                blocklyWorkspace[f].addEventListener('dblclick', function(){
                        var toolbox = Blockly.getMainWorkspace().toolbox_;
                        toolbox.clearSelection();
                });
        }
});        

Try it
https://fustyles.github.io/webduino/SPduino_tool/index.html

[Amber Miller]

That code snipped proved super useful, I just wanted to recommend for anyone who may find this thread with a similar problem in the future simplifying the code slightly to 

var blocklyWorkspace = document.getElementsByClassName("blocklyFlyout");
for (var f=0;f<blocklyWorkspace.length;f++) {
blocklyWorkspace[f].addEventListener('dblclick', function(){

Blockly.hideChaff() 
});
}

This really helped as now it works for all flyouts, not just the toolbox. Super useful in case bins or backpacks start getting too big, you've now got a way back to blockly without having to reload.

Best wishes

-Amber

[ele obo]

https://fustyles.github.io/webduino/SPduino_tool/index.html

is this tool is free to use ?? (Open source)

On Friday, February 25, 2022 at 10:20:16 PM UTC+5:30 ele obo wrote:

could you please help me to make a Arduino programmable blockly editor.?

[ele obo]

Is this https://fustyles.github.io/webduino/SPduino_tool/index.html  free to edit ? Any copyright issues ?

[fu6...@gmail.com]

Hi mr.ri...,

https://github.com/fustyles/webduino/tree/master/SPduino_tool