Layouting, resizing and a console

Console

I finally got everything working together. This means that you can now use print() and debug() in the script and it’ll output to the console ! It’ll tell you what was printed and at what pixel, e.g. [x:2|y:4] => here!.

I’ve attached a diagram of why some parts of this project are really painful to work with. Its largely due to the amount of wrappers needed, because of the memory and thread separation of the web worker/wasm. Reworking this was really not fun and just doing it better the 1. time would’ve saved me a lot of time.

The console won’t be in use all the time and not everyone will use it so I also wanted to limit the space it takes. I firstly reduced the standard space it gets down to 5% of the view height and then made it drag resizable. You can press and hold on the drag handle of the console and stretch it out over the output and editor. This way you can decide how much screen space you want to sacrifice. I used the pointer API so in theory this should work with all kinds of stuff from fingers to pens.

In the end the console was way more css intensive then I thought as it needs some and css tomfoolery in order to scroll without blowing up the DOM.

Performance increases

I learned about Abstract Syntax Trees and made the wasm precompile the script to an AST before rerunning it a bunch of times with different scopes. This was another substantial performance increase decreasing the per pixel time form 0.04ms down to 0.004ms. Wow was the wasm unoptimized

Error highlighting

I finally added error highlighting. The line with an error now gets highlighted in the editor. During adding this feature with the Monaco editor I also accidently bumped my bundled js to 500kb . This was due to it importing a bunch of syntax stuff for different languages. Thankfully changing one Monaco.something to monaco.something resolved this

QoL

• errors get cleared when rerunning script
• add resolution to script scope

UI

I noticed that you couldn’t resize the app to something smaller. You could however make it smaller and then reload. Meaning that it was able to come up with a good layout but something was greedy and holding on to its space. Width wise this was easy to fix by adding a dynamic sizing flag to the editor and some min-width: 0s to some elements, but height wise i couldn’t get it to work. Turns out even with dynamic sizing the editor is still not the biggest fan of being resized so I had to add a ResizeObserver and call the editors layout method to make it reconsider its size

Next up

I will now implement a better UI for smaller screens, but first I need to declutter my css and html to make it more maintainable .

Other additions/fixes