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

machine.js

const machine = Machine({
  id: 'labelEditing',
  initial: 'idle',
  context: {x:400,y:400},
  states: {
    idle: {
      on: {
        ADD_LAYER: {
          target: 'selection',
          actions: 'addLayer',
        },
        DRAG_START: {
          target: 'dragging',
          actions: 'dragStart',
        },
        EDIT_START: {
          target: 'editing',
          actions: 'writeSelection',
        },
        SELECT_LAYER: {
          target: 'selection',
          actions: 'writeSelection',
        },
      },
    },
    dragging: {
      on: {
        MOUSE_UP: {
          target: 'selection',
          actions: 'dragEnd',
        },
        MOUSE_MOVE: {
          target: 'dragging',
          actions: 'drag',
        },
      },
    },
    editing: {
      on: {
        UPDATE_TEXT: {target: 'selection', actions: 'updateText'},
      },
    },
    resizing: {
      on: {
        MOUSE_UP: {target: 'selection', actions: 'resizeEnd'},
        MOUSE_MOVE: {
          target: 'resizing',
          actions: 'resize',
        },
      },
    },
    selection: {
      on: {
        ADD_LAYER: {
          target: 'selection',
          actions: 'addLayer',
        },
        ARROW_KEY: {
          target: 'selection',
          actions: 'arrowKey',
        },
        CANCEL: {target: 'idle', actions: 'clearContext'},
        DRAG_START: {
          target: 'dragging',
          actions: 'dragStart',
        },
        EDIT_START: {
          target: 'editing',
          actions: 'editStart',
        },
        RESIZE_START: {target: 'resizing', actions: 'resizeStart'},
      },
    },
  },
});