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

machine.js

const stateNames = Object.freeze({
  idleing: 'idleing',
  drawn: 'drawn',
  fitZooming: 'fitZooming',
  drawingColumn: 'drawingColumn',
  drawingU0: 'drawingU0',
  drawingHoles: 'drawingHoles',
  influencingU0: 'influencingU0',
  drawingAncoplus: 'drawingAncoplus',
  drawingTemporaryAncoplus: 'drawingTemporaryAncoplus',
  drawingUa0: 'drawingUa0',
  influencingUa0: 'influencingUa0',
  interatingAncoplus: 'interatingAncoplus',
  influencingAncoplus: 'influencingAncoplus',
  computeUaSolution: 'computeUaSolution',
});


const transitionNames = Object.freeze({
  RESET: 'RESET',
  SHOW: 'SHOW',
  MODIFY_INPUT: 'MODIFY_INPUT',
  MODIFY_HOLE: 'MODIFY_HOLE',
  MODIFY_ANCOPLUS: 'MODIFY_ANCOPLUS',
  COMPUTE: 'COMPUTE',
  NEXT: 'NEXT',
});

const intent = Object.freeze({
  show: 'show',
  modify_input: 'modify',
  modify_hole: 'modify_hole',
  modify_ancoplus: 'modify_ancoplus',
  compute: 'compute',
});


const drawingStateMachine = Machine(
  {
    id: 'drawMachine',
    context: {
      /**
       * Define what is the intention of the drawing
       * @type string
       */
      intent: null,
      /**
       * Define on what na of the iterative ua0 drawing we are
       * @type number
       */
      na: null,
      /**
       * Define if the drawing is complete or not
       * @type boolean
       */
      partial: false,
    },
    initial: stateNames.idleing,

    states: {
      /**
       * This is the initial state. It defines when the machine wait for something happen.
       */
      [stateNames.idleing]: {
        on: {
          [transitionNames.SHOW]: {
            target: stateNames.drawingColumn,
            actions: assign(() => ({
              intent: intent.show,
            })),
          },
        },
      },
      [stateNames.drawn]: {
        on: {
          [transitionNames.MODIFY_INPUT]: {
            target: stateNames.drawingColumn,
            actions: assign(() => ({
              intent: intent.modify_input,
            })),
          },
          [transitionNames.MODIFY_HOLE]: {
            target: stateNames.drawingColumn,
            actions: assign(() => ({
              intent: intent.modify_hole,
            })),
          },
          [transitionNames.MODIFY_ANCOPLUS]: {
            target: stateNames.drawingTemporaryAncoplus,
            actions: assign(() => ({
              intent: intent.modify_ancoplus,
            })),
          },
          [transitionNames.COMPUTE]: {
            target: stateNames.drawingAncoplus,
            actions: assign(() => ({
              intent: intent.compute,
              na: 9,
            })),
          },
        },
      },
      [stateNames.fitZooming]: {
        on: {
          [transitionNames.NEXT]: {
            target: stateNames.drawn,
          },
        },
      },
      [stateNames.drawingColumn]: {
        on: {
          [transitionNames.NEXT]: {
            target: stateNames.drawingU0,
          },
        },
      },
      [stateNames.drawingU0]: {
        on: {
          [transitionNames.NEXT]: {
            target: stateNames.drawingHoles,
          },
        },
      },
      [stateNames.drawingHoles]: {
        on: {
          [transitionNames.NEXT]: {
            target: stateNames.influencingU0,
          },
        },
      },
      [stateNames.influencingU0]: {
        on: {
          [transitionNames.NEXT]: [
            {
              target: stateNames.drawingTemporaryAncoplus,
              cond: ({ intent: actualIntent }, { na } = { na: null }) => (
                (actualIntent === intent.modify_hole || actualIntent === intent.modify_ancoplus) && na != null
              ),
            },
            {
              target: stateNames.drawingAncoplus,
              cond: (_, { na } = { na: null }) => (na != null),
              actions: assign((_, { na }) => ({
                na,
              })),
            },
            {
              target: stateNames.fitZooming,
              cond: ({ intent: actualIntent }) => (
                actualIntent === intent.show || actualIntent === intent.compute || actualIntent === intent.modify_input
              ),
              actions: assign(() => ({
                partial: true,
              })),
            },
            {
              target: stateNames.drawn,
              actions: assign(() => ({
                partial: true,
              })),
            },
          ],
        },
      },
      [stateNames.drawingAncoplus]: {
        on: {
          [transitionNames.NEXT]: {
            target: stateNames.drawingUa0,
            cond: (_, { na } = { na: null }) => (na != null),
            actions: assign((_, { na }) => ({
              na,
            })),
          },
        },
      },
      [stateNames.drawingTemporaryAncoplus]: {
        on: {
          [transitionNames.NEXT]: [
            {
              target: stateNames.drawingUa0,
              cond: ({ intent: actualIntent }) => (
                actualIntent === intent.modify_ancoplus
              ),
            },
            {
              target: stateNames.influencingAncoplus,
            },
          ],
        },
      },
      [stateNames.drawingUa0]: {
        on: {
          [transitionNames.NEXT]: {
            target: stateNames.influencingUa0,
          },
        },
      },
      [stateNames.computeUaSolution]: {
        on: {
          [transitionNames.NEXT]:
            [
              {
                target: stateNames.drawingAncoplus,
                cond: (_, { na } = { na: null }) => (na != null && na !== -1),
                actions: assign((_, { na }) => ({
                  na,
                  intent: intent.show,
                })),
              },
              {
                target: stateNames.influencingAncoplus,
                cond: (_, { na } = { na: null }) => (na != null),
              },
            ],
        },
      },
      [stateNames.influencingUa0]: {
        on: {
          [transitionNames.NEXT]: [
            {
              target: stateNames.influencingAncoplus,
              cond: ({ intent: actualIntent }) => (actualIntent === intent.show || actualIntent === intent.modify_ancoplus),
              actions: assign(() => ({
                partial: false,
              })),
            },
            {
              target: stateNames.computeUaSolution,
              cond: ({ intent: actualIntent, na }) => (actualIntent === intent.compute && (na && na === 9)),
            },
            {
              target: stateNames.drawingUa0,
              cond: ({ intent: actualIntent }) => (actualIntent === intent.compute),
              actions: assign((context) => ({
                na: context.na + 1,
              })),
            },
          ],
        },
      },
      [stateNames.influencingAncoplus]: {
        on: {
          [transitionNames.NEXT]: [
            {
              target: stateNames.fitZooming,
              cond: ({ intent: actualIntent }) => (actualIntent === intent.show || actualIntent === intent.compute),
              actions: assign(() => ({
                partial: true,
              })),
            },
            {
              target: stateNames.drawn,
            },
          ],
        },
      },
    },

    on: {
      [transitionNames.RESET]: {
        target: stateNames.idleing,
        actions: assign(() => ({
          intent: null,
          na: null,
          partial: false,
        })),
      },
    },
  },
);