StoneCypher / fsl

Finite State Language specification
9 stars 1 forks source link

Edit directly on diagram #1240

Open nbao opened 1 year ago

nbao commented 1 year ago

Hello I would like to know if there is an option to edit the state, transition state, directly on the diagram?

StoneCypher commented 1 year ago

I'm not sure what you mean by "directly on the diagram"

If you're asking whether the graphic editor has controls to manipulate one example state machine, that's something I need to do but haven't done yet

nbao commented 1 year ago

I mean comme state machine on gojs https://gojs.net/latest/samples/stateChart.html

StoneCypher commented 1 year ago

I'm sorry; I'm still not entirely clear on what you're asking. It seems like you might be asking about putting labels on edges.

We have two things here: labels and actions. I think you probably actually want an action. Labels are just text; actions are things you can .do().

The way I would write that, in fsl:

(yours is flow: right;, but I think it's easier to read downwards)

flow: down;

Start 
  'Visit online store' => Shopping 
  'Browse'             => "Browse Items"
  'Click item'         => "View Item"
  'Add to cart'        => "View Cart"
  'Proceed'            => Checkout
  'Purchase made'      => End;

Shopping
  'Use search bar' => "Search Items"
  'Click item'     => "View Item";

"Browse Items" 
  'Use search bar' => "Search Items";

"Search Items"
  'Another search' -> "Search Items";

"View Item"
  'Not interested' ~> Shopping;

"View Cart"
  'More shopping' ~> Shopping;

"View Cart"
  'Update needed' ~> "Update Cart" 'Update Made' ~> "View Cart";
  arrange ["View Cart" "Update Cart"];

"Checkout" 
  'Update needed' ~> "Update Cart";

state Start : { background-color: darkgreen; text-color: white; shape: doublecircle; };
state End   : { background-color: darkred;   text-color: white; shape: doublecircle; };

Click this to get it in the editor.

image

Can you get those as just text? Yes, but I use that so rarely that I don't actually remember how 😂

The difference is, say you write this in code, now you can actually invoke those edges by title.

const machine = sm`... that stuff ...`;  // (It'll start in `Start` because that's the first one we named)

machine.do('Browse');  // it's an "action", so now it knows it went to "Browse Items"

In a machine like this, it's not a huge difference from just invoking the end states by name (which you can of course also do.)

But if you consider a traffic light, where each color has a 'Next' to the subsequent color, now the outside doesn't need to know the current color to proceed correctly.

Anyway, if I answered the wrong thing, sorry, please help me understand the real question