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

machine.js

  const machine = Machine({
    id: 'shape',
    initial: 'idle',
    devTools: true,
    context: {
      mode: 'poly',
      points: [],
      shapes: [],
    },
    states: {
      idle: {
        on: {
          '': {
            target: 'done',
            cond: 'shapeComplete',
          },
          CLICK: {
            target: 'idle',
            actions: ['addPoint'],
          },
          DONE: {
            target: 'done',
            cond: 'polyComplete',
          },
        },
      },
      done: {
        type: 'final',
        on: {
          '': {
            actions: ['addShape'],
            target: 'idle',
          },
        },
      },
    },
    on: {
      RECT: {
        actions: assign({
          points: [],
          mode: 'rect',
        }),
      },
      POINT: {
        actions: assign({
          points: [],
          mode: 'point',
        }),
      },
      POLY: {
        actions: assign({
          points: [],
          mode: 'poly',
        }),
      },
    }
  },
  {
    actions: {
      addPoint: assign({
        points: ctx => ctx.points.concat([true]),
      }),
      addShape: assign({
        shapes: ctx => ctx.shapes.concat({
          type: ctx.mode,
          points: [...ctx.points],
        }),
        points: [],
      }),
    },
    guards: {
      shapeComplete(context, event) {
        const {points, mode} = context;
        switch (mode) {
          case 'point':
            return points.length === 1;
          case 'rect':
            return points.length === 2;
          default:
            return false;
        }
      },
      polyComplete(context) {
        const {points, mode} = context;
        return mode === 'poly' && points.length > 2;
      },
    },
  });