sverweij / state-machine-cat

write beautiful state charts :scream_cat:
https://state-machine-cat.js.org
MIT License
811 stars 45 forks source link

Multiple internal transitions are not rendered nicely #157

Open noricor opened 3 years ago

noricor commented 3 years ago

If a state has multiple internal transitions the rendered output is not very readable. It seems like all internal transitions are smashed together. Can they be separated somehow so that they are nicely readable?

Here an example:

Initial.initial,
On { 
   foo:events.GetState / Action.GetState, 
   bar;

 },
 Off.final;

Initial.initial -> On;
On -> Off.final : events.Exit / Action.Exit;
On -> On [type=internal]  : events.GetState / Action.GetState;
On -> On [type=internal]  : events.GetVersion / Action.GetVersion;
On -> On [type=internal]  : events.SetLogLevel / Action.SetLogLevel;
On -> On : events.Reset;

Alternatively internal transitions could also be displayed within a state (like entry, exit, do) as it is defined in the UML specification.

sverweij commented 3 years ago

Hi @noricor - I guess you mean that this...

image

...could render nicer? State-machine-cat runs into the limitations of the auto-layout engine in some occasions. I'm on the lookout for an other one.

That said if I interpret your last sentence correctly: would something like this work? Or does this miss something?

image
Initial.initial,
On: 
events.GetState / Action.GetState
events.GetVersion / Action.GetVersion
events.SetLogLevel / Action.SetLogLevel
 { 
   foo:events.GetState / Action.GetState, 
   bar;

 },
 Off.final;

Initial.initial -> On;
On -> Off.final : events.Exit / Action.Exit;
On -> On : events.Reset;
noricor commented 3 years ago

Hi,

yes, you identified the rendering issue correctly, especially for large state machines (20-30 states with lots of transitions and stuff) this becomes a readability issue.

Regarding the second part. Yes, this would work and it is also more in line with the UML 2.5 spec which introduces an "internal transition compartment" for states

Internal Transition compartment This compartment contains a list of internal Transitions, where each item has the following syntax: {trigger}* ['[' guard']'] [/behavior-expression] Where is the notation for Triggers (see sub clause 13.3.4), is a Boolean expression for a guard, and the optional is the specification of the effect Behavior to be executed if the Event occurrence matches the trigger and guard of the internal Transition. It is an expression written in some textual surface language, which may be either a vendor-specific or some standard language (see sub clause 16.1).

Cheers

github-actions[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.