Adding a feature to search for specific blocks with userscript: how can I "persist" the changed view/focus of the scrollable SVG?

[MagTun]

Describe the desired feature

Adding a feature to search for specific blocks. I am trying to do it via a usercript.

Give an example of how this feature would be used

Why doesn't the current App Inventor system address this use case?

No search function for blocks. The browser search function quickly becomes useless (same with the developer console search).

Why is this feature beneficial to App Inventor's educational mission? It would result in significant ease of use and time-saving.

How this feature could be implemented? I am trying to bring this feature via a userscript: I am able to change the view of the scrollable SVG (where all the blocks are) and to bring a specific block I want to modify into view by modifying blocklyBlockCanvas and blocklyBubbleCanvas elements . But then, as soon as I click, zoom or drag the main svg, the view is reset to where it was before so I can't actually modify the desired block.

This is how I modify the view:

document.getElementsByClassName("blocklyBlockCanvas")[0].setAttribute("transform", `translate(-${number1}, -${number2}) scale(1)`);
document.getElementsByClassName("blocklyBubbleCanvas")[0].setAttribute("transform", `translate(-${number1}, -${number2}) scale(1)`);

I think I need to update the x and y attributes of this pattern element as they change when I scroll the svg (XXXXXXXXXXXX replaces a long number that is changed on each page reload):

<pattern id="blocklyGridPatternXXXXXXXXXXXX" patternUnits="userSpaceOnUse" width="20" height="20" x="1356.7352240258992" y="-128.4999999999999">

But even if manually update the x and y attributes in the console, they are reset whenever I scroll the SVG.

How to solve this? The full userscript is here: https://pastebin.com/FC5wYcMb

---

This is an updated version of the script: https://github.com/MagTun/AppInventorSearchForBlocks/blob/main/userscript.js It's more or less working. It works better when the scale of blocklyBlockCanvas is 1. In that case the block that matches the search term is displayed in the top left corner. To solve the issue mentioned above, one should zoom in or out (either with the mouse scroll + ctrl or the +/-buttons), right after doing the search. If the scale isn't 1, the searched block may not be visible (sometimes the screen is even completely white), but zooming in or out, bring the parent block into the view and the added highlights are a good indicator of where one should search the block. This still doesn't solve this question, but at least it's kind of working.

[SusanRatiLane]

If you start typing with nothing selected in the blocks editor, you should see this search.

[MagTun]

Thanks for your answer. Sorry I wasn't precise enough. I am not looking for a way to easily add a new block but to search an existing block on the block editor. Typing when nothing is selected on the blocks editor doesn't search an existing block, it only helps find a block one wants to add. I have updated the script in my question, so it's now easier to see what I am trying to do. If you know a solution that would make the change the script makes on blocklyBubbleCanvas and blocklyBlockCanvas persist without having to zoom in/out that would be great!

[MagTun]

I am trying to find a solution for this problem: https://community.appinventor.mit.edu/t/search-in-the-blocks-for-variables-procedures/12641/15 (the extension given at the end is able to do what I am trying to do but the .js is protected, so I can see how it's done. I also want to improve the way the blocks are searched because the drop-downs aren't practical).

[ewpatton]

You should be able to use Blockly.mainWorkspace.centerOnBlock(blockId) to center on the block identified by blockId.

[MagTun]

Yes, that's what I am looking for! Thanks a lot!

However, I am not able to make it work because I didn't find a way to retrieve a block ID. I have looked into the attributes of the blocks, I found a gwt_uid and a kind of hash like #5101396805798656 but none of them works. I also didn't find a method to retrieve the ID of a block in the documentation from Google.

Do you have any idea how to do it?

I am retrieving the blocks with this: document.querySelector(".blocklyWorkspace").querySelectorAll(".blocklyText")