For an app like Figma, for example, how do engineers deal with the various states a user can be in?
A user can select an element. This element is now surrounded by a thin blue line to indicate it was selected. The user can then hover over another element. The thin blue line on the original element remains but the element that currently has the mouse's focus is highlighted in purple. On right-click, a context menu will show different options depending on what the user is currently hovering over.
Of course you can use state machines to model these sort of interactions but that also begs the question of when do certain actions occur:
- If I click an element, does it notify a global state machine of this click (
GlobalSM.send('click', { type: 'UI-Rect', id: 'xxx' })
) and then that state machine handles notifying other state machines (in this example, notifying theSelected
state machine andContextMenu
state machine), or do components get access to the state machines themselves? - Where should the data layer come into play? Should the state machines be the only ones with access to any mutations (
create
,update
, ordelete
)?
I'm not even sure if I'm asking the right questions honestly. I've tried creating a few interaction-heavy apps and keep coming to a sticking point where I am unsure how to deal with the complexity of state. Extending existing features takes a very long time due to poor architecture choices.