Accessing transitions in model object


Great job on Sketch Systems, I’m really enjoying sketching!

While prototyping a simple sketch to model a video installation with some physical interaction, I found myself looking for a way to access an active state’s transitions, in order to render their names as part of a button.

As you can see in the sketch, I’m currently hardcoding the transition names "put down headphone" and "pick up headphone" in the render() function and think it would be nice to pull them out of the model.active_states[0] object.

Could you imagine making this data accessible as part of the model object?


Yeah, I’m open to exposing this.
Do you have any preference on the data structures?

One option would be to give states a transition property associated with a set of transition objects, which themselves would have keys like event_name, from / to (references to state objects), comment, etc.

Alternatively, since event names should be disjoint on a given state, the transitions could be exposed as a map where the keys are event names and values are the transition objects.

I think it’s worth reifying the transitions as objects (so we can associate extra keys like comments and such) rather than just having a map of event names to other states (which is how XState does it).



thanks for the reply!

I agree that it would be nice to expose transitions as objects with a set of all their relevant keys (which may grow in the future I presume).

I just noticed that in the current model states are represented in both of the two ways you describe:

  1. As an array of objects associated to children on a given state


  1. As a map with state names as keys and transition object as values associated to model.states


My preference for transitions would be as an array of objects (option 1) as it would be more conducive to reading their names from the data by looping over the transition objects. It feels like the map (option 2) would assume ‘prior knowledge’ of the event names, which is precisely what I’d like to work around.

Does that make sense?


In JS one can loop over a map using the forEach method or the for…in syntax, so I don’t think looping alone should be the deciding reason.

Given that isn’t going to support transition guards, arguably the map better matches the underlying semantics since the map data structure implies that there is only one value per key.

Now that I’m thinking about it, I wish I’d encoded the state children as a map.
But since that ship has sailed, I think it’s probably better for consistency to have the transitions in an array too. = )

I’ll look into implementing this over the next few days.


@phivk I pushed up a change so that transitions are available in the model object:


It works pretty much as discussed above.
Let me know if that works for your needs or if you have any suggestions about how it could be improved.

Thanks again for writing and suggesting it!


@kevin awesome!
I was travelling for a while, hence the radio silence.

I managed to put it to use in this sketch:

I like that this way I can have more abstract render functions, making them more reusable for other sketches…