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

machine.js

const scaleChartGeneratorMachine = Machine({
  id: 'scale-chart-generator',
  initial: 'default',
  context: {
    musicKey: undefined,
    scaleName: undefined,
    withKeySignature: false,
  },
  states: {
    default: {
      on: {
        SELECT_SCALE: {
          target: 'selectedScale',
          
        },
        TOGGLE_KEY_SIGNATURE: {
          target: 'default',
          
        },
      },
    },
    selectedScale: {
      on: {
        SELECT_SCALE: {
          target: 'selectedScale',
          
        },
        RESET: {
          target: 'default',
          
        },
        SELECT_MUSIC_KEY: {
          target: 'showScaleChart',
          
        },
        TOGGLE_KEY_SIGNATURE: {
          target: 'selectedScale',
          
        },
      },
    },
    showScaleChart: {
      on: {
        SELECT_SCALE: {
          target: 'selectedScale',
          
        },
        RESET: {
          target: 'default',
          
        },
        RESET_MUSIC_KEY: {
          target: 'selectedScale',
          
        },
        SELECT_MUSIC_KEY: {
          target: 'showScaleChart',
          
        },
        TOGGLE_KEY_SIGNATURE: {
          target: 'showScaleChart',
          
        },
      },
    },
  },
});