Modified hexdoc renderer to have a light mode and read draw settings from CSS

[JohnDog3112]

Changes

• Made my hexdoc renderer read draw settings from CSS
• Added some cleanup code to delete previously generated images when switching renderers (This was already done when the page is closed/refreshed)
• Added overrides for the intersection points and segment renderer triangles when in light mode (made them black)

Things to Note

• The rendered images don't automatically update when the CSS is changed as there was no event for it and I didn't want to have the client constantly checking for changes.
• Since you need an html element with the CSS styles to get their values, the only thing used to check for changes is if you selected a different palette or renderer.
  • This means that to see changes from the CSS, you need to switch palettes/renderers

[object-Object]

For the auto-update thing, I have a couple of ideas:

• Regenerate the image if you reselect the type/palette that are already selected
• Generate the image each time the pattern drawer is opened, instead of caching it

[object-Object]

Also noticing some weird pixelation on the edges of the lines here - is there an antialiasing setting we could enable or something?

[object-Object]

Other than those two comments, I think it looks good, though I'm not really that familiar with frontend stuff like this.

[JohnDog3112]

Also noticing some weird pixelation on the edges of the lines here - is there an antialiasing setting we could enable or something?

So, it turns out, anti-aliasing is enabled for every pattern except gradient... I'm not quite sure how that happened but it's a pretty easy fix.

[JohnDog3112]

For the auto-update thing, I have a couple of ideas:

* Regenerate the image if you reselect the type/palette that are already selected

* Generate the image each time the pattern drawer is opened, instead of caching it

I could do either? Though, for both, I would probably add a function to check for changes in the css when reselecting or opening a drawer. I also thought of starting a timer when it detects a manual change in the css (after doing one of the above things)

[JohnDog3112]

Also noticing some weird pixelation on the edges of the lines here - is there an antialiasing setting we could enable or something?

So, it turns out, anti-aliasing is enabled for every pattern except gradient... I'm not quite sure how that happened but it's a pretty easy fix.

Fixed

[JohnDog3112]

I implemented two things for updating from css.

1. Made it so selecting same option refreshes it
2. Added a function (autoUpdateRenderer) that sets up a function to run every x ms and re-renders the images if it detects a change in the settings. It only checks the css of the first image it finds, so it won't detect changes in individual image css values, but I'm not sure why someone would do that rather than use a css class.