How can I customize the elements in flyout

[CN Laster]

Hello everyone!😉
I am learning Blockly and now I need to implement a search function. Fortunately, I saw a case in the
demo https://google.github.io/blockly-samples/plugins/toolbox-search/test/index.html But I don't want the input box to
be in the toolbox. I want it to be placed in the flyout. What should I do?

I have researched the implementation of a website that uses foreignObject, but I don't know how it was implemented😭

[Christopher Allen]

Hello,

I am learning Blockly and now I need to implement a search function. Fortunately, I saw a case in the
demo https://google.github.io/blockly-samples/plugins/toolbox-search/test/index.html But I don't want the input box to
be in the toolbox. I want it to be placed in the flyout. What should I do?

The short answer to "how do I put something on the workspace" is that you will need to create a class that implements the IPositionable interface.  A great example would be the WorkspaceSearch class from the workspace search plugin (perhaps this plugin already does what you want?).

 

I have researched the implementation of a website that uses foreignObject, but I don't know how it was implemented😭

The SVG foreignObject element is great when you want to insert a bit of HTML into an SVG in a way that the HTML will be treated as if it were part of the SVG (e.g. so that it moves around when its parent SVG object is moved, like the edit box of a comment bubble or workspace comment).  If you're just placing a static element on top of the workspace, you can insert ordinary (HTML not SVG) DOM nodes into the injection <div> (taking care to ensure they will be rendered in the correct z-order)—that's what the workspace search plugin does.

Best wishes,

Christopher