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 visualEditorMachine = Machine({
  id: 'visualEditor',
  context: {
    dtGraph: null,
    predecessorId: null,
  },
  initial: 'loading',
  states: {
    loading: {
      on: {
        LOAD: {
          target: 'editing',
          actions: assign({
            dtGraph: (_context, event) => event.payload,
          }),
        },
      },
    },
    editing: {
      type: 'parallel',
      states: {
        saveStatus: {
          initial: 'clean',
          states: {
            clean: {
              on: {
                EDIT_NODE: 'dirty',
                ADD_NODE: 'dirty',
              },
            },
            dirty: {
              on: {
                SAVE_SUCCESS: 'clean',
              },
            },
          },
        },
        ui: {
          initial: 'default',
          states: {
            default: {
              on: {
                EDIT_NODE: {
                  target: 'default',
                  actions: assign({
                    dtGraph: (context, event) => {
                      if (!context.dtGraph) return null;
                      return applyOperation(context.dtGraph, event.payload);
                    },
                  }),
                },
              },
            },
            addingNode: {
              on: {
                ADD_NODE: {
                  target: 'default',
                  actions: assign({
                    dtGraph: (context, event) => {
                      if (!context.dtGraph) return null;
                      return applyOperation(
                        context.dtGraph,
                        operations.addNode({
                          predecessorId: context.predecessorId,
                          nodeType: event.payload,
                        }),
                      );
                    },
                  }),
                },
              },
            },
            linkingNode: {},
            choosingValue: {},
          },
          on: {
            SELECT_ADD_NODE: {
              target: 'ui.addingNode',
              actions: assign({
                predecessorId: (_context, event) => event.payload,
              }),
            },
            SELECT_LINK_TO_EXISTING_NODE: 'ui.linkingNode',
            SELECT_NODE: {
              actions: ['selectNode'],
            },
          },
        },
      },
    },
  },
});