I am currently able to change the view of the app inventor scrollable SVG (where all the blocks are) by updating the blocklyBlockCanvas
and blocklyBubbleCanvas
elements with the following code:
document.getElementsByClassName("blocklyBlockCanvas")[0].setAttribute("transform", `translate(-${number1}, -${number2}) scale(1)`);
document.getElementsByClassName("blocklyBubbleCanvas")[0].setAttribute("transform", `translate(-${number1}, -${number2}) scale(1)`);
However, as soon as I click on the SVG, it jumps back to the previous view. 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.
So how to persist the changed view of the SVG?
The full userscript is here: https://pastebin.com/DXuScWee