Add SVG image to toolbox flyout

[Merlin04]

Hello,

In my application I want to be able to include an SVG image (and ideally a link to a website) above the blocks in a toolbox flyout to provide a bit of documentation about what the blocks do, something like this:


It would be even better if I could collapse the SVG image to a single line of text by clicking on it:

I know that labels and buttons exist but I don't think they are flexible enough for this.

Any thoughts on how to implement this?

[Merlin04]

I was able to modify some of the Blockly code to allow SVG objects in a toolbox: https://gist.github.com/Merlin04/3281c9fb7fe9a7c8d1125725e5ea535e
Now I need to work on links and collapsing.

[Abby Schmiedt]

Hello!

So it looks like there are two main parts you are overriding. 

1. The different methods in flyout. I think you are on the correct track here. However, we generally recommend that you create a CustomFlyout that extends Blockly.Flyout and then override the necessary functions there. For example, in the continuous toolbox plugin we create a ContinuousFlyout class and then pass that into the inject options.

2. The Blockly.utils.toolbox.xmlToJsonArray_ override. This is a private function and I would rather it was not necessary to override this. Would it be possible to do something like: 

Add something like this to your toolbox definition: <customElement yourXml='<yourElement></yourElement>'></customElement>

Which would create an object that looked like: { kind: 'CUSTOMELEMENT', yourXml: '<yourXml></YourXml>'}.

You would then need to convert yourElement using Blockly.Xml.textToDom.

It is a bit roundabout, but if it is possible might be the best option currently without overriding a private method. I have added an issue on github that outlines an alternative API that might make this easier. Feel free to comment on the issue if you don't think it would fix your problem, or if you have any additional context you want to add.

Hope this helps and sorry for the delay in getting back to you. Definitely reply if you have any other questions!

Cheers,

Abby