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

machine.js

const drawingStateMachineDef = Machine({
		id: 'appDrawing',
		initial: 'inactive',
		states: {
		  inactive: {
		    on: {
		      START_DRAW: 'drawing',
		    }
		  },
		  drawing: {
		    on: {
		      CANCEL: 'cleanReset',
		      FINISH: {
		        target: 'showAnnotationCard',
		        actions: ['showAnnotationCard'],
		      },
		      ADD_POINT: {
		        actions: ['addPoint'],
		      },
		    }
		  },
		  showAnnotationCard: {
		    on: {
		      CLOSE: 'cleanReset',
		      SAVE: 'saving',
		    }
		  },
		  saving: {
		    invoke: {
		      id: 'saveDrawing',
		      src: (ctx, event) => fetch(`url/to/save/drawing`).then(r => r.json()),
		      onDone: {
		        target: 'showAnnotationCard',
		      },
		      onError: {
		        target: 'showAnnotationCard',
		      }
		    }
		  },
		  cleanReset: {
		    always: [
		      { 
		        target: 'inactive',
		        actions: ['removeDrawing', 'resetTool'],
		      }
		    ],
		  },
		}
});