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 cardMachine = Machine({
    id: 'card',
    initial: 'hidden',
    states: {
      hidden: {
        on: {
          TOGGLE_CARD: {
            target: 'visible',
            actions: actions.log((context, event) => `Card is invisible, event: ${event.type}`, 'HIDDEN :: ')
          },
        },
      },
      visible: {
        entry: actions.log((context, event) => `Card is visible, event: ${event.type}`, 'VISIBLE :: '),
        on: {
          TOGGLE_CARD: 'hidden'
        }
      }
    }
  })
  
  const appMachine = Machine({
    id: 'app',
    initial: 'init',
    context: {
      card: null,
    },
    states: {
      init: {
        after: {
          4000: 'running'
        }
      },
      running: {
        type: 'parallel',
        entry: assign({
          card: () => spawn(cardMachine, 'card')
        }),
        states: {
          screen: {
            initial: 'normal',
            entry: send('TOGGLE_CARD', { to: 'card' }),
            states: {
              normal: {
                on: {
                  SCREEN_CHANGE: 'fullscreen',
                }
              },
              fullscreen: {
                on: {
                  SCREEN_CHANGE: 'normal',
                }
              }
            }
          },
          viewer: {
            initial: 'closed',
            states: {
              closed: {
                on: {
                  TOGGLE_VIEWER: 'open',
                }
              },
              open: {
                on: {
                  TOGGLE_VIEWER: 'closed'
                }
              }
            }
          },
          sidebar: {
            initial: 'closed',
            states: {
              closed: {
                on: {
                  TOGGLE_SIDEBAR: 'open',
                }
              },
              open: {
                on: {
                  TOGGLE_SIDEBAR: 'closed'
                }
              }
            }
          },
          mode: {
            initial: 'browsing',
            states: {
              browsing: {
                on: {
                  MODE_ANNOTATE: 'annotating'
                },
              },
              annotating: {
                on: {
                  MODE_BROWSE: 'browsing'
                }
              }
            }
          },
          background: {
            initial: 'aerial',
            states: {
              aerial: {
                on: {
                  BG_LABELS: 'labels',
                  BG_ROADS: 'roads',
                }
              },
              labels: {
                on: {
                  BG_AERIAL: 'aerial',
                  BG_ROADS: 'roads',
                }
              },
              roads: {
                on: {
                  BG_AERIAL: 'aerial',
                  BG_LABELS: 'labels',
                }
              }
            }
          }
        }
      }
    }
  });