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)
  
  //initial: {
      //editorMode: 'timeline',
      //expanded: true,
      //dataMode: 'grid'
    //},
    
  const opMachine = Machine({
    id: 'opMachine',
    initial: 'start',
    context: {
      isValid: false
    },
    states: {
      start: {
        on: {
          CHECK_VALIDITY: {
            target: 'ready',
            actions: assign({
              isValid: true
            })
          }
        }
      },
      ready: {}
    }
  });
  
  const fetchMachine = Machine({
    id: 'worksheetMachine',
    type: 'parallel',
    context: {
      ops: [],
      editorMode: {
        mode: 'timeline',
        width: 260
      }
    },
    states: {
      editorMode: {
        initial: 'timeline',
        states: {
          timeline: {
            on: {
              SET_CODE: {
                target: 'code',
                actions: [
                  assign((context, event) => ({
                    editorMode: {
                      mode: 'code',
                      width: context.editorMode.width
                    }
                  })),
                  send('SET_GRID')
                ]
              },
            }
          },
          code: {
            on: {
              UPDATE_CODE_WIDTH: {
                actions: assign((context, event) => {
                  context.editorMode.width = event.value
                })
              },
              SET_TIMELINE: {
                target: 'timeline',
                actions: assign((context, event) => ({
                    editorMode: {
                      mode: 'timeline',
                      width: context.editorMode.width
                    }
                  }))
              }
            }
          }
        }
      },
      timelineMode: {
        initial: 'expanded',
        states: {
          expanded: {
            on: {
              SET_COLLAPSED: 'collapsed'
            }
          },
          collapsed: {
            on: {
              SET_EXPANDED: 'expanded'
            }
          }
        }
      },
      dataMode: {
        initial: 'grid',
        states: {
          grid: {},
          meta: {},
          viz: {}
        },
        on: {
          SET_GRID: { target: '.grid' },
          SET_META: { 
            target: '.meta',
            cond: 'isTimelineMode'
          },
          SET_VIZ: {
            target: '.viz',
            cond: 'isTimelineMode'
          }
        }
      },
      detailsPanel: {
        initial: 'closed',
        states: {
          closed: {
            on: {
              OPEN: 'opened'
            }
          },
          opened: {
            on: {
              CLOSE: 'closed'
            } 
          }
        }
      }
    },
    on: {
      'NEWOP.ADD': {
        actions: [
          assign({
            ops: (ctx, e) => {
              const newOp = {}
              console.log('new op created')
              return ctx.ops.concat({
                ...newOp,
                ref: spawn(opMachine.withContext(newOp))
              })
            }
          })
        ]
      }
    }
  }, {
    guards: {
      isTimelineMode: (context, event) => context.editorMode.mode === 'timeline'
    }
  });