Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const PopoverMachine = Machine({
    key: 'popover',
    initial: 'hidden',
    context: { token: null },
    states: {
        hidden: {
            on: {
                CLICK_TOKEN: {
                    target: 'showing',
                    actions: assign({
                        token: function (_context, event) { return event.token; },
                    }),
                },
                MOUSEENTER_ANNOTATION: {
                    target: 'showing',
                    actions: assign({
                        token: function (_context, event) { return event.token; },
                    }),
                },
            }
        },
        showing: {
            initial: 'active',
            states: {
                active: {
                    on: {
                        // update token
                        MOUSEENTER_ANNOTATION: {
                            actions: assign({
                                token: function (_context, event) { return event.token; },
                            }),
                        },
                        CLICK_TOKEN: {
                            actions: assign({
                                token: function (_context, event) { return event.token; },
                            }),
                        },
                        // events that begin the timeout to fade
                        CLICK_NON_TOKEN: 'waiting',
                        MOUSEENTER_BOX_OUTER: 'waiting',
                        MOUSELEAVE_POPOVER: 'waiting',
                        // events that immediately fade
                        KEYPRESS: 'fading',
                        ANALYSIS: 'fading',
                        CLOSE_BUTTON: 'fading',
                    }
                },
                waiting: {
                    after: {
                        1000: 'fading',
                    },
                    on: {
                        // events that cancel the timeout
                        MOUSEENTER_POPOVER: 'active',
                        MOUSEENTER_BOX_INNER: 'active',
                        MOUSEENTER_ANNOTATION: {
                            target: 'active',
                            actions: assign({
                                token: function (_context, event) { return event.token; },
                            }),
                        },
                        CLICK_TOKEN: {
                            target: 'active',
                            actions: assign({
                                token: function (_context, event) { return event.token; },
                            }),
                        },
                        // events that immediately fade
                        KEYPRESS: 'fading',
                        ANALYSIS: 'fading',
                        CLOSE_BUTTON: 'fading',
                    },
                },
                fading: {
                    after: {
                        300: {
                            target: 'finished',
                            actions: assign({
                                token: function () { return null; },
                            }),
                        },
                    },
                    on: {
                        // events that cancel the timeout
                        MOUSEENTER_POPOVER: 'active',
                        MOUSEENTER_BOX_INNER: 'active',
                        MOUSEENTER_ANNOTATION: {
                            target: 'active',
                            actions: assign({
                                token: function (_context, event) { return event.token; },
                            }),
                        },
                        CLICK_TOKEN: {
                            target: 'active',
                            actions: assign({
                                token: function (_context, event) { return event.token; },
                            }),
                        },
                    },
                },
                finished: {
                    type: 'final'
                }
            },
            onDone: { target: 'hidden' }
        },
    },
});