Suggestions for improvement

[chris-kruining]

I've been working on a visual editor on my own for a CMS I am making and some tips I learned from that:

• draw your overlay with a 2d canvas, performance difference goes through the roof
• use constructed stylesheets -when they get available- in order to prevent mixing of existing styling (I've ran into the problem that some components use inline style for state related changes, your tool also uses inline styling, meaning they share the same "space", constructed stylesheets prevent this via "encapsulation"). as a bonus it also makes all the changes easily scopable and exportable.

just a few lessons I learned from some toe-stubbing. feel free to do with this whatever you want 😊

[argyleink]

visbug already ships constructible stylesheets in it's web components! uses a polyfill for browsers that don't support it. agree it's been very nice to work with.

can you link to you're 2d canvas implementation? perf on visbug is very good, curious what you ran into that was slow and what your overlays look and interact like.

[chris-kruining]

visbug already ships constructible stylesheets in it's web components! uses a polyfill for browsers that don't support it. agree it's been very nice to work with.

ikr, so lovely, can't wait for full support in all browsers

can you link to you're 2d canvas implementation? perf on visbug is very good, curious what you ran into that was slow and what your overlays look and interact like.

This is gonna take me a little while, my implementation is closed source for my job, so I'd need to find a way to extract that specific bit. but in essence the canvas has pointer-events: none; and I have a load of pointer events set up which trigger the rendering of stuff for the canvas. I do have an unlisted yt vid demo-ing a WIP, but it may contain sensitive data, so I am willing to share it in a pm, but not in a public comment