Editor Displays SVG Colors

[96LawDawg]

Fixes #2454.

I've attached an image to show how this looks. Pretty cool.

To do:

• When clicking on another widget (or no widget), close the svg color list
• Add support for VTT icons (currentColor)

Maybe: Fix so that div does not have to be reinserted by a mutation observer. Not needed to make it work but might make the code cleaner.

---

PR-SERVER-BOT: You can play around with it here: https://test.virtualtabletop.io/PR-2459/pr-test (or any other room on that server)

[96LawDawg]

So I tried debugging this some more. ChatGPT had me set up a mutation observer. What is happening (for the new svg button) is that the div is being appended properly, but right after that, the whole div gets re-written and the new div is gone. That does not happen for the commandoptions div. I just don't understand why.

[96LawDawg]

This works now! Hooray. I'm sure there is a more professional way to code this, but it does work. But it looks awesome because you can see the colors and hex codes AND you can click on the button and get automatic svgReplaces insertion for that color.

A few observations: It filters out and will not show the options unless the widget has an svg image. The div is still doing something strange and keeps getting removed, so I added a mutation observer to reinsert it. Kind of a hack, but I spent more time on that than anything. The only thing not working the way I would like is that the colors do not close or reload if you select a different widget. So it is possible to select one widget, get the color choices, select a different widget (even one without an svg) and have the buttons insert the svgReplaces code.

[RaphaelAlvez]

this looks super cool

I wonder if fot the new UI we should reuse is wqith just the addition of a color picker to the right so we have the original and the new color:

[96LawDawg]

I wonder if fot the new UI we should reuse is wqith just the addition of a color picker to the right so we have the original and the new color:

For what it's worth, I tried to implement this in the existing editor. Not too hard to set everything up. The problem was keeping everything in sync. The browser color picker, the right-side button color, the color of the image in the room, and the JSON text. Any of those could change and syncing was a real pain. So I abandoned that.

I believe this is done and ready for review.