Add optional "class" attribute to nodes and links - improved styling and interactivity about state-machine-cat HOT 6 CLOSED

Hi @mwaddell - sounds like a good idea. I've added it to the smcat language and the output modules for dot (and hence svg) => see the linked PR (WIP). It still needs a bit of documentation and a round-trip (json => smcat), but the smcat => svg (and hence smcat => json => dot => svg) work. I might still tweak some of the auto generated class names to grow a prefix and change around little details, but ...

... you can try it out right now at either

• on line on sverweij.gitlab.io/state-machine-cat/
• on npm as a beta release ([email protected])

=> Let me know what you think - all feedback welcome

from state-machine-cat.

Surprisingly, I'm not able to even get it to yield invalid svg using that on https://sverweij.gitlab.io/state-machine-cat/ -- I tried a few different variations, but all of them show up as properly escaped in the DOM of the page.

Browsers are quite unforgiving for svg embedded in html, I've noticed. When confronted with the separate svg, though (either from the webpage or the cli), they'll start to eek out. In the next version the 'class' attribute is properly html escaped (the other attributes, like 'color' and 'label' already were) and both the smcat language and the json schema for the internal representation only allow ^[a-zA-Z0-9_\\.\\- ]*$ - which seems reasonable (and which is exactly what you proposed as well). If there's need for more it's easy to expand.

(published as [email protected] on npm and available on beta test site as well)

from state-machine-cat.

Wow - that's outstanding! It's working perfectly for both JSON and smcat inputs and supports multiple classes in a space-separated string as well. It also handles smcat input to JSON output correctly already.

You noted that the "round trip" (JSON->smcat) is not yet working and the documentation is not yet updated. The only other thing I noticed was that the SCXML and SCXML as JSON do not support the class attribute, but they also don't appear to support the color attribute, so that's probably a separate issue.

My use of smcat has been exclusively using the JSON or SMCAT formats for input and SVG as output, so for my purposes, this is already fully functional!

from state-machine-cat.

hi @mwaddell thanks! And thanks for validating so quickly, and happy to hear it's covering your use case.

• About class and color support for SCXML (and it's JSON representation): SCXML is a W3C standard. Adding class, color or other representational attributes to it likely involves going through an RFC process, so I'll leave it as is for now.
• Probably state-machine-cat will need to grow a bit of input sanitising for class attributes otherwise a slyly constructed input (a [class="\"><script>alert('yolo')"]; might at best yield an invalid svg and at worst an injection vulnerability - and I'd hate that to happen.
• Also TIL: \<div\>w00t\</div\>\' is a legal class name in css (reference 😬). State-machine-cat will probably choose the 99% good enough route of only allowing a sane subset.

from state-machine-cat.

hi @mwaddell thanks! And thanks for validating so quickly, and happy to hear it's covering your use case.

You're welcome - thank you for addressing the issue so quickly! Let me know if there's anything else I can do to help (e.g. testing, updating documentation, etc.).

• About class and color support for SCXML (and it's JSON representation): SCXML is a W3C standard. Adding class, color or other representational attributes to it likely involves going through an RFC process, so I'll leave it as is for now.

That makes perfect sense.

• Probably state-machine-cat will need to grow a bit of input sanitising for class attributes otherwise a slyly constructed input (a [class="\"><script>alert('yolo')"]; might at best yield an invalid svg and at worst an injection vulnerability - and I'd hate that to happen.

Surprisingly, I'm not able to even get it to yield invalid svg using that on https://sverweij.gitlab.io/state-machine-cat/ -- I tried a few different variations, but all of them show up as properly escaped in the DOM of the page.

Perhaps pegjs already handles that type of sanitizing? If not, then I would expect that the color attribute would have the same issue but I don't see it there either.

• Also TIL: \<div\>w00t\</div\>\' is a legal class name in css (reference grimacing). State-machine-cat will probably choose the 99% good enough route of only allowing a sane subset.

Yikes! That's ridiculous. I agree that supporting just alphanumeric, spaces, hyphens and underscores in class names would satisfy 99% of legitimate use cases.

from state-machine-cat.

(merged to develop and published as regular release 7.4.0 - as well as to state-machine-cat.js.org)

from state-machine-cat.