Nested states that transition to themselves look weird

Thanks for this great project and sorry for the strange title. When nested states reference themself the rendered outpout looks weird and it’s hard to see what is happening in the statechart:

Expected Behavior

I would expect that a transition from a nested state to itself looks the same as a non nested-state to itself.

Current Behavior

The transition of a nested state to itself is drawn inside of the nested state which is easy to miss when looking at the diagram.

Possible Solution

Not sure

Steps to Reproduce (for bugs)

This is the diagram I am drawing:

initial,
"media player off",

"media player on" {
  stopped, playing, paused;

  stopped => playing : play;
  playing => stopped : stop;
  playing => paused  : pause;
  paused  => playing : pause;
  paused  => stopped : stop;
};

initial            => "media player off";
"media player off" => stopped           : power;
"media player on"  => "media player off" : power;
"media player off" => "media player off";
"media player on" => "media player on";

Context

I’m trying to build a visualizer for an ember-addon https://github.com/LevelbossMike/ember-statecharts that I am working on and would like to use state-machine-cat as the project that creates the visual output.

Your Environment

I’m using the web-editor.

Thanks again for this great project! I’m using your diagramming tool nearly every day and it makes my dev-life much easier 🍻

[sverweij]

@LevelbossMike I haven’t released it yet - have to do some juggling in the dot reporter to get to the result. I’ll let you know in this thread when I have something testable ready.

[sverweij]

@LevelbossMike I’ve merged the PR, released to npm as 4.1.5 and to the main branch on state-machine-cat.js.org.

Thanks again for raising the issue and for the prompt feedback!